64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './checkboxWithLabel.styles';
|
|
import { CheckboxWithLabelProps } from './checkboxWithLabel.props';
|
|
|
|
export const CheckboxWithLabel: React.FC<CheckboxWithLabelProps> = ({
|
|
label,
|
|
options,
|
|
selectedValues,
|
|
onValueChange,
|
|
singleSelect = false,
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const handlePress = (id: string) => {
|
|
if (singleSelect) {
|
|
// Single select mode - only one can be selected
|
|
onValueChange([id]);
|
|
} else {
|
|
// Multiple select mode - can check all
|
|
if (selectedValues.includes(id)) {
|
|
// Remove from selection
|
|
onValueChange(selectedValues.filter(val => val !== id));
|
|
} else {
|
|
// Add to selection
|
|
onValueChange([...selectedValues, id]);
|
|
}
|
|
}
|
|
};
|
|
|
|
const isSelected = (id: string) => selectedValues.includes(id);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{label && <Text style={styles.label}>{label}</Text>}
|
|
<View style={styles.checkboxRow}>
|
|
{options.map((option) => (
|
|
<TouchableOpacity
|
|
key={option.id}
|
|
style={styles.checkboxOption}
|
|
onPress={() => handlePress(option.id)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View
|
|
style={[
|
|
styles.checkbox,
|
|
isSelected(option.id) && styles.checkboxChecked,
|
|
]}
|
|
>
|
|
{isSelected(option.id) && (
|
|
<Icon name="checkmark" size={16} color="#FFFFFF" />
|
|
)}
|
|
</View>
|
|
<Text style={styles.checkboxLabel}>{option.label}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|