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.
54 lines
1.7 KiB
54 lines
1.7 KiB
import { Ionicons } from '@expo/vector-icons';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
|
|
interface Props {
|
|
label: string;
|
|
selected?: boolean;
|
|
onPress?: () => void;
|
|
desc?: string;
|
|
}
|
|
|
|
/** 单选行：选中态填充高亮 + 勾选标记 */
|
|
export function RadioRow({ label, selected = false, onPress, desc }: Props) {
|
|
return (
|
|
<Pressable style={[styles.row, selected && styles.rowSelected]} onPress={onPress}>
|
|
<View style={styles.textCol}>
|
|
<Text style={[styles.label, selected && styles.labelSelected]}>{label}</Text>
|
|
{desc ? <Text style={styles.desc}>{desc}</Text> : null}
|
|
</View>
|
|
<View style={[styles.dot, selected && styles.dotSelected]}>
|
|
{selected ? <Ionicons name="checkmark" size={14} color={colors.textInverse} /> : null}
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 8,
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.white,
|
|
},
|
|
rowSelected: { borderColor: colors.primary, backgroundColor: colors.primaryLight },
|
|
textCol: { flex: 1, paddingRight: 12 },
|
|
label: { fontSize: 15, fontWeight: '600', color: colors.textPrimary },
|
|
labelSelected: { color: colors.primaryText },
|
|
desc: { fontSize: 12, color: colors.textHint, marginTop: 4 },
|
|
dot: {
|
|
width: 22,
|
|
height: 22,
|
|
borderRadius: 11,
|
|
borderWidth: 1.5,
|
|
borderColor: colors.borderStrong,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
dotSelected: { borderColor: colors.primary, backgroundColor: colors.primary },
|
|
});
|
|
|