@acvl/mobile-components 0.0.1 → 0.0.2

package/src/camara/CampoDeFotos.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { Controller, type FieldValues } from "react-hook-form";
+import { View } from "react-native";
+import BotonGrande from "../componentes/BotonGrande";
+import TiraDeFotos, { type FotoDeLaTira } from "../componentes/TiraDeFotos";
+import { Campo } from "../formularios/campos";
+import type { CampoAtado, SinValor } from "../formularios/controlados";
+import { crearEstilos } from "../tema";
+import {
+    elegirDeGaleria,
+    tomarFoto,
+    type AlTomarFoto,
+    type ArchivoElegido,
+    type PermisoDeCamara,
+} from "./elegir";
+
+/** El lado de cada miniatura: cabe un renglón de tres en un teléfono angosto. */
+const LADO = 96;
+
+/**
+ * Fotos que se capturan con un formulario y suben al guardarlo (la evidencia de un alta, el cierre
+ * de una revisión): sus miniaturas, cada una con su «×» y abriendo el visor, y debajo **Tomar foto**
+ * y **De la galería**. Lo que se guarda es la lista de `ArchivoElegido` ya reducidos; subirlos es
+ * de quien guarda.
+ *
+ * Las que suben al momento, sin esperar a un formulario (las de una ficha que ya existe), no van
+ * aquí: ésas son una `TiraDeFotos` con sus botones.
+ */
+export function CampoDeFotos({
+    etiqueta,
+    ayuda,
+    error,
+    valor,
+    onCambiar,
+    permiso,
+    varias = true,
+    alTomar,
+    disabled,
+}: {
+    etiqueta?: string;
+    ayuda?: string;
+    error?: string;
+    valor: ArchivoElegido[];
+    onCambiar: (valor: ArchivoElegido[]) => void;
+    /** Para qué se pide la cámara, si todavía no hay permiso. */
+    permiso: PermisoDeCamara;
+    /** Con `false`, una nueva reemplaza a la que había. */
+    varias?: boolean;
+    /** Lo que se hace con la original de la cámara (guardarla en la galería): ver `AlTomarFoto`. */
+    alTomar?: AlTomarFoto;
+    disabled?: boolean;
+}) {
+    const styles = useStyles();
+    // Reducir una foto tarda (se decodifica completa): el botón gira mientras tanto.
+    const [eligiendo, setEligiendo] = React.useState<"camara" | "galeria" | null>(null);
+
+    const agregar = async (de: "camara" | "galeria") => {
+        setEligiendo(de);
+        try {
+            const nuevas =
+                de === "camara"
+                    ? await tomarFoto(permiso, { alTomar })
+                    : await elegirDeGaleria({ varias });
+            if (nuevas.length) onCambiar(varias ? [...valor, ...nuevas] : nuevas.slice(0, 1));
+        } finally {
+            setEligiendo(null);
+        }
+    };
+
+    const fotos: FotoDeLaTira[] = valor.map((f, i) => ({
+        llave: `${f.uri}-${i}`,
+        esFoto: f.esFoto,
+        miniatura: { uri: f.uri },
+        nombre: f.nombre,
+        onQuitar: disabled ? undefined : () => onCambiar(valor.filter((_, j) => j !== i)),
+    }));
+
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            <View style={styles.contenido}>
+                <TiraDeFotos fotos={fotos} lado={LADO} cuadricula />
+                <View style={styles.botones}>
+                    <BotonGrande
+                        icono="camera-outline"
+                        modo="contorno"
+                        cargando={eligiendo === "camara"}
+                        disabled={disabled || eligiendo !== null}
+                        onPress={() => void agregar("camara")}
+                    >
+                        Tomar foto
+                    </BotonGrande>
+                    <BotonGrande
+                        icono="image-outline"
+                        modo="contorno"
+                        cargando={eligiendo === "galeria"}
+                        disabled={disabled || eligiendo !== null}
+                        onPress={() => void agregar("galeria")}
+                    >
+                        De la galería
+                    </BotonGrande>
+                </View>
+            </View>
+        </Campo>
+    );
+}
+
+/** `CampoDeFotos` atado a react-hook-form: el valor es la lista de `ArchivoElegido`. */
+export function FotosControladas<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeFotos>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeFotos
+                    {...props}
+                    valor={(value as ArchivoElegido[] | null) ?? []}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+const useStyles = crearEstilos(() => ({
+    contenido: { gap: 12 },
+    botones: { gap: 8 },
+}));

package/src/camara/elegir.ts

@@ -0,0 +1,113 @@
+// Tomar una foto o elegirla de la galería para subirla. Contesta lo elegido ya listo para el
+// `FormData` (reducido a 1920 px); qué se hace con él —subirlo en el momento, guardarlo para una
+// cola— es de quien llama. Los documentos (un PDF) están en `fotos/`, que pide expo-document-picker.
+import * as ImagePicker from "expo-image-picker";
+import { avisar } from "../dialogos/dialogos";
+import { reducirFoto } from "./reducir";
+
+/** Lo elegido: dónde está en el teléfono, su nombre, su tipo y si es una foto. */
+export interface ArchivoElegido {
+    uri: string;
+    nombre: string;
+    tipo: string;
+    esFoto: boolean;
+}
+
+/** Para qué se pide la cámara, dicho a quien la usa. */
+export interface PermisoDeCamara {
+    /** «tomar las fotos de evidencia»: va en «Para …, activa la cámara en los ajustes». */
+    para: string;
+    /**
+     * Lo que se explica antes del diálogo del sistema la primera vez: por qué y cuándo se usa. Sin
+     * esto, va directo al del sistema.
+     */
+    explicacion?: string;
+}
+
+/**
+ * Lo que se hace con la foto **original** de la cámara antes de reducirla: guardarla en la galería
+ * del teléfono, por ejemplo, como respaldo de quien la tomó si la subida falla. Lo que falle aquí
+ * no detiene la foto.
+ */
+export type AlTomarFoto = (original: ImagePicker.ImagePickerAsset) => unknown;
+
+/**
+ * El permiso de la cámara. Si ya se negó para siempre, se dice dónde activarlo; si nunca se ha
+ * pedido, primero la explicación de la app (si hay) y luego el diálogo del sistema.
+ */
+export async function pedirPermisoDeCamara({
+    para,
+    explicacion,
+}: PermisoDeCamara): Promise<boolean> {
+    const actual = await ImagePicker.getCameraPermissionsAsync();
+    if (actual.granted) return true;
+    if (!actual.canAskAgain) {
+        await avisar({
+            titulo: "Sin permiso de cámara",
+            mensaje: `Para ${para}, activa la cámara para la app en los ajustes del teléfono.`,
+            icono: "camera-off-outline",
+        });
+        return false;
+    }
+    if (explicacion) {
+        await avisar({
+            titulo: "La cámara",
+            mensaje: explicacion,
+            icono: "camera-outline",
+            cancelable: false,
+        });
+    }
+    return (await ImagePicker.requestCameraPermissionsAsync()).granted;
+}
+
+/**
+ * Las imágenes elegidas, reducidas a 1920 px en JPEG (`reducirFoto`). Una por una y no con
+ * `Promise.all`: cada foto se decodifica completa en memoria, y veinte a la vez desde la galería
+ * pueden tumbar la app en un Android modesto.
+ */
+export async function deFotos(assets: ImagePicker.ImagePickerAsset[]): Promise<ArchivoElegido[]> {
+    const elegidos: ArchivoElegido[] = [];
+    for (const asset of assets) {
+        const reducida = await reducirFoto(asset);
+        elegidos.push({
+            uri: reducida.uri,
+            nombre: reducida.fileName ?? "foto.jpg",
+            tipo: reducida.mimeType ?? "image/jpeg",
+            esFoto: true,
+        });
+    }
+    return elegidos;
+}
+
+/** Una foto con la cámara, con su permiso. Vacío si no hubo permiso o se canceló. */
+export async function tomarFoto(
+    permiso: PermisoDeCamara,
+    { alTomar }: { alTomar?: AlTomarFoto } = {},
+): Promise<ArchivoElegido[]> {
+    if (!(await pedirPermisoDeCamara(permiso))) return [];
+    const resultado = await ImagePicker.launchCameraAsync({ mediaTypes: ["images"], quality: 1 });
+    if (resultado.canceled) return [];
+    if (alTomar) {
+        for (const original of resultado.assets) {
+            try {
+                await alTomar(original);
+            } catch (error) {
+                console.warn("No se pudo guardar la original de la foto.", error);
+            }
+        }
+    }
+    return deFotos(resultado.assets);
+}
+
+/**
+ * De la galería. En Android el selector de fotos del sistema no pide permiso de almacenamiento,
+ * así que no hay explicación previa que dar.
+ */
+export async function elegirDeGaleria({ varias = false } = {}): Promise<ArchivoElegido[]> {
+    const resultado = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ["images"],
+        allowsMultipleSelection: varias,
+        quality: 1,
+    });
+    return resultado.canceled ? [] : deFotos(resultado.assets);
+}

package/src/camara/index.ts

@@ -0,0 +1,15 @@
+// `@acvl/mobile-components/camara`: tomar fotos o elegirlas de la galería, y el campo de fotos de un
+// formulario. Va aparte de la entrada principal porque usa expo-image-picker y
+// expo-image-manipulator, que sólo instala la app que sube fotos; y aparte de `fotos` porque ésa
+// además elige documentos, con expo-document-picker.
+export { CampoDeFotos, FotosControladas } from "./CampoDeFotos";
+export {
+    deFotos,
+    elegirDeGaleria,
+    pedirPermisoDeCamara,
+    tomarFoto,
+    type AlTomarFoto,
+    type ArchivoElegido,
+    type PermisoDeCamara,
+} from "./elegir";
+export { LADO_MAXIMO, reducirFoto, reducirImagenAdjunta } from "./reducir";

package/src/componentes/Tarjeta.tsx

@@ -1,6 +1,14 @@
+import React from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
 import { crearEstilos } from "../tema";
 
+/**
+ * Si lo de adentro está en una hoja que sube desde abajo (`HojaInferior`, `HojaDeLista`). La hoja
+ * es de la superficie, igual que una tarjeta: ahí la tarjeta va del color del fondo, o no se
+ * distinguiría un renglón del siguiente. Lo ponen las hojas; las pantallas no lo tocan.
+ */
+export const EnHoja = React.createContext(false);
+
 /**
  * La tarjeta de la casa, sola: la superficie, sus esquinas y su aire, con lo que se le ponga
  * adentro. Es de lo que están hechas `TarjetaDeLista` y las fichas; una pantalla la usa para lo que
@@ -8,6 +16,9 @@ import { crearEstilos } from "../tema";
  *
  * **Sin sombra**: en oscuro casi no se ve, así que lo que separa la tarjeta del fondo es el color
  * de la superficie y, en oscuro, un borde. Con `onPress` se toca y se atenúa al presionarla.
+ *
+ * Dentro de una hoja (`EnHoja`) va del color del fondo, así las listas de una pantalla se pueden
+ * enseñar también en una hoja sin otra versión de su renglón.
  */
 export default function Tarjeta({
     children,
@@ -19,12 +30,14 @@ export default function Tarjeta({
     style?: StyleProp<ViewStyle>;
 }) {
     const styles = useStyles();
-    if (!onPress) return <View style={[styles.tarjeta, style]}>{children}</View>;
+    const enHoja = React.useContext(EnHoja);
+    const base = [styles.tarjeta, enHoja && styles.enHoja];
+    if (!onPress) return <View style={[base, style]}>{children}</View>;
     return (
         <Pressable
             onPress={onPress}
             accessibilityRole="button"
-            style={({ pressed }) => [styles.tarjeta, style, pressed && styles.presionada]}
+            style={({ pressed }) => [base, style, pressed && styles.presionada]}
         >
             {children}
         </Pressable>
@@ -40,5 +53,6 @@ const useStyles = crearEstilos((c) => ({
         borderWidth: c.esOscuro ? 1 : 0,
         borderColor: c.secondaryLighter,
     },
+    enHoja: { backgroundColor: c.fondo },
     presionada: { opacity: 0.7 },
 }));

package/src/formularios/CampoDeSeleccion.tsx

@@ -1,4 +1,6 @@
 import { View } from "react-native";
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { Text } from "../texto";
 import { ErrorDelCampo } from "./campos";
 import SelectorDeOpcion, {
     SelectorDeVarias,
@@ -18,11 +20,14 @@ import SelectorDeOpcion, {
  */
 export default function CampoDeSeleccion<T extends Opcion>({
     error,
+    ayuda,
     ...props
-}: PropsDeSelectorDeOpcion<T> & { error?: string }) {
+}: PropsDeSelectorDeOpcion<T> & { error?: string; ayuda?: string }) {
+    const styles = useStyles();
     return (
-        <View>
+        <View style={styles.campo}>
             <SelectorDeOpcion<T> {...props} />
+            {ayuda ? <Text style={styles.ayuda}>{ayuda}</Text> : null}
             <ErrorDelCampo error={error} />
         </View>
     );
@@ -35,12 +40,21 @@ export default function CampoDeSeleccion<T extends Opcion>({
  */
 export function CampoDeVarias<T extends Opcion>({
     error,
+    ayuda,
     ...props
-}: PropsDeSelectorDeVarias<T> & { error?: string }) {
+}: PropsDeSelectorDeVarias<T> & { error?: string; ayuda?: string }) {
+    const styles = useStyles();
     return (
-        <View>
+        <View style={styles.campo}>
             <SelectorDeVarias<T> {...props} />
+            {ayuda ? <Text style={styles.ayuda}>{ayuda}</Text> : null}
             <ErrorDelCampo error={error} />
         </View>
     );
 }
+
+// La ayuda con el mismo renglón y color que la de los demás campos (`Campo`).
+const useStyles = crearEstilos((c) => ({
+    campo: { gap: 6 },
+    ayuda: { ...renglon(tipografia.secundario), color: c.secondary },
+}));

package/src/formularios/campos.tsx

@@ -117,6 +117,8 @@ export function CampoDeFechaHora({
     error,
     opcional,
     ayuda,
+    desde,
+    hasta,
 }: {
     etiqueta: string;
     valor: Date | null;
@@ -124,6 +126,9 @@ export function CampoDeFechaHora({
     error?: string;
     opcional?: boolean;
     ayuda?: string;
+    /** El primer y el último momento que el selector deja elegir, como en `CampoDeFecha`. */
+    desde?: Date;
+    hasta?: Date;
 }) {
     const c = usePaleta();
     const styles = useStyles();
@@ -185,6 +190,8 @@ export function CampoDeFechaHora({
                     value={base}
                     mode={eligiendo}
                     is24Hour
+                    minimumDate={desde}
+                    maximumDate={hasta}
                     onChange={(evento, elegida) => {
                         const paso = eligiendo;
                         setEligiendo(null);
@@ -261,6 +268,8 @@ export function CampoDeFecha({
     error,
     opcional,
     ayuda,
+    desde,
+    hasta,
 }: {
     etiqueta: string;
     valor: string | null;
@@ -268,6 +277,9 @@ export function CampoDeFecha({
     error?: string;
     opcional?: boolean;
     ayuda?: string;
+    /** Los días que el selector deja elegir: una recepción no puede ser de mañana (`hasta`). */
+    desde?: Date;
+    hasta?: Date;
 }) {
     const c = usePaleta();
     const styles = useStyles();
@@ -310,6 +322,8 @@ export function CampoDeFecha({
                 <DateTimePicker
                     value={fecha?.toDate() ?? new Date()}
                     mode="date"
+                    minimumDate={desde}
+                    maximumDate={hasta}
                     onChange={(evento, elegida) => {
                         setEligiendo(false);
                         if (evento.type === "set" && elegida) {

package/src/formularios/controlados.tsx

@@ -41,7 +41,9 @@ export function TextoControlado<T extends FieldValues>({
             render={({ field: { value, onChange }, fieldState }) => (
                 <CampoDeTexto
                     {...props}
-                    valor={value ?? ""}
+                    // Un número del formulario (un conteo, un monto) también se escribe aquí: el
+                    // TextInput sólo sabe de texto.
+                    valor={value == null ? "" : String(value)}
                     onCambiar={onChange}
                     error={fieldState.error?.message}
                 />

package/src/fotos/elegir.ts

@@ -1,19 +1,16 @@
-// Elegir una foto o un archivo para subirlo: de la cámara, de la galería o un documento. Contesta lo
-// elegido ya listo para el `FormData` (las fotos reducidas a 1920 px); qué se hace con él —subirlo
-// en el momento, guardarlo para una cola— es de quien llama.
+// Elegir un documento para subirlo, o preguntar de dónde (cámara, galería o documento). Contesta lo
+// elegido ya listo para el `FormData`; qué se hace con él es de quien llama. La cámara y la
+// galería solas están en `camara/`, que no pide expo-document-picker.
 import * as DocumentPicker from "expo-document-picker";
 import { File } from "expo-file-system";
-import * as ImagePicker from "expo-image-picker";
+import {
+    elegirDeGaleria,
+    tomarFoto,
+    type ArchivoElegido,
+    type PermisoDeCamara,
+} from "../camara/elegir";
+import { reducirImagenAdjunta } from "../camara/reducir";
 import { avisar, mostrarDialogo } from "../dialogos/dialogos";
-import { reducirFoto, reducirImagenAdjunta } from "./reducir";
-
-/** Lo elegido: dónde está en el teléfono, su nombre, su tipo y si es una foto. */
-export interface ArchivoElegido {
-    uri: string;
-    nombre: string;
-    tipo: string;
-    esFoto: boolean;
-}
 
 /** El tope de un archivo en el servidor (`ConArchivoSubido.TAMANO_MAXIMO`): 25 MB. */
 export const TAMANO_MAXIMO_BYTES = 25 * 1024 * 1024;
@@ -30,81 +27,6 @@ export const TIPOS_DE_ADJUNTO = [
     "text/csv",
 ];
 
-/** Para qué se pide la cámara, dicho a quien la usa. */
-export interface PermisoDeCamara {
-    /** «tomar las fotos de evidencia»: va en «Para …, activa la cámara en los ajustes». */
-    para: string;
-    /**
-     * Lo que se explica antes del diálogo del sistema la primera vez: por qué y cuándo se usa. Sin
-     * esto, va directo al del sistema.
-     */
-    explicacion?: string;
-}
-
-/**
- * El permiso de la cámara. Si ya se negó para siempre, se dice dónde activarlo; si nunca se ha
- * pedido, primero la explicación de la app (si hay) y luego el diálogo del sistema.
- */
-export async function pedirPermisoDeCamara({
-    para,
-    explicacion,
-}: PermisoDeCamara): Promise<boolean> {
-    const actual = await ImagePicker.getCameraPermissionsAsync();
-    if (actual.granted) return true;
-    if (!actual.canAskAgain) {
-        await avisar({
-            titulo: "Sin permiso de cámara",
-            mensaje: `Para ${para}, activa la cámara para la app en los ajustes del teléfono.`,
-            icono: "camera-off-outline",
-        });
-        return false;
-    }
-    if (explicacion) {
-        await avisar({
-            titulo: "La cámara",
-            mensaje: explicacion,
-            icono: "camera-outline",
-            cancelable: false,
-        });
-    }
-    return (await ImagePicker.requestCameraPermissionsAsync()).granted;
-}
-
-/** Las imágenes elegidas, reducidas a 1920 px en JPEG (`reducirFoto`). */
-async function deFotos(assets: ImagePicker.ImagePickerAsset[]): Promise<ArchivoElegido[]> {
-    const elegidos: ArchivoElegido[] = [];
-    for (const asset of assets) {
-        const reducida = await reducirFoto(asset);
-        elegidos.push({
-            uri: reducida.uri,
-            nombre: reducida.fileName ?? "foto.jpg",
-            tipo: reducida.mimeType ?? "image/jpeg",
-            esFoto: true,
-        });
-    }
-    return elegidos;
-}
-
-/** Una foto con la cámara, con su permiso. Vacío si no hubo permiso o se canceló. */
-export async function tomarFoto(permiso: PermisoDeCamara): Promise<ArchivoElegido[]> {
-    if (!(await pedirPermisoDeCamara(permiso))) return [];
-    const resultado = await ImagePicker.launchCameraAsync({ mediaTypes: ["images"], quality: 1 });
-    return resultado.canceled ? [] : deFotos(resultado.assets);
-}
-
-/**
- * De la galería. En Android el selector de fotos del sistema no pide permiso de almacenamiento,
- * así que no hay explicación previa que dar.
- */
-export async function elegirDeGaleria({ varias = false } = {}): Promise<ArchivoElegido[]> {
-    const resultado = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ["images"],
-        allowsMultipleSelection: varias,
-        quality: 1,
-    });
-    return resultado.canceled ? [] : deFotos(resultado.assets);
-}
-
 /**
  * Documentos (un PDF, una foto ya escaneada). Uno más pesado que el tope del servidor se rechaza al
  * subirlo, así que se avisa aquí y se deja fuera. Una imagen adjuntada como archivo también se

package/src/fotos/index.ts

@@ -1,15 +1,6 @@
 // `@acvl/mobile-components/fotos`: tomar y elegir fotos y archivos. Va aparte de la entrada
 // principal porque usa expo-image-picker, expo-image-manipulator, expo-document-picker y
-// expo-file-system, que sólo instala la app que sube fotos.
-export {
-    elegirAdjunto,
-    elegirDeGaleria,
-    elegirDocumentos,
-    pedirPermisoDeCamara,
-    TAMANO_MAXIMO_BYTES,
-    TIPOS_DE_ADJUNTO,
-    tomarFoto,
-    type ArchivoElegido,
-    type PermisoDeCamara,
-} from "./elegir";
-export { LADO_MAXIMO, reducirFoto, reducirImagenAdjunta } from "./reducir";
+// expo-file-system, que sólo instala la app que sube archivos. Lo de la cámara sola (sin
+// documentos) está también en `camara`.
+export * from "../camara";
+export { elegirAdjunto, elegirDocumentos, TAMANO_MAXIMO_BYTES, TIPOS_DE_ADJUNTO } from "./elegir";