1import React from 'react'; 2import {StyleProp, StyleSheet, View, ViewProps} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import useColors from '@/hooks/useColors'; 5import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 6import {TouchableOpacity} from 'react-native-gesture-handler'; 7 8interface ICheckboxProps { 9 checked?: boolean; 10 onPress?: () => void; 11 style?: StyleProp<ViewProps>; 12} 13 14const slop = rpx(24); 15 16export default function Checkbox(props: ICheckboxProps) { 17 const {checked, onPress, style} = props; 18 const colors = useColors(); 19 20 const innerNode = ( 21 <View 22 style={[ 23 styles.container, 24 checked 25 ? { 26 backgroundColor: colors.primary, 27 borderColor: colors.primary, 28 } 29 : { 30 borderColor: colors.text, 31 }, 32 style, 33 ]}> 34 {checked ? ( 35 <Icon name="check" color={colors.appBarText} size={rpx(34)} /> 36 ) : null} 37 </View> 38 ); 39 40 return onPress ? ( 41 <TouchableOpacity 42 hitSlop={{ 43 left: slop, 44 right: slop, 45 top: slop, 46 bottom: slop, 47 }} 48 onPress={onPress}> 49 {innerNode} 50 </TouchableOpacity> 51 ) : ( 52 innerNode 53 ); 54} 55 56const styles = StyleSheet.create({ 57 container: { 58 width: rpx(36), 59 height: rpx(36), 60 borderRadius: rpx(2), 61 borderWidth: rpx(1), 62 alignItems: 'center', 63 justifyContent: 'center', 64 }, 65}); 66