@pi-spi/app 2.1.0 → 2.2.0

package/src/shared/widgets/select_date_widget.tsx

@@ -1,6 +1,6 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useState, type ReactNode } from 'react';
-import { 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 { AppRouter, useAppRouter, type SdkRouter } from '../../core/router';
 import { Themer, useTheme } from '../../core/theme';
@@ -8,28 +8,57 @@ import type { AppLocalizations } from '../../l10n/app_localizations';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { ElevatedButton } from '../material/buttons';
 import { showModalBottomSheet } from '../material/overlays';
+import { withAlpha } from '../utils/color';
 import { DateFormat } from '../utils/date_format';
 import { CalendarDatePicker } from './calendar_date_picker';
+import { SelectionBoutons, SelectionSheet } from './selection';
 
-/** Feuille avec un calendrier : titre, calendrier, plage choisie, « Valider ». */
-function DateSheet({ title, subTitle, children, footer }: { title: string; subTitle?: string; children: ReactNode; footer?: ReactNode }) {
+/**
+ * Feuille avec un calendrier : poignée, titre, sous-titre, calendrier, date
+ * ou plage choisie ([resume]) puis « Valider » fixé en bas.
+ */
+function DateSheet({ title, subTitle, children, resume }: { title: string; subTitle?: string; children: ReactNode; resume?: string | null }) {
   const theme = useTheme();
   const router = useAppRouter();
   const traductions = useAppLocalizations();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   return (
-    <View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.65, paddingBottom: insets.bottom }]}>
-      <View style={styles.title}>
-        <Text style={theme.textTheme.headlineMedium}>{title}</Text>
-        <View style={styles.gap12} />
-        {subTitle != null && <Text style={theme.textTheme.displayMedium}>{subTitle}</Text>}
-      </View>
-      <ScrollView style={styles.flexShrink}>{children}</ScrollView>
-      {footer}
-      <View style={styles.button}>
-        <ElevatedButton onPress={() => AppRouter.pop(router)}>{traductions.popupSelectDateBtnValider}</ElevatedButton>
-      </View>
+    <SelectionSheet
+      titre={title}
+      hauteurMax={0.85}
+      entete={
+        subTitle != null ? <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{subTitle}</Text> : undefined
+      }
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.flexShrink} contentContainerStyle={styles.content}>
+            {children}
+            {resume != null && <SelectDateResume texte={resume} />}
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton key="valider" onPress={() => AppRouter.pop(router)}>
+                {traductions.popupSelectDateBtnValider}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
+  );
+}
+
+/** Date ou plage choisie, mise en évidence sous le calendrier. */
+export function SelectDateResume({ texte }: { texte: string }) {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.resume,
+        { backgroundColor: withAlpha(Themer.successColor, 0.08), borderColor: withAlpha(Themer.successColor, 0.25) },
+      ]}
+    >
+      <MaterialIcons name="event-available" size={20} color={Themer.successColor} />
+      <Text style={[theme.textTheme.displayLarge, styles.resumeTexte, { color: Themer.successColor }]}>{texte}</Text>
     </View>
   );
 }
@@ -41,7 +70,6 @@ export async function showSelectDate(
 ): Promise<Date | null> {
   let date: Date | null = null;
   await showModalBottomSheet(router, {
-    themed: true,
     builder: () => <SelectDate {...options} onSelect={(d) => (date = d)} />,
   });
   return date;
@@ -62,9 +90,14 @@ function SelectDate({
   lastDate?: Date | null;
   onSelect: (date: Date) => void;
 }) {
-  const [value, setValue] = useState<Date | null>(null);
+  const traductions = useAppLocalizations();
+  const [value, setValue] = useState<Date | null>(selected ?? null);
   return (
-    <DateSheet title={title} subTitle={subTitle}>
+    <DateSheet
+      title={title}
+      subTitle={subTitle}
+      resume={value != null ? new DateFormat('EEEE d MMMM yyyy', traductions.localeName).format(value) : null}
+    >
       <CalendarDatePicker
         type="single"
         value={[value]}
@@ -95,7 +128,6 @@ export async function showSelectDateRange(
 ): Promise<Date[]> {
   let dates: Date[] = [];
   await showModalBottomSheet(router, {
-    themed: true,
     builder: () => <SelectDateRange {...options} onSelect={(d) => (dates = d)} />,
   });
   return dates;
@@ -119,14 +151,7 @@ function SelectDateRange({
   const [dateFin, setDateFin] = useState<Date | null>(initialFin ?? null);
   const formatter = new DateFormat('d MMMM yyyy', traductions.localeName);
   return (
-    <DateSheet
-      title={title}
-      footer={
-        dateDebut != null ? (
-          <Text style={[styles.plage, { color: Themer.successColor }]}>{plageText(traductions, formatter, dateDebut, dateFin)}</Text>
-        ) : null
-      }
-    >
+    <DateSheet title={title} resume={dateDebut != null ? plageText(traductions, formatter, dateDebut, dateFin) : null}>
       <CalendarDatePicker
         type="range"
         value={[dateDebut, dateFin]}
@@ -142,10 +167,17 @@ function SelectDateRange({
 }
 
 const styles = StyleSheet.create({
-  sheet: { borderRadius: 20, overflow: 'hidden' },
-  title: { paddingHorizontal: 20, paddingTop: 30, paddingBottom: 15 },
   flexShrink: { flexShrink: 1 },
-  gap12: { height: 12 },
-  plage: { textAlign: 'center', paddingHorizontal: 20 },
-  button: { paddingHorizontal: 20, paddingVertical: 10 },
+  content: { paddingHorizontal: 4, paddingBottom: 16 },
+  resume: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginTop: 4,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
+  resumeTexte: { flex: 1, marginLeft: 10, fontWeight: '600' },
 });

package/src/shared/widgets/selection.tsx

@@ -24,7 +24,9 @@ type IconName = ComponentProps<typeof MaterialIcons>['name'];
 /**
  * Champ de formulaire qui ouvre une feuille de sélection ([onPress]) :
  * [libelle] seul tant que rien n'est choisi, sinon [pastille], [libelle]
- * en petit, [valeur] et éventuellement [detail] (code BIC…).
+ * en petit, [valeur] et éventuellement [detail] (code BIC…). Sans
+ * [onPress], le champ affiche une information en lecture seule (pas de
+ * flèche), avec [suffixe] facultatif à droite (ex. bouton d'action).
  */
 export function SelectionChamp({
   libelle,
@@ -34,6 +36,7 @@ export function SelectionChamp({
   onPress,
   chargement = false,
   actif = true,
+  suffixe,
 }: {
   libelle: string;
   valeur?: string | null;
@@ -45,6 +48,8 @@ export function SelectionChamp({
   chargement?: boolean;
   /** `false` : champ grisé (ex. institution tant que le pays n'est pas choisi). */
   actif?: boolean;
+  /** À droite, à la place de la flèche (champ sans [onPress]). */
+  suffixe?: ReactNode;
 }) {
   const theme = useTheme();
   const desactive = onPress == null || chargement || !actif;
@@ -78,12 +83,18 @@ export function SelectionChamp({
             </>
           )}
         </View>
-        <View style={styles.gap8w} />
-        {chargement ? (
-          <ActivityIndicator size="small" color={theme.colorScheme.primary} />
-        ) : (
-          <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.primary} />
-        )}
+        {suffixe != null
+          ? suffixe
+          : onPress != null && (
+              <>
+                <View style={styles.gap8w} />
+                {chargement ? (
+                  <ActivityIndicator size="small" color={theme.colorScheme.primary} />
+                ) : (
+                  <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.primary} />
+                )}
+              </>
+            )}
       </Pressable>
     </Card>
   );
@@ -131,7 +142,7 @@ export function SelectionSheet({
 }
 
 /** Liste d'une feuille de sélection : les [lignes], ou [vide] s'il n'y en a aucune. */
-export function SbSelectionListe({ lignes, vide }: { lignes: ReactNode[]; vide: string }) {
+export function SelectionListe({ lignes, vide }: { lignes: ReactNode[]; vide: string }) {
   const theme = useTheme();
   if (lignes.length === 0) {
     return (
@@ -160,7 +171,7 @@ export function selectionContient(texte: string | null | undefined, motCle: stri
 }
 
 /** Champ de recherche d'une feuille de sélection. */
-export function SbSelectionRecherche({ hintText, onChanged }: { hintText: string; onChanged: (texte: string) => void }) {
+export function SelectionRecherche({ hintText, onChanged }: { hintText: string; onChanged: (texte: string) => void }) {
   const theme = useTheme();
   return (
     <Card style={styles.rechercheCarte}>
@@ -180,7 +191,7 @@ export function SbSelectionRecherche({ hintText, onChanged }: { hintText: string
 }
 
 /** Ligne d'une feuille de sélection : [pastille], [texte], [detail] facultatif et coche si elle est [choisie]. */
-export function SbSelectionLigne({
+export function SelectionLigne({
   pastille,
   texte,
   detail,
@@ -222,7 +233,7 @@ export function SbSelectionLigne({
 }
 
 /** Pastille d'une ligne : un code (EUR, CIV…) ou une icône ; pleine si la ligne est choisie. */
-export function SbSelectionPastille({ code, icone, choisie = false }: { code?: string; icone?: IconName; choisie?: boolean }) {
+export function SelectionPastille({ code, icone, choisie = false }: { code?: string; icone?: IconName; choisie?: boolean }) {
   const theme = useTheme();
   const primaire = theme.colorScheme.primary;
   const couleur = choisie ? theme.colorScheme.onPrimary : primaire;
@@ -242,7 +253,7 @@ export function SbSelectionPastille({ code, icone, choisie = false }: { code?: s
  * (asset), [titre], [sousTitre] et flèche vers l'écran ouvert. [couleur]
  * remplace la couleur principale (ex. rouge pour une action destructive).
  */
-export function SbSelectionOption({
+export function SelectionOption({
   icone,
   image,
   titre,