@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/listas/TarjetaDeslizable.tsx

@@ -0,0 +1,126 @@
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import * as Haptics from "expo-haptics";
+import React, { useRef } from "react";
+import { View } from "react-native";
+import ReanimatedSwipeable, {
+    SwipeDirection,
+    type SwipeableMethods,
+} from "react-native-gesture-handler/ReanimatedSwipeable";
+
+/** Lo que mide el panel que asoma al deslizar, y desde dónde ya cuenta como hecho. */
+const ANCHO = 132;
+const UMBRAL = 96;
+
+/**
+ * El color del panel. **Fijos y no de la paleta**: es un relleno con letra blanca, y los tonos del
+ * modo oscuro son claros, para leerse como texto; con blanco encima no se leerían.
+ */
+const COLORES = {
+    exito: "#2e7d32",
+    info: "#1565c0",
+    peligro: "#c62828",
+} as const;
+
+export interface AccionDeslizable {
+    etiqueta: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    color: keyof typeof COLORES;
+    /** Lo que hace. Quien la da decide si pregunta antes (las que no se deshacen, sí). */
+    onAccion: () => void;
+}
+
+const Panel = ({ accion, lado }: { accion: AccionDeslizable; lado: "izquierda" | "derecha" }) => {
+    const styles = useStyles();
+    return (
+        <View
+            style={[
+                styles.panel,
+                { backgroundColor: COLORES[accion.color] },
+                lado === "izquierda" ? styles.izquierda : styles.derecha,
+            ]}
+        >
+            <MaterialCommunityIcons name={accion.icono} size={26} color="#ffffff" />
+            <Text style={styles.etiqueta}>{accion.etiqueta}</Text>
+        </View>
+    );
+};
+
+/**
+ * Un renglón de una lista que **hace algo al deslizarlo**: hacia la derecha asoma la acción de la
+ * izquierda (`alDeslizarALaDerecha`) y hacia la izquierda la otra. Se suelta pasado el umbral y la
+ * acción corre; la tarjeta regresa sola a su lugar. Con una vibración corta, para que se sienta
+ * que pasó algo.
+ *
+ * Sin acciones es la tarjeta de siempre: no hay nada que deslizar.
+ */
+export default function TarjetaDeslizable({
+    alDeslizarALaDerecha,
+    alDeslizarALaIzquierda,
+    children,
+}: {
+    alDeslizarALaDerecha?: AccionDeslizable | null;
+    alDeslizarALaIzquierda?: AccionDeslizable | null;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    const deslizable = useRef<SwipeableMethods>(null);
+
+    if (!alDeslizarALaDerecha && !alDeslizarALaIzquierda) return <>{children}</>;
+
+    return (
+        <ReanimatedSwipeable
+            ref={deslizable}
+            friction={1.5}
+            leftThreshold={UMBRAL}
+            rightThreshold={UMBRAL}
+            overshootLeft={false}
+            overshootRight={false}
+            containerStyle={styles.contenedor}
+            renderLeftActions={
+                alDeslizarALaDerecha
+                    ? () => <Panel accion={alDeslizarALaDerecha} lado="izquierda" />
+                    : undefined
+            }
+            renderRightActions={
+                alDeslizarALaIzquierda
+                    ? () => <Panel accion={alDeslizarALaIzquierda} lado="derecha" />
+                    : undefined
+            }
+            // `RIGHT`: la tarjeta se fue a la derecha, así que asomó el panel de la izquierda.
+            onSwipeableWillOpen={(direccion) => {
+                const accion =
+                    direccion === SwipeDirection.RIGHT
+                        ? alDeslizarALaDerecha
+                        : alDeslizarALaIzquierda;
+                deslizable.current?.close();
+                if (!accion) return;
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                accion.onAccion();
+            }}
+        >
+            {children}
+        </ReanimatedSwipeable>
+    );
+}
+
+const useStyles = crearEstilos(() => ({
+    // El redondeo de la tarjeta, para que el panel que asoma no se vea cuadrado detrás.
+    contenedor: { borderRadius: 14 },
+    panel: {
+        width: ANCHO,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4,
+        paddingHorizontal: 8,
+    },
+    izquierda: { borderTopLeftRadius: 14, borderBottomLeftRadius: 14 },
+    derecha: { borderTopRightRadius: 14, borderBottomRightRadius: 14 },
+    etiqueta: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: "#ffffff",
+        textAlign: "center",
+    },
+}));

package/src/listas/paginado.ts

@@ -0,0 +1,15 @@
+/**
+ * Una página de una lista del servidor (`CustomPagination` de los backends de ACV): `?page=N` y
+ * `?page_size=N`, y la respuesta `{count, next, previous, results}`. Las listas la leen de a poco,
+ * con scroll infinito (`ListaPaginada`).
+ */
+export interface Pagina<T> {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: T[];
+}
+
+/** Todos los renglones cargados hasta ahora, de todas las páginas. */
+export const renglonesDe = <T>(data: { pages: Pagina<T>[] } | undefined): T[] =>
+    data?.pages.flatMap((p) => p.results) ?? [];