@acvl/mobile-components 0.0.1 → 0.0.3

package/src/hoja/HojaDeLista.tsx

@@ -0,0 +1,214 @@
+import BottomSheet, {
+    BottomSheetBackdrop,
+    BottomSheetFlatList,
+    BottomSheetTextInput,
+    type BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, BackHandler, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import BotonGrande from "../componentes/BotonGrande";
+import { EnHoja } from "../componentes/Tarjeta";
+import { Buscador } from "../listas/piezas";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+
+/** Lo alto de la hoja: arriba se sigue viendo un poco de la ficha, que dice dónde se está. */
+const ALTO = "85%";
+
+/** Lo que la hoja lee de la consulta de su lista, sea de páginas o de scroll infinito. */
+export interface ListaDeLaHoja<T> {
+    /** Lo cargado hasta ahora, de todas las páginas. */
+    renglones: T[];
+    /** Cuántos hay en total, si el servidor lo dice. */
+    total?: number | null;
+    /** La primera carga: todavía no hay nada que enseñar. */
+    cargando: boolean;
+    /** Falló y no hay nada que enseñar. */
+    fallo: boolean;
+    hayMas: boolean;
+    cargandoMas: boolean;
+    onMas: () => void;
+    onReintentar: () => void;
+}
+
+/**
+ * Una lista que sube desde abajo sobre una ficha: lo que cuelga de ella (las transferencias de un
+ * embarque, las facturas de un pedimento), **con su buscador, su scroll infinito y lo que se hace
+ * con ella** (agregar, quitar), sin salir de la ficha. Es la hermana de `HojaInferior` para cuando
+ * lo de adentro es una lista larga: aquélla mide su contenido y ésta tiene alto fijo, porque al
+ * buscar la lista crece y se encoge y la hoja no debe brincar.
+ *
+ * Los renglones son `RenglonDeHoja` o los de la lista de la app: una `Tarjeta` adentro ya va del
+ * color del fondo (`EnHoja`) para que se distinga de la hoja. Arriba de la lista, el buscador (si lo hay), `acciones` (los botones de la
+ * lista) y cuántos hay. Se cierra deslizándola, tocando el velo o con atrás.
+ *
+ * Sólo se monta abierta: quien la usa pide su consulta sólo entonces (`skip`).
+ */
+export default function HojaDeLista<T>({
+    abierta,
+    onCerrar,
+    titulo,
+    subtitulo,
+    buscador,
+    acciones,
+    lista,
+    llave,
+    renderItem,
+    vacio,
+    nombres,
+}: {
+    abierta: boolean;
+    onCerrar: () => void;
+    titulo: string;
+    subtitulo?: string | null;
+    buscador?: { texto: string; onCambiar: (texto: string) => void; placeholder: string };
+    /** Lo que se hace con la lista entera: «Agregar transferencias». */
+    acciones?: React.ReactNode;
+    lista: ListaDeLaHoja<T>;
+    llave: (item: T) => string | number;
+    renderItem: (item: T) => React.ReactElement;
+    /** Lo que se dice sin renglones: «Este embarque no trae transferencias». */
+    vacio: string;
+    /** Cómo se cuentan: `["transferencia", "transferencias"]` → «12 transferencias». */
+    nombres?: readonly [string, string];
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const hoja = useRef<BottomSheet>(null);
+    const insets = useSafeAreaInsets();
+
+    // **Sólo existe abierta.** Cerrada (`index={-1}`), gorhom la estaciona justo debajo de su
+    // contenedor, y en Android con la barra de navegación de borde a borde ese contenedor mide
+    // menos que la pantalla: la hoja se asomaba al pie de la ficha desde que se entraba. Se monta
+    // al abrir y se desmonta cuando termina de bajar (`onClose`), así cerrada no hay nada que se
+    // asome, y la lista y su consulta tampoco viven de más.
+    const [montada, setMontada] = useState(abierta);
+    useEffect(() => {
+        if (abierta) setMontada(true);
+        else hoja.current?.close();
+    }, [abierta]);
+
+    useEffect(() => {
+        if (!abierta) return;
+        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+            onCerrar();
+            return true;
+        });
+        return () => sub.remove();
+    }, [abierta, onCerrar]);
+
+    const { renglones, total } = lista;
+
+    const cabecera = (
+        <View style={styles.cabecera}>
+            <View style={styles.titulos}>
+                <Text style={styles.titulo}>{titulo}</Text>
+                {subtitulo ? <Text style={styles.subtitulo}>{subtitulo}</Text> : null}
+            </View>
+            {buscador ? (
+                <Buscador
+                    texto={buscador.texto}
+                    onCambiar={buscador.onCambiar}
+                    placeholder={buscador.placeholder}
+                    entrada={BottomSheetTextInput}
+                    style={styles.buscador}
+                />
+            ) : null}
+            {acciones}
+            {nombres && total != null && renglones.length ? (
+                <Text style={styles.cuenta}>
+                    {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
+                </Text>
+            ) : null}
+        </View>
+    );
+
+    const sinRenglones = lista.cargando ? (
+        <ActivityIndicator color={c.primary} style={styles.espera} />
+    ) : lista.fallo ? (
+        <View style={styles.vacio}>
+            <Text style={styles.linea}>No se pudo cargar. Revisa tu señal.</Text>
+            <BotonGrande icono="refresh" modo="contorno" onPress={lista.onReintentar}>
+                Reintentar
+            </BotonGrande>
+        </View>
+    ) : (
+        <Text style={[styles.linea, styles.vacio]}>{vacio}</Text>
+    );
+
+    if (!montada) return null;
+
+    return (
+        <BottomSheet
+            ref={hoja}
+            index={0}
+            animateOnMount
+            snapPoints={[ALTO]}
+            enableDynamicSizing={false}
+            enablePanDownToClose
+            onClose={() => {
+                setMontada(false);
+                onCerrar();
+            }}
+            // Con el teclado, la hoja sube a lo que quede de pantalla en vez de quedar tapada.
+            keyboardBehavior="extend"
+            keyboardBlurBehavior="restore"
+            android_keyboardInputMode="adjustResize"
+            backdropComponent={(props: BottomSheetBackdropProps) => (
+                <BottomSheetBackdrop
+                    {...props}
+                    appearsOnIndex={0}
+                    disappearsOnIndex={-1}
+                    pressBehavior="close"
+                />
+            )}
+            backgroundStyle={styles.fondo}
+            handleIndicatorStyle={styles.agarradera}
+        >
+            <EnHoja.Provider value>
+                <BottomSheetFlatList
+                    data={renglones}
+                    keyExtractor={(item: T) => String(llave(item))}
+                    renderItem={({ item }: { item: T }) => renderItem(item)}
+                    ListHeaderComponent={cabecera}
+                    ListEmptyComponent={sinRenglones}
+                    ListFooterComponent={
+                        lista.cargandoMas ? (
+                            <ActivityIndicator color={c.primary} style={styles.espera} />
+                        ) : null
+                    }
+                    onEndReachedThreshold={0.5}
+                    onEndReached={() => {
+                        if (lista.hayMas && !lista.cargandoMas) lista.onMas();
+                    }}
+                    keyboardShouldPersistTaps="handled"
+                    contentContainerStyle={[
+                        styles.contenido,
+                        { paddingBottom: insets.bottom + 24 },
+                    ]}
+                />
+            </EnHoja.Provider>
+        </BottomSheet>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    fondo: {
+        backgroundColor: c.superficie,
+        borderWidth: c.esOscuro ? 1 : 0,
+        borderColor: c.secondaryLighter,
+    },
+    agarradera: { backgroundColor: c.secondaryLight },
+    contenido: { paddingHorizontal: 20, gap: 10 },
+    cabecera: { gap: 12, paddingBottom: 2 },
+    titulos: { gap: 2 },
+    titulo: { ...renglon(tipografia.titulo), fontWeight: "900", color: c.texto },
+    subtitulo: { ...renglon(tipografia.secundario), color: c.secondary },
+    // Sobre la hoja (superficie), el buscador va del color del fondo para que se vea su caja.
+    buscador: { backgroundColor: c.fondo },
+    cuenta: { ...renglon(tipografia.secundario), color: c.secondary },
+    linea: { ...renglon(tipografia.secundario), color: c.secondary },
+    vacio: { gap: 12, paddingVertical: 16 },
+    espera: { marginVertical: 16 },
+}));

package/src/hoja/HojaInferior.tsx

@@ -1,4 +1,5 @@
 import { crearEstilos, renglon, tipografia } from "../tema";
+import { EnHoja } from "../componentes/Tarjeta";
 import { Text } from "../texto";
 import BottomSheet, {
     BottomSheetBackdrop,
@@ -82,7 +83,7 @@ export default function HojaInferior({
                     <Text style={styles.titulo}>{titulo}</Text>
                     {subtitulo ? <Text style={styles.subtitulo}>{subtitulo}</Text> : null}
                 </View>
-                {abierta ? children : null}
+                <EnHoja.Provider value>{abierta ? children : null}</EnHoja.Provider>
             </BottomSheetScrollView>
         </BottomSheet>
     );

package/src/hoja/index.ts

@@ -1,4 +1,5 @@
 // `@acvl/mobile-components/hoja`: lo que sube desde abajo sobre una ficha. Va aparte de la entrada
 // principal porque usa `@gorhom/bottom-sheet`, que sólo instala la app que la usa.
+export { default as HojaDeLista, type ListaDeLaHoja } from "./HojaDeLista";
 export { default as HojaInferior } from "./HojaInferior";
 export { useMasDeLaFicha, type ListaDeLaFicha } from "./useMasDeLaFicha";

package/src/index.ts

@@ -112,6 +112,7 @@ export {
     OpcionDeFiltro,
     OpcionesMultiples,
     OrdenDeLista,
+    type CampoDeOrden,
     SeccionDeFiltros,
 } from "./listas/HojaDeFiltros";
 export { default as ListaPaginada, type ConsultaPaginada } from "./listas/ListaPaginada";
@@ -123,6 +124,7 @@ export {
     EstadoDeHoja,
     FilaConContador,
     RenglonDeContacto,
+    RenglonDeDireccion,
     RenglonDeHoja,
     RenglonDeLiga,
     SeccionDeFicha,
@@ -140,4 +142,10 @@ export {
 } 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

@@ -172,6 +172,23 @@ export function InterruptorDeFiltro({
     );
 }
 
+/** 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.
@@ -182,7 +199,7 @@ export function OrdenDeLista({
     onOrdenar,
     porOmision,
 }: {
-    campos: readonly { value: string; label: string }[];
+    campos: readonly CampoDeOrden[];
     orden: string | undefined;
     /** El nuevo `ordering`, o `null` para el del servidor. */
     onOrdenar: (orden: string | null) => void;
@@ -190,6 +207,12 @@ export function OrdenDeLista({
 }) {
     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>
@@ -207,24 +230,26 @@ export function OrdenDeLista({
                     texto={c.label}
                     unica
                     elegida={campo === c.value}
-                    onPress={() => onOrdenar(`${descendente ? "-" : ""}${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>
-                    <OpcionDeFiltro
-                        texto="Ascendente"
-                        unica
-                        elegida={!descendente}
-                        onPress={() => onOrdenar(campo)}
-                    />
-                    <OpcionDeFiltro
-                        texto="Descendente"
-                        unica
-                        elegida={descendente}
-                        onPress={() => onOrdenar(`-${campo}`)}
-                    />
+                    {ordenDeSentidos.map((sentido) => (
+                        <OpcionDeFiltro
+                            key={sentido}
+                            texto={sentidos[sentido]}
+                            unica
+                            elegida={descendente === (sentido === "desc")}
+                            onPress={() => onOrdenar(sentido === "desc" ? `-${campo}` : campo)}
+                        />
+                    ))}
                 </>
             ) : null}
         </>

package/src/listas/piezas.tsx

@@ -2,7 +2,7 @@ import Chip from "../componentes/Chip";
 import IconoDeRenglon from "../componentes/IconoDeRenglon";
 import Pestanas from "../componentes/Pestanas";
 import Tarjeta from "../componentes/Tarjeta";
-import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { crearEstilos, fuenteBase, renglon, tipografia, usePaleta } from "../tema";
 import { type Pestana } from "../componentes/Pestanas";
 import { Text, TextInput } from "../texto";
 import { type TonoDeChip } from "../componentes/Chip";
@@ -13,9 +13,11 @@ import React from "react";
 import {
     ActivityIndicator,
     Linking,
+    Platform,
     Pressable,
     View,
     type StyleProp,
+    type TextInputProps,
     type ViewStyle,
 } from "react-native";
 
@@ -32,6 +34,9 @@ import {
  * **El texto de sugerencia va en un renglón, con «…» si no cabe.** Es un `Text` encima del campo y
  * no el `placeholder` del `TextInput`: el de Android parte en dos renglones lo que no cabe, y el
  * segundo queda cortado a la mitad.
+ *
+ * Dentro de una hoja de `@gorhom/bottom-sheet` el campo es el suyo (`entrada`, su
+ * `BottomSheetTextInput`): con el de React Native el teclado tapa la hoja en vez de subirla.
  */
 export function Buscador({
     texto,
@@ -40,6 +45,7 @@ export function Buscador({
     autoFocus,
     onBlur,
     style,
+    entrada: Entrada,
 }: {
     texto: string;
     onCambiar: (texto: string) => void;
@@ -47,9 +53,12 @@ export function Buscador({
     autoFocus?: boolean;
     onBlur?: () => void;
     style?: StyleProp<ViewStyle>;
+    /** El campo en el que se escribe, si no es el `TextInput` de la app. */
+    entrada?: React.ComponentType<TextInputProps>;
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const Campo = Entrada ?? TextInput;
     return (
         <View style={[styles.buscador, style]}>
             <MaterialCommunityIcons name="magnify" size={24} color={c.secondary} />
@@ -64,7 +73,7 @@ export function Buscador({
                         {placeholder}
                     </Text>
                 ) : null}
-                <TextInput
+                <Campo
                     value={texto}
                     onChangeText={onCambiar}
                     accessibilityLabel={placeholder}
@@ -72,7 +81,9 @@ export function Buscador({
                     autoFocus={autoFocus}
                     onBlur={onBlur}
                     returnKeyType="search"
-                    style={styles.entrada}
+                    selectionColor={c.primary}
+                    // El de la app ya trae su letra y su color; uno de fuera, no.
+                    style={[fuenteBase, { color: c.texto }, styles.entrada]}
                 />
             </View>
             {texto ? (
@@ -138,6 +149,10 @@ function BotonDeFiltros({ cuenta, punto, onPress }: FiltrosDeCabecera) {
 /**
  * Lo de arriba de una lista: el buscador, con el botón de sus filtros a la derecha si los tiene, y
  * las pestañas que la cortan («En curso», «Por iniciar»). Con una sola pestaña no se pintan.
+ *
+ * Una lista cuyo servidor no busca por texto (una bandeja que sólo se filtra) va sin `placeholder`:
+ * entonces no lleva buscador —uno que no filtrara nada engañaría— y el botón de los filtros queda
+ * solo, a la derecha.
  */
 export function CabeceraDeLista<K extends string>({
     texto,
@@ -148,9 +163,10 @@ export function CabeceraDeLista<K extends string>({
     onPestana,
     filtros,
 }: {
-    texto: string;
-    onBuscar: (texto: string) => void;
-    placeholder: string;
+    texto?: string;
+    onBuscar?: (texto: string) => void;
+    /** Sin esto no hay buscador. */
+    placeholder?: string;
     pestanas?: readonly Pestana<K>[];
     activa?: K;
     onPestana?: (key: K) => void;
@@ -159,19 +175,21 @@ export function CabeceraDeLista<K extends string>({
     const styles = useStyles();
     return (
         <View style={styles.cabecera}>
-            {filtros ? (
+            {placeholder !== undefined || filtros ? (
                 <View style={styles.filaDeBusqueda}>
-                    <Buscador
-                        texto={texto}
-                        onCambiar={onBuscar}
-                        placeholder={placeholder}
-                        style={styles.flex}
-                    />
-                    <BotonDeFiltros {...filtros} />
+                    {placeholder !== undefined ? (
+                        <Buscador
+                            texto={texto ?? ""}
+                            onCambiar={onBuscar ?? (() => {})}
+                            placeholder={placeholder}
+                            style={styles.flex}
+                        />
+                    ) : (
+                        <View style={styles.flex} />
+                    )}
+                    {filtros ? <BotonDeFiltros {...filtros} /> : null}
                 </View>
-            ) : (
-                <Buscador texto={texto} onCambiar={onBuscar} placeholder={placeholder} />
-            )}
+            ) : null}
             {pestanas && pestanas.length > 1 && activa && onPestana ? (
                 <Pestanas pestanas={pestanas} activa={activa} onSelect={onPestana} />
             ) : null}
@@ -382,6 +400,64 @@ export function RenglonDeContacto({
     );
 }
 
+/**
+ * Abre una dirección en la app de mapas del teléfono: Apple Maps en iOS y, en Android, la que
+ * atienda `geo:` (Google Maps, Waze…). Si ninguna la atiende, Google Maps en el navegador.
+ */
+const abrirEnMapas = (direccion: string) => {
+    const q = encodeURIComponent(direccion);
+    const nativa = Platform.OS === "ios" ? `maps:0,0?q=${q}` : `geo:0,0?q=${q}`;
+    Linking.openURL(nativa).catch(() =>
+        Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${q}`).catch(() => {}),
+    );
+};
+
+/**
+ * Una dirección **que se abre en el mapa del teléfono**: el renglón entero es el botón, para
+ * llegar a donde se entrega sin copiarla a mano. Las líneas que falten no se pintan; sin ninguna,
+ * no hay renglón. Es el hermano de `RenglonDeContacto`.
+ */
+export function RenglonDeDireccion({
+    etiqueta = "Dirección",
+    lineas,
+    enHoja,
+}: {
+    etiqueta?: string;
+    /** La calle, la colonia, «Ciudad, Estado, CP», el país: un renglón cada una. */
+    lineas: (string | null | undefined)[];
+    /** En una hoja (`HojaInferior`), del color del fondo, como `RenglonDeContacto`. */
+    enHoja?: boolean;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const presentes = lineas.map((l) => l?.trim()).filter((l): l is string => Boolean(l));
+    if (!presentes.length) return null;
+    return (
+        <Pressable
+            onPress={() => abrirEnMapas(presentes.join(", "))}
+            accessibilityRole="link"
+            accessibilityLabel={`Abrir en el mapa: ${presentes.join(", ")}`}
+            style={({ pressed }) => [
+                styles.renglon,
+                enHoja && styles.renglonEnHoja,
+                pressed && styles.presionada,
+            ]}
+        >
+            <View style={styles.renglonTexto}>
+                <Text style={styles.etiqueta}>{etiqueta}</Text>
+                {presentes.map((l, i) => (
+                    <Text key={i} style={i === 0 ? styles.valor : styles.linea}>
+                        {l}
+                    </Text>
+                ))}
+            </View>
+            <View style={styles.accion}>
+                <MaterialCommunityIcons name="map-marker-outline" size={24} color={c.primary} />
+            </View>
+        </Pressable>
+    );
+}
+
 /**
  * Un renglón de una hoja (`HojaInferior`): el título con su chip y lo que acompaña. **No es
  * `TarjetaDeLista`**: ésa es del color de la hoja y adentro de ella no se distinguía un renglón del