@acvl/mobile-components 0.0.2 → 0.0.4

package/src/formularios/campos.tsx

@@ -1,15 +1,21 @@
 import DateTimePicker from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
 import React from "react";
-import { Pressable, Switch, View, type KeyboardTypeOptions } from "react-native";
+import {
+    Pressable,
+    Switch,
+    View,
+    type AccessibilityRole,
+    type KeyboardTypeOptions,
+} from "react-native";
 import IconoDeRenglon from "../componentes/IconoDeRenglon";
 import OpcionesExcluyentes from "../componentes/OpcionesExcluyentes";
 import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
 import { Text, TextInput } from "../texto";
 
 /**
- * Los campos de un formulario (un viaje, un tracto, un operador). Cada uno trae su rótulo arriba y
- * su error abajo, para que la pantalla sólo los apile. Son controlados: atados a react-hook-form,
+ * Los campos de un formulario (un viaje, un tracto, un operador). Cada uno es una caja con su
+ * rótulo adentro (`CajaDeCampo`) y su error abajo, para que la pantalla sólo los apile. Son controlados: atados a react-hook-form,
  * van por `controlados.tsx`.
  */
 
@@ -20,27 +26,40 @@ export function ErrorDelCampo({ error }: { error?: string }) {
 }
 
 /**
- * El marco de un campo: el rótulo arriba, lo que se captura en medio, y debajo la ayuda y el error.
+ * El marco de un campo: el rótulo arriba (si no va en su `CajaDeCampo`), lo que se captura en
+ * medio, y debajo la ayuda y el error.
  * Lo usan todos los campos de aquí, y una app lo usa para lo que no es un campo de la casa —una
  * tira de fotos, el renglón de un escáner— sin que se vea distinto de los demás.
  *
  * Sin `etiqueta` no pinta rótulo: el interruptor lleva el suyo adentro.
+ *
+ * `accesorio` va a la derecha del rótulo: un «No aplica» que apaga el campo, por ejemplo. Queda
+ * fuera de lo que se apaga, porque es justo lo que lo vuelve a prender.
  */
 export function Campo({
     etiqueta,
     ayuda,
     error,
+    accesorio,
     children,
 }: {
     etiqueta?: string;
     ayuda?: string;
     error?: string;
+    accesorio?: React.ReactNode;
     children: React.ReactNode;
 }) {
     const styles = useStyles();
     return (
         <View style={styles.campo}>
-            {etiqueta ? <Text style={styles.etiqueta}>{etiqueta}</Text> : null}
+            {accesorio ? (
+                <View style={styles.rotuloConAccesorio}>
+                    <Text style={[styles.etiqueta, styles.flex]}>{etiqueta ?? ""}</Text>
+                    {accesorio}
+                </View>
+            ) : etiqueta ? (
+                <Text style={styles.etiqueta}>{etiqueta}</Text>
+            ) : null}
             {children}
             {ayuda ? <Text style={styles.ayuda}>{ayuda}</Text> : null}
             <ErrorDelCampo error={error} />
@@ -48,6 +67,79 @@ export function Campo({
     );
 }
 
+/**
+ * La caja de un campo: el rótulo adentro, arriba de lo que se captura, con un borde tenue. Es la
+ * forma del texto, la fecha, el teléfono y el selector, y una app la usa para los suyos (el
+ * renglón de un escáner) sin que se vean distintos. Va dentro de un `Campo` sin `etiqueta`, que
+ * pone la ayuda y el error debajo.
+ *
+ * Tocarla en cualquier parte es `onPress`: enfocar lo que se escribe, abrir la lista. Apagada se
+ * atenúa lo de adentro y no el `accesorio`, que es justo lo que la vuelve a prender.
+ */
+export function CajaDeCampo({
+    etiqueta,
+    accesorio,
+    onPress,
+    accessibilityRole,
+    disabled,
+    enfocada,
+    pendiente,
+    conError,
+    children,
+}: {
+    etiqueta?: string;
+    accesorio?: React.ReactNode;
+    onPress?: () => void;
+    accessibilityRole?: AccessibilityRole;
+    disabled?: boolean;
+    /** Se escribe en ella: el borde se marca. */
+    enfocada?: boolean;
+    /** Vacía y se pidió resaltarla (`resaltarVacio`): el borde en ámbar. */
+    pendiente?: boolean;
+    /** El borde en rojo; el texto del error lo pone el `Campo`. */
+    conError?: boolean;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={disabled || !onPress}
+            accessibilityRole={accessibilityRole}
+            accessibilityState={{ disabled: !!disabled }}
+            style={[
+                styles.caja,
+                enfocada && styles.cajaEnfocada,
+                pendiente && !disabled && styles.cajaPendiente,
+                conError && styles.cajaError,
+            ]}
+        >
+            {etiqueta || accesorio ? (
+                <View style={styles.rotuloConAccesorio}>
+                    <Text style={[styles.etiqueta, styles.flex, disabled && styles.inactivo]}>
+                        {etiqueta ?? ""}
+                    </Text>
+                    {accesorio}
+                </View>
+            ) : null}
+            <View style={disabled ? styles.inactivo : undefined}>{children}</View>
+        </Pressable>
+    );
+}
+
+/** Lo que se escribe dentro de una caja: el enfoque (para el borde) y tocar la caja para escribir. */
+function useEntradaEnCaja() {
+    const entrada = React.useRef<React.ComponentRef<typeof TextInput>>(null);
+    const [enfocada, setEnfocada] = React.useState(false);
+    return {
+        entrada,
+        enfocada,
+        enfocar: () => entrada.current?.focus(),
+        alEnfocar: () => setEnfocada(true),
+        alSalir: () => setEnfocada(false),
+    };
+}
+
 /**
  * Un texto libre: una referencia (tope de 100), unas instrucciones (varios renglones), un VIN (en
  * mayúsculas) o un año (`teclado="number-pad"`).
@@ -64,6 +156,8 @@ export function CampoDeTexto({
     disabled,
     teclado,
     mayusculas,
+    accesorio,
+    resaltarVacio,
 }: {
     etiqueta: string;
     valor: string;
@@ -77,27 +171,45 @@ export function CampoDeTexto({
     teclado?: KeyboardTypeOptions;
     /** Cómo pone mayúsculas el teclado; un VIN o una placa, `characters`. */
     mayusculas?: "none" | "sentences" | "words" | "characters";
+    /** Lo que va a la derecha del rótulo (ver `Campo`). */
+    accesorio?: React.ReactNode;
+    /**
+     * Señala el campo mientras esté vacío: lo que falta capturar en un formulario largo (una
+     * revisión) se ve sin buscarlo. En ámbar y no en rojo, que es del error.
+     */
+    resaltarVacio?: boolean;
 }) {
     const styles = useStyles();
+    const { entrada, enfocada, enfocar, alEnfocar, alSalir } = useEntradaEnCaja();
+    const pendiente = resaltarVacio && !error && !String(valor ?? "").trim();
     return (
-        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
-            <TextInput
-                value={valor}
-                onChangeText={onCambiar}
-                keyboardType={teclado}
-                autoCapitalize={mayusculas}
-                autoCorrect={mayusculas === "characters" ? false : undefined}
-                multiline={multilinea}
-                maxLength={maximo}
-                placeholder={placeholder}
-                editable={!disabled}
-                style={[
-                    styles.entrada,
-                    multilinea && styles.multilinea,
-                    !!error && styles.entradaError,
-                    disabled && styles.inactivo,
-                ]}
-            />
+        <Campo ayuda={ayuda} error={error}>
+            <CajaDeCampo
+                etiqueta={etiqueta}
+                accesorio={accesorio}
+                onPress={enfocar}
+                disabled={disabled}
+                enfocada={enfocada}
+                pendiente={pendiente}
+                conError={!!error}
+            >
+                <TextInput
+                    ref={entrada}
+                    value={valor}
+                    onChangeText={onCambiar}
+                    onFocus={alEnfocar}
+                    onBlur={alSalir}
+                    keyboardType={teclado}
+                    autoCapitalize={mayusculas}
+                    autoCorrect={mayusculas === "characters" ? false : undefined}
+                    multiline={multilinea}
+                    maxLength={maximo}
+                    placeholder={placeholder}
+                    editable={!disabled}
+                    accessibilityLabel={etiqueta}
+                    style={[styles.texto, multilinea && styles.multilinea]}
+                />
+            </CajaDeCampo>
         </Campo>
     );
 }
@@ -107,8 +219,8 @@ export function CampoDeTexto({
  * hora es el dato** (contra ella se mide si un viaje va tarde o un equipo está comprometido), así
  * que nunca se manda sólo el día.
  *
- * Vacío, un solo botón «Elegir»: abre el día y, al elegirlo, la hora. Si es `opcional`, «Quitar»
- * lo deja vacío otra vez.
+ * Vacío, un solo botón «Elegir»: abre el día y, al elegirlo, la hora. Si es `opcional`, la ✕ del
+ * rótulo lo deja vacío otra vez.
  */
 export function CampoDeFechaHora({
     etiqueta,
@@ -136,31 +248,48 @@ export function CampoDeFechaHora({
     // Vacío, el selector arranca en la próxima hora en punto: la hora de ahora no le sirve a nadie.
     const base = valor ?? dayjs().add(1, "hour").startOf("hour").toDate();
 
+    // Puesta, el día y la hora se tocan cada uno; el resto de la caja abre el día.
     return (
-        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
-            {valor ? (
-                <View style={styles.fechaHora}>
-                    <Pressable
-                        onPress={() => setEligiendo("date")}
-                        accessibilityRole="button"
-                        style={[styles.entrada, styles.mitad, !!error && styles.entradaError]}
-                    >
-                        <Text style={styles.textoFecha}>{dayjs(valor).format("D MMM YYYY")}</Text>
-                    </Pressable>
-                    <Pressable
-                        onPress={() => setEligiendo("time")}
-                        accessibilityRole="button"
-                        style={[styles.entrada, styles.mitad, !!error && styles.entradaError]}
-                    >
-                        <Text style={styles.textoFecha}>{dayjs(valor).format("HH:mm")}</Text>
-                    </Pressable>
-                </View>
-            ) : (
-                <Pressable
-                    onPress={() => setEligiendo("date")}
-                    accessibilityRole="button"
-                    style={[styles.entrada, !!error && styles.entradaError]}
-                >
+        <Campo ayuda={ayuda} error={error}>
+            <CajaDeCampo
+                etiqueta={etiqueta}
+                onPress={() => setEligiendo("date")}
+                accessibilityRole="button"
+                conError={!!error}
+                accesorio={
+                    opcional && valor ? <BotonDeQuitar onPress={() => onCambiar(null)} /> : null
+                }
+            >
+                {valor ? (
+                    <View style={styles.fechaHora}>
+                        <Pressable
+                            onPress={() => setEligiendo("date")}
+                            accessibilityRole="button"
+                            style={styles.renglon}
+                        >
+                            <IconoDeRenglon
+                                name="calendar"
+                                fontSize={tipografia.subtitulo}
+                                color={c.secondary}
+                            />
+                            <Text style={styles.textoFecha}>
+                                {dayjs(valor).format("D MMM YYYY")}
+                            </Text>
+                        </Pressable>
+                        <Pressable
+                            onPress={() => setEligiendo("time")}
+                            accessibilityRole="button"
+                            style={styles.renglon}
+                        >
+                            <IconoDeRenglon
+                                name="clock-outline"
+                                fontSize={tipografia.subtitulo}
+                                color={c.secondary}
+                            />
+                            <Text style={styles.textoFecha}>{dayjs(valor).format("HH:mm")}</Text>
+                        </Pressable>
+                    </View>
+                ) : (
                     <View style={styles.renglon}>
                         <IconoDeRenglon
                             name="calendar-clock"
@@ -169,22 +298,8 @@ export function CampoDeFechaHora({
                         />
                         <Text style={[styles.textoFecha, styles.sinValor]}>Elegir…</Text>
                     </View>
-                </Pressable>
-            )}
-            {opcional && valor ? (
-                <Pressable
-                    onPress={() => onCambiar(null)}
-                    accessibilityRole="button"
-                    style={styles.quitar}
-                >
-                    <IconoDeRenglon
-                        name="close-circle-outline"
-                        fontSize={tipografia.cuerpo}
-                        color={c.secondary}
-                    />
-                    <Text style={styles.quitarTexto}>Quitar</Text>
-                </Pressable>
-            ) : null}
+                )}
+            </CajaDeCampo>
             {eligiendo ? (
                 <DateTimePicker
                     value={base}
@@ -217,6 +332,25 @@ export function CampoDeFechaHora({
     );
 }
 
+/** El «Quitar» de una fecha opcional: la ✕ junto al rótulo, dentro de la caja. */
+function BotonDeQuitar({ onPress }: { onPress: () => void }) {
+    const c = usePaleta();
+    return (
+        <Pressable
+            onPress={onPress}
+            hitSlop={10}
+            accessibilityRole="button"
+            accessibilityLabel="Quitar"
+        >
+            <IconoDeRenglon
+                name="close-circle"
+                fontSize={tipografia.subtitulo}
+                color={c.secondaryLight}
+            />
+        </Pressable>
+    );
+}
+
 /** Un interruptor con su texto y, si hace falta, por qué está como está. */
 export function CampoInterruptor({
     texto,
@@ -287,11 +421,15 @@ export function CampoDeFecha({
     const fecha = valor ? dayjs(valor) : null;
 
     return (
-        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
-            <Pressable
+        <Campo ayuda={ayuda} error={error}>
+            <CajaDeCampo
+                etiqueta={etiqueta}
                 onPress={() => setEligiendo(true)}
                 accessibilityRole="button"
-                style={[styles.entrada, !!error && styles.entradaError]}
+                conError={!!error}
+                accesorio={
+                    opcional && valor ? <BotonDeQuitar onPress={() => onCambiar(null)} /> : null
+                }
             >
                 <View style={styles.renglon}>
                     <IconoDeRenglon
@@ -303,21 +441,7 @@ export function CampoDeFecha({
                         {fecha ? fecha.format("D MMM YYYY") : "Elegir…"}
                     </Text>
                 </View>
-            </Pressable>
-            {opcional && valor ? (
-                <Pressable
-                    onPress={() => onCambiar(null)}
-                    accessibilityRole="button"
-                    style={styles.quitar}
-                >
-                    <IconoDeRenglon
-                        name="close-circle-outline"
-                        fontSize={tipografia.cuerpo}
-                        color={c.secondary}
-                    />
-                    <Text style={styles.quitarTexto}>Quitar</Text>
-                </Pressable>
-            ) : null}
+            </CajaDeCampo>
             {eligiendo ? (
                 <DateTimePicker
                     value={fecha?.toDate() ?? new Date()}
@@ -402,42 +526,63 @@ export function CampoDeTelefono({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const { entrada, enfocada, enfocar, alEnfocar, alSalir } = useEntradaEnCaja();
     const { lada, digitos } = partirTelefono(valor);
     const armar = (nuevaLada: string, nuevosDigitos: string) => {
         const solo = nuevosDigitos.replace(/\D/g, "");
         onCambiar(solo ? `${nuevaLada}${solo}` : null);
     };
     return (
-        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
-            <View style={styles.telefono}>
-                {LADAS.map((l) => (
-                    <Pressable
-                        key={l.pais}
-                        onPress={() => armar(l.lada, digitos)}
-                        accessibilityRole="radio"
-                        accessibilityState={{ selected: lada === l.lada }}
-                        style={[styles.lada, lada === l.lada && styles.ladaElegida]}
-                    >
-                        <Text style={[styles.ladaTexto, lada === l.lada && { color: c.primary }]}>
-                            {l.texto}
-                        </Text>
-                    </Pressable>
-                ))}
-            </View>
-            <TextInput
-                value={digitos}
-                onChangeText={(texto) => armar(lada, texto)}
-                keyboardType="phone-pad"
-                maxLength={10}
-                placeholder="10 dígitos"
-                style={[styles.entrada, !!error && styles.entradaError]}
-            />
+        <Campo ayuda={ayuda} error={error}>
+            <CajaDeCampo
+                etiqueta={etiqueta}
+                onPress={enfocar}
+                enfocada={enfocada}
+                conError={!!error}
+            >
+                <View style={styles.telefono}>
+                    <View style={styles.ladas}>
+                        {LADAS.map((l) => (
+                            <Pressable
+                                key={l.pais}
+                                onPress={() => armar(l.lada, digitos)}
+                                accessibilityRole="radio"
+                                accessibilityState={{ selected: lada === l.lada }}
+                                style={[styles.lada, lada === l.lada && styles.ladaElegida]}
+                            >
+                                <Text
+                                    style={[
+                                        styles.ladaTexto,
+                                        lada === l.lada && { color: c.primary },
+                                    ]}
+                                >
+                                    {l.texto}
+                                </Text>
+                            </Pressable>
+                        ))}
+                    </View>
+                    <TextInput
+                        ref={entrada}
+                        value={digitos}
+                        onChangeText={(texto) => armar(lada, texto)}
+                        onFocus={alEnfocar}
+                        onBlur={alSalir}
+                        keyboardType="phone-pad"
+                        maxLength={10}
+                        placeholder="10 dígitos"
+                        accessibilityLabel={etiqueta}
+                        style={styles.texto}
+                    />
+                </View>
+            </CajaDeCampo>
         </Campo>
     );
 }
 
 const useStyles = crearEstilos((c) => ({
     campo: { gap: 6 },
+    flex: { flex: 1 },
+    rotuloConAccesorio: { flexDirection: "row", alignItems: "center", gap: 8 },
     etiqueta: {
         ...renglon(tipografia.etiqueta),
         fontWeight: "800",
@@ -445,36 +590,42 @@ const useStyles = crearEstilos((c) => ({
         textTransform: "uppercase",
         letterSpacing: 0.8,
     },
-    entrada: {
-        borderWidth: 1.5,
-        borderColor: c.secondaryLight,
-        borderRadius: 12,
-        paddingHorizontal: 14,
-        paddingVertical: 12,
+    // La caja con el borde tenue del selector; marcado al escribir, ámbar si falta, rojo con error.
+    caja: {
         backgroundColor: c.superficie,
-        fontSize: tipografia.subtitulo,
+        borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        padding: 14,
+        gap: 4,
+    },
+    cajaEnfocada: { borderColor: c.secondary },
+    cajaPendiente: { borderColor: c.aviso.fuerte },
+    cajaError: { borderColor: c.primary },
+    // Sin el relleno que Android le pone a un TextInput: el de la caja ya basta.
+    texto: {
+        ...renglon(tipografia.subtitulo),
+        fontWeight: "700",
         color: c.texto,
+        padding: 0,
     },
-    multilinea: { minHeight: 100, textAlignVertical: "top", fontSize: tipografia.cuerpo },
-    entradaError: { borderColor: c.primary },
+    multilinea: { ...renglon(tipografia.cuerpo), minHeight: 80, textAlignVertical: "top" },
     inactivo: { opacity: 0.5 },
-    fechaHora: { flexDirection: "row", gap: 12 },
-    mitad: { flex: 1, justifyContent: "center" },
+    fechaHora: { flexDirection: "row", flexWrap: "wrap", gap: 20 },
     renglon: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
-    textoFecha: { ...renglon(tipografia.cuerpo), fontWeight: "700", color: c.texto },
+    textoFecha: { ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.texto },
     sinValor: { color: c.secondaryLight, fontWeight: "600" },
-    quitar: { flexDirection: "row", alignItems: "flex-start", gap: 6, alignSelf: "flex-start" },
-    quitarTexto: { ...renglon(tipografia.cuerpo), fontWeight: "700", color: c.secondary },
     ayuda: { ...renglon(tipografia.secundario), color: c.secondary },
     error: { ...renglon(tipografia.secundario), color: c.primary },
-    telefono: { flexDirection: "row", gap: 10 },
+    telefono: { gap: 10 },
+    ladas: { flexDirection: "row", gap: 10 },
     lada: {
         flex: 1,
         alignItems: "center",
         borderWidth: 2,
         borderColor: c.secondaryLighter,
         borderRadius: 12,
-        paddingVertical: 10,
+        paddingVertical: 8,
         backgroundColor: c.superficie,
     },
     ladaElegida: { borderColor: c.primary, backgroundColor: c.primaryWash },
@@ -485,6 +636,8 @@ const useStyles = crearEstilos((c) => ({
         gap: 10,
         backgroundColor: c.superficie,
         borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
         paddingHorizontal: 14,
         paddingVertical: 10,
     },

package/src/hoja/HojaDeLista.tsx

@@ -4,7 +4,8 @@ import BottomSheet, {
     BottomSheetTextInput,
     type BottomSheetBackdropProps,
 } from "@gorhom/bottom-sheet";
-import React, { useEffect, useRef, useState } from "react";
+import { useFocusEffect } from "expo-router";
+import React, { useCallback, 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";
@@ -89,14 +90,19 @@ export default function HojaDeLista<T>({
         else hoja.current?.close();
     }, [abierta]);
 
-    useEffect(() => {
-        if (!abierta) return;
-        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
-            onCerrar();
-            return true;
-        });
-        return () => sub.remove();
-    }, [abierta, onCerrar]);
+    // Atrás la cierra **sólo con su pantalla al frente**: si desde la hoja se abre una ficha, la
+    // hoja sigue abierta debajo, y sin esto el primer atrás de la ficha la cerraba a ella en vez de
+    // regresar. La flecha del encabezado no pasa por aquí (`router.back()`), por eso ésa sí servía.
+    useFocusEffect(
+        useCallback(() => {
+            if (!abierta) return;
+            const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+                onCerrar();
+                return true;
+            });
+            return () => sub.remove();
+        }, [abierta, onCerrar]),
+    );
 
     const { renglones, total } = lista;
 

package/src/hoja/HojaInferior.tsx

@@ -6,7 +6,8 @@ import BottomSheet, {
     BottomSheetScrollView,
     type BottomSheetBackdropProps,
 } from "@gorhom/bottom-sheet";
-import React, { useEffect, useRef } from "react";
+import { useFocusEffect } from "expo-router";
+import React, { useCallback, useEffect, useRef } from "react";
 import { BackHandler, useWindowDimensions, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -48,14 +49,19 @@ export default function HojaInferior({
         else hoja.current?.close();
     }, [abierta]);
 
-    useEffect(() => {
-        if (!abierta) return;
-        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
-            onCerrar();
-            return true;
-        });
-        return () => sub.remove();
-    }, [abierta, onCerrar]);
+    // Atrás la cierra **sólo con su pantalla al frente**: si desde la hoja se abre una ficha, la
+    // hoja sigue abierta debajo, y sin esto el primer atrás de la ficha la cerraba a ella en vez de
+    // regresar. La flecha del encabezado no pasa por aquí (`router.back()`), por eso ésa sí servía.
+    useFocusEffect(
+        useCallback(() => {
+            if (!abierta) return;
+            const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+                onCerrar();
+                return true;
+            });
+            return () => sub.remove();
+        }, [abierta, onCerrar]),
+    );
 
     return (
         <BottomSheet

package/src/index.ts

@@ -62,6 +62,7 @@ export {
 // ==============================|| FORMULARIOS ||============================== //
 
 export {
+    CajaDeCampo,
     CampoDeFecha,
     CampoDeFechaHora,
     CampoDeOpciones,