@acvl/mobile-components 0.0.2 → 0.0.4

package/src/formularios/SelectorDeOpcion.tsx

@@ -14,6 +14,7 @@ import EstadoVacio from "../componentes/EstadoVacio";
 import IconoDeRenglon from "../componentes/IconoDeRenglon";
 import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
 import { Text, TextInput } from "../texto";
+import { CajaDeCampo } from "./campos";
 
 /** Una opción de una lista: lo que se guarda (`value`) y lo que se lee (`label`). */
 export interface Opcion {
@@ -43,6 +44,16 @@ interface FuenteDeOpciones<T extends Opcion> {
     grupo?: (opcion: T) => string;
     vacio?: string;
     disabled?: boolean;
+    /**
+     * Lo que va a la derecha del rótulo: un «No aplica» que apaga el campo. No se apaga con él,
+     * porque es lo que lo vuelve a prender.
+     */
+    accesorio?: React.ReactNode;
+    /**
+     * Señala el campo mientras no tenga nada elegido: lo que falta capturar en un formulario largo.
+     * En ámbar y no en rojo, que es del error.
+     */
+    resaltarVacio?: boolean;
 }
 
 export interface PropsDeSelectorDeOpcion<T extends Opcion> extends FuenteDeOpciones<T> {
@@ -191,24 +202,30 @@ function RenglonDelSelector({
     texto,
     detalle,
     disabled,
+    accesorio,
+    pendiente,
     onPress,
 }: {
     etiqueta: string;
     texto: string | null;
     detalle?: string | null;
     disabled?: boolean;
+    accesorio?: React.ReactNode;
+    /** Vacío y se pidió resaltarlo (`resaltarVacio`). */
+    pendiente?: boolean;
     onPress: () => void;
 }) {
     const c = usePaleta();
     const styles = useStyles();
     return (
-        <Pressable
+        <CajaDeCampo
+            etiqueta={etiqueta}
+            accesorio={accesorio}
             onPress={onPress}
-            disabled={disabled}
             accessibilityRole="button"
-            style={[styles.campo, disabled && styles.campoInactivo]}
+            disabled={disabled}
+            pendiente={pendiente}
         >
-            <Text style={styles.etiqueta}>{etiqueta}</Text>
             <View style={styles.renglon}>
                 <Text style={[styles.valor, !texto && styles.sinValor]}>{texto ?? "Elegir…"}</Text>
                 <IconoDeRenglon
@@ -218,7 +235,7 @@ function RenglonDelSelector({
                 />
             </View>
             {detalle ? <Text style={styles.detalle}>{detalle}</Text> : null}
-        </Pressable>
+        </CajaDeCampo>
     );
 }
 
@@ -239,6 +256,8 @@ export default function SelectorDeOpcion<T extends Opcion>(props: PropsDeSelecto
         textoDeNinguno = "Ninguno",
         vacio,
         disabled,
+        accesorio,
+        resaltarVacio,
     } = props;
     const styles = useStyles();
     const [abierto, setAbierto] = React.useState(false);
@@ -257,6 +276,8 @@ export default function SelectorDeOpcion<T extends Opcion>(props: PropsDeSelecto
                 texto={valor ? valor.label : null}
                 detalle={valor ? detalle?.(valor) : null}
                 disabled={disabled}
+                accesorio={accesorio}
+                pendiente={resaltarVacio && !valor}
                 onPress={() => setAbierto(true)}
             />
             <HojaDeOpciones
@@ -294,7 +315,18 @@ export default function SelectorDeOpcion<T extends Opcion>(props: PropsDeSelecto
  * 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 {
+        etiqueta,
+        valor,
+        onElegir,
+        cargando,
+        detalle,
+        grupo,
+        vacio,
+        disabled,
+        accesorio,
+        resaltarVacio,
+    } = props;
     const [abierto, setAbierto] = React.useState(false);
     const [marcadas, setMarcadas] = React.useState<T[]>(valor);
     const { texto, buscar, visibles } = useBuscador(props);
@@ -320,6 +352,8 @@ export function SelectorDeVarias<T extends Opcion>(props: PropsDeSelectorDeVaria
                 etiqueta={etiqueta}
                 texto={valor.length ? valor.map((o) => o.label).join(", ") : null}
                 disabled={disabled}
+                accesorio={accesorio}
+                pendiente={resaltarVacio && !valor.length}
                 onPress={abrir}
             />
             <HojaDeOpciones
@@ -352,22 +386,6 @@ export function SelectorDeVarias<T extends Opcion>(props: PropsDeSelectorDeVaria
 }
 
 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" },

package/src/formularios/TextoDeAccesoControlado.tsx

@@ -10,7 +10,7 @@ import type { CampoAtado } from "./controlados";
  * 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
+ * Es de Paper y no `TextoControlado`, que lleva su rótulo dentro de la caja, porque así es la pantalla de
  * entrada de las apps.
  */
 export default function TextoDeAccesoControlado<T extends FieldValues>({