@pi-spi/app 2.0.0 → 2.2.0

package/src/shared/widgets/frequence_select_widget.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useReducer, useState, type ReactNode } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useReducer, type ComponentProps, type ReactNode } from 'react';
+import { LayoutAnimation, Platform, Pressable, ScrollView, StyleSheet, Text, UIManager, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../core/router';
 import { Themer, useTheme } from '../../core/theme';
@@ -9,7 +9,16 @@ import { useAppLocalizations } from '../../l10n/localizations';
 import { ElevatedButton } from '../material/buttons';
 import { Card } from '../material/card';
 import { Frequence, type FrequenceCommand } from '../models/frequence_command';
+import { withAlpha } from '../utils/color';
 import { NumberIncWidget } from './number_inc_widget';
+import { SelectionLigne, SelectionOption, SelectionPastille, SelectionBoutons, SelectionSheet } from './selection';
+
+// Animations de mise en page sur Android (déjà actives sur iOS)
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+type IconName = ComponentProps<typeof MaterialIcons>['name'];
 
 export function frequenceText(freq: Frequence, traductions: AppLocalizations): string {
   switch (freq) {
@@ -24,8 +33,59 @@ export function frequenceText(freq: Frequence, traductions: AppLocalizations): s
   }
 }
 
-/** Unité de la périodicité (« jours », « semaine »...), au singulier si [periodicite] vaut 1. */
-export function periodiciteText(traductions: AppLocalizations, freq: Frequence, periodicite?: number | null): string {
+/** Icône de la pastille d'une fréquence (`null` : une seule fois). */
+export function frequenceIcone(freq: Frequence | null | undefined): IconName {
+  switch (freq) {
+    case Frequence.quotidienne:
+      return 'today';
+    case Frequence.hebdomadaire:
+      return 'view-week';
+    case Frequence.mensuelle:
+      return 'calendar-month';
+    case Frequence.annuelle:
+      return 'event-repeat';
+    default:
+      return 'looks-one';
+  }
+}
+
+/** Unité de la fréquence, pour accorder « Tous les » / « Toutes les ». */
+export function periodiciteUnite(freq: Frequence): string {
+  switch (freq) {
+    case Frequence.quotidienne:
+      return 'jour';
+    case Frequence.hebdomadaire:
+      return 'semaine';
+    case Frequence.mensuelle:
+      return 'mois';
+    default:
+      return 'annee';
+  }
+}
+
+/**
+ * Unité de la périodicité (« jours », « semaine »...), au singulier si
+ * [periodicite] vaut 1. Sans personnalisation ([enableCustom] faux) :
+ * « Chaque jour », « Chaque semaine »...
+ */
+export function periodiciteText(
+  traductions: AppLocalizations,
+  freq: Frequence,
+  periodicite?: number | null,
+  enableCustom = true,
+): string {
+  if (!enableCustom) {
+    switch (freq) {
+      case Frequence.quotidienne:
+        return traductions.transactionFormScheduleFrequenceJour;
+      case Frequence.hebdomadaire:
+        return traductions.transactionFormScheduleFrequenceSemaine;
+      case Frequence.mensuelle:
+        return traductions.transactionFormScheduleFrequenceMois;
+      default:
+        return traductions.transactionFormScheduleFrequenceAnnuee;
+    }
+  }
   const one = periodicite === 1;
   switch (freq) {
     case Frequence.quotidienne:
@@ -41,9 +101,33 @@ export function periodiciteText(traductions: AppLocalizations, freq: Frequence,
   }
 }
 
+/** Fréquence calculée : « Tous les 2 jours », « Chaque semaine »... */
+export function frequenceResume(
+  traductions: AppLocalizations,
+  freq: Frequence,
+  periodicite?: number | null,
+  enableCustom = true,
+): string {
+  if (enableCustom && periodicite != null) {
+    return traductions.transactionFormScheduleFrequenceSelected(
+      String(periodicite),
+      periodiciteText(traductions, freq, periodicite),
+      periodiciteUnite(freq),
+    );
+  }
+  return periodiciteText(traductions, freq, periodicite, false);
+}
+
+/** Anime le prochain changement de mise en page (apparitions, disparitions). */
+function animer() {
+  LayoutAnimation.configureNext(LayoutAnimation.create(250, 'easeInEaseOut', 'opacity'));
+}
+
 /**
- * Choix de la fréquence : une seule fois, jour, semaine, mois, année, ou
- * « sur mesure » (tous les N jours/semaines/...).
+ * Feuille de choix de la fréquence : une seule fois, jour, semaine, mois,
+ * année, ou « sur mesure » (tous les N jours/semaines/...). Hors sur
+ * mesure, toucher une fréquence la choisit et ferme la feuille ; en sur
+ * mesure, « Valider » enregistre.
  */
 export function FrequenceSelectWidget({
   title,
@@ -52,6 +136,7 @@ export function FrequenceSelectWidget({
   onChange,
   hideOnce = false,
   hideCustom = false,
+  enableCustom = true,
 }: {
   title: string;
   command: FrequenceCommand;
@@ -59,19 +144,21 @@ export function FrequenceSelectWidget({
   onChange: (value: FrequenceCommand) => void;
   hideOnce?: boolean;
   hideCustom?: boolean;
+  /** Si on autorise la fréquence sur mesure */
+  enableCustom?: boolean;
 }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const { height } = useWindowDimensions();
   const [, rebuild] = useReducer((x: number) => x + 1, 0);
-  // La périodicité à l'ouverture (affichage de « supprimer le sur-mesure »)
-  const [initialPeriodicite] = useState(selected.periodicite);
 
   const uneSeuleFois = !hideOnce && selected.periodicite == null;
+  const surMesure = enableCustom && selected.periodicite != null;
+
   const choose = (freq: Frequence | undefined) => {
     selected.value = freq;
-    if (selected.periodicite == null) {
+    // Hors sur mesure, toucher une fréquence la valide
+    if (!surMesure) {
       onChange(selected);
       AppRouter.pop(router);
     } else {
@@ -80,129 +167,162 @@ export function FrequenceSelectWidget({
   };
 
   return (
-    <View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.8 }]}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Titre */}
-        <Text style={theme.textTheme.headlineMedium}>{title}</Text>
-        <View style={styles.gap20} />
-
-        {/* Supprimer le sur-mesure */}
-        {initialPeriodicite != null && !hideCustom && (
-          <CustomCard
-            icon={<MaterialIcons name="close" size={18} color={Themer.systemErrorColor} />}
-            onPress={() => {
-              // Une seule fois
-              selected.value = undefined;
-              selected.periodicite = undefined;
-              selected.done = false;
-              onChange(selected);
-              AppRouter.pop(router);
-            }}
-          />
-        )}
-
-        {/* Une fois, jour, semaine, mois, année */}
-        <Card>
-          <View style={styles.cardPadding}>
+    <SelectionSheet
+      titre={title}
+      hauteurMax={0.85}
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.flexShrink} contentContainerStyle={styles.content}>
+            {/* Une fois, jour, semaine, mois, année */}
             {uneSeuleFois && (
-              <Option
-                label={traductions.transactionFormScheduleFrequenceUnefois}
-                checked={selected.value == null}
-                onPress={() => {
-                  selected.value = undefined;
-                  onChange(selected);
-                  AppRouter.pop(router);
-                }}
+              <SelectionLigne
+                pastille={<SelectionPastille icone={frequenceIcone(null)} choisie={selected.value == null} />}
+                texte={traductions.transactionFormScheduleFrequenceUnefois}
+                choisie={selected.value == null}
+                onPress={() => choose(undefined)}
               />
             )}
             {frequences.map((freq) => (
-              <Option key={freq} label={frequenceText(freq, traductions)} checked={freq === selected.value} onPress={() => choose(freq)} />
-            ))}
-          </View>
-        </Card>
-        <View style={styles.gap20} />
-
-        {/* Sur mesure */}
-        {selected.periodicite == null && !hideCustom && (
-          <CustomCard
-            icon={<MaterialIcons name="arrow-forward-ios" size={18} color={theme.colorScheme.onSurface} />}
-            onPress={() => {
-              // Quotidienne, tous les 2 jours au minimum
-              selected.value = Frequence.quotidienne;
-              selected.periodicite = 2;
-              onChange(selected);
-              AppRouter.pop(router);
-            }}
-          />
-        )}
-
-        {/* Périodicité */}
-        {selected.periodicite != null && (
-          <>
-            <View style={styles.row}>
-              <Text style={[theme.textTheme.headlineMedium, styles.flex]}>{traductions.transactionFormSchedulePeriodiciteLabel}</Text>
-              <NumberIncWidget
-                number={selected.periodicite}
-                onChange={(value) => {
-                  selected.periodicite = value;
-                  rebuild();
-                }}
+              <SelectionLigne
+                key={freq}
+                pastille={<SelectionPastille icone={frequenceIcone(freq)} choisie={freq === selected.value} />}
+                texte={frequenceText(freq, traductions)}
+                choisie={freq === selected.value}
+                onPress={() => choose(freq)}
               />
-            </View>
+            ))}
+
+            {/* Option Sur mesure : bascule dans la feuille, sans la fermer */}
+            {selected.periodicite == null && !hideCustom && (
+              <View style={styles.marge12}>
+                <SelectionOption
+                  icone="tune"
+                  titre={traductions.transactionFormScheduleFrequenceSurMesure}
+                  onPress={() => {
+                    // Fréquence actuelle (quotidienne par défaut), tous les 2 au minimum ;
+                    // le formulaire est prévenu à la validation
+                    animer();
+                    selected.value ??= Frequence.quotidienne;
+                    selected.periodicite = 2;
+                    selected.done = false;
+                    rebuild();
+                  }}
+                />
+              </View>
+            )}
+
+            {/* Périodicité sur mesure */}
+            {surMesure && (
+              <Card style={[styles.carte, styles.marge16]}>
+                <View style={styles.carteContenu}>
+                  {/* Sur mesure et bouton pour le supprimer */}
+                  <View style={styles.row}>
+                    <MaterialIcons name="tune" size={18} color={theme.colorScheme.primary} />
+                    <Text style={[theme.textTheme.displayLarge, styles.surMesure]}>
+                      {traductions.transactionFormScheduleFrequenceSurMesure}
+                    </Text>
+                    {!hideCustom && (
+                      <Pressable
+                        hitSlop={10}
+                        accessibilityRole="button"
+                        onPress={() => {
+                          // Revient aux fréquences de base, sans fermer la feuille ;
+                          // la fréquence choisie est gardée
+                          animer();
+                          selected.periodicite = undefined;
+                          selected.done = false;
+                          onChange(selected);
+                          rebuild();
+                        }}
+                        style={styles.fermer}
+                      >
+                        <MaterialIcons name="close" size={20} color={Themer.systemErrorColor} />
+                      </Pressable>
+                    )}
+                  </View>
+                  {/* Périodicité : boutons réduire et augmenter */}
+                  <View style={[styles.row, styles.periodicite]}>
+                    <Text style={[theme.textTheme.displayMedium, styles.flex, { color: Themer.neural03Color }]}>
+                      {traductions.transactionFormSchedulePeriodiciteLabel}
+                    </Text>
+                    <NumberIncWidget
+                      number={selected.periodicite!}
+                      onChange={(value) => {
+                        selected.periodicite = value;
+                        rebuild();
+                      }}
+                    />
+                  </View>
+                </View>
+              </Card>
+            )}
+
+            {/* Fréquence calculée */}
             {selected.value != null && (
-              <Text style={[styles.right, { color: Themer.successColor }]}>
-                {traductions.transactionFormScheduleFrequenceSelected(
-                  String(selected.periodicite),
-                  periodiciteText(traductions, selected.value, selected.periodicite),
-                )}
-              </Text>
+              <View style={styles.marge16}>
+                <FrequenceResume texte={frequenceResume(traductions, selected.value, selected.periodicite, enableCustom)} />
+              </View>
             )}
-            <View style={styles.gap20} />
-            <ElevatedButton
-              onPress={() => {
-                selected.done = true;
-                onChange(selected);
-                AppRouter.pop(router);
-              }}
-            >
-              {traductions.popupSelectDateBtnValider}
-            </ElevatedButton>
-          </>
-        )}
-      </ScrollView>
-    </View>
-  );
-}
+          </ScrollView>
 
-/** Option « Sur mesure » */
-function CustomCard({ icon, onPress }: { icon: ReactNode; onPress: () => void }) {
-  const traductions = useAppLocalizations();
-  return (
-    <Card>
-      <View style={styles.cardPadding}>
-        <Option label={traductions.transactionFormScheduleFrequenceSurMesure} trailing={icon} onPress={onPress} />
-      </View>
-    </Card>
+          {/* Bouton valider : seulement en sur mesure */}
+          {surMesure && (
+            <SelectionBoutons
+              boutons={[
+                <ElevatedButton
+                  key="valider"
+                  onPress={() => {
+                    selected.done = true;
+                    onChange(selected);
+                    AppRouter.pop(router);
+                  }}
+                >
+                  {traductions.popupSelectDateBtnValider}
+                </ElevatedButton>,
+              ]}
+            />
+          )}
+        </>
+      }
+    />
   );
 }
 
-function Option({ label, checked, trailing, onPress }: { label: string; checked?: boolean; trailing?: ReactNode; onPress: () => void }) {
+/** Fréquence calculée, mise en évidence */
+function FrequenceResume({ texte }: { texte: ReactNode }) {
   const theme = useTheme();
   return (
-    <Pressable accessibilityRole="button" onPress={onPress} style={styles.option}>
-      <Text style={[theme.textTheme.bodyLarge, styles.flex]}>{label}</Text>
-      {trailing ?? (checked ? <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} /> : null)}
-    </Pressable>
+    <View
+      style={[
+        styles.resume,
+        { backgroundColor: withAlpha(Themer.successColor, 0.08), borderColor: withAlpha(Themer.successColor, 0.25) },
+      ]}
+    >
+      <MaterialIcons name="event-repeat" size={20} color={Themer.successColor} />
+      <Text style={[theme.textTheme.displayLarge, styles.resumeTexte, { color: Themer.successColor }]}>{texte}</Text>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  sheet: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  cardPadding: { paddingHorizontal: 15 },
-  option: { flexDirection: 'row', alignItems: 'center', minHeight: 48 },
-  row: { flexDirection: 'row', alignItems: 'center' },
+  flexShrink: { flexShrink: 1 },
   flex: { flex: 1 },
-  right: { textAlign: 'right' },
-  gap20: { height: 20 },
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 16 },
+  marge12: { marginTop: 12 },
+  marge16: { marginTop: 16 },
+  carte: { margin: 0 },
+  carteContenu: { paddingLeft: 14, paddingRight: 6, paddingTop: 6, paddingBottom: 12 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  surMesure: { flex: 1, marginLeft: 8, fontWeight: '700' },
+  fermer: { padding: 8 },
+  periodicite: { marginTop: 4, paddingRight: 8 },
+  resume: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
+  resumeTexte: { flex: 1, marginLeft: 10, fontWeight: '600' },
 });

package/src/shared/widgets/image_select_widget.tsx

@@ -1,33 +1,30 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import type { ReactNode } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
-import { Images } from '../../core/assets';
-import { useTheme } from '../../core/theme';
+import { Themer, useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
-import { Card } from '../material/card';
+import { SelectionOption, SelectionSheet } from './selection';
 
 /**
- * Feuille de choix d'une image : photo avec l'appareil photo, ou image de
- * la galerie. [onSelect] reçoit l'URI locale de l'image (ou `null` si
- * l'utilisateur annule).
+ * Feuille de choix d'une image : prendre une photo, la choisir dans la
+ * galerie, puis les [otherActions] (ex. SelectionOption « Supprimer »).
+ * [onSelect] reçoit l'URI locale de l'image (ou `null` si l'utilisateur
+ * annule).
  */
 export function ImageSelectWidget({
   title,
+  subtitle,
   onSelect,
   otherActions = [],
 }: {
   title?: string;
+  subtitle?: string;
   onSelect: (uri: string | null) => void;
   otherActions?: ReactNode[];
 }) {
   const theme = useTheme();
   const traductions = useAppLocalizations();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
 
   const pickImage = async (source: 'camera' | 'gallery') => {
     try {
@@ -46,58 +43,46 @@ export function ImageSelectWidget({
     }
   };
 
+  const actions: ReactNode[] = [
+    // Prendre une photo avec l'appareil photo
+    <SelectionOption
+      key="camera"
+      icone="photo-camera"
+      titre={traductions.imageSelectCamera}
+      onPress={() => void pickImage('camera')}
+    />,
+    // Sélectionner une photo depuis la galerie
+    <SelectionOption
+      key="galerie"
+      icone="photo-library"
+      titre={traductions.imageSelectGalerie}
+      onPress={() => void pickImage('gallery')}
+    />,
+    ...otherActions,
+  ];
+
   return (
-    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.7 }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: insets.bottom + 10 }]}>
-        {/* Title */}
-        {title != null && (
-          <>
-            <Text style={theme.textTheme.headlineMedium}>{title}</Text>
-            <View style={styles.gap10} />
-          </>
-        )}
-        <View style={styles.row}>
-          {/* Prendre une photo avec la caméra */}
-          <Pressable accessibilityRole="button" onPress={() => void pickImage('camera')} style={styles.camera}>
-            <Image source={Images.ticketCaisse} style={StyleSheet.absoluteFill} contentFit="contain" />
-            <MaterialIcons name="photo-camera" size={24} color="white" />
-          </Pressable>
-        </View>
-        <View style={styles.gap20} />
-        {/* Actions */}
-        <Card>
-          {/* Sélectionner une photo depuis la galerie */}
-          <Pressable
-            accessibilityRole="button"
-            onPress={() => void pickImage('gallery')}
-            style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
-          >
-            <MaterialIcons name="image" size={24} color={theme.colorScheme.onSurface} />
-            <Text style={[theme.textTheme.bodyLarge, styles.tileText]}>{traductions.transactionDetailsTicketSaveGallery}</Text>
-            <MaterialIcons name="arrow-forward-ios" size={16} color={theme.colorScheme.onSurface} />
-          </Pressable>
-          {otherActions}
-        </Card>
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={title}
+      entete={
+        subtitle != null ? (
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{subtitle}</Text>
+        ) : undefined
+      }
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {actions.map((action, i) => (
+            <View key={i} style={i > 0 ? styles.suivante : null}>
+              {action}
+            </View>
+          ))}
+        </ScrollView>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden' },
-  content: { paddingTop: 20, paddingHorizontal: 20 },
-  row: { height: 80, flexDirection: 'row', alignItems: 'center' },
-  camera: {
-    width: 77,
-    height: 80,
-    borderRadius: 12,
-    overflow: 'hidden',
-    backgroundColor: 'rgba(0,0,0,0.12)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56 },
-  tileText: { flex: 1, marginHorizontal: 16 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  suivante: { marginTop: 10 },
 });

package/src/shared/widgets/input_text.tsx

@@ -10,6 +10,8 @@ export type CustomTextInputProps = {
   preffix?: ReactNode;
   suffix?: ReactNode;
   suffixIcon?: ReactNode;
+  /** Toujours affiché au début du champ (ex. indicatif du pays). */
+  prefixIcon?: ReactNode;
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
@@ -77,6 +79,7 @@ export const CustomTextInput: ForwardRefExoticComponent<CustomTextInputProps & R
           },
         ]}
       >
+        {props.prefixIcon}
         {props.preffix}
         <View style={styles.field}>
           {hasLabel && <FloatingLabel text={props.labelText!} floating={floating} restingTop={(HEIGHT - 2) / 2 - 12} />}