@pi-spi/app 1.5.0 → 1.6.0

package/src/shared/widgets/selection.tsx

@@ -0,0 +1,98 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Themer, useTheme } from '../../core/theme';
+import { withAlpha } from '../utils/color';
+
+/**
+ * Feuille de sélection : poignée, [titre], [entete] facultatif, puis le
+ * [contenu] (qui défile s'il est trop long : utiliser un ScrollView).
+ * À ouvrir avec showModalBottomSheet.
+ */
+export function SbSelectionSheet({
+  titre,
+  titreSize,
+  entete,
+  contenu,
+}: {
+  titre?: string;
+  titreSize?: number;
+  entete?: ReactNode;
+  contenu: ReactNode;
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  return (
+    <View
+      style={[
+        styles.sheet,
+        { maxHeight: height * 0.75, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
+      ]}
+    >
+      {/* Poignée */}
+      <View style={[styles.poignee, { backgroundColor: withAlpha(Themer.neural03Color, 0.4) }]} />
+      {titre != null && (
+        <Text style={[theme.textTheme.headlineLarge, styles.titre, titreSize != null ? { fontSize: titreSize } : null]}>{titre}</Text>
+      )}
+      {entete != null && <View style={styles.entete}>{entete}</View>}
+      <View style={styles.gap8} />
+      <View style={styles.contenu}>{contenu}</View>
+    </View>
+  );
+}
+
+/** Ligne d'une feuille de sélection : [pastille], [texte], [detail] facultatif et coche si elle est [choisie]. */
+export function SbSelectionLigne({
+  pastille,
+  texte,
+  detail,
+  choisie,
+  onPress,
+}: {
+  pastille: ReactNode;
+  texte: string;
+  detail?: string;
+  choisie: boolean;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: choisie }}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.ligne,
+        { backgroundColor: choisie ? withAlpha(primaire, 0.08) : pressed ? theme.colorScheme.secondary : 'transparent' },
+      ]}
+    >
+      {pastille}
+      <View style={styles.textes}>
+        <Text numberOfLines={1} style={[theme.textTheme.displayLarge, { fontWeight: choisie ? '700' : '500' }]}>
+          {texte}
+        </Text>
+        {detail != null && detail.length > 0 && (
+          <Text numberOfLines={1} style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+            {detail}
+          </Text>
+        )}
+      </View>
+      {choisie && <MaterialIcons name="check-circle" size={22} color={primaire} />}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { width: '100%', borderTopLeftRadius: 20, borderTopRightRadius: 20 },
+  poignee: { alignSelf: 'center', marginTop: 10, marginBottom: 14, width: 36, height: 4, borderRadius: 2 },
+  titre: { paddingHorizontal: 20 },
+  entete: { paddingHorizontal: 20, paddingTop: 12 },
+  contenu: { flexShrink: 1 },
+  gap8: { height: 8 },
+  ligne: { flexDirection: 'row', alignItems: 'center', marginVertical: 2, paddingHorizontal: 8, paddingVertical: 10, borderRadius: 14 },
+  textes: { flex: 1, marginHorizontal: 14 },
+});