orn-ui 0.2.2 → 0.2.4

package/src/organisms/ReorderableList.tsx

@@ -0,0 +1,151 @@
+import React, { useRef, useState } from 'react';
+import { Animated, PanResponder, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+
+export interface ReorderableListProps<T> {
+  data: T[];
+  keyExtractor: (item: T, index: number) => string;
+  /** Alto fijo de cada fila: necesario para calcular el índice destino sin medir layout async. */
+  itemHeight: number;
+  renderItem: (item: T, index: number, dragging: boolean) => React.ReactElement;
+  /** Se llama al soltar, con el arreglo ya reordenado. No muta `data`. */
+  onReorder: (data: T[]) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Reordena moviendo el ítem de `from` a `to`, sin mutar `data`. Exportada aparte por ser testeable sin simular gestos. */
+export function move<T>(data: T[], from: number, to: number): T[] {
+  const next = data.slice();
+  const [item] = next.splice(from, 1) as [T];
+  next.splice(to, 0, item);
+  return next;
+}
+
+const useStyles = createStyles(() => ({
+  row: { width: '100%' },
+}));
+
+/**
+ * ReorderableList
+ * Ley de destino común (common fate): al arrastrar una fila, las filas que
+ * tiene que atravesar se desplazan juntas en el mismo sentido — eso es lo
+ * que comunica "van a intercambiar lugar" antes de soltar el dedo, no un
+ * simple resaltado del ítem activo.
+ *
+ * Sin dependencias de gestos/animación externas (reanimated, gesture-handler):
+ * PanResponder + Animated alcanzan porque el cálculo de índice destino
+ * necesita el valor de arrastre en JS en cada movimiento (no algo que
+ * useNativeDriver pueda resolver solo).
+ */
+export function ReorderableList<T>({
+  data,
+  keyExtractor,
+  itemHeight,
+  renderItem,
+  onReorder,
+  disabled = false,
+  style,
+}: ReorderableListProps<T>) {
+  const styles = useStyles();
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [targetIndex, setTargetIndex] = useState<number | null>(null);
+  const dy = useRef(new Animated.Value(0)).current;
+  const activeIndexRef = useRef<number | null>(null);
+  // El PanResponder de cada fila se crea una sola vez (se cachea en el Map de
+  // abajo) y su closure queda fijo al render de esa primera vez: leer
+  // `targetIndex` (state) directamente ahí siempre daría el valor del
+  // montaje. Un ref sí refleja la última escritura sin importar cuándo se
+  // creó la closure que lo lee.
+  const targetIndexRef = useRef<number | null>(null);
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  // Igual razón que targetIndexRef: el responder de cada fila se crea una
+  // sola vez, así que leer `disabled` directo del closure congelaría el
+  // valor del momento en que esa fila se creó.
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+
+  const panResponders = useRef(new Map<number, ReturnType<typeof PanResponder.create>>()).current;
+  // Si `data` se achica, los responders de índices que ya no existen quedan
+  // colgados en el Map para siempre: se podan en cada render.
+  for (const index of panResponders.keys()) {
+    if (index >= data.length) panResponders.delete(index);
+  }
+
+  function panResponderFor(index: number) {
+    let responder = panResponders.get(index);
+    if (responder) return responder;
+
+    responder = PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: (_, gesture) => !disabledRef.current && Math.abs(gesture.dy) > 2,
+      onPanResponderGrant: () => {
+        activeIndexRef.current = index;
+        targetIndexRef.current = index;
+        setActiveIndex(index);
+        setTargetIndex(index);
+        dy.setValue(0);
+      },
+      onPanResponderMove: (_, gesture) => {
+        dy.setValue(gesture.dy);
+        const from = activeIndexRef.current;
+        if (from === null) return;
+        const rawTarget = from + Math.round(gesture.dy / itemHeight);
+        const clamped = Math.max(0, Math.min(dataRef.current.length - 1, rawTarget));
+        targetIndexRef.current = clamped;
+        setTargetIndex((prev) => (prev === clamped ? prev : clamped));
+      },
+      onPanResponderRelease: () => {
+        const from = activeIndexRef.current;
+        const to = targetIndexRef.current;
+        dy.setValue(0);
+        activeIndexRef.current = null;
+        targetIndexRef.current = null;
+        setActiveIndex(null);
+        setTargetIndex(null);
+        if (from === null || to === null || from === to) return;
+        onReorder(move(dataRef.current, from, to));
+      },
+      onPanResponderTerminate: () => {
+        dy.setValue(0);
+        activeIndexRef.current = null;
+        targetIndexRef.current = null;
+        setActiveIndex(null);
+        setTargetIndex(null);
+      },
+    });
+    panResponders.set(index, responder);
+    return responder;
+  }
+
+  return (
+    <View style={style}>
+      {data.map((item, index) => {
+        const isActive = activeIndex === index;
+        // Filas entre el origen y el destino se corren un lugar entero en el
+        // sentido del arrastre: es el efecto de "grupo que se mueve junto".
+        let shift = 0;
+        if (activeIndex !== null && targetIndex !== null && !isActive) {
+          if (activeIndex < targetIndex && index > activeIndex && index <= targetIndex) shift = -itemHeight;
+          else if (activeIndex > targetIndex && index < activeIndex && index >= targetIndex) shift = itemHeight;
+        }
+
+        return (
+          <Animated.View
+            key={keyExtractor(item, index)}
+            style={[
+              styles.row,
+              isActive
+                ? { transform: [{ translateY: dy }], zIndex: 1, elevation: 4 }
+                : { transform: [{ translateY: shift }] },
+            ]}
+            {...panResponderFor(index).panHandlers}
+          >
+            {renderItem(item, index, isActive)}
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+}

package/src/organisms/Screen.tsx

@@ -68,12 +68,11 @@ export const Screen = memo(({
         {scrollable ? (
           <ScrollView
             style={styles.container}
-            contentInsetAdjustmentBehavior="automatic"
             automaticallyAdjustKeyboardInsets
             contentContainerStyle={[
               styles.contentContainer,
               { paddingTop: applyTop ? insets.top : 0 },
-              Platform.OS === 'android' && applyBottom && { paddingBottom: insets.bottom },
+              applyBottom && { paddingBottom: insets.bottom },
               contentContainerStyle,
             ]}
             keyboardShouldPersistTaps="handled"

package/src/organisms/index.ts

@@ -28,3 +28,5 @@ export { ThemeToggle } from './ThemeToggle';
 export type { ThemeToggleProps } from './ThemeToggle';
 export { NavigationBar } from './NavigationBar';
 export type { NavigationBarProps, NavigationBarItem } from './NavigationBar';
+export { ReorderableList } from './ReorderableList';
+export type { ReorderableListProps } from './ReorderableList';

package/src/safe-area/SafeAreaUIProvider.tsx

@@ -1,59 +1,64 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import type { ViewStyle } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { UIProvider, type UIProviderProps } from '../theme/UIProvider';
+import {
+  UIProvider,
+  useInsets,
+  type ModalSafeAreaBoundaryProps,
+  type UIProviderProps,
+} from '../theme/UIProvider';
+import type { EdgeInsets } from '../theme/insets';
 
 export interface SafeAreaUIProviderProps extends Omit<UIProviderProps, 'insets'> {
-  /**
-   * Insets explícitos. Ganan sobre los medidos — útil para tests, storybook o
-   * una pantalla embebida que no ocupa la ventana entera.
-   */
   insets?: UIProviderProps['insets'];
-  /**
-   * Montar también el `<SafeAreaProvider>`. Ponelo en false si tu app ya tiene
-   * uno arriba (React Navigation lo monta solo en algunas plantillas):
-   * un provider anidado mide el frame de *su* View, no el de la ventana, así
-   * que ahí adentro los insets darían cero.
-   * @default true
-   */
   mountSafeAreaProvider?: boolean;
 }
 
+const probeStyle: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };
+
+function sameInsets(a: EdgeInsets, b: EdgeInsets) {
+  return a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left;
+}
+
+function InsetsProbe({ onMeasure }: { onMeasure: (insets: EdgeInsets) => void }) {
+  const insets = useSafeAreaInsets();
+  useEffect(() => {
+    onMeasure(insets);
+  }, [insets, onMeasure]);
+  return null;
+}
+
+function RemeasuringModalSafeAreaBoundary({ children }: ModalSafeAreaBoundaryProps) {
+  const ambient = useInsets();
+  const [measured, setMeasured] = useState<EdgeInsets | null>(null);
+  const onMeasure = React.useCallback(
+    (next: EdgeInsets) => setMeasured((prev) => (prev && sameInsets(prev, next) ? prev : next)),
+    []
+  );
+
+  return (
+    <>
+      <SafeAreaProvider style={probeStyle} pointerEvents="none">
+        <InsetsProbe onMeasure={onMeasure} />
+      </SafeAreaProvider>
+      {children(measured ?? ambient)}
+    </>
+  );
+}
+
 function Measured({ insets: override, children, ...rest }: SafeAreaUIProviderProps) {
   const measured = useSafeAreaInsets();
   return (
-    <UIProvider insets={override ?? measured} {...rest}>
+    <UIProvider
+      insets={override ?? measured}
+      ModalSafeAreaBoundary={RemeasuringModalSafeAreaBoundary}
+      {...rest}
+    >
       {children}
     </UIProvider>
   );
 }
 
-/**
- * SafeAreaUIProvider
- * `UIProvider` con los insets ya cableados desde `react-native-safe-area-context`.
- *
- * Vive en su propio subpath (`orn-ui/safe-area`) a propósito: es el único
- * archivo de la librería que importa un paquete de terceros. Nada del entry
- * principal lo referencia, así que quien hace `import { Button } from 'orn-ui'`
- * nunca lo resuelve y el bundle sigue sin dependencias de runtime.
- *
- * ```tsx
- * import { SafeAreaUIProvider } from 'orn-ui/safe-area';
- *
- * export default function App() {
- *   return (
- *     <SafeAreaUIProvider defaultMode="system">
- *       <RootNavigator />
- *     </SafeAreaUIProvider>
- *   );
- * }
- * ```
- *
- * El equivalente a mano — pasarle `insets={useSafeAreaInsets()}` a `UIProvider`
- * desde un componente que ya esté dentro de `<SafeAreaProvider>` — sigue
- * siendo válido. Esto sólo evita el error silencioso de olvidarlo: `insets`
- * por defecto es `{0,0,0,0}`, y con ceros el bottom sheet queda pegado contra
- * la barra de gestos y el modal `full` se mete abajo del notch.
- */
 export function SafeAreaUIProvider({
   mountSafeAreaProvider = true,
   ...props

package/src/theme/UIProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import React, { createContext, useContext, useMemo, useState, useCallback, useRef } from 'react';
 import { Appearance, useColorScheme } from 'react-native';
 import { defaultTheme } from './createTheme';
 import { defaultLabels, type Labels } from './labels';
@@ -9,6 +9,24 @@ import type { IconRenderer } from '../icons/types';
 
 export type ThemeMode = 'system' | 'light' | 'dark';
 
+/**
+ * Un `<Modal>`/`<BottomSheet>` nativo abre su propia ventana (en Android
+ * siempre; en iOS según `presentationStyle`), así que los insets medidos en
+ * la raíz de la app pueden no valer ahí adentro. Este boundary es el punto de
+ * inyección: el default sólo repite los insets ambientes (comportamiento de
+ * siempre, cero deps), pero `SafeAreaUIProvider` lo reemplaza por uno que
+ * monta un `<SafeAreaProvider>` nuevo y remide dentro de esa ventana.
+ */
+export interface ModalSafeAreaBoundaryProps {
+  children: (insets: EdgeInsets) => React.ReactNode;
+}
+export type ModalSafeAreaBoundaryComponent = React.ComponentType<ModalSafeAreaBoundaryProps>;
+
+function DefaultModalSafeAreaBoundary({ children }: ModalSafeAreaBoundaryProps) {
+  const insets = useInsets();
+  return <>{children(insets)}</>;
+}
+
 interface UIContextValue {
   theme: Theme;
   mode: ThemeMode;
@@ -17,13 +35,11 @@ interface UIContextValue {
   insets: EdgeInsets;
   labels: Labels;
   allowFontScaling: boolean;
+  ModalSafeAreaBoundary: ModalSafeAreaBoundaryComponent;
 }
 
 const UIContext = createContext<UIContextValue | undefined>(undefined);
 
-/** Una sola vez por sesión: en un re-render el aviso no aporta nada nuevo. */
-let warnedAboutInsets = false;
-
 export interface UIProviderProps {
   children: React.ReactNode;
   /** Par light/dark. Por defecto el theme de marca de la librería (créalo con createTheme()). */
@@ -40,6 +56,12 @@ export interface UIProviderProps {
   labels?: Partial<Labels>;
   /** @default false, para paridad con el resto de la librería (accesibilidad primero). */
   allowFontScaling?: boolean;
+  /**
+   * Fuente de insets que usan `Modal`/`BottomSheet` para su propia ventana
+   * nativa. No la pases a mano — `SafeAreaUIProvider` la cablea sola.
+   * @default repite los insets ambientes (comportamiento sin safe-area-context)
+   */
+  ModalSafeAreaBoundary?: ModalSafeAreaBoundaryComponent;
 }
 
 /**
@@ -59,6 +81,7 @@ export function UIProvider({
   insets = zeroInsets,
   labels: labelOverrides,
   allowFontScaling = false,
+  ModalSafeAreaBoundary = DefaultModalSafeAreaBoundary,
 }: UIProviderProps) {
   const systemScheme = useColorScheme();
   const [uncontrolledMode, setUncontrolledMode] = useState<ThemeMode>(defaultMode);
@@ -73,11 +96,16 @@ export function UIProvider({
     [isControlled, onModeChange]
   );
 
+  // Por instancia, no por módulo: dos `<UIProvider>` en el mismo árbol (tests,
+  // un modal con su propio provider) avisan cada uno si le faltan insets, en
+  // vez de que el segundo se calle porque el primero ya avisó una vez.
+  const warnedAboutInsets = useRef(false);
+
   // Olvidar `insets` no rompe nada visible al montar: el default de ceros
   // recién se nota cuando abrís un Modal `full` (se mete abajo del notch) o un
   // BottomSheet (queda pegado a la barra de gestos). El aviso llega antes.
-  if (__DEV__ && insets === zeroInsets && !warnedAboutInsets) {
-    warnedAboutInsets = true;
+  if (__DEV__ && insets === zeroInsets && !warnedAboutInsets.current) {
+    warnedAboutInsets.current = true;
     console.warn(
       'orn-ui: <UIProvider> sin `insets`, se usan {top:0,bottom:0,left:0,right:0}. ' +
         'Los modales y el Screen quedan sin safe area. Pasá `insets={useSafeAreaInsets()}` ' +
@@ -96,8 +124,17 @@ export function UIProvider({
   );
 
   const value = useMemo<UIContextValue>(
-    () => ({ theme: resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling }),
-    [resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling]
+    () => ({
+      theme: resolvedTheme,
+      mode,
+      setMode,
+      icons,
+      insets,
+      labels,
+      allowFontScaling,
+      ModalSafeAreaBoundary,
+    }),
+    [resolvedTheme, mode, setMode, icons, insets, labels, allowFontScaling, ModalSafeAreaBoundary]
   );
 
   return <UIContext.Provider value={value}>{children}</UIContext.Provider>;
@@ -140,5 +177,10 @@ export function useAllowFontScaling(): boolean {
   return useUIContext().allowFontScaling;
 }
 
+/** Interno: lo consumen `Modal`/`BottomSheet` para remedir insets dentro de su propia ventana nativa. */
+export function useModalSafeAreaBoundary(): ModalSafeAreaBoundaryComponent {
+  return useUIContext().ModalSafeAreaBoundary;
+}
+
 /** Re-exportado para que tests/consumidores puedan simular cambios de sistema sin RN real. */
 export const __testUtils = { Appearance };