@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/widgets/ReorderableList.js

@@ -1,138 +1,409 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { moveCollectionEntry } from "../utils/criteria.js";
-import { applyReorder, moveReorderItem, reorderKeys, sameOrder, } from "../utils/reorder.js";
+import { applyReorder, moveReorderItem, reorderKeys, sameOrder } from "../utils/reorder.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AccessibilityInfo, useWindowDimensions, View, } from "react-native";
+import { AccessibilityInfo, useWindowDimensions, View } from "react-native";
 import Sortable from "react-native-sortables";
-export default function ReorderableList({ items, keyExtractor, getItemLabel, onChange, renderItem, renderControls, renderHandleContent, disabled = false, className, style, itemStyle, contentStyle, controlsStyle, handleStyle, actionStyle, testID, labels, onDragStart, onDragEnd, onReorderRejected, sortableProps, }) {
-    const { fontScale } = useWindowDimensions();
-    const keys = useMemo(() => reorderKeys(items, keyExtractor), [items, keyExtractor]);
-    const data = useMemo(() => [...items], [items]);
-    const dragOrder = useRef(null);
-    const [dragging, setDragging] = useState(false);
-    const [error, setError] = useState();
-    const [revision, setRevision] = useState(0);
-    const busy = disabled || dragging;
-    const commit = (order, event) => {
-        if (sameOrder(keys, order))
-            return;
-        const next = applyReorder(items, keyExtractor, order);
-        onChange(next, event);
-        AccessibilityInfo.announceForAccessibility(labels?.moved?.(getItemLabel(next[event.toIndex]), event.toIndex + 1, items.length) ??
-            `${getItemLabel(next[event.toIndex])}, posición ${event.toIndex + 1} de ${items.length}`);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+export default function ReorderableList(t0) {
+  const $ = _c(69);
+  const {
+    items,
+    keyExtractor,
+    getItemLabel,
+    onChange,
+    renderItem,
+    renderControls,
+    renderHandleContent,
+    disabled: t1,
+    className,
+    style,
+    itemStyle,
+    contentStyle,
+    controlsStyle,
+    handleStyle,
+    actionStyle,
+    testID,
+    labels,
+    onDragStart,
+    onDragEnd,
+    onReorderRejected,
+    sortableProps
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const {
+    fontScale
+  } = useWindowDimensions();
+  let t2;
+  if ($[0] !== items || $[1] !== keyExtractor) {
+    t2 = reorderKeys(items, keyExtractor);
+    $[0] = items;
+    $[1] = keyExtractor;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const keys = t2;
+  let t3;
+  if ($[3] !== items) {
+    t3 = [...items];
+    $[3] = items;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const data = t3;
+  const dragOrder = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState();
+  const [revision, setRevision] = useState(0);
+  const busy = disabled || dragging;
+  let t4;
+  if ($[5] !== getItemLabel || $[6] !== items || $[7] !== keyExtractor || $[8] !== keys || $[9] !== labels || $[10] !== onChange) {
+    t4 = (order, event) => {
+      if (sameOrder(keys, order)) {
+        return;
+      }
+      const next = applyReorder(items, keyExtractor, order);
+      onChange(next, event);
+      AccessibilityInfo.announceForAccessibility(labels?.moved?.(getItemLabel(next[event.toIndex]), event.toIndex + 1, items.length) ?? `${getItemLabel(next[event.toIndex])}, posición ${event.toIndex + 1} de ${items.length}`);
+    };
+    $[5] = getItemLabel;
+    $[6] = items;
+    $[7] = keyExtractor;
+    $[8] = keys;
+    $[9] = labels;
+    $[10] = onChange;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const commit = t4;
+  let t5;
+  if ($[12] !== labels?.changedDuringDrag || $[13] !== labels?.disabledDuringDrag || $[14] !== onReorderRejected) {
+    t5 = reason => {
+      const message = reason === "disabled" ? labels?.disabledDuringDrag ?? "El orden se bloque\xF3 durante el arrastre. No se aplic\xF3 el cambio." : labels?.changedDuringDrag ?? "La lista cambi\xF3 durante el arrastre. Revisa el orden e int\xE9ntalo de nuevo.";
+      setError(message);
+      setRevision(_temp);
+      AccessibilityInfo.announceForAccessibility(message);
+      onReorderRejected?.(reason);
     };
-    const reject = useCallback((reason) => {
-        const message = reason === "disabled"
-            ? (labels?.disabledDuringDrag ??
-                "El orden se bloqueó durante el arrastre. No se aplicó el cambio.")
-            : (labels?.changedDuringDrag ??
-                "La lista cambió durante el arrastre. Revisa el orden e inténtalo de nuevo.");
-        setError(message);
-        setRevision((value) => value + 1);
-        AccessibilityInfo.announceForAccessibility(message);
-        onReorderRejected?.(reason);
-    }, [labels?.changedDuringDrag, labels?.disabledDuringDrag, onReorderRejected]);
-    useEffect(() => {
-        if (dragOrder.current && (disabled || !sameOrder(dragOrder.current, keys))) {
-            dragOrder.current = null;
-            setDragging(false);
-            reject(disabled ? "disabled" : "data-changed");
-            onDragEnd?.();
+    $[12] = labels?.changedDuringDrag;
+    $[13] = labels?.disabledDuringDrag;
+    $[14] = onReorderRejected;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  labels?.changedDuringDrag;
+  labels?.disabledDuringDrag;
+  const reject = t5;
+  let t6;
+  let t7;
+  if ($[16] !== disabled || $[17] !== keys || $[18] !== onDragEnd || $[19] !== reject) {
+    t6 = () => {
+      if (dragOrder.current && (disabled || !sameOrder(dragOrder.current, keys))) {
+        dragOrder.current = null;
+        setDragging(false);
+        reject(disabled ? "disabled" : "data-changed");
+        onDragEnd?.();
+      }
+    };
+    t7 = [disabled, keys, onDragEnd, reject];
+    $[16] = disabled;
+    $[17] = keys;
+    $[18] = onDragEnd;
+    $[19] = reject;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t6 = $[20];
+    t7 = $[21];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[22] !== className) {
+    t8 = cn("gap-2", className);
+    $[22] = className;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== commit || $[25] !== disabled || $[26] !== keys || $[27] !== onDragEnd || $[28] !== reject) {
+    t9 = t10 => {
+      const {
+        fromIndex,
+        toIndex
+      } = t10;
+      const started = dragOrder.current;
+      if (!started) {
+        return;
+      }
+      dragOrder.current = null;
+      setDragging(false);
+      if (started && !sameOrder(started, keys)) {
+        reject("data-changed");
+      } else {
+        if (disabled) {
+          reject("disabled");
+        } else {
+          if (started) {
+            commit(moveReorderItem(keys, fromIndex, toIndex), {
+              key: keys[fromIndex],
+              fromIndex,
+              toIndex,
+              source: "drag"
+            });
+          }
         }
-    }, [disabled, keys, onDragEnd, reject]);
-    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(Sortable.Grid, { activeItemScale: 1, activeItemShadowOpacity: 0, rowGap: 8, ...sortableProps, columns: 1, customHandle: true, data: data, keyExtractor: keyExtractor, onDragEnd: ({ fromIndex, toIndex }) => {
-                    const started = dragOrder.current;
-                    if (!started)
-                        return;
-                    dragOrder.current = null;
-                    setDragging(false);
-                    if (started && !sameOrder(started, keys))
-                        reject("data-changed");
-                    else if (disabled)
-                        reject("disabled");
-                    else if (started)
-                        commit(moveReorderItem(keys, fromIndex, toIndex), {
-                            key: keys[fromIndex],
-                            fromIndex,
-                            toIndex,
-                            source: "drag",
-                        });
-                    onDragEnd?.();
-                }, onDragStart: ({ fromIndex }) => {
-                    dragOrder.current = keys;
-                    setDragging(true);
-                    setError(undefined);
-                    onDragStart?.(keys[fromIndex]);
-                }, renderItem: ({ item, index }) => {
-                    const key = keys[index];
-                    const label = getItemLabel(item);
-                    const move = (direction) => {
-                        if (busy || index + direction < 0 || index + direction >= items.length)
-                            return;
-                        setError(undefined);
-                        commit(moveCollectionEntry(keys, index, direction), {
-                            key,
-                            fromIndex: index,
-                            toIndex: index + direction,
-                            source: "button",
-                        });
-                    };
-                    const context = {
-                        item,
-                        index,
-                        canMoveUp: !busy && index > 0,
-                        canMoveDown: !busy && index < items.length - 1,
-                        moveUp: () => move(-1),
-                        moveDown: () => move(1),
-                    };
-                    const dragHandle = (_jsx(Sortable.Handle, { mode: disabled ? "non-draggable" : "draggable", children: _jsx(View, { accessibilityActions: [
-                                ...(context.canMoveUp ? [{ name: "decrement" }] : []),
-                                ...(context.canMoveDown ? [{ name: "increment" }] : []),
-                            ], accessibilityLabel: labels?.drag?.(label) ?? `Arrastrar ${label}`, accessibilityRole: "adjustable", accessibilityState: { disabled, busy: dragging }, accessibilityValue: { min: 1, max: items.length, now: index + 1 }, accessible: true, onAccessibilityAction: ({ nativeEvent }) => {
-                                if (nativeEvent.actionName === "increment")
-                                    move(1);
-                                if (nativeEvent.actionName === "decrement")
-                                    move(-1);
-                            }, style: [
-                                {
-                                    minHeight: 48,
-                                    minWidth: 48,
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                },
-                                handleStyle,
-                            ], testID: testID ? `${testID}-handle-${key}` : undefined, children: renderHandleContent ? (renderHandleContent(context)) : (_jsx(Icon, { name: "reorder", size: 20 })) }) }));
-                    return (_jsxs(View, { style: [
-                            {
-                                width: "100%",
-                                flexDirection: fontScale > 1.3 ? "column" : "row",
-                                alignItems: "center",
-                                gap: 8,
-                            },
-                            itemStyle,
-                        ], testID: testID ? `${testID}-item-${key}` : undefined, children: [_jsx(View, { style: [
-                                    fontScale > 1.3 ? { alignSelf: "stretch" } : { flex: 1, minWidth: 0 },
-                                    contentStyle,
-                                ], children: renderItem(context) }), _jsx(View, { style: [{ flexDirection: "row", alignItems: "center" }, controlsStyle], children: renderControls ? (renderControls({ ...context, dragHandle })) : (_jsxs(_Fragment, { children: [dragHandle, _jsx(Pressable, { accessibilityLabel: labels?.up?.(label) ?? `Subir ${label}`, disabled: !context.canMoveUp, onPress: context.moveUp, style: [
-                                                {
-                                                    minWidth: 48,
-                                                    minHeight: 48,
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                },
-                                                actionStyle,
-                                            ], children: _jsx(Icon, { name: "up", size: 18 }) }), _jsx(Pressable, { accessibilityLabel: labels?.down?.(label) ?? `Bajar ${label}`, disabled: !context.canMoveDown, onPress: context.moveDown, style: [
-                                                {
-                                                    minWidth: 48,
-                                                    minHeight: 48,
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                },
-                                                actionStyle,
-                                            ], children: _jsx(Icon, { name: "down", size: 18 }) })] })) })] }, key));
-                }, sortEnabled: !disabled, strategy: "insert" }, revision), error ? (_jsx(Typography.Text, { accessibilityRole: "alert", className: "text-danger", children: error })) : null] }));
+      }
+      onDragEnd?.();
+    };
+    $[24] = commit;
+    $[25] = disabled;
+    $[26] = keys;
+    $[27] = onDragEnd;
+    $[28] = reject;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  let t10;
+  if ($[30] !== keys || $[31] !== onDragStart) {
+    t10 = t11 => {
+      const {
+        fromIndex: fromIndex_0
+      } = t11;
+      dragOrder.current = keys;
+      setDragging(true);
+      setError(undefined);
+      onDragStart?.(keys[fromIndex_0]);
+    };
+    $[30] = keys;
+    $[31] = onDragStart;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  let t11;
+  if ($[33] !== actionStyle || $[34] !== busy || $[35] !== commit || $[36] !== contentStyle || $[37] !== controlsStyle || $[38] !== disabled || $[39] !== dragging || $[40] !== fontScale || $[41] !== getItemLabel || $[42] !== handleStyle || $[43] !== itemStyle || $[44] !== items.length || $[45] !== keys || $[46] !== labels || $[47] !== renderControls || $[48] !== renderHandleContent || $[49] !== renderItem || $[50] !== testID) {
+    t11 = t12 => {
+      const {
+        item,
+        index
+      } = t12;
+      const key = keys[index];
+      const label = getItemLabel(item);
+      const move = direction => {
+        if (busy || index + direction < 0 || index + direction >= items.length) {
+          return;
+        }
+        setError(undefined);
+        commit(moveCollectionEntry(keys, index, direction), {
+          key,
+          fromIndex: index,
+          toIndex: index + direction,
+          source: "button"
+        });
+      };
+      const context = {
+        item,
+        index,
+        canMoveUp: !busy && index > 0,
+        canMoveDown: !busy && index < items.length - 1,
+        moveUp: () => move(-1),
+        moveDown: () => move(1)
+      };
+      const dragHandle = _jsx(Sortable.Handle, {
+        mode: disabled ? "non-draggable" : "draggable",
+        children: _jsx(View, {
+          accessibilityActions: [...(context.canMoveUp ? [{
+            name: "decrement"
+          }] : []), ...(context.canMoveDown ? [{
+            name: "increment"
+          }] : [])],
+          accessibilityLabel: labels?.drag?.(label) ?? `Arrastrar ${label}`,
+          accessibilityRole: "adjustable",
+          accessibilityState: {
+            disabled,
+            busy: dragging
+          },
+          accessibilityValue: {
+            min: 1,
+            max: items.length,
+            now: index + 1
+          },
+          accessible: true,
+          onAccessibilityAction: t13 => {
+            const {
+              nativeEvent
+            } = t13;
+            if (nativeEvent.actionName === "increment") {
+              move(1);
+            }
+            if (nativeEvent.actionName === "decrement") {
+              move(-1);
+            }
+          },
+          style: [{
+            minHeight: 48,
+            minWidth: 48,
+            alignItems: "center",
+            justifyContent: "center"
+          }, handleStyle],
+          testID: testID ? `${testID}-handle-${key}` : undefined,
+          children: renderHandleContent ? renderHandleContent(context) : _jsx(Icon, {
+            name: "reorder",
+            size: 20
+          })
+        })
+      });
+      return _jsxs(View, {
+        style: [{
+          width: "100%",
+          flexDirection: fontScale > 1.3 ? "column" : "row",
+          alignItems: "center",
+          gap: 8
+        }, itemStyle],
+        testID: testID ? `${testID}-item-${key}` : undefined,
+        children: [_jsx(View, {
+          style: [fontScale > 1.3 ? {
+            alignSelf: "stretch"
+          } : {
+            flex: 1,
+            minWidth: 0
+          }, contentStyle],
+          children: renderItem(context)
+        }), _jsx(View, {
+          style: [{
+            flexDirection: "row",
+            alignItems: "center"
+          }, controlsStyle],
+          children: renderControls ? renderControls({
+            ...context,
+            dragHandle
+          }) : _jsxs(_Fragment, {
+            children: [dragHandle, _jsx(Pressable, {
+              accessibilityLabel: labels?.up?.(label) ?? `Subir ${label}`,
+              disabled: !context.canMoveUp,
+              onPress: context.moveUp,
+              style: [{
+                minWidth: 48,
+                minHeight: 48,
+                alignItems: "center",
+                justifyContent: "center"
+              }, actionStyle],
+              children: _jsx(Icon, {
+                name: "up",
+                size: 18
+              })
+            }), _jsx(Pressable, {
+              accessibilityLabel: labels?.down?.(label) ?? `Bajar ${label}`,
+              disabled: !context.canMoveDown,
+              onPress: context.moveDown,
+              style: [{
+                minWidth: 48,
+                minHeight: 48,
+                alignItems: "center",
+                justifyContent: "center"
+              }, actionStyle],
+              children: _jsx(Icon, {
+                name: "down",
+                size: 18
+              })
+            })]
+          })
+        })]
+      }, key);
+    };
+    $[33] = actionStyle;
+    $[34] = busy;
+    $[35] = commit;
+    $[36] = contentStyle;
+    $[37] = controlsStyle;
+    $[38] = disabled;
+    $[39] = dragging;
+    $[40] = fontScale;
+    $[41] = getItemLabel;
+    $[42] = handleStyle;
+    $[43] = itemStyle;
+    $[44] = items.length;
+    $[45] = keys;
+    $[46] = labels;
+    $[47] = renderControls;
+    $[48] = renderHandleContent;
+    $[49] = renderItem;
+    $[50] = testID;
+    $[51] = t11;
+  } else {
+    t11 = $[51];
+  }
+  const t12 = !disabled;
+  let t13;
+  if ($[52] !== data || $[53] !== keyExtractor || $[54] !== revision || $[55] !== sortableProps || $[56] !== t10 || $[57] !== t11 || $[58] !== t12 || $[59] !== t9) {
+    t13 = _jsx(Sortable.Grid, {
+      activeItemScale: 1,
+      activeItemShadowOpacity: 0,
+      rowGap: 8,
+      ...sortableProps,
+      columns: 1,
+      customHandle: true,
+      data: data,
+      keyExtractor: keyExtractor,
+      onDragEnd: t9,
+      onDragStart: t10,
+      renderItem: t11,
+      sortEnabled: t12,
+      strategy: "insert"
+    }, revision);
+    $[52] = data;
+    $[53] = keyExtractor;
+    $[54] = revision;
+    $[55] = sortableProps;
+    $[56] = t10;
+    $[57] = t11;
+    $[58] = t12;
+    $[59] = t9;
+    $[60] = t13;
+  } else {
+    t13 = $[60];
+  }
+  let t14;
+  if ($[61] !== error) {
+    t14 = error ? _jsx(Typography.Text, {
+      accessibilityRole: "alert",
+      className: "text-danger",
+      children: error
+    }) : null;
+    $[61] = error;
+    $[62] = t14;
+  } else {
+    t14 = $[62];
+  }
+  let t15;
+  if ($[63] !== style || $[64] !== t13 || $[65] !== t14 || $[66] !== t8 || $[67] !== testID) {
+    t15 = _jsxs(View, {
+      className: t8,
+      style: style,
+      testID: testID,
+      children: [t13, t14]
+    });
+    $[63] = style;
+    $[64] = t13;
+    $[65] = t14;
+    $[66] = t8;
+    $[67] = testID;
+    $[68] = t15;
+  } else {
+    t15 = $[68];
+  }
+  return t15;
+}
+function _temp(value) {
+  return value + 1;
 }