@alveole/components 2.0.0-alpha → 2.0.0-alpha.2

package/dist/ui/FormControl/fichiersDuChamp.js

@@ -0,0 +1,63 @@
+export const libellesParDefaut = {
+    addFile: 'Ajouter un fichier',
+    selectFile: 'Sélectionner un fichier',
+    gallery: 'Galerie',
+    camera: 'Appareil photo',
+    document: 'Document',
+    cancel: 'Annuler',
+    chooseImageTitle: 'Choisir une image',
+    chooseDocumentTitle: 'Choisir un fichier',
+    chooseImageMessage: 'Prendre une photo ou en choisir une dans la galerie.',
+    permissionRequired: 'Autorisation requise',
+    cameraPermissionMessage: "Autorisez l'accès à l'appareil photo dans les réglages pour prendre une photo.",
+    galleryPermissionMessage: "Autorisez l'accès à la galerie dans les réglages pour choisir une image.",
+    unnamed: 'Fichier sans nom',
+    remove: 'Retirer',
+};
+const listeDe = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+export const fichiersVisibles = (value) => listeDe(value).filter(fichier => !fichier.removed);
+// Le champ multiple accumule ; le champ simple ne recoit un fichier que s'il n'en montre aucun.
+export const ajoute = (value, nouveaux, multiple) => {
+    if (!multiple)
+        return nouveaux[0] ?? value;
+    return [...listeDe(value), ...nouveaux];
+};
+const memeFichier = (a, b) => a.id != null && b.id != null ? a.id === b.id : a.uri === b.uri;
+// Un fichier enregistre reste dans la valeur, marque `removed`, pour que l'appelant sache quoi
+// supprimer cote serveur ; un fichier ajoute disparait simplement.
+export const retire = (value, cible) => {
+    const retirer = (fichier) => {
+        if (!memeFichier(fichier, cible))
+            return [fichier];
+        return fichier.persisted ? [{ ...fichier, removed: true }] : [];
+    };
+    if (!Array.isArray(value))
+        return value == null ? null : (retirer(value)[0] ?? null);
+    const suivants = value.flatMap(retirer);
+    return suivants.length === 0 ? null : suivants;
+};
+const typesDe = (type) => (type == null ? [] : Array.isArray(type) ? type : [type]);
+const estUnTypeImage = (t) => t === 'image' || t.startsWith('image/');
+export const imagesSeulement = (type) => {
+    const types = typesDe(type);
+    return types.length > 0 && types.every(estUnTypeImage);
+};
+const accepteLesImages = (type) => {
+    const types = typesDe(type);
+    return types.length === 0 || types.some(t => t === '*/*' || estUnTypeImage(t));
+};
+/** Les sources que la feuille d'actions propose sur natif, dans l'ordre. Sur grand ecran, le document passe en tete. */
+export const sourcesProposees = (type, grandEcran) => {
+    const images = accepteLesImages(type) ? ['gallery', 'camera'] : [];
+    if (imagesSeulement(type))
+        return images;
+    return grandEcran ? ['document', ...images] : [...images, 'document'];
+};
+/** Sur grand ecran, l'option qui ouvre l'explorateur de fichiers s'annonce comme telle. */
+export const libelleDeLaSource = (source, labels, { type, grandEcran }) => {
+    if (source === 'document')
+        return grandEcran ? labels.selectFile : labels.document;
+    if (source === 'gallery')
+        return grandEcran && imagesSeulement(type) ? labels.selectFile : labels.gallery;
+    return labels.camera;
+};

package/dist/ui/FormControl/useChoixDeFichier.d.ts

@@ -0,0 +1,15 @@
+import type { FileInputProps } from './FileInput';
+import { FileInputLabels } from './fichiersDuChamp';
+type Options = Pick<FileInputProps, 'value' | 'onChange' | 'type' | 'disabled' | 'onPickStart'> & {
+    multiple: boolean;
+    cameraQuality: number;
+    labels: FileInputLabels;
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export declare const useChoixDeFichier: (options: Options) => () => Promise<void>;
+export {};
+//# sourceMappingURL=useChoixDeFichier.d.ts.map

package/dist/ui/FormControl/useChoixDeFichier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChoixDeFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/useChoixDeFichier.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAGL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAmC3B,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAChG,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,OAAO,wBAuDjD,CAAC"}

package/dist/ui/FormControl/useChoixDeFichier.js

@@ -0,0 +1,87 @@
+import { useTheme } from '@alveole/theme';
+import * as DocumentPicker from 'expo-document-picker';
+import * as ImagePicker from 'expo-image-picker';
+import React from 'react';
+import { Platform } from 'react-native';
+import { Alert } from '../../core/Alert';
+import { ajoute, imagesSeulement, libelleDeLaSource, sourcesProposees, } from './fichiersDuChamp';
+import { valideLeType } from './valideLeType';
+const enFichier = (asset) => ({
+    uri: asset.uri,
+    name: asset.fileName ?? 'image.jpg',
+    size: asset.fileSize ?? 0,
+    mimeType: asset.mimeType ?? 'image/jpeg',
+    lastModified: Date.now(),
+});
+/** Demande l'autorisation, puis ouvre la galerie ou l'appareil photo. Rend les fichiers choisis, ou aucun. */
+const prendreUneImage = async (source, { labels, cameraQuality, multiple }) => {
+    const camera = source === 'camera';
+    const demande = camera ? ImagePicker.requestCameraPermissionsAsync : ImagePicker.requestMediaLibraryPermissionsAsync;
+    const { status } = await demande();
+    if (status !== 'granted') {
+        const message = camera ? labels.cameraPermissionMessage : labels.galleryPermissionMessage;
+        Alert.alert({ title: labels.permissionRequired, message });
+        return [];
+    }
+    const result = camera
+        ? await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: cameraQuality })
+        : await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            quality: 1,
+            allowsMultipleSelection: multiple,
+        });
+    return result.canceled ? [] : result.assets.map(enFichier);
+};
+/**
+ * Tout ce que le bouton du champ declenche : le selecteur de documents sur le web ; sur natif, une
+ * feuille d'actions galerie / appareil photo / document, avec les demandes d'autorisation. Les
+ * fichiers recus passent le controle de type, puis s'ajoutent a la valeur.
+ */
+export const useChoixDeFichier = (options) => {
+    const { value, onChange, type, disabled, onPickStart, multiple, cameraQuality, labels } = options;
+    const { isVariant } = useTheme();
+    const grandEcran = isVariant('desktop');
+    const isPickingRef = React.useRef(false);
+    const recevoir = React.useCallback((nouveaux) => {
+        if (nouveaux.length === 0)
+            return;
+        const transmettre = () => onChange(ajoute(value, nouveaux, multiple));
+        valideLeType({ type, onChange: transmettre })(multiple ? nouveaux : nouveaux[0]);
+    }, [onChange, value, multiple, type]);
+    const choisirUnDocument = React.useCallback(async () => {
+        const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true, multiple, type });
+        recevoir(result.assets ?? []);
+    }, [multiple, type, recevoir]);
+    const choisirUneImage = React.useCallback(async (source) => recevoir(await prendreUneImage(source, { labels, cameraQuality, multiple })), [labels, cameraQuality, multiple, recevoir]);
+    const ouvrirLaFeuille = React.useCallback(() => {
+        const lancer = (source) => (source === 'document' ? choisirUnDocument() : choisirUneImage(source));
+        const images = imagesSeulement(type);
+        Alert.alert({
+            title: images ? labels.chooseImageTitle : labels.chooseDocumentTitle,
+            message: images ? labels.chooseImageMessage : undefined,
+            buttons: [
+                ...sourcesProposees(type, grandEcran).map(source => ({
+                    text: libelleDeLaSource(source, labels, { type, grandEcran }),
+                    onPress: () => lancer(source),
+                })),
+                { text: labels.cancel, style: 'cancel' },
+            ],
+        });
+    }, [type, labels, grandEcran, choisirUnDocument, choisirUneImage]);
+    return React.useCallback(async () => {
+        if (isPickingRef.current)
+            return;
+        onPickStart?.();
+        if (disabled)
+            return;
+        if (Platform.OS !== 'web')
+            return ouvrirLaFeuille();
+        isPickingRef.current = true;
+        try {
+            await choisirUnDocument();
+        }
+        finally {
+            isPickingRef.current = false;
+        }
+    }, [onPickStart, disabled, ouvrirLaFeuille, choisirUnDocument]);
+};

package/dist/ui/FormControl/valideLeType.d.ts

@@ -4,7 +4,7 @@ import type { FileInputProps } from './FileInput';
  * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
  * selecteur, qui filtre deja, d'avoir eu le dernier mot.
  *
- * Les trois champs de fichier (l'ancien FileField, DragAndDropFile natif et web) faisaient ce filtrage
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
  * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
  * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
  * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et

package/dist/ui/FormControl/valideLeType.js

@@ -11,7 +11,7 @@ const refuser = (plusieurs) => Alert.alert({
  * et prevenir l'utilisateur sinon. Un fichier dont le type MIME est inconnu passe : c'est au
  * selecteur, qui filtre deja, d'avoir eu le dernier mot.
  *
- * Les trois champs de fichier (l'ancien FileField, DragAndDropFile natif et web) faisaient ce filtrage
+ * Les trois champs de fichier (l'ancien FileField, l'ancien DragAndDropFile natif et web) faisaient ce filtrage
  * chacun dans son coin, et avaient deja diverge : FileField reconnaissait les types avec ses
  * propres comparaisons de chaines, plus laches que celles des deux autres, et ne verifiait que
  * le premier fichier d'une selection multiple. Un meme fichier pouvait donc etre accepte ici et