taro/src/components/basic/CheckBox.tsx

import { CheckBoxType } from "@/utils/types";
import { View, Image } from "@tarojs/components";
import './CheckBox.scss'


export default function Component(props: {
    type: CheckBoxType,
    color?: string,
    width?: number,
    borderWidth?: number,
    opacity?: number,
    onClick?: Function
}) {
    var outerWidth = props.width ? props.width : 16
    var iconBorderWidth = props.borderWidth ? props.borderWidth : 1
    var innerWidth = outerWidth * 3 / 4
    var alpha = props.opacity ? props.opacity : 1

    var bgColor = 'transparent'
    var borderColor = '#fff'
    if (props.type != CheckBoxType.empty) {
        if (!props.color) {
            bgColor = 'rgba(255,255,255,0.4)'
            borderColor = '#fff'
        }
        else {
            bgColor = props.color + '66'
            borderColor = props.color
        }
    }


    return <View className="checkbox" style={{
        opacity: alpha,
        borderWidth: iconBorderWidth,
        width: outerWidth,
        height: outerWidth,
        borderRadius: outerWidth / 2.0,
        borderStyle: 'solid',
        borderColor: borderColor,
        backgroundColor: bgColor
    }}>
        {
            props.type == CheckBoxType.cross &&
            <Image src={require('@assets/images/x.png')} style={{ width: innerWidth, height: innerWidth }} />
        }
        {
            props.type == CheckBoxType.check &&
            <Image src={require('@assets/images/check.png')} style={{ width: innerWidth, height: innerWidth }} />
        }
        {
            props.type == CheckBoxType.arrow &&
            <Image src={require('@assets/images/arrow2.png')} style={{ width: innerWidth, height: innerWidth }} />
        }
    </View>
}