@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/hoja/useMasDeLaFicha.tsx

@@ -0,0 +1,63 @@
+import HojaInferior from "./HojaInferior";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { FilaConContador, SeccionDeFicha } from "../listas/piezas";
+
+/** Una lista de «Más»: su renglón con contador y lo que abre en la hoja. */
+export interface ListaDeLaFicha {
+    clave: string;
+    titulo: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    /** `null` mientras se cuenta. */
+    cuantos: number | null;
+    /** Lo que acompaña al número: «2 vencidas», «1 pendiente». */
+    detalle?: string | null;
+    /** Lo que enseña la hoja; sólo se monta abierta. */
+    contenido: React.ReactNode;
+}
+
+/**
+ * «Más» de una ficha (un tracto, un cliente): lo que cuelga de ella, un renglón con cuántos hay
+ * que abre su hoja desde abajo (`HojaInferior`). Devuelve la sección (`seccion`, dentro del
+ * scroll) y la hoja (`hoja`, encima de la ficha, en `PantallaDeFicha.encima`).
+ *
+ * Quien llama pasa sólo las listas que se ven (cada una con su permiso); sin ninguna, la sección
+ * no se pinta.
+ */
+export function useMasDeLaFicha(listas: ListaDeLaFicha[], subtitulo?: string) {
+    // Lo que enseña se queda al cerrarla, para que su título no se vacíe mientras baja.
+    const [clave, setClave] = React.useState<string | null>(null);
+    const [abierta, setAbierta] = React.useState(false);
+    const cerrar = React.useCallback(() => setAbierta(false), []);
+    const elegida = listas.find((l) => l.clave === clave);
+
+    const seccion = listas.length ? (
+        <SeccionDeFicha titulo="Más">
+            {listas.map((l) => (
+                <FilaConContador
+                    key={l.clave}
+                    icono={l.icono}
+                    etiqueta={l.titulo}
+                    cuantos={l.cuantos}
+                    detalle={l.detalle}
+                    onPress={() => {
+                        setClave(l.clave);
+                        setAbierta(true);
+                    }}
+                />
+            ))}
+        </SeccionDeFicha>
+    ) : null;
+
+    const hoja = (
+        <HojaInferior
+            abierta={abierta && Boolean(elegida)}
+            onCerrar={cerrar}
+            titulo={elegida?.titulo ?? ""}
+            subtitulo={subtitulo}
+        >
+            {abierta ? elegida?.contenido : null}
+        </HojaInferior>
+    );
+    return { seccion, hoja };
+}

package/src/index.ts

@@ -0,0 +1,151 @@
+// ==============================|| TEMA ||============================== //
+
+export * from "./tema";
+export { Text, TextInput } from "./texto";
+
+// ==============================|| COMPONENTES ||============================== //
+
+export {
+    default as AccionesDelEncabezado,
+    type AccionDelEncabezado,
+} from "./componentes/AccionesDelEncabezado";
+export { default as BotonDeAvatar, inicialesDe } from "./componentes/BotonDeAvatar";
+export { default as BotonGrande } from "./componentes/BotonGrande";
+export { default as CabeceraEmpujada } from "./componentes/CabeceraEmpujada";
+export { default as Chip, type TonoDeChip } from "./componentes/Chip";
+export { default as ContenidoDePantalla } from "./componentes/ContenidoDePantalla";
+export { default as EstadoVacio } from "./componentes/EstadoVacio";
+export {
+    default as Foto,
+    ProveedorDeFotos,
+    type BajarFoto,
+    type FotoAVer,
+} from "./componentes/Foto";
+export { default as IconoDeRenglon } from "./componentes/IconoDeRenglon";
+export { Logo, LogoCompleto } from "./componentes/Logo";
+export { default as Nota } from "./componentes/Nota";
+export { default as OpcionesExcluyentes } from "./componentes/OpcionesExcluyentes";
+export {
+    default as PantallaDeError,
+    type PropsDePantallaDeError,
+} from "./componentes/PantallaDeError";
+export { default as Pestanas, type Pestana } from "./componentes/Pestanas";
+export { default as Rotulo } from "./componentes/Rotulo";
+export { default as RotuloDeSeccion } from "./componentes/RotuloDeSeccion";
+export { default as Tarjeta } from "./componentes/Tarjeta";
+export { default as TarjetaDeDatos } from "./componentes/TarjetaDeDatos";
+export { default as TiraDeFotos, type FotoDeLaTira } from "./componentes/TiraDeFotos";
+export { default as VisorDeFoto } from "./componentes/VisorDeFoto";
+
+// ==============================|| DIÁLOGOS ||============================== //
+
+export {
+    avisar,
+    confirmar,
+    mostrarDialogo,
+    type BotonDeDialogo,
+    type Dialogo,
+    type EstiloDeBoton,
+} from "./dialogos/dialogos";
+export { default as HostDeDialogos } from "./dialogos/HostDeDialogos";
+
+// ==============================|| NAVEGACIÓN ||============================== //
+
+export { default as BarraDePestanas, HUECO_DE_LA_BARRA } from "./navegacion/BarraDePestanas";
+export type { IconoDePestana } from "./navegacion/BotonDeBarra";
+export {
+    ALTO_DEL_ENCABEZADO,
+    TituloDelEncabezado,
+    useOpcionesDelEncabezado,
+} from "./navegacion/encabezado";
+
+// ==============================|| FORMULARIOS ||============================== //
+
+export {
+    CampoDeFecha,
+    CampoDeFechaHora,
+    CampoDeOpciones,
+    CampoDeTelefono,
+    CampoDeTexto,
+    CampoInterruptor,
+    Campo,
+    ErrorDelCampo,
+} from "./formularios/campos";
+export { default as CampoDeSeleccion, CampoDeVarias } from "./formularios/CampoDeSeleccion";
+export {
+    FechaControlada,
+    FechaHoraControlada,
+    InterruptorControlado,
+    OpcionesControladas,
+    SeleccionControlada,
+    TelefonoControlado,
+    TextoControlado,
+    VariasControladas,
+    type CampoAtado,
+    type SinValor,
+} from "./formularios/controlados";
+export { mensajeDeError, setErrors } from "./formularios/errores";
+export {
+    fechaONula,
+    isoONulo,
+    mismoInstante,
+    soloLoQueCambio,
+    textoONulo,
+    useGuardado,
+    volcarErrores,
+} from "./formularios/guardado";
+export {
+    default as SelectorDeOpcion,
+    SelectorDeVarias,
+    type Opcion,
+    type PropsDeSelectorDeOpcion,
+    type PropsDeSelectorDeVarias,
+} from "./formularios/SelectorDeOpcion";
+export { default as TextoDeAccesoControlado } from "./formularios/TextoDeAccesoControlado";
+export { useBusqueda } from "./formularios/useBusqueda";
+
+// ==============================|| LISTAS Y FICHAS ||============================== //
+
+export {
+    default as HojaDeFiltros,
+    InterruptorDeFiltro,
+    OpcionDeFiltro,
+    OpcionesMultiples,
+    OrdenDeLista,
+    type CampoDeOrden,
+    SeccionDeFiltros,
+} from "./listas/HojaDeFiltros";
+export { default as ListaPaginada, type ConsultaPaginada } from "./listas/ListaPaginada";
+export { renglonesDe, type Pagina } from "./listas/paginado";
+export {
+    AvisoDeRecortados,
+    Buscador,
+    CabeceraDeLista,
+    EstadoDeHoja,
+    FilaConContador,
+    RenglonDeContacto,
+    RenglonDeDireccion,
+    RenglonDeHoja,
+    RenglonDeLiga,
+    SeccionDeFicha,
+    TarjetaDeLista,
+    type FiltrosDeCabecera,
+} from "./listas/piezas";
+export { default as TarjetaDeslizable, type AccionDeslizable } from "./listas/TarjetaDeslizable";
+
+// ==============================|| PANTALLAS ||============================== //
+
+export {
+    default as PantallaDeAcceso,
+    type DatosDeAcceso,
+    type ResultadoDeAcceso,
+} from "./pantallas/PantallaDeAcceso";
+export { EsperaDeEdicion, FormularioDeEdicion } from "./pantallas/PantallaDeEdicion";
+export { default as PantallaDeFicha } from "./pantallas/PantallaDeFicha";
+export {
+    default as PantallaDeHistorial,
+    TarjetaDeEvento,
+    type EventoDeHistorial,
+    type Historial,
+} from "./pantallas/PantallaDeHistorial";
+export { default as PantallaDePerfil } from "./pantallas/PantallaDePerfil";

package/src/listas/HojaDeFiltros.tsx

@@ -0,0 +1,286 @@
+import BotonGrande from "../componentes/BotonGrande";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import React from "react";
+import { Modal, Pressable, ScrollView, Switch, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/**
+ * La hoja de filtros y orden de una lista (viajes, recursos), a pantalla completa
+ * como la del mapa: con la letra al 180% un menú deja ver dos opciones. Se aplica al tocar, sin
+ * «Aplicar»; el botón de abajo dice cuántos renglones quedan. Cada lista pone sus secciones.
+ */
+export default function HojaDeFiltros({
+    abierta,
+    onCerrar,
+    hayAlgo,
+    onQuitar,
+    visibles,
+    nombres,
+    children,
+}: {
+    abierta: boolean;
+    onCerrar: () => void;
+    /** Si hay algo puesto (un filtro o un orden distinto): ofrece «Quitar». */
+    hayAlgo: boolean;
+    onQuitar: () => void;
+    /** Cuántos quedan con todo lo puesto; `null` mientras se cuentan. */
+    visibles: number | null;
+    /** Cómo se dice uno y varios: `["viaje", "viajes"]`. */
+    nombres: readonly [string, string];
+    children: React.ReactNode;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    return (
+        <Modal visible={abierta} animationType="slide" onRequestClose={onCerrar}>
+            <View style={[styles.hoja, { paddingTop: insets.top + 10 }]}>
+                <View style={styles.cabecera}>
+                    <TouchableOpacity onPress={onCerrar} accessibilityLabel="Cerrar">
+                        <MaterialIcons name="arrow-back" size={45} color={c.primary} />
+                    </TouchableOpacity>
+                    <Text style={styles.titulo}>Filtros</Text>
+                    {hayAlgo ? (
+                        <TouchableOpacity onPress={onQuitar}>
+                            <Text style={styles.limpiar}>Quitar</Text>
+                        </TouchableOpacity>
+                    ) : null}
+                </View>
+
+                <ScrollView contentContainerStyle={styles.contenido}>{children}</ScrollView>
+
+                <View style={{ paddingBottom: insets.bottom + 16 }}>
+                    <BotonGrande onPress={onCerrar}>
+                        {visibles === null
+                            ? "Listo"
+                            : `Ver ${visibles} ${visibles === 1 ? nombres[0] : nombres[1]}`}
+                    </BotonGrande>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+/** El rótulo de una sección de la hoja. */
+export function SeccionDeFiltros({ children }: { children: string }) {
+    const styles = useStyles();
+    return <Text style={styles.seccion}>{children}</Text>;
+}
+
+/** Una opción como renglón: casilla (de varias) o círculo (de una), como la hoja del mapa. */
+export function OpcionDeFiltro({
+    texto,
+    elegida,
+    unica = false,
+    onPress,
+}: {
+    texto: string;
+    elegida: boolean;
+    unica?: boolean;
+    onPress: () => void;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole={unica ? "radio" : "checkbox"}
+            accessibilityState={{ checked: elegida }}
+            style={[styles.opcion, elegida && styles.opcionElegida]}
+        >
+            <IconoDeRenglon
+                name={
+                    unica
+                        ? elegida
+                            ? "radiobox-marked"
+                            : "radiobox-blank"
+                        : elegida
+                          ? "checkbox-marked"
+                          : "checkbox-blank-outline"
+                }
+                fontSize={tipografia.subtitulo}
+                color={elegida ? c.primary : c.secondary}
+            />
+            <Text style={styles.opcionTexto}>{texto}</Text>
+        </Pressable>
+    );
+}
+
+/** Varias opciones de un mismo filtro, cada una se prende y se apaga sola. */
+export function OpcionesMultiples<V extends string | number>({
+    titulo,
+    opciones,
+    elegidas,
+    onCambiar,
+}: {
+    titulo: string;
+    opciones: readonly { value: V; label: string }[];
+    elegidas: V[];
+    onCambiar: (elegidas: V[]) => void;
+}) {
+    return (
+        <>
+            <SeccionDeFiltros>{titulo}</SeccionDeFiltros>
+            {opciones.map((o) => (
+                <OpcionDeFiltro
+                    key={String(o.value)}
+                    texto={o.label}
+                    elegida={elegidas.includes(o.value)}
+                    onPress={() =>
+                        onCambiar(
+                            elegidas.includes(o.value)
+                                ? elegidas.filter((v) => v !== o.value)
+                                : [...elegidas, o.value],
+                        )
+                    }
+                />
+            ))}
+        </>
+    );
+}
+
+/** Un filtro de sí o no: el renglón entero lo alterna, no sólo el interruptor. */
+export function InterruptorDeFiltro({
+    texto,
+    prendido,
+    onCambiar,
+}: {
+    texto: string;
+    prendido: boolean;
+    onCambiar: (prendido: boolean) => void;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={() => onCambiar(!prendido)}
+            accessibilityRole="switch"
+            accessibilityState={{ checked: prendido }}
+            style={[styles.opcion, styles.interruptor, prendido && styles.opcionElegida]}
+        >
+            <Text style={styles.opcionTexto}>{texto}</Text>
+            <Switch
+                value={prendido}
+                onValueChange={onCambiar}
+                trackColor={{ true: c.primaryLight }}
+                thumbColor={prendido ? c.primary : undefined}
+            />
+        </Pressable>
+    );
+}
+
+/** Un campo por el que se ordena una lista. */
+export interface CampoDeOrden {
+    /** El `ordering` sin signo: `codigo`. */
+    value: string;
+    label: string;
+    /**
+     * Cómo se dicen sus dos sentidos. «Ascendente» no dice nada de una fecha ni de un importe:
+     * ahí van «Antiguos primero» / «Recientes primero», «Menor primero» / «Mayor primero».
+     */
+    sentidos?: { asc: string; desc: string };
+    /**
+     * El sentido con el que arranca al elegirlo: lo más nuevo y lo más grande arriba, el texto
+     * alfabético. Sin esto conserva el del campo de antes.
+     */
+    primero?: "asc" | "desc";
+}
+
+/**
+ * «Ordenar por» y su sentido. `orden` es el `ordering` que se manda (`-codigo`), o `undefined` si
+ * se deja el del servidor; con `porOmision`, ese «sin orden» se ofrece como opción.
+ */
+export function OrdenDeLista({
+    campos,
+    orden,
+    onOrdenar,
+    porOmision,
+}: {
+    campos: readonly CampoDeOrden[];
+    orden: string | undefined;
+    /** El nuevo `ordering`, o `null` para el del servidor. */
+    onOrdenar: (orden: string | null) => void;
+    porOmision?: string;
+}) {
+    const descendente = orden?.startsWith("-") ?? false;
+    const campo = orden?.replace(/^-/, "");
+    const elegido = campos.find((c) => c.value === campo);
+    const sentidos = elegido?.sentidos ?? { asc: "Ascendente", desc: "Descendente" };
+    // El sentido con el que arranca va primero: en una fecha se lee «Recientes primero» antes
+    // que «Antiguos primero».
+    const ordenDeSentidos: ("asc" | "desc")[] =
+        elegido?.primero === "desc" ? ["desc", "asc"] : ["asc", "desc"];
+    return (
+        <>
+            <SeccionDeFiltros>Ordenar por</SeccionDeFiltros>
+            {porOmision ? (
+                <OpcionDeFiltro
+                    texto={porOmision}
+                    unica
+                    elegida={orden === undefined}
+                    onPress={() => onOrdenar(null)}
+                />
+            ) : null}
+            {campos.map((c) => (
+                <OpcionDeFiltro
+                    key={c.value}
+                    texto={c.label}
+                    unica
+                    elegida={campo === c.value}
+                    onPress={() => {
+                        // Volver a tocar el elegido no le cambia el sentido.
+                        if (campo === c.value) return;
+                        const desc = c.primero ? c.primero === "desc" : descendente;
+                        onOrdenar(`${desc ? "-" : ""}${c.value}`);
+                    }}
+                />
+            ))}
+            {campo !== undefined ? (
+                <>
+                    <SeccionDeFiltros>Sentido</SeccionDeFiltros>
+                    {ordenDeSentidos.map((sentido) => (
+                        <OpcionDeFiltro
+                            key={sentido}
+                            texto={sentidos[sentido]}
+                            unica
+                            elegida={descendente === (sentido === "desc")}
+                            onPress={() => onOrdenar(sentido === "desc" ? `-${campo}` : campo)}
+                        />
+                    ))}
+                </>
+            ) : null}
+        </>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    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 },
+    limpiar: { ...renglon(tipografia.cuerpo), fontWeight: "700", color: c.primary },
+    contenido: { gap: 8, paddingBottom: 16 },
+    seccion: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+        marginTop: 10,
+    },
+    opcion: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 10,
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        padding: 12,
+    },
+    opcionElegida: { borderColor: c.primary, backgroundColor: c.primaryWash },
+    interruptor: { alignItems: "center" },
+    opcionTexto: { flex: 1, ...renglon(tipografia.subtitulo), fontWeight: "700", color: c.texto },
+}));

package/src/listas/ListaPaginada.tsx

@@ -0,0 +1,117 @@
+import BotonGrande from "../componentes/BotonGrande";
+import EstadoVacio from "../componentes/EstadoVacio";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { HUECO_DE_LA_BARRA } from "../navegacion/BarraDePestanas";
+import { Text } from "../texto";
+import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { ActivityIndicator, FlatList, RefreshControl } from "react-native";
+import { renglonesDe, type Pagina } from "./paginado";
+
+/** Lo que la lista lee de un `use…InfiniteQuery` de RTK Query. */
+export interface ConsultaPaginada<T> {
+    data?: { pages: Pagina<T>[] };
+    isLoading: boolean;
+    isError: boolean;
+    isFetching: boolean;
+    isFetchingNextPage: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: () => unknown;
+    refetch: () => unknown;
+}
+
+interface Props<T> {
+    consulta: ConsultaPaginada<T>;
+    renderItem: (item: T) => React.ReactElement;
+    llave: (item: T) => string | number;
+    /** Lo que se dice sin renglones: «Ningún viaje en curso». */
+    vacio: {
+        icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+        titulo: string;
+        texto?: string;
+    };
+    /** Cómo se cuentan: `["viaje", "viajes"]` → «128 viajes». */
+    nombres: [string, string];
+}
+
+/**
+ * Una lista **paginada con scroll infinito**: pide la página siguiente al acercarse
+ * al final, se refresca jalando hacia abajo y dice cuántos hay en total. Lo que la llena es de
+ * quien la usa (`renderItem`); el buscador y las pestañas van arriba, fuera de ella.
+ *
+ * Deja libre lo que tapa la barra de pestañas, que flota sobre la pantalla.
+ */
+export default function ListaPaginada<T>({
+    consulta,
+    renderItem,
+    llave,
+    vacio,
+    nombres,
+}: Props<T>) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const renglones = renglonesDe(consulta.data);
+    const total = consulta.data?.pages[0]?.count;
+
+    if (consulta.isLoading) {
+        return <ActivityIndicator color={c.primary} size="large" style={styles.cargando} />;
+    }
+    if (consulta.isError && !consulta.data) {
+        return (
+            <EstadoVacio
+                icono="cloud-off-outline"
+                titulo="No se pudo cargar"
+                texto="Revisa tu señal e intenta de nuevo."
+            >
+                <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
+                    Reintentar
+                </BotonGrande>
+            </EstadoVacio>
+        );
+    }
+
+    return (
+        <FlatList
+            data={renglones}
+            keyExtractor={(item) => String(llave(item))}
+            renderItem={({ item }) => renderItem(item)}
+            contentContainerStyle={[styles.contenido, !renglones.length && styles.vacia]}
+            ListHeaderComponent={
+                total !== undefined && renglones.length ? (
+                    <Text style={styles.total}>
+                        {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
+                    </Text>
+                ) : null
+            }
+            ListEmptyComponent={
+                <EstadoVacio icono={vacio.icono} titulo={vacio.titulo} texto={vacio.texto} />
+            }
+            ListFooterComponent={
+                consulta.isFetchingNextPage ? (
+                    <ActivityIndicator color={c.primary} style={styles.mas} />
+                ) : null
+            }
+            onEndReachedThreshold={0.5}
+            onEndReached={() => {
+                if (consulta.hasNextPage && !consulta.isFetching) consulta.fetchNextPage();
+            }}
+            refreshControl={
+                <RefreshControl
+                    refreshing={consulta.isFetching && !consulta.isFetchingNextPage}
+                    onRefresh={() => consulta.refetch()}
+                    colors={[c.primary]}
+                    progressBackgroundColor={c.superficie}
+                />
+            }
+            keyboardShouldPersistTaps="handled"
+        />
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    cargando: { marginTop: 40 },
+    contenido: { gap: 10, paddingBottom: HUECO_DE_LA_BARRA },
+    vacia: { flexGrow: 1 },
+    total: { ...renglon(tipografia.secundario), color: c.secondary },
+    mas: { marginVertical: 16 },
+}));