119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { FormField, Switch } from '@/components/form';
|
|
import { Screen } from '@/components/ui/Screen';
|
|
import { colors } from '@/theme/colors';
|
|
import { spacing } from '@/theme/spacing';
|
|
import { typography } from '@/theme/typography';
|
|
|
|
export default function SwitchDemoScreen() {
|
|
const [pushEnabled, setPushEnabled] = useState(true);
|
|
const [weeklyDigestEnabled, setWeeklyDigestEnabled] = useState(false);
|
|
|
|
return (
|
|
<Screen contentContainerStyle={styles.content}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.kicker}>DESIGN SYSTEM · SWITCH</Text>
|
|
<Text style={styles.title}>Demos du composant Switch</Text>
|
|
</View>
|
|
|
|
<FormField
|
|
label="Notifications push"
|
|
helper="Switch custom basé sur Expo/React Native"
|
|
>
|
|
<View style={styles.switchRow}>
|
|
<View style={styles.switchLabelWrap}>
|
|
<Text style={styles.switchLabel}>Activer les alertes de nouveaux événements</Text>
|
|
<Text style={styles.switchHint}>
|
|
{pushEnabled ? 'Activé' : 'Désactivé'}
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
accessibilityLabel="Activer les notifications push"
|
|
value={pushEnabled}
|
|
onValueChange={setPushEnabled}
|
|
/>
|
|
</View>
|
|
</FormField>
|
|
|
|
<FormField
|
|
label="Digest hebdo"
|
|
helper="Exemple de taille large"
|
|
>
|
|
<View style={styles.switchRow}>
|
|
<View style={styles.switchLabelWrap}>
|
|
<Text style={styles.switchLabel}>Recevoir un recap chaque lundi</Text>
|
|
<Text style={styles.switchHint}>
|
|
{weeklyDigestEnabled ? 'Activé' : 'Désactivé'}
|
|
</Text>
|
|
</View>
|
|
<Switch
|
|
accessibilityLabel="Activer le digest hebdomadaire"
|
|
value={weeklyDigestEnabled}
|
|
onValueChange={setWeeklyDigestEnabled}
|
|
size="lg"
|
|
/>
|
|
</View>
|
|
</FormField>
|
|
|
|
<FormField label="Etat desactive" helper="Le switch est non interactif">
|
|
<View style={styles.switchRow}>
|
|
<View style={styles.switchLabelWrap}>
|
|
<Text style={styles.switchLabel}>Mode maintenance</Text>
|
|
<Text style={styles.switchHint}>Indisponible</Text>
|
|
</View>
|
|
<Switch
|
|
accessibilityLabel="Switch desactive"
|
|
value
|
|
disabled
|
|
/>
|
|
</View>
|
|
</FormField>
|
|
</Screen>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
content: {
|
|
gap: spacing[16],
|
|
paddingTop: spacing[24],
|
|
},
|
|
header: {
|
|
gap: spacing[8],
|
|
marginBottom: spacing[8],
|
|
},
|
|
kicker: {
|
|
...typography.sectionLabel,
|
|
color: colors.textSecondary,
|
|
},
|
|
title: {
|
|
...typography.body,
|
|
color: colors.textPrimary,
|
|
},
|
|
switchRow: {
|
|
minHeight: 56,
|
|
borderWidth: 1,
|
|
borderColor: colors.inputBorder,
|
|
borderRadius: 14,
|
|
backgroundColor: colors.inputBackground,
|
|
paddingHorizontal: 14,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: spacing[12],
|
|
},
|
|
switchLabelWrap: {
|
|
flex: 1,
|
|
gap: 2,
|
|
},
|
|
switchLabel: {
|
|
...typography.body,
|
|
color: colors.textPrimary,
|
|
},
|
|
switchHint: {
|
|
...typography.caption,
|
|
color: colors.textSecondary,
|
|
},
|
|
});
|