@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Dialog/Dialog.EditValue.js

@@ -1,77 +1,452 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { FlashList } from "@shopify/flash-list";
-import { Actions } from "../Actions/index.js";
 import Sheet from "./Dialog.Sheet.js";
-import Pressable from "../primitives/Pressable.js";
+import { DialogActions } from "./dialog-actions.js";
+import { ChoiceRow } from "../Form/choice-row.js";
 import { fontFamilies, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
+import { attempt, errorMessage } from "../utils/async.js";
 import { useRef, useState } from "react";
 import { Keyboard, TextInput, View } from "react-native";
-function EditValueEditor({ title, value, onChange, onConfirm, onClose, placeholder, helperText, options = [], keyboardType = "decimal-pad", rightAdornment, footerAdornment, confirmLabel = "Aplicar", cancelLabel = "Cancelar", autoFocus = true, disabled = false, readOnly = false, onPendingChange, }) {
-    const theme = useTheme();
-    const saving = useRef(false);
-    const [localDraft, setLocalDraft] = useState(value);
-    const [pending, setPending] = useState(false);
-    const [error, setError] = useState();
-    const draft = onChange ? value : localDraft;
-    const blocked = disabled || readOnly || pending;
-    const updateDraft = (next) => {
-        if (blocked || saving.current)
-            return;
-        if (onChange)
-            onChange(next);
-        else
-            setLocalDraft(next);
-        setError(undefined);
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function EditValueEditor(t0) {
+  const $ = _c(75);
+  const {
+    title,
+    value,
+    onChange,
+    onConfirm,
+    onClose,
+    placeholder,
+    helperText,
+    options: t1,
+    keyboardType: t2,
+    rightAdornment,
+    footerAdornment,
+    confirmLabel: t3,
+    cancelLabel: t4,
+    autoFocus: t5,
+    disabled: t6,
+    readOnly: t7,
+    onPendingChange
+  } = t0;
+  let t8;
+  if ($[0] !== t1) {
+    t8 = t1 === undefined ? [] : t1;
+    $[0] = t1;
+    $[1] = t8;
+  } else {
+    t8 = $[1];
+  }
+  const options = t8;
+  const keyboardType = t2 === undefined ? "decimal-pad" : t2;
+  const confirmLabel = t3 === undefined ? "Aplicar" : t3;
+  const cancelLabel = t4 === undefined ? "Cancelar" : t4;
+  const autoFocus = t5 === undefined ? true : t5;
+  const disabled = t6 === undefined ? false : t6;
+  const readOnly = t7 === undefined ? false : t7;
+  const theme = useTheme();
+  const saving = useRef(false);
+  const [localDraft, setLocalDraft] = useState(value);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState();
+  const draft = onChange ? value : localDraft;
+  const blocked = disabled || readOnly || pending;
+  let t9;
+  if ($[2] !== blocked || $[3] !== onChange) {
+    t9 = next => {
+      if (blocked || saving.current) {
+        return;
+      }
+      if (onChange) {
+        onChange(next);
+      } else {
+        setLocalDraft(next);
+      }
+      setError(undefined);
     };
-    const close = () => {
-        if (saving.current)
-            return;
+    $[2] = blocked;
+    $[3] = onChange;
+    $[4] = t9;
+  } else {
+    t9 = $[4];
+  }
+  const updateDraft = t9;
+  let t10;
+  if ($[5] !== onClose) {
+    t10 = () => {
+      if (saving.current) {
+        return;
+      }
+      Keyboard.dismiss();
+      onClose();
+    };
+    $[5] = onClose;
+    $[6] = t10;
+  } else {
+    t10 = $[6];
+  }
+  const close = t10;
+  let t11;
+  if ($[7] !== disabled || $[8] !== draft || $[9] !== onClose || $[10] !== onConfirm || $[11] !== onPendingChange || $[12] !== readOnly) {
+    t11 = async () => {
+      if (disabled || readOnly || saving.current) {
+        return;
+      }
+      saving.current = true;
+      setPending(true);
+      onPendingChange(true);
+      setError(undefined);
+      const result = await attempt(async () => {
+        await onConfirm(draft);
         Keyboard.dismiss();
         onClose();
+      });
+      saving.current = false;
+      setPending(false);
+      onPendingChange(false);
+      if (!result.ok) {
+        setError(errorMessage(result.error, "No se pudo guardar. Conservamos el valor para reintentar."));
+      }
+    };
+    $[7] = disabled;
+    $[8] = draft;
+    $[9] = onClose;
+    $[10] = onConfirm;
+    $[11] = onPendingChange;
+    $[12] = readOnly;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  const save = t11;
+  let t12;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = {
+      flex: 1,
+      minHeight: 0
+    };
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  let t13;
+  if ($[15] !== blocked) {
+    t13 = {
+      disabled: blocked
+    };
+    $[15] = blocked;
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  const t14 = autoFocus && !blocked;
+  const t15 = !blocked;
+  let t16;
+  if ($[17] !== save) {
+    t16 = () => void save();
+    $[17] = save;
+    $[18] = t16;
+  } else {
+    t16 = $[18];
+  }
+  let t17;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = {
+      minHeight: 48,
+      fontFamily: fontFamilies.regular,
+      fontSize: 18
+    };
+    $[19] = t17;
+  } else {
+    t17 = $[19];
+  }
+  let t18;
+  if ($[20] !== draft || $[21] !== keyboardType || $[22] !== placeholder || $[23] !== readOnly || $[24] !== t13 || $[25] !== t14 || $[26] !== t15 || $[27] !== t16 || $[28] !== theme.primary || $[29] !== theme.text.tertiary || $[30] !== title || $[31] !== updateDraft) {
+    t18 = _jsx(TextInput, {
+      accessibilityLabel: title,
+      accessibilityState: t13,
+      autoFocus: t14,
+      className: "flex-1 border border-input rounded-lg p-3 text-text-primary",
+      editable: t15,
+      keyboardType: keyboardType,
+      onChangeText: updateDraft,
+      onSubmitEditing: t16,
+      placeholder: placeholder,
+      placeholderTextColor: theme.text.tertiary,
+      readOnly: readOnly,
+      returnKeyType: "done",
+      selectionColor: theme.primary,
+      style: t17,
+      underlineColorAndroid: "transparent",
+      value: draft
+    });
+    $[20] = draft;
+    $[21] = keyboardType;
+    $[22] = placeholder;
+    $[23] = readOnly;
+    $[24] = t13;
+    $[25] = t14;
+    $[26] = t15;
+    $[27] = t16;
+    $[28] = theme.primary;
+    $[29] = theme.text.tertiary;
+    $[30] = title;
+    $[31] = updateDraft;
+    $[32] = t18;
+  } else {
+    t18 = $[32];
+  }
+  let t19;
+  if ($[33] !== rightAdornment || $[34] !== t18) {
+    t19 = _jsxs(View, {
+      className: "flex-row items-center gap-2",
+      children: [t18, rightAdornment]
+    });
+    $[33] = rightAdornment;
+    $[34] = t18;
+    $[35] = t19;
+  } else {
+    t19 = $[35];
+  }
+  let t20;
+  if ($[36] !== helperText) {
+    t20 = helperText ? typeof helperText === "string" ? _jsx(Typography.Text, {
+      className: "pt-2 text-text-secondary",
+      children: helperText
+    }) : helperText : null;
+    $[36] = helperText;
+    $[37] = t20;
+  } else {
+    t20 = $[37];
+  }
+  let t21;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = {
+      flex: 1,
+      minHeight: 0
     };
-    const save = async () => {
-        if (disabled || readOnly || saving.current)
-            return;
-        saving.current = true;
-        setPending(true);
-        onPendingChange(true);
-        setError(undefined);
-        try {
-            await onConfirm(draft);
-            Keyboard.dismiss();
-            onClose();
-        }
-        catch (cause) {
-            setError(cause instanceof Error && cause.message.trim()
-                ? cause.message
-                : "No se pudo guardar. Conservamos el valor para reintentar.");
-        }
-        finally {
-            saving.current = false;
-            setPending(false);
-            onPendingChange(false);
-        }
+    $[38] = t21;
+  } else {
+    t21 = $[38];
+  }
+  let t22;
+  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = {
+      paddingVertical: 12
     };
-    return (_jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [_jsx(TextInput, { accessibilityLabel: title, accessibilityState: { disabled: blocked }, autoFocus: autoFocus && !blocked, className: "flex-1 border border-input rounded-lg p-3 text-text-primary", editable: !blocked, keyboardType: keyboardType, onChangeText: updateDraft, onSubmitEditing: () => void save(), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, readOnly: readOnly, returnKeyType: "done", selectionColor: theme.primary, style: { minHeight: 48, fontFamily: fontFamilies.regular, fontSize: 18 }, underlineColorAndroid: "transparent", value: draft }), rightAdornment] }), helperText ? (typeof helperText === "string" ? (_jsx(Typography.Text, { className: "pt-2 text-text-secondary", children: helperText })) : (helperText)) : null, _jsx(View, { style: { flex: 1, minHeight: 0 }, children: _jsx(FlashList, { contentContainerStyle: { paddingVertical: 12 }, data: options, keyboardShouldPersistTaps: "handled", keyExtractor: (option) => option.key, renderItem: ({ item }) => (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "radio", accessibilityState: {
-                            disabled: blocked || !!item.disabled,
-                            selected: item.value === draft,
-                        }, className: "border-b border-border-light py-3", disabled: blocked || item.disabled, onPress: () => {
-                            if (!item.disabled)
-                                updateDraft(item.value);
-                        }, style: { minWidth: 48, minHeight: 48 }, children: _jsx(Typography.Text, { className: item.disabled ? "text-text-disabled" : "text-text-primary", semibold: item.value === draft, children: item.label }) })) }) }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pb-3 text-danger", selectable: true, children: error })) : null, _jsxs(View, { className: "gap-2 border-t border-border-light py-3", children: [footerAdornment ? (_jsx(View, { accessibilityElementsHidden: blocked, importantForAccessibility: blocked ? "no-hide-descendants" : "auto", pointerEvents: blocked ? "none" : "auto", children: footerAdornment })) : null, _jsx(Actions.Button, { disabled: pending, onPress: close, title: cancelLabel, variant: "secondary" }), _jsx(Actions.Button, { disabled: blocked, loading: pending, onPress: () => void save(), title: confirmLabel })] })] }));
+    $[39] = t22;
+  } else {
+    t22 = $[39];
+  }
+  let t23;
+  if ($[40] !== blocked || $[41] !== draft || $[42] !== updateDraft) {
+    t23 = t24 => {
+      const {
+        item
+      } = t24;
+      return _jsx(ChoiceRow, {
+        disabled: blocked || !!item.disabled,
+        label: item.label,
+        look: "list",
+        onPress: () => {
+          if (!item.disabled) {
+            updateDraft(item.value);
+          }
+        },
+        selected: item.value === draft
+      });
+    };
+    $[40] = blocked;
+    $[41] = draft;
+    $[42] = updateDraft;
+    $[43] = t23;
+  } else {
+    t23 = $[43];
+  }
+  let t24;
+  if ($[44] !== options || $[45] !== t23) {
+    t24 = _jsx(View, {
+      style: t21,
+      children: _jsx(FlashList, {
+        contentContainerStyle: t22,
+        data: options,
+        keyboardShouldPersistTaps: "handled",
+        keyExtractor: _temp,
+        renderItem: t23
+      })
+    });
+    $[44] = options;
+    $[45] = t23;
+    $[46] = t24;
+  } else {
+    t24 = $[46];
+  }
+  let t25;
+  if ($[47] !== error) {
+    t25 = error ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      className: "pb-3 text-danger",
+      selectable: true,
+      children: error
+    }) : null;
+    $[47] = error;
+    $[48] = t25;
+  } else {
+    t25 = $[48];
+  }
+  let t26;
+  if ($[49] !== blocked || $[50] !== footerAdornment) {
+    t26 = footerAdornment ? _jsx(View, {
+      accessibilityElementsHidden: blocked,
+      importantForAccessibility: blocked ? "no-hide-descendants" : "auto",
+      pointerEvents: blocked ? "none" : "auto",
+      children: footerAdornment
+    }) : null;
+    $[49] = blocked;
+    $[50] = footerAdornment;
+    $[51] = t26;
+  } else {
+    t26 = $[51];
+  }
+  let t27;
+  if ($[52] !== cancelLabel || $[53] !== close || $[54] !== pending) {
+    t27 = {
+      disabled: pending,
+      onPress: close,
+      title: cancelLabel
+    };
+    $[52] = cancelLabel;
+    $[53] = close;
+    $[54] = pending;
+    $[55] = t27;
+  } else {
+    t27 = $[55];
+  }
+  let t28;
+  if ($[56] !== save) {
+    t28 = () => void save();
+    $[56] = save;
+    $[57] = t28;
+  } else {
+    t28 = $[57];
+  }
+  let t29;
+  if ($[58] !== blocked || $[59] !== confirmLabel || $[60] !== pending || $[61] !== t28) {
+    t29 = {
+      disabled: blocked,
+      loading: pending,
+      onPress: t28,
+      title: confirmLabel
+    };
+    $[58] = blocked;
+    $[59] = confirmLabel;
+    $[60] = pending;
+    $[61] = t28;
+    $[62] = t29;
+  } else {
+    t29 = $[62];
+  }
+  let t30;
+  if ($[63] !== t27 || $[64] !== t29) {
+    t30 = _jsx(DialogActions, {
+      cancel: t27,
+      confirm: t29
+    });
+    $[63] = t27;
+    $[64] = t29;
+    $[65] = t30;
+  } else {
+    t30 = $[65];
+  }
+  let t31;
+  if ($[66] !== t26 || $[67] !== t30) {
+    t31 = _jsxs(View, {
+      className: "gap-2 border-t border-border-light py-3",
+      children: [t26, t30]
+    });
+    $[66] = t26;
+    $[67] = t30;
+    $[68] = t31;
+  } else {
+    t31 = $[68];
+  }
+  let t32;
+  if ($[69] !== t19 || $[70] !== t20 || $[71] !== t24 || $[72] !== t25 || $[73] !== t31) {
+    t32 = _jsxs(View, {
+      style: t12,
+      children: [t19, t20, t24, t25, t31]
+    });
+    $[69] = t19;
+    $[70] = t20;
+    $[71] = t24;
+    $[72] = t25;
+    $[73] = t31;
+    $[74] = t32;
+  } else {
+    t32 = $[74];
+  }
+  return t32;
 }
+function _temp(option) {
+  return option.key;
+}
+const EDIT_SNAP_POINTS = ["60%"];
 function EditValue(props) {
-    const busy = useRef(false);
-    const [pending, setPending] = useState(false);
-    return (_jsx(Sheet, { dismissible: !pending, onClose: () => {
-            if (!busy.current) {
-                Keyboard.dismiss();
-                props.onClose();
-            }
-        }, scrollable: false, testID: props.testID, title: props.title, visible: props.visible, children: props.visible ? (_jsx(EditValueEditor, { ...props, onPendingChange: (next) => {
-                busy.current = next;
-                setPending(next);
-            } })) : null }));
+  const $ = _c(11);
+  const busy = useRef(false);
+  const [pending, setPending] = useState(false);
+  const t0 = !pending;
+  let t1;
+  if ($[0] !== props) {
+    t1 = () => {
+      if (!busy.current) {
+        Keyboard.dismiss();
+        props.onClose();
+      }
+    };
+    $[0] = props;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== props) {
+    t2 = props.visible ? _jsx(EditValueEditor, {
+      ...props,
+      onPendingChange: next => {
+        busy.current = next;
+        setPending(next);
+      }
+    }) : null;
+    $[2] = props;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== props.testID || $[5] !== props.title || $[6] !== props.visible || $[7] !== t0 || $[8] !== t1 || $[9] !== t2) {
+    t3 = _jsx(Sheet, {
+      dismissible: t0,
+      onClose: t1,
+      scrollable: false,
+      snapPoints: EDIT_SNAP_POINTS,
+      testID: props.testID,
+      title: props.title,
+      visible: props.visible,
+      children: t2
+    });
+    $[4] = props.testID;
+    $[5] = props.title;
+    $[6] = props.visible;
+    $[7] = t0;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
 }
 export default EditValue;

package/dist/Dialog/Dialog.Sheet.d.ts

@@ -1,14 +1,18 @@
-import type { ReactNode } from "react";
+import { type SnapPoint } from "./SheetSurface.js";
+import { type ReactNode } from "react";
 export type SheetProps = {
     visible: boolean;
+    /** The user asked to close (Cerrar, backdrop, drag, Android back). Set `visible` to false. */
     onClose: () => void;
+    /** Runs after the close animation. Navigate or open another overlay from here. */
+    onClosed?: () => void;
     title?: string;
     children: ReactNode;
     footer?: ReactNode;
-    snapPoints?: (string | number)[];
+    snapPoints?: SnapPoint[];
     scrollable?: boolean;
     dismissible?: boolean;
     testID?: string;
 };
-declare function Sheet({ visible, onClose, title, children, footer, snapPoints, scrollable, dismissible, testID, }: SheetProps): import("react").JSX.Element;
+declare function Sheet({ visible, onClose, onClosed, title, children, footer, snapPoints, scrollable, dismissible, testID, }: SheetProps): import("react").JSX.Element | null;
 export default Sheet;