@pi-spi/app 2.0.0 → 2.2.0

package/src/shared/widgets/selection.tsx

@@ -1,11 +1,105 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Image } from 'expo-image';
+import type { ComponentProps, ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  Keyboard,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Themer, useTheme } from '../../core/theme';
+import { Card } from '../material/card';
 import { withAlpha } from '../utils/color';
 
+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…). 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,
+  valeur,
+  detail,
+  pastille,
+  onPress,
+  chargement = false,
+  actif = true,
+  suffixe,
+}: {
+  libelle: string;
+  valeur?: string | null;
+  detail?: string | null;
+  pastille?: ReactNode;
+  /** Absent : le champ ne réagit pas au toucher. */
+  onPress?: () => void;
+  /** Liste en cours de chargement : indicateur à la place de la flèche. */
+  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;
+  return (
+    <Card style={[styles.champCarte, !actif ? styles.inactif : null]}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={desactive}
+        onPress={() => {
+          Keyboard.dismiss();
+          onPress?.();
+        }}
+        style={({ pressed }) => [styles.champ, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
+      >
+        {valeur != null && pastille != null && <View style={styles.marge12}>{pastille}</View>}
+        <View style={styles.flex}>
+          {valeur == null ? (
+            <Text style={theme.textTheme.bodySmall}>{libelle}</Text>
+          ) : (
+            <>
+              <Text style={theme.textTheme.displaySmall}>{libelle}</Text>
+              <View style={styles.gap2} />
+              <Text numberOfLines={1} style={theme.textTheme.displayMedium}>
+                {valeur}
+              </Text>
+              {detail != null && detail.length > 0 && (
+                <Text numberOfLines={1} style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+                  {detail}
+                </Text>
+              )}
+            </>
+          )}
+        </View>
+        {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>
+  );
+}
+
 /**
  * Feuille de sélection : poignée, [titre], [entete] facultatif, puis le
  * [contenu] (qui défile s'il est trop long : utiliser un ScrollView).
@@ -14,11 +108,14 @@ import { withAlpha } from '../utils/color';
 export function SelectionSheet({
   titre,
   titreSize,
+  hauteurMax = 0.75,
   entete,
   contenu,
 }: {
   titre?: string;
   titreSize?: number;
+  /** Hauteur maximale, en part de la hauteur de l'écran. */
+  hauteurMax?: number;
   entete?: ReactNode;
   contenu: ReactNode;
 }) {
@@ -29,7 +126,7 @@ export function SelectionSheet({
     <View
       style={[
         styles.sheet,
-        { maxHeight: height * 0.75, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
+        { maxHeight: height * hauteurMax, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom },
       ]}
     >
       {/* Poignée */}
@@ -44,8 +141,57 @@ export function SelectionSheet({
   );
 }
 
+/** Liste d'une feuille de sélection : les [lignes], ou [vide] s'il n'y en a aucune. */
+export function SelectionListe({ lignes, vide }: { lignes: ReactNode[]; vide: string }) {
+  const theme = useTheme();
+  if (lignes.length === 0) {
+    return (
+      <View style={styles.vide}>
+        <Text style={[theme.textTheme.bodySmall, styles.centre]}>{vide}</Text>
+      </View>
+    );
+  }
+  return (
+    <ScrollView bounces={false} keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
+      {lignes}
+    </ScrollView>
+  );
+}
+
+/** [texte] contient-il [motCle], sans tenir compte des accents ni de la casse ? */
+export function selectionContient(texte: string | null | undefined, motCle: string): boolean {
+  if (texte == null) return false;
+  const normaliser = (valeur: string) =>
+    valeur
+      .toLowerCase()
+      .trim()
+      .normalize('NFD')
+      .replace(/[̀-ͯ]/g, '');
+  return normaliser(texte).includes(normaliser(motCle));
+}
+
+/** Champ de recherche d'une feuille de sélection. */
+export function SelectionRecherche({ hintText, onChanged }: { hintText: string; onChanged: (texte: string) => void }) {
+  const theme = useTheme();
+  return (
+    <Card style={styles.rechercheCarte}>
+      <View style={[styles.recherche, { backgroundColor: theme.colorScheme.secondary }]}>
+        <MaterialIcons name="search" size={22} color={Themer.neural03Color} />
+        <TextInput
+          style={[theme.textTheme.displayLarge, styles.rechercheInput]}
+          placeholder={hintText}
+          placeholderTextColor={Themer.neural03Color}
+          returnKeyType="search"
+          autoCorrect={false}
+          onChangeText={onChanged}
+        />
+      </View>
+    </Card>
+  );
+}
+
 /** 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,
@@ -86,13 +232,166 @@ export function SbSelectionLigne({
   );
 }
 
+/** Pastille d'une ligne : un code (EUR, CIV…) ou une icône ; pleine si la ligne est choisie. */
+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;
+  return (
+    <View style={[styles.pastille, { backgroundColor: choisie ? primaire : withAlpha(primaire, 0.12) }]}>
+      {code != null ? (
+        <Text style={[theme.textTheme.displaySmall, styles.pastilleCode, { color: couleur }]}>{code.toUpperCase()}</Text>
+      ) : (
+        <MaterialIcons name={icone ?? 'circle'} size={20} color={couleur} />
+      )}
+    </View>
+  );
+}
+
+/**
+ * Option d'une feuille d'actions : pastille avec [icone] ou [image]
+ * (asset), [titre], [sousTitre] et flèche vers l'écran ouvert. [couleur]
+ * remplace la couleur principale (ex. rouge pour une action destructive).
+ */
+export function SelectionOption({
+  icone,
+  image,
+  titre,
+  sousTitre,
+  onPress,
+  couleur,
+}: {
+  icone?: IconName;
+  image?: number;
+  titre: string;
+  sousTitre?: string | null;
+  onPress: () => void;
+  couleur?: string;
+}) {
+  const theme = useTheme();
+  const primaire = couleur ?? theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.option,
+        {
+          backgroundColor: withAlpha(primaire, pressed ? 0.12 : 0.05),
+          borderColor: withAlpha(primaire, 0.12),
+        },
+      ]}
+    >
+      <View style={[styles.optionPastille, { backgroundColor: withAlpha(primaire, 0.12) }]}>
+        {image != null ? (
+          <Image source={image} style={styles.optionImage} tintColor={primaire} contentFit="contain" />
+        ) : (
+          <MaterialIcons name={icone ?? 'circle'} size={24} color={primaire} />
+        )}
+      </View>
+      <View style={styles.textes}>
+        <Text style={[theme.textTheme.displayLarge, styles.gras, couleur != null ? { color: couleur } : null]}>{titre}</Text>
+        {sousTitre != null && (
+          <>
+            <View style={styles.gap2} />
+            <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{sousTitre}</Text>
+          </>
+        )}
+      </View>
+      <MaterialIcons name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'} size={18} color={primaire} />
+    </Pressable>
+  );
+}
+
+/**
+ * Boutons fixés en bas d'une feuille, sous un trait : ils restent visibles
+ * quand le contenu défile ou que le clavier est ouvert. Les [boutons] sont
+ * côte à côte, sur la même largeur.
+ */
+export function SelectionBoutons({ boutons }: { boutons: ReactNode[] }) {
+  return (
+    <View style={[styles.boutons, { borderTopColor: Themer.neural01Color }]}>
+      {boutons.map((bouton, i) => (
+        <View key={i} style={[styles.flex, i > 0 ? styles.boutonSuivant : null]}>
+          {bouton}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/** Choix d'une liste à choix unique (ex. motif d'annulation) : [texte] et rond coché si [choisi]. */
+export function SelectionChoix({ texte, choisi, onPress }: { texte: string; choisi: boolean; onPress: () => void }) {
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="radio"
+      accessibilityState={{ selected: choisi }}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.choix,
+        {
+          backgroundColor: choisi ? withAlpha(primaire, 0.08) : pressed ? theme.colorScheme.secondary : 'transparent',
+          borderColor: choisi ? primaire : withAlpha(Themer.neural03Color, 0.25),
+        },
+      ]}
+    >
+      <Text style={[theme.textTheme.displayLarge, styles.flex, { fontWeight: choisi ? '600' : '400' }]}>{texte}</Text>
+      <View style={styles.gap12w} />
+      <MaterialIcons
+        name={choisi ? 'check-circle' : 'radio-button-unchecked'}
+        size={22}
+        color={choisi ? primaire : Themer.neural03Color}
+      />
+    </Pressable>
+  );
+}
+
 const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  centre: { textAlign: 'center' },
+  gras: { fontWeight: '700' },
+  inactif: { opacity: 0.5 },
+  gap2: { height: 2 },
+  gap8: { height: 8 },
+  gap8w: { width: 8 },
+  gap12w: { width: 12 },
+  marge12: { marginRight: 12 },
+  champCarte: { margin: 0 },
+  champ: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 12 },
   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 },
+  vide: { padding: 24, alignItems: 'center' },
+  liste: { paddingHorizontal: 12, paddingBottom: 12 },
+  rechercheCarte: { margin: 0 },
+  recherche: { flexDirection: 'row', alignItems: 'center', height: 40, paddingHorizontal: 12 },
+  rechercheInput: { flex: 1, marginLeft: 8, paddingVertical: 0 },
   ligne: { flexDirection: 'row', alignItems: 'center', marginVertical: 2, paddingHorizontal: 8, paddingVertical: 10, borderRadius: 14 },
   textes: { flex: 1, marginHorizontal: 14 },
+  pastille: { width: 48, height: 36, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
+  pastilleCode: { fontWeight: '700', letterSpacing: 0.5 },
+  option: { flexDirection: 'row', alignItems: 'center', padding: 14, borderRadius: 16, borderWidth: 1 },
+  optionPastille: { width: 44, height: 44, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+  optionImage: { width: 20, height: 20 },
+  boutons: {
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 8,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  boutonSuivant: { marginLeft: 12 },
+  choix: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 4,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
 });

package/lib/module/modules/transactions/presentation/pages/transaction_details/sheet_box.js

@@ -1,47 +0,0 @@
-"use strict";
-
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../../../../core/theme.js";
-
-/**
- * Boîte des feuilles du détail (ouvertes en feuille « thémée », sur toute
- * la largeur) : marge de 20, fond `surface` aux coins de
- * 20, hauteur limitée à 70 % de l'écran (au-delà, le contenu défile).
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export function SheetBox({
-  children
-}) {
-  const theme = useTheme();
-  const {
-    height
-  } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.padding, {
-      paddingBottom: 20 + insets.bottom
-    }],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.box, {
-        backgroundColor: theme.colorScheme.surface,
-        maxHeight: height * 0.7 - 40
-      }],
-      children: /*#__PURE__*/_jsx(ScrollView, {
-        keyboardShouldPersistTaps: "handled",
-        bounces: false,
-        children: children
-      })
-    })
-  });
-}
-const styles = StyleSheet.create({
-  padding: {
-    padding: 20
-  },
-  box: {
-    borderRadius: 20,
-    overflow: 'hidden'
-  }
-});
-//# sourceMappingURL=sheet_box.js.map

package/lib/module/modules/transactions/presentation/pages/transaction_details/sheet_box.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ScrollView","StyleSheet","useWindowDimensions","View","useSafeAreaInsets","useTheme","jsx","_jsx","SheetBox","children","theme","height","insets","style","styles","padding","paddingBottom","bottom","box","backgroundColor","colorScheme","surface","maxHeight","keyboardShouldPersistTaps","bounces","create","borderRadius","overflow"],"sourceRoot":"../../../../../../../src","sources":["modules/transactions/presentation/pages/transaction_details/sheet_box.tsx"],"mappings":";;AACA,SAASA,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAEC,IAAI,QAAQ,cAAc;AAChF,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,SAASC,QAAQ,QAAQ,8BAA2B;;AAEpD;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA;AAKA,OAAO,SAASC,QAAQA,CAAC;EAAEC;AAAkC,CAAC,EAAE;EAC9D,MAAMC,KAAK,GAAGL,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEM;EAAO,CAAC,GAAGT,mBAAmB,CAAC,CAAC;EACxC,MAAMU,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,oBACEG,IAAA,CAACJ,IAAI;IAACU,KAAK,EAAE,CAACC,MAAM,CAACC,OAAO,EAAE;MAAEC,aAAa,EAAE,EAAE,GAAGJ,MAAM,CAACK;IAAO,CAAC,CAAE;IAAAR,QAAA,eACnEF,IAAA,CAACJ,IAAI;MAACU,KAAK,EAAE,CAACC,MAAM,CAACI,GAAG,EAAE;QAAEC,eAAe,EAAET,KAAK,CAACU,WAAW,CAACC,OAAO;QAAEC,SAAS,EAAEX,MAAM,GAAG,GAAG,GAAG;MAAG,CAAC,CAAE;MAAAF,QAAA,eACtGF,IAAA,CAACP,UAAU;QAACuB,yBAAyB,EAAC,SAAS;QAACC,OAAO,EAAE,KAAM;QAAAf,QAAA,EAC5DA;MAAQ,CACC;IAAC,CACT;EAAC,CACH,CAAC;AAEX;AAEA,MAAMK,MAAM,GAAGb,UAAU,CAACwB,MAAM,CAAC;EAC/BV,OAAO,EAAE;IAAEA,OAAO,EAAE;EAAG,CAAC;EACxBG,GAAG,EAAE;IAAEQ,YAAY,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAS;AAC9C,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/modules/transactions/presentation/pages/transaction_details/sheet_box.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-/**
- * Boîte des feuilles du détail (ouvertes en feuille « thémée », sur toute
- * la largeur) : marge de 20, fond `surface` aux coins de
- * 20, hauteur limitée à 70 % de l'écran (au-delà, le contenu défile).
- */
-export declare function SheetBox({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-//# sourceMappingURL=sheet_box.d.ts.map

package/lib/typescript/src/modules/transactions/presentation/pages/transaction_details/sheet_box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sheet_box.d.ts","sourceRoot":"","sources":["../../../../../../../../src/modules/transactions/presentation/pages/transaction_details/sheet_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAa7D"}

package/src/modules/transactions/presentation/pages/transaction_details/sheet_box.tsx

@@ -1,30 +0,0 @@
-import type { ReactNode } from 'react';
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { useTheme } from '../../../../../core/theme';
-
-/**
- * Boîte des feuilles du détail (ouvertes en feuille « thémée », sur toute
- * la largeur) : marge de 20, fond `surface` aux coins de
- * 20, hauteur limitée à 70 % de l'écran (au-delà, le contenu défile).
- */
-export function SheetBox({ children }: { children: ReactNode }) {
-  const theme = useTheme();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  return (
-    <View style={[styles.padding, { paddingBottom: 20 + insets.bottom }]}>
-      <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.7 - 40 }]}>
-        <ScrollView keyboardShouldPersistTaps="handled" bounces={false}>
-          {children}
-        </ScrollView>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  padding: { padding: 20 },
-  box: { borderRadius: 20, overflow: 'hidden' },
-});