You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
37 lines
1.1 KiB
import type { ReactNode } from 'react';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { Pressable, StyleSheet, View } from 'react-native';
|
|
import { colors, spacing } from '../../../src/theme';
|
|
|
|
interface Props {
|
|
checked: boolean;
|
|
onToggle: () => void;
|
|
text: ReactNode;
|
|
}
|
|
|
|
/** 协议勾选框：默认勾选 / 点击切换 */
|
|
export function AgreementCheckbox({ checked, onToggle, text }: Props) {
|
|
return (
|
|
<View style={styles.row}>
|
|
<Pressable style={[styles.box, checked && styles.boxChecked]} onPress={onToggle} hitSlop={6}>
|
|
{checked ? <Ionicons name="checkmark" size={14} color={colors.textInverse} /> : null}
|
|
</Pressable>
|
|
<View style={styles.textWrap}>{text}</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
|
|
box: {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
borderWidth: 1.5,
|
|
borderColor: colors.borderStrong,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
boxChecked: { backgroundColor: colors.primary, borderColor: colors.primary },
|
|
textWrap: { flex: 1, flexShrink: 1 },
|
|
});
|
|
|