@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/formularios/SelectorDeOpcion.tsx

@@ -0,0 +1,407 @@
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import React from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    Modal,
+    Pressable,
+    TouchableOpacity,
+    View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import BotonGrande from "../componentes/BotonGrande";
+import EstadoVacio from "../componentes/EstadoVacio";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text, TextInput } from "../texto";
+
+/** Una opción de una lista: lo que se guarda (`value`) y lo que se lee (`label`). */
+export interface Opcion {
+    value: number | string;
+    label: string;
+}
+
+/** Lo que tienen en común el selector de una y el de varias: de dónde salen las opciones. */
+interface FuenteDeOpciones<T extends Opcion> {
+    etiqueta: string;
+    opciones: T[];
+    /**
+     * Si las opciones las trae el servidor, mientras llegan. Una lista fija (las modalidades, los
+     * estados) no lo pasa.
+     */
+    cargando?: boolean;
+    /**
+     * El texto de la búsqueda, para que quien llama pida al servidor. **Sin `onBuscar` la lista es
+     * fija** y se filtra aquí, por lo que se lee: así una lista de cinco opciones no necesita una
+     * consulta ni un estado en la pantalla.
+     */
+    texto?: string;
+    onBuscar?: (texto: string) => void;
+    /** Lo que va debajo del nombre de cada opción (un viaje: sus unidades). */
+    detalle?: (opcion: T) => string | null;
+    /** Para agrupar las opciones con un rótulo (los viajes esperados primero). */
+    grupo?: (opcion: T) => string;
+    vacio?: string;
+    disabled?: boolean;
+}
+
+export interface PropsDeSelectorDeOpcion<T extends Opcion> extends FuenteDeOpciones<T> {
+    valor: T | null;
+    onElegir: (opcion: T | null) => void;
+    /** Si se puede dejar vacío: agrega «Ninguno» arriba de la lista. */
+    opcional?: boolean;
+    /** Cómo se dice el vacío de `opcional`: «Todos» en un filtro. */
+    textoDeNinguno?: string;
+}
+
+export interface PropsDeSelectorDeVarias<T extends Opcion> extends FuenteDeOpciones<T> {
+    valor: T[];
+    onElegir: (opciones: T[]) => void;
+}
+
+/** Para comparar lo escrito con una opción sin que estorben los acentos ni las mayúsculas. */
+const normalizar = (texto: string) =>
+    texto.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+
+/**
+ * La búsqueda de un selector: la de quien llama si trae `onBuscar`, o una propia que filtra la
+ * lista fija aquí mismo.
+ */
+function useBuscador<T extends Opcion>({ opciones, texto, onBuscar }: FuenteDeOpciones<T>) {
+    const [propio, setPropio] = React.useState("");
+    const fija = !onBuscar;
+    const actual = fija ? propio : (texto ?? "");
+    const visibles = React.useMemo(() => {
+        if (!fija || !propio.trim()) return opciones;
+        const buscado = normalizar(propio);
+        return opciones.filter((opcion) => normalizar(opcion.label).includes(buscado));
+    }, [fija, propio, opciones]);
+    return {
+        texto: actual,
+        buscar: fija ? setPropio : onBuscar,
+        visibles,
+    };
+}
+
+/**
+ * La lista a pantalla completa de los dos selectores: la cabecera con la flecha, el buscador, y
+ * las opciones como tarjetas. Lo que pasa al tocar una —elegirla y cerrar, o marcarla— y lo que
+ * va al pie es de cada selector.
+ */
+function HojaDeOpciones<T extends Opcion>({
+    etiqueta,
+    abierto,
+    onCerrar,
+    texto,
+    onBuscar,
+    cargando,
+    opciones,
+    marcada,
+    onTocar,
+    detalle,
+    grupo,
+    vacio = "Nada que coincida.",
+    encabezado,
+    pie,
+}: {
+    etiqueta: string;
+    abierto: boolean;
+    onCerrar: () => void;
+    texto: string;
+    onBuscar: (texto: string) => void;
+    cargando?: boolean;
+    opciones: T[];
+    marcada: (opcion: T) => boolean;
+    onTocar: (opcion: T) => void;
+    detalle?: (opcion: T) => string | null;
+    grupo?: (opcion: T) => string;
+    vacio?: string;
+    encabezado?: React.ReactElement | null;
+    pie?: React.ReactNode;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+
+    return (
+        <Modal visible={abierto} animationType="slide" onRequestClose={onCerrar}>
+            <View style={[styles.hoja, { paddingTop: insets.top + 10 }]}>
+                <View style={styles.cabecera}>
+                    <TouchableOpacity onPress={onCerrar}>
+                        <MaterialIcons name="arrow-back" size={45} color={c.primary} />
+                    </TouchableOpacity>
+                    <Text style={styles.titulo}>{etiqueta}</Text>
+                </View>
+                <TextInput
+                    value={texto}
+                    onChangeText={onBuscar}
+                    placeholder="Buscar"
+                    placeholderTextColor={c.secondaryLight}
+                    autoCorrect={false}
+                    autoCapitalize="characters"
+                    style={styles.buscador}
+                />
+                {cargando ? <ActivityIndicator color={c.primary} /> : null}
+                <FlatList
+                    data={opciones}
+                    keyExtractor={(opcion) => String(opcion.value)}
+                    keyboardShouldPersistTaps="handled"
+                    contentContainerStyle={{
+                        gap: 10,
+                        paddingBottom: pie ? 24 : insets.bottom + 24,
+                    }}
+                    ListHeaderComponent={encabezado}
+                    ListEmptyComponent={
+                        cargando ? null : <EstadoVacio icono="magnify" titulo={vacio} />
+                    }
+                    renderItem={({ item, index }) => {
+                        const rotulo = grupo?.(item);
+                        const nuevoGrupo =
+                            rotulo !== undefined &&
+                            (index === 0 || grupo?.(opciones[index - 1]) !== rotulo);
+                        const elegida = marcada(item);
+                        return (
+                            <>
+                                {nuevoGrupo ? <Text style={styles.grupo}>{rotulo}</Text> : null}
+                                <Pressable
+                                    onPress={() => onTocar(item)}
+                                    accessibilityState={{ selected: elegida }}
+                                    style={[styles.opcion, elegida && styles.opcionElegida]}
+                                >
+                                    <Text style={styles.opcionNombre}>{item.label}</Text>
+                                    {detalle?.(item) ? (
+                                        <Text style={styles.detalle}>{detalle(item)}</Text>
+                                    ) : null}
+                                </Pressable>
+                            </>
+                        );
+                    }}
+                />
+                {pie ? (
+                    <View style={[styles.pie, { paddingBottom: insets.bottom + 16 }]}>{pie}</View>
+                ) : null}
+            </View>
+        </Modal>
+    );
+}
+
+/** El renglón cerrado de un selector: el rótulo, lo elegido y la flecha. */
+function RenglonDelSelector({
+    etiqueta,
+    texto,
+    detalle,
+    disabled,
+    onPress,
+}: {
+    etiqueta: string;
+    texto: string | null;
+    detalle?: string | null;
+    disabled?: boolean;
+    onPress: () => void;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={disabled}
+            accessibilityRole="button"
+            style={[styles.campo, disabled && styles.campoInactivo]}
+        >
+            <Text style={styles.etiqueta}>{etiqueta}</Text>
+            <View style={styles.renglon}>
+                <Text style={[styles.valor, !texto && styles.sinValor]}>{texto ?? "Elegir…"}</Text>
+                <IconoDeRenglon
+                    name="chevron-down"
+                    fontSize={tipografia.subtitulo}
+                    color={c.secondary}
+                />
+            </View>
+            {detalle ? <Text style={styles.detalle}>{detalle}</Text> : null}
+        </Pressable>
+    );
+}
+
+/**
+ * Un campo que se elige de una lista: el renglón con lo elegido y, al tocarlo, la lista a pantalla
+ * completa con su buscador. **A pantalla completa y no un menú**: con la letra al 180% un menú
+ * desplegable deja ver dos opciones, y quien la usa elige de pie.
+ */
+export default function SelectorDeOpcion<T extends Opcion>(props: PropsDeSelectorDeOpcion<T>) {
+    const {
+        etiqueta,
+        valor,
+        onElegir,
+        cargando,
+        detalle,
+        grupo,
+        opcional,
+        textoDeNinguno = "Ninguno",
+        vacio,
+        disabled,
+    } = props;
+    const styles = useStyles();
+    const [abierto, setAbierto] = React.useState(false);
+    const { texto, buscar, visibles } = useBuscador(props);
+
+    const elegir = (opcion: T | null) => {
+        onElegir(opcion);
+        setAbierto(false);
+        buscar("");
+    };
+
+    return (
+        <>
+            <RenglonDelSelector
+                etiqueta={etiqueta}
+                texto={valor ? valor.label : null}
+                detalle={valor ? detalle?.(valor) : null}
+                disabled={disabled}
+                onPress={() => setAbierto(true)}
+            />
+            <HojaDeOpciones
+                etiqueta={etiqueta}
+                abierto={abierto}
+                onCerrar={() => setAbierto(false)}
+                texto={texto}
+                onBuscar={buscar}
+                cargando={cargando}
+                opciones={visibles}
+                marcada={(opcion) => valor?.value === opcion.value}
+                onTocar={elegir}
+                detalle={detalle}
+                grupo={grupo}
+                vacio={vacio}
+                encabezado={
+                    opcional ? (
+                        <Pressable onPress={() => elegir(null)} style={styles.opcion}>
+                            <Text style={styles.opcionNombre}>{textoDeNinguno}</Text>
+                        </Pressable>
+                    ) : null
+                }
+            />
+        </>
+    );
+}
+
+/**
+ * Lo mismo que `SelectorDeOpcion`, pero se marcan varias: tocar una la pone o la quita, y la
+ * elección se confirma con el botón del pie. Se confirma y no se guarda a cada toque para que
+ * salir con la flecha deje lo que había —igual que en el selector de una, donde salir no cambia
+ * nada—.
+ *
+ * Cerrado dice lo elegido separado por comas, que con la letra grande parte en los renglones que
+ * haga falta en vez de recortarse.
+ */
+export function SelectorDeVarias<T extends Opcion>(props: PropsDeSelectorDeVarias<T>) {
+    const { etiqueta, valor, onElegir, cargando, detalle, grupo, vacio, disabled } = props;
+    const [abierto, setAbierto] = React.useState(false);
+    const [marcadas, setMarcadas] = React.useState<T[]>(valor);
+    const { texto, buscar, visibles } = useBuscador(props);
+
+    const abrir = () => {
+        setMarcadas(valor);
+        setAbierto(true);
+    };
+    const cerrar = () => {
+        setAbierto(false);
+        buscar("");
+    };
+    const tocar = (opcion: T) =>
+        setMarcadas((previas) =>
+            previas.some((p) => p.value === opcion.value)
+                ? previas.filter((p) => p.value !== opcion.value)
+                : [...previas, opcion],
+        );
+
+    return (
+        <>
+            <RenglonDelSelector
+                etiqueta={etiqueta}
+                texto={valor.length ? valor.map((o) => o.label).join(", ") : null}
+                disabled={disabled}
+                onPress={abrir}
+            />
+            <HojaDeOpciones
+                etiqueta={etiqueta}
+                abierto={abierto}
+                onCerrar={cerrar}
+                texto={texto}
+                onBuscar={buscar}
+                cargando={cargando}
+                opciones={visibles}
+                marcada={(opcion) => marcadas.some((m) => m.value === opcion.value)}
+                onTocar={tocar}
+                detalle={detalle}
+                grupo={grupo}
+                vacio={vacio}
+                pie={
+                    <BotonGrande
+                        icono="check"
+                        onPress={() => {
+                            onElegir(marcadas);
+                            cerrar();
+                        }}
+                    >
+                        {marcadas.length ? `Listo (${marcadas.length})` : "Listo"}
+                    </BotonGrande>
+                }
+            />
+        </>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    campo: {
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        padding: 14,
+        gap: 4,
+    },
+    campoInactivo: { opacity: 0.5 },
+    etiqueta: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+    renglon: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
+    valor: { flex: 1, ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.texto },
+    sinValor: { color: c.secondaryLight, fontWeight: "600" },
+    detalle: { ...renglon(tipografia.secundario), color: c.secondary },
+    hoja: { flex: 1, backgroundColor: c.fondo, paddingHorizontal: 18, gap: 12 },
+    cabecera: { flexDirection: "row", alignItems: "center", gap: 8 },
+    titulo: { flex: 1, fontSize: tipografia.titulo, fontWeight: "900", color: c.primary },
+    buscador: {
+        borderWidth: 1.5,
+        borderColor: c.secondaryLight,
+        borderRadius: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        backgroundColor: c.superficie,
+        fontSize: tipografia.subtitulo,
+        color: c.texto,
+    },
+    grupo: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+        marginTop: 8,
+    },
+    opcion: {
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        padding: 14,
+        gap: 4,
+    },
+    opcionElegida: { borderColor: c.primary, backgroundColor: c.primaryWash },
+    opcionNombre: { ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.texto },
+    pie: { paddingTop: 12 },
+}));

package/src/formularios/TextoDeAccesoControlado.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Controller, type FieldValues } from "react-hook-form";
+import { View } from "react-native";
+import { HelperText, TextInput, type TextInputProps } from "react-native-paper";
+import { crearEstilos } from "../tema";
+import type { CampoAtado } from "./controlados";
+
+/**
+ * Un campo del login (el usuario, la contraseña), atado a react-hook-form: el `TextInput` de Paper
+ * con contorno y la etiqueta que sube al escribir. Con `contrasena`, oculta lo escrito y lleva el
+ * ojo para verlo.
+ *
+ * Es de Paper y no `TextoControlado`, que lleva su rótulo arriba, porque así es la pantalla de
+ * entrada de las apps.
+ */
+export default function TextoDeAccesoControlado<T extends FieldValues>({
+    control,
+    name,
+    etiqueta,
+    contrasena = false,
+    entrada,
+}: CampoAtado<T> & {
+    etiqueta: string;
+    contrasena?: boolean;
+    /** Lo demás del `TextInput` de Paper (`autoCapitalize`, `keyboardType`…). */
+    entrada?: Partial<TextInputProps>;
+}) {
+    const styles = useStyles();
+    const [verla, setVerla] = useState(false);
+
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                <View>
+                    <TextInput
+                        label={etiqueta}
+                        value={value}
+                        onChangeText={onChange}
+                        mode={"outlined"}
+                        error={!!error}
+                        secureTextEntry={contrasena && !verla}
+                        right={
+                            contrasena ? (
+                                <TextInput.Icon
+                                    icon={verla ? "eye-off" : "eye"}
+                                    onPress={() => setVerla(!verla)}
+                                />
+                            ) : undefined
+                        }
+                        outlineStyle={styles.contorno}
+                        style={styles.caja}
+                        contentStyle={styles.contenido}
+                        {...entrada}
+                    />
+                    {error ? (
+                        <HelperText type={"error"} visible>
+                            {error.message}
+                        </HelperText>
+                    ) : null}
+                </View>
+            )}
+        />
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    contorno: { backgroundColor: c.superficie, borderRadius: 12 },
+    caja: { height: 64 },
+    contenido: { fontSize: 18 },
+}));