@acvl/mobile-components 0.0.0-stage → 0.0.2

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/camara/reducir.ts

@@ -0,0 +1,87 @@
+// Achicar las fotos en el teléfono antes de subirlas.
+import { ImageManipulator, SaveFormat } from "expo-image-manipulator";
+import type { ImagePickerAsset } from "expo-image-picker";
+import { Image } from "react-native";
+
+/**
+ * Lado más largo con el que se sube una foto. Es el mismo con el que el backend la guarda
+ * (`MAX_DIMENSION` en `core/shared/fields.py`): arriba de eso los píxeles viajan para que el
+ * servidor los tire.
+ */
+export const LADO_MAXIMO = 1920;
+
+/** Calidad JPEG de la copia reducida; el backend recodifica a 82 al guardarla. */
+const CALIDAD = 0.8;
+
+/**
+ * La foto con su lado más largo en `LADO_MAXIMO` y codificada en JPEG.
+ *
+ * Una foto de la cámara (12 MP o más) pesa de 2 a 5 MB, y se sube con la señal que haya en el
+ * camino o en el patio: reducida pesa unos cientos de KB, sale antes y no se pasa del tope
+ * de tamaño del servidor. El servidor no pierde nada, porque de todos modos la guarda a 1920 px.
+ *
+ * Falla en blando: si no se puede reducir, se guarda la original —pesa más, pero es mejor que
+ * perder la foto que se acaba de tomar—.
+ */
+export async function reducirFoto(asset: ImagePickerAsset): Promise<ImagePickerAsset> {
+    const { width, height } = asset;
+    const cabe = width > 0 && height > 0 && Math.max(width, height) <= LADO_MAXIMO;
+    if (cabe && asset.mimeType === "image/jpeg") return asset;
+
+    try {
+        const contexto = ImageManipulator.manipulate(asset.uri);
+        if (!cabe) {
+            // Se da un solo lado y el otro sale de la proporción.
+            contexto.resize(width >= height ? { width: LADO_MAXIMO } : { height: LADO_MAXIMO });
+        }
+        const imagen = await contexto.renderAsync();
+        const reducida = await imagen.saveAsync({ compress: CALIDAD, format: SaveFormat.JPEG });
+
+        const base = (asset.fileName ?? reducida.uri.split("/").pop() ?? "foto").replace(
+            /\.[^.]+$/,
+            "",
+        );
+        return {
+            ...asset,
+            uri: reducida.uri,
+            width: reducida.width,
+            height: reducida.height,
+            fileName: `${base}.jpg`,
+            mimeType: "image/jpeg",
+            fileSize: undefined,
+        };
+    } catch (error) {
+        console.warn("No se pudo reducir la foto; se sube la original.", error);
+        return asset;
+    }
+}
+
+/**
+ * Lo mismo para una imagen adjuntada como archivo (`DocumentPicker`), que no trae sus medidas: se
+ * leen del archivo y se reduce como una foto. Si no se pueden leer, se guarda la original.
+ */
+export async function reducirImagenAdjunta(archivo: {
+    uri: string;
+    nombre: string;
+    tipo: string;
+}): Promise<{ uri: string; nombre: string; tipo: string }> {
+    try {
+        const { width, height } = await Image.getSize(archivo.uri);
+        const reducida = await reducirFoto({
+            uri: archivo.uri,
+            width,
+            height,
+            fileName: archivo.nombre,
+            mimeType: archivo.tipo,
+            type: "image",
+        });
+        return {
+            uri: reducida.uri,
+            nombre: reducida.fileName ?? archivo.nombre,
+            tipo: reducida.mimeType ?? archivo.tipo,
+        };
+    } catch (error) {
+        console.warn("No se pudieron leer las medidas de la imagen; se sube la original.", error);
+        return archivo;
+    }
+}

package/src/componentes/AccionesDelEncabezado.tsx

@@ -0,0 +1,247 @@
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import {
+    ActivityIndicator,
+    BackHandler,
+    Pressable,
+    useWindowDimensions,
+    View,
+    type LayoutChangeEvent,
+} from "react-native";
+import { Menu } from "react-native-paper";
+
+/** Lo que mide un botón y lo que se separan: con eso se cuenta cuántos caben. */
+const LADO = 40;
+const ENTRE = 8;
+/** Los que se ven a lo más, aunque quepan más: más botones ya no se distinguen de un vistazo. */
+const MAXIMO_A_LA_VISTA = 3;
+
+export interface AccionDelEncabezado {
+    /** El texto del renglón del menú y lo que lee el lector de pantalla. */
+    etiqueta: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    onPress: () => void;
+    disabled?: boolean;
+    /** Un indicador en vez del icono, y la acción bloqueada mientras corre. */
+    cargando?: boolean;
+    /** Para la que borra o cancela: en rojo, en el botón y en el menú. */
+    destructiva?: boolean;
+    /** Las fijadas son las últimas en irse al menú (Editar). */
+    fijada?: boolean;
+    /**
+     * Una cifra pendiente de la acción: los mensajes sin leer de un hilo. Va sobre su botón o, si
+     * la acción se fue al menú, en su renglón — y entonces los tres puntos la suman, porque una
+     * cifra escondida no avisa de nada.
+     */
+    insignia?: number;
+}
+
+/**
+ * La cifra sobre un botón: «9+» de diez para arriba, que más dígitos no caben en el círculo. Con la
+ * letra de la casa (`etiqueta`) y el círculo crece con la del sistema, como el de `RotuloDeSeccion`.
+ */
+const Insignia = ({ cuantas }: { cuantas: number }) => {
+    const styles = useStyles();
+    const { fontScale } = useWindowDimensions();
+    const alto = renglon(tipografia.etiqueta).lineHeight * fontScale;
+    return (
+        <View
+            style={[styles.insignia, { minWidth: alto, height: alto, borderRadius: alto / 2 }]}
+            pointerEvents="none"
+        >
+            <Text style={styles.insigniaTexto}>{cuantas > 9 ? "9+" : cuantas}</Text>
+        </View>
+    );
+};
+
+const Boton = ({
+    accion,
+    onPress,
+}: {
+    accion: Pick<
+        AccionDelEncabezado,
+        "etiqueta" | "icono" | "disabled" | "cargando" | "destructiva" | "insignia"
+    >;
+    onPress: () => void;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={accion.disabled || accion.cargando}
+            accessibilityRole="button"
+            accessibilityLabel={accion.etiqueta}
+            hitSlop={4}
+            style={({ pressed }) => [
+                styles.boton,
+                accion.disabled && styles.apagado,
+                pressed && styles.presionado,
+            ]}
+        >
+            {accion.cargando ? (
+                <ActivityIndicator size="small" color={c.primary} />
+            ) : (
+                <MaterialCommunityIcons
+                    name={accion.icono}
+                    size={22}
+                    color={accion.destructiva ? c.primary : c.secondaryDark}
+                />
+            )}
+            {accion.insignia ? <Insignia cuantas={accion.insignia} /> : null}
+        </Pressable>
+    );
+};
+
+/**
+ * Las acciones de una ficha en su encabezado: **las que quepan como botones y las demás en el menú
+ * de los tres puntos**. Es el `ResponsiveActions` de la app de acv-wms con la paleta de la casa.
+ *
+ * No mide los botones: mide el hueco que le deja el título (`onLayout`) y cuenta cuántos de
+ * `LADO` caben. Si caben todas, van todas; si no, una menos y el menú. Las `fijadas` son las
+ * últimas en irse, sin cambiar el orden en que se ven. Quien la pone le da al título
+ * `flexShrink: 1` y no `flex: 1`, para que le deje espacio.
+ */
+export default function AccionesDelEncabezado({ acciones }: { acciones: AccionDelEncabezado[] }) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const [hueco, setHueco] = React.useState<number | null>(null);
+    const [menuAbierto, setMenuAbierto] = React.useState(false);
+
+    // Atrás con el menú abierto sólo lo cierra: si no, salía de la pantalla con el menú encima.
+    React.useEffect(() => {
+        if (!menuAbierto) return;
+        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+            setMenuAbierto(false);
+            return true;
+        });
+        return () => sub.remove();
+    }, [menuAbierto]);
+
+    const medir = (e: LayoutChangeEvent) => {
+        const ancho = e.nativeEvent.layout.width;
+        if (ancho === hueco) return;
+        setHueco(ancho);
+        setMenuAbierto(false);
+    };
+
+    if (!acciones.length) return null;
+
+    const caben = hueco === null ? 0 : Math.floor((hueco + ENTRE) / (LADO + ENTRE));
+    const todas = acciones.length <= Math.min(caben, MAXIMO_A_LA_VISTA);
+    const botones = todas ? acciones.length : Math.max(Math.min(caben - 1, MAXIMO_A_LA_VISTA), 0);
+    const aLaVista = new Set(
+        [...acciones]
+            .sort((a, b) => Number(Boolean(b.fijada)) - Number(Boolean(a.fijada)))
+            .slice(0, botones),
+    );
+    const visibles = acciones.filter((a) => aLaVista.has(a));
+    const enElMenu = acciones.filter((a) => !aLaVista.has(a));
+    const escondidas = enElMenu.reduce((suma, a) => suma + (a.insignia ?? 0), 0);
+    const cerrar = () => setMenuAbierto(false);
+
+    return (
+        <View style={styles.barra} onLayout={medir}>
+            {hueco !== null ? (
+                <>
+                    {visibles.map((a) => (
+                        <Boton key={a.etiqueta} accion={a} onPress={a.onPress} />
+                    ))}
+                    {enElMenu.length ? (
+                        <Menu
+                            visible={menuAbierto}
+                            onDismiss={cerrar}
+                            anchorPosition="bottom"
+                            // Edge-to-edge: sin esto Paper cuenta dos veces la barra de estado.
+                            statusBarHeight={0}
+                            contentStyle={styles.menu}
+                            anchor={
+                                <Boton
+                                    accion={{
+                                        etiqueta: "Más acciones",
+                                        icono: "dots-vertical",
+                                        insignia: escondidas,
+                                    }}
+                                    onPress={() => setMenuAbierto(true)}
+                                />
+                            }
+                        >
+                            {enElMenu.map((a) => (
+                                <Menu.Item
+                                    key={a.etiqueta}
+                                    title={
+                                        <Text
+                                            style={[styles.menuTexto, a.destructiva && styles.rojo]}
+                                        >
+                                            {a.etiqueta}
+                                            {a.insignia ? ` (${a.insignia})` : ""}
+                                        </Text>
+                                    }
+                                    disabled={a.disabled || a.cargando}
+                                    leadingIcon={() =>
+                                        a.cargando ? (
+                                            <ActivityIndicator size="small" color={c.primary} />
+                                        ) : (
+                                            <MaterialCommunityIcons
+                                                name={a.icono}
+                                                size={22}
+                                                color={a.destructiva ? c.primary : c.secondaryDark}
+                                            />
+                                        )
+                                    }
+                                    onPress={() => {
+                                        cerrar();
+                                        a.onPress();
+                                    }}
+                                />
+                            ))}
+                        </Menu>
+                    ) : null}
+                </>
+            ) : null}
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    barra: {
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: LADO,
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        gap: ENTRE,
+        alignSelf: "center",
+    },
+    boton: {
+        width: LADO,
+        height: LADO,
+        borderRadius: LADO / 2,
+        borderWidth: 1.5,
+        borderColor: c.secondaryLighter,
+        backgroundColor: c.superficieTenue,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    apagado: { opacity: 0.45 },
+    presionado: { opacity: 0.7 },
+    menu: { backgroundColor: c.superficie, borderRadius: 12 },
+    insignia: {
+        position: "absolute",
+        // Dentro del círculo y no colgada de su esquina: en Android lo que se sale del padre se
+        // recorta, y la cifra quedaba a medias.
+        top: 0,
+        right: 0,
+        paddingHorizontal: 4,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: c.primary,
+        borderWidth: 2,
+        borderColor: c.superficie,
+    },
+    insigniaTexto: { ...renglon(tipografia.etiqueta), fontWeight: "800", color: c.sobrePrimario },
+    menuTexto: { fontSize: 17, fontWeight: "600" },
+    rojo: { color: c.primary },
+}));

package/src/componentes/BotonDeAvatar.tsx

@@ -0,0 +1,59 @@
+import { Pressable, StyleSheet } from "react-native";
+import { Avatar } from "react-native-paper";
+import { tipografia } from "../tema";
+
+/**
+ * La inicial de cada parte, hasta dos: `inicialesDe(nombre, apellidos)` da «JP»; con sólo el nombre
+ * de la cuenta, su primera letra; sin nada, una inicial neutra.
+ */
+export const inicialesDe = (...partes: (string | null | undefined)[]): string =>
+    (
+        partes
+            .map((p) => (p ?? "").trim().charAt(0))
+            .filter(Boolean)
+            .slice(0, 2)
+            .join("") || "?"
+    ).toUpperCase();
+
+/**
+ * El avatar de quien entró, en el header de las pestañas: el acceso al perfil (y a cerrar sesión).
+ * Quien lo pone decide las iniciales y a dónde lleva.
+ */
+const BotonDeAvatar = ({
+    iniciales,
+    onPress,
+    etiqueta = "Perfil",
+}: {
+    iniciales: string;
+    onPress: () => void;
+    /** Lo que lee el lector de pantalla. */
+    etiqueta?: string;
+}) => (
+    <Pressable
+        onPress={onPress}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel={etiqueta}
+        style={({ pressed }) => [styles.btn, pressed && { opacity: 0.6 }]}
+    >
+        <Avatar.Text
+            size={36}
+            label={iniciales.slice(0, 2).toUpperCase()}
+            // Blanca sobre el rojo en los dos modos: el tema oscuro de Paper la ponía oscura.
+            color="#ffffff"
+            labelStyle={styles.initial}
+        />
+    </Pressable>
+);
+
+const styles = StyleSheet.create({
+    btn: {
+        width: 40,
+        height: 40,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    initial: { fontSize: tipografia.etiqueta, fontWeight: "700", lineHeight: 20 },
+});
+
+export default BotonDeAvatar;

package/src/componentes/BotonGrande.tsx

@@ -0,0 +1,100 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { ActivityIndicator, Pressable, View } from "react-native";
+
+interface Props {
+    children: string;
+    icono?: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    onPress: () => void;
+    disabled?: boolean;
+    cargando?: boolean;
+    /**
+     * `relleno` para la acción principal; `contorno` para las de apoyo; `destructivo` para la que
+     * borra o deshace algo (Deshacer, Descartar, Cerrar sesión), en rojo oscuro; `listo` para algo
+     * ya cumplido que todavía se puede abrir (la evidencia completa), en verde.
+     */
+    modo?: "relleno" | "contorno" | "destructivo" | "listo";
+}
+
+/**
+ * El botón de una acción del flujo (Iniciar, Completar, Reintentar): ancho completo, alto
+ * generoso y letra de subtítulo, para atinarle de pie y con la letra del teléfono al 180%.
+ *
+ * Es propio y no el `Button` de Paper porque ése corta su texto a un renglón: con la letra grande
+ * «Iniciar asignación desde donde estás» quedaba en «Iniciar asignac…». Aquí el texto parte en los
+ * renglones que haga falta y el botón crece con él.
+ */
+const BotonGrande = ({ children, icono, onPress, disabled, cargando, modo = "relleno" }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const inactivo = disabled || cargando;
+    // El destructivo es un relleno de otro color: misma tinta blanca, mismo apagado.
+    const relleno = modo !== "contorno";
+    const tinta = relleno ? c.sobrePrimario : c.primary;
+
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={inactivo}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: !!inactivo, busy: !!cargando }}
+            style={({ pressed }) => [
+                styles.boton,
+                relleno
+                    ? modo === "destructivo"
+                        ? styles.destructivo
+                        : modo === "listo"
+                          ? styles.listo
+                          : styles.relleno
+                    : styles.contorno,
+                inactivo && (relleno ? styles.rellenoInactivo : styles.contornoInactivo),
+                pressed && { opacity: 0.85 },
+            ]}
+        >
+            <View style={styles.fila}>
+                {cargando ? (
+                    <ActivityIndicator color={tinta} />
+                ) : icono ? (
+                    <IconoDeRenglon
+                        name={icono}
+                        fontSize={tipografia.subtitulo}
+                        size={26}
+                        color={inactivo ? c.secondaryLight : tinta}
+                    />
+                ) : null}
+                <Text style={[styles.texto, { color: inactivo ? c.secondaryLight : tinta }]}>
+                    {children}
+                </Text>
+            </View>
+        </Pressable>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    boton: {
+        minHeight: 64,
+        borderRadius: 14,
+        paddingVertical: 14,
+        paddingHorizontal: 18,
+        justifyContent: "center",
+    },
+    relleno: { backgroundColor: c.primary },
+    destructivo: { backgroundColor: c.primaryDark },
+    // Un relleno con letra blanca: el verde oscuro se lee igual en los dos modos.
+    listo: { backgroundColor: "#2e7d32" },
+    rellenoInactivo: { backgroundColor: c.secondaryLighter },
+    contorno: { borderWidth: 2, borderColor: c.primary, backgroundColor: c.superficie },
+    contornoInactivo: { borderColor: c.secondaryLighter },
+    fila: { flexDirection: "row", alignItems: "flex-start", justifyContent: "center", gap: 10 },
+    texto: {
+        flexShrink: 1,
+        ...renglon(tipografia.subtitulo),
+        fontWeight: "800",
+        textAlign: "center",
+    },
+}));
+
+export default BotonGrande;