@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Form/Form.DatePicker.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import DateTimePicker from "@expo/ui/community/datetime-picker";
 import { Actions } from "../Actions/index.js";
 import Sheet from "../Dialog/Dialog.Sheet.js";
@@ -7,128 +7,528 @@ import Pressable from "../primitives/Pressable.js";
 import { relativeLuminance, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { attempt, errorMessage } from "../utils/async.js";
+import { dateTimeFormat } from "../utils/intl.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Platform, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+// Same output as toLocale{Time,,Date}String("es-BO"), with shared formatters.
+const DEFAULT_FORMATS = {
+  time: {
+    hour: "2-digit",
+    minute: "2-digit"
+  },
+  datetime: {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  },
+  date: {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  }
+};
 function defaultFormat(value, mode) {
-    if (mode === "time")
-        return value.toLocaleTimeString("es-BO", { hour: "2-digit", minute: "2-digit" });
-    if (mode === "datetime")
-        return value.toLocaleString("es-BO");
-    return value.toLocaleDateString("es-BO");
+  const shape = mode === "time" || mode === "datetime" ? mode : "date";
+  return dateTimeFormat("es-BO", DEFAULT_FORMATS[shape]).format(value);
 }
 function comparableDate(value, mode) {
-    return mode === "date"
-        ? new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime()
-        : value.getTime();
+  return mode === "date" ? new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime() : value.getTime();
 }
 function withCalendarDay(base, day) {
-    const next = new Date(base);
-    next.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
-    return next;
+  const next = new Date(base);
+  next.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+  return next;
 }
 function withClockTime(base, time) {
-    const next = new Date(base);
-    next.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
-    return next;
+  const next = new Date(base);
+  next.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
+  return next;
 }
-function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, readOnly = false, className, testID, }) {
-    const theme = useTheme();
-    const appearance = relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light";
-    const saving = useRef(false);
-    const dialogSession = useRef(0);
-    const visibleOwner = useRef(0);
-    const [open, setOpen] = useState(false);
-    const [phase, setPhase] = useState("date");
-    const [draft, setDraft] = useState(() => value ?? new Date());
-    const [pending, setPending] = useState(false);
-    const [error, setError] = useState();
-    const blocked = disabled || readOnly || pending;
-    const android = Platform.OS === "android";
-    useLayoutEffect(() => {
-        if (!android || !open)
-            return;
-        visibleOwner.current = dialogSession.current;
-    }, [android, open, phase]);
-    const fmt = format ?? ((date) => defaultFormat(date, mode));
-    const close = () => {
-        if (!saving.current)
-            setOpen(false);
+const CALENDAR_SNAP_POINTS = ["90%"];
+function DatePicker(t0) {
+  const $ = _c(107);
+  const {
+    value,
+    onChange,
+    mode: t1,
+    label,
+    placeholder: t2,
+    format,
+    minimumDate,
+    maximumDate,
+    disabled: t3,
+    readOnly: t4,
+    className,
+    testID
+  } = t0;
+  const mode = t1 === undefined ? "date" : t1;
+  const placeholder = t2 === undefined ? "Seleccionar\u2026" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const readOnly = t4 === undefined ? false : t4;
+  const theme = useTheme();
+  const appearance = relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light";
+  const saving = useRef(false);
+  const dialogSession = useRef(0);
+  const visibleOwner = useRef(0);
+  const [open, setOpen] = useState(false);
+  const [phase, setPhase] = useState("date");
+  let t5;
+  if ($[0] !== value) {
+    t5 = () => value ?? new Date();
+    $[0] = value;
+    $[1] = t5;
+  } else {
+    t5 = $[1];
+  }
+  const [draft, setDraft] = useState(t5);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState();
+  const blocked = disabled || readOnly || pending;
+  const android = Platform.OS === "android";
+  let t6;
+  if ($[2] !== open) {
+    t6 = () => {
+      if (!android || !open) {
+        return;
+      }
+      visibleOwner.current = dialogSession.current;
     };
-    const outOfRange = (next) => (minimumDate !== undefined &&
-        comparableDate(next, mode) < comparableDate(minimumDate, mode)) ||
-        (maximumDate !== undefined &&
-            comparableDate(next, mode) > comparableDate(maximumDate, mode));
-    const apply = async (next) => {
-        if (android)
-            setOpen(false);
-        if (blocked || saving.current)
-            return;
-        if (outOfRange(next)) {
-            setError("Selecciona una fecha y hora dentro del rango permitido.");
-            setDraft(next);
-            return;
-        }
-        saving.current = true;
-        setPending(true);
-        setError(undefined);
-        try {
-            await onChange(next);
-            setOpen(false);
-        }
-        catch (cause) {
-            setDraft(next);
-            setError(cause instanceof Error && cause.message.trim()
-                ? cause.message
-                : "No se pudo aplicar la fecha. Vuelve a intentarlo.");
-        }
-        finally {
-            saving.current = false;
-            setPending(false);
-        }
+    $[2] = open;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  let t7;
+  if ($[4] !== open || $[5] !== phase) {
+    t7 = [android, open, phase];
+    $[4] = open;
+    $[5] = phase;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  useLayoutEffect(t6, t7);
+  let t8;
+  if ($[7] !== format || $[8] !== mode) {
+    t8 = format ?? (date => defaultFormat(date, mode));
+    $[7] = format;
+    $[8] = mode;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const fmt = t8;
+  let t9;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => {
+      if (!saving.current) {
+        setOpen(false);
+      }
+    };
+    $[10] = t9;
+  } else {
+    t9 = $[10];
+  }
+  const close = t9;
+  let t10;
+  if ($[11] !== maximumDate || $[12] !== minimumDate || $[13] !== mode) {
+    t10 = next => minimumDate !== undefined && comparableDate(next, mode) < comparableDate(minimumDate, mode) || maximumDate !== undefined && comparableDate(next, mode) > comparableDate(maximumDate, mode);
+    $[11] = maximumDate;
+    $[12] = minimumDate;
+    $[13] = mode;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const outOfRange = t10;
+  let t11;
+  if ($[15] !== blocked || $[16] !== onChange || $[17] !== outOfRange) {
+    t11 = async next_0 => {
+      if (android) {
+        setOpen(false);
+      }
+      if (blocked || saving.current) {
+        return;
+      }
+      if (outOfRange(next_0)) {
+        setError("Selecciona una fecha y hora dentro del rango permitido.");
+        setDraft(next_0);
+        return;
+      }
+      saving.current = true;
+      setPending(true);
+      setError(undefined);
+      const result = await attempt(async () => {
+        await onChange(next_0);
+        setOpen(false);
+      });
+      saving.current = false;
+      setPending(false);
+      if (!result.ok) {
+        setDraft(next_0);
+        setError(errorMessage(result.error, "No se pudo aplicar la fecha. Vuelve a intentarlo."));
+      }
     };
-    const update = (date) => {
-        if (!date || blocked || saving.current)
-            return;
-        setDraft(date);
+    $[15] = blocked;
+    $[16] = onChange;
+    $[17] = outOfRange;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  const apply = t11;
+  let t12;
+  if ($[19] !== blocked) {
+    t12 = date_0 => {
+      if (!date_0 || blocked || saving.current) {
+        return;
+      }
+      setDraft(date_0);
+      setError(undefined);
+    };
+    $[19] = blocked;
+    $[20] = t12;
+  } else {
+    t12 = $[20];
+  }
+  const update = t12;
+  let t13;
+  if ($[21] !== apply || $[22] !== blocked || $[23] !== draft || $[24] !== mode || $[25] !== phase) {
+    t13 = date_1 => {
+      if (!date_1 || blocked || saving.current) {
+        return;
+      }
+      if (mode === "datetime" && phase === "date") {
+        dialogSession.current = dialogSession.current + 1;
+        setDraft(current => withCalendarDay(current, date_1));
+        setPhase("time");
         setError(undefined);
+        return;
+      }
+      const next_1 = mode === "datetime" ? withClockTime(draft, date_1) : date_1;
+      apply(next_1);
     };
-    const confirmAndroid = (date) => {
-        if (!date || blocked || saving.current)
-            return;
-        if (mode === "datetime" && phase === "date") {
-            dialogSession.current += 1;
-            setDraft((current) => withCalendarDay(current, date));
-            setPhase("time");
-            setError(undefined);
-            return;
-        }
-        const next = mode === "datetime" ? withClockTime(draft, date) : date;
-        void apply(next);
+    $[21] = apply;
+    $[22] = blocked;
+    $[23] = draft;
+    $[24] = mode;
+    $[25] = phase;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  const confirmAndroid = t13;
+  let t14;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => {
+      if (dialogSession.current !== visibleOwner.current) {
+        return;
+      }
+      setOpen(false);
     };
-    const dismissAndroid = () => {
-        if (dialogSession.current !== visibleOwner.current)
-            return;
-        setOpen(false);
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  const dismissAndroid = t14;
+  let t15;
+  if ($[28] !== draft || $[29] !== error || $[30] !== maximumDate || $[31] !== minimumDate || $[32] !== mode || $[33] !== value) {
+    t15 = () => {
+      const initial = error ? draft : value ?? new Date();
+      const clamped = minimumDate && comparableDate(initial, mode) < comparableDate(minimumDate, mode) ? minimumDate : maximumDate && comparableDate(initial, mode) > comparableDate(maximumDate, mode) ? maximumDate : initial;
+      dialogSession.current = dialogSession.current + 1;
+      visibleOwner.current = dialogSession.current;
+      setDraft(clamped);
+      setPhase("date");
+      setError(undefined);
+      setOpen(true);
     };
-    const openPicker = () => {
-        const initial = error ? draft : (value ?? new Date());
-        const clamped = minimumDate && comparableDate(initial, mode) < comparableDate(minimumDate, mode)
-            ? minimumDate
-            : maximumDate && comparableDate(initial, mode) > comparableDate(maximumDate, mode)
-                ? maximumDate
-                : initial;
-        dialogSession.current += 1;
-        visibleOwner.current = dialogSession.current;
-        setDraft(clamped);
-        setPhase("date");
-        setError(undefined);
-        setOpen(true);
+    $[28] = draft;
+    $[29] = error;
+    $[30] = maximumDate;
+    $[31] = minimumDate;
+    $[32] = mode;
+    $[33] = value;
+    $[34] = t15;
+  } else {
+    t15 = $[34];
+  }
+  const openPicker = t15;
+  const androidMode = mode === "datetime" ? phase : mode;
+  let t16;
+  if ($[35] !== className) {
+    t16 = cn("gap-1", className);
+    $[35] = className;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] !== label) {
+    t17 = label ? _jsx(Typography.Text, {
+      className: "text-text-primary",
+      semibold: true,
+      variant: "bodySmall",
+      children: label
+    }) : null;
+    $[37] = label;
+    $[38] = t17;
+  } else {
+    t17 = $[38];
+  }
+  const t18 = label ?? placeholder;
+  let t19;
+  if ($[39] !== blocked || $[40] !== open) {
+    t19 = {
+      disabled: blocked,
+      expanded: open
+    };
+    $[39] = blocked;
+    $[40] = open;
+    $[41] = t19;
+  } else {
+    t19 = $[41];
+  }
+  let t20;
+  if ($[42] !== fmt || $[43] !== placeholder || $[44] !== value) {
+    t20 = value ? fmt(value) : placeholder;
+    $[42] = fmt;
+    $[43] = placeholder;
+    $[44] = value;
+    $[45] = t20;
+  } else {
+    t20 = $[45];
+  }
+  let t21;
+  if ($[46] !== t20) {
+    t21 = {
+      text: t20
+    };
+    $[46] = t20;
+    $[47] = t21;
+  } else {
+    t21 = $[47];
+  }
+  let t22;
+  if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = {
+      minHeight: 48,
+      minWidth: 48
+    };
+    $[48] = t22;
+  } else {
+    t22 = $[48];
+  }
+  const t23 = value ? "text-text-primary" : "text-text-tertiary";
+  let t24;
+  if ($[49] !== t23) {
+    t24 = cn("flex-1", t23);
+    $[49] = t23;
+    $[50] = t24;
+  } else {
+    t24 = $[50];
+  }
+  let t25;
+  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+    t25 = {
+      paddingVertical: 12
     };
-    const androidMode = mode === "datetime" ? phase : mode;
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha y hora", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled: blocked, expanded: open }, accessibilityValue: { text: value ? fmt(value) : placeholder }, className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3", disabled: blocked, onPress: openPicker, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1", value ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: mode === "time" ? "time" : "calendar", size: 18 })] }), android && error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "text-danger", selectable: true, children: error })) : null, android && open ? (_jsx(DateTimePicker, { accentColor: theme.primary, display: "default", maximumDate: maximumDate, minimumDate: minimumDate, mode: androidMode, negativeButton: { label: "Cancelar" }, onDismiss: dismissAndroid, onValueChange: (_event, date) => confirmAndroid(date), positiveButton: {
-                    label: mode === "datetime" && phase === "date" ? "Continuar" : "Aplicar",
-                }, presentation: "dialog", testID: testID
-                    ? `${testID}-${androidMode === "time" ? "time" : "date"}-picker`
-                    : undefined, themeVariant: appearance, value: draft }, androidMode)) : null, android ? null : (_jsxs(Sheet, { dismissible: !pending, footer: _jsx(Actions.Button, { disabled: blocked, loading: pending, onPress: () => void apply(draft), title: "Aplicar" }), onClose: close, title: label ?? (mode === "time" ? "Seleccionar hora" : "Seleccionar fecha"), visible: open, children: [open ? (_jsx(View, { accessibilityElementsHidden: blocked, importantForAccessibility: blocked ? "no-hide-descendants" : "auto", pointerEvents: blocked ? "none" : "auto", children: _jsx(DateTimePicker, { accentColor: theme.primary, disabled: blocked, display: mode === "time" || mode === "datetime" ? "spinner" : "inline", maximumDate: maximumDate, minimumDate: minimumDate, mode: mode, onValueChange: (_event, date) => update(date), presentation: "inline", testID: testID ? `${testID}-date-picker` : undefined, themeVariant: appearance, value: draft }) })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: error })) : null] }))] }));
+    $[51] = t25;
+  } else {
+    t25 = $[51];
+  }
+  let t26;
+  if ($[52] !== fmt || $[53] !== placeholder || $[54] !== value) {
+    t26 = value ? fmt(value) : placeholder;
+    $[52] = fmt;
+    $[53] = placeholder;
+    $[54] = value;
+    $[55] = t26;
+  } else {
+    t26 = $[55];
+  }
+  let t27;
+  if ($[56] !== t24 || $[57] !== t26) {
+    t27 = _jsx(Typography.Text, {
+      className: t24,
+      style: t25,
+      children: t26
+    });
+    $[56] = t24;
+    $[57] = t26;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  const t28 = mode === "time" ? "time" : "calendar";
+  let t29;
+  if ($[59] !== t28 || $[60] !== theme.icon.secondary) {
+    t29 = _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: t28,
+      size: 18
+    });
+    $[59] = t28;
+    $[60] = theme.icon.secondary;
+    $[61] = t29;
+  } else {
+    t29 = $[61];
+  }
+  let t30;
+  if ($[62] !== blocked || $[63] !== openPicker || $[64] !== t18 || $[65] !== t19 || $[66] !== t21 || $[67] !== t27 || $[68] !== t29) {
+    t30 = _jsxs(Pressable, {
+      accessibilityHint: "Abre el selector de fecha y hora",
+      accessibilityLabel: t18,
+      accessibilityRole: "button",
+      accessibilityState: t19,
+      accessibilityValue: t21,
+      className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3",
+      disabled: blocked,
+      onPress: openPicker,
+      style: t22,
+      children: [t27, t29]
+    });
+    $[62] = blocked;
+    $[63] = openPicker;
+    $[64] = t18;
+    $[65] = t19;
+    $[66] = t21;
+    $[67] = t27;
+    $[68] = t29;
+    $[69] = t30;
+  } else {
+    t30 = $[69];
+  }
+  let t31;
+  if ($[70] !== error) {
+    t31 = android && error ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      className: "text-danger",
+      selectable: true,
+      children: error
+    }) : null;
+    $[70] = error;
+    $[71] = t31;
+  } else {
+    t31 = $[71];
+  }
+  let t32;
+  if ($[72] !== androidMode || $[73] !== appearance || $[74] !== confirmAndroid || $[75] !== draft || $[76] !== maximumDate || $[77] !== minimumDate || $[78] !== mode || $[79] !== open || $[80] !== phase || $[81] !== testID || $[82] !== theme.primary) {
+    t32 = android && open ? _jsx(DateTimePicker, {
+      accentColor: theme.primary,
+      display: "default",
+      maximumDate: maximumDate,
+      minimumDate: minimumDate,
+      mode: androidMode,
+      negativeButton: {
+        label: "Cancelar"
+      },
+      onDismiss: dismissAndroid,
+      onValueChange: (_event, date_2) => confirmAndroid(date_2),
+      positiveButton: {
+        label: mode === "datetime" && phase === "date" ? "Continuar" : "Aplicar"
+      },
+      presentation: "dialog",
+      testID: testID ? `${testID}-${androidMode === "time" ? "time" : "date"}-picker` : undefined,
+      themeVariant: appearance,
+      value: draft
+    }, androidMode) : null;
+    $[72] = androidMode;
+    $[73] = appearance;
+    $[74] = confirmAndroid;
+    $[75] = draft;
+    $[76] = maximumDate;
+    $[77] = minimumDate;
+    $[78] = mode;
+    $[79] = open;
+    $[80] = phase;
+    $[81] = testID;
+    $[82] = theme.primary;
+    $[83] = t32;
+  } else {
+    t32 = $[83];
+  }
+  let t33;
+  if ($[84] !== appearance || $[85] !== apply || $[86] !== blocked || $[87] !== draft || $[88] !== error || $[89] !== label || $[90] !== maximumDate || $[91] !== minimumDate || $[92] !== mode || $[93] !== open || $[94] !== pending || $[95] !== testID || $[96] !== theme.primary || $[97] !== update) {
+    t33 = android ? null : _jsxs(Sheet, {
+      dismissible: !pending,
+      footer: _jsx(Actions.Button, {
+        disabled: blocked,
+        loading: pending,
+        onPress: () => void apply(draft),
+        title: "Aplicar"
+      }),
+      onClose: close,
+      snapPoints: mode === "date" ? CALENDAR_SNAP_POINTS : undefined,
+      title: label ?? (mode === "time" ? "Seleccionar hora" : "Seleccionar fecha"),
+      visible: open,
+      children: [open ? _jsx(View, {
+        accessibilityElementsHidden: blocked,
+        importantForAccessibility: blocked ? "no-hide-descendants" : "auto",
+        pointerEvents: blocked ? "none" : "auto",
+        children: _jsx(DateTimePicker, {
+          accentColor: theme.primary,
+          disabled: blocked,
+          display: mode === "time" || mode === "datetime" ? "spinner" : "inline",
+          maximumDate: maximumDate,
+          minimumDate: minimumDate,
+          mode: mode,
+          onValueChange: (_event_0, date_3) => update(date_3),
+          presentation: "inline",
+          testID: testID ? `${testID}-date-picker` : undefined,
+          themeVariant: appearance,
+          value: draft
+        })
+      }) : null, error ? _jsx(Typography.Text, {
+        accessibilityLiveRegion: "polite",
+        accessibilityRole: "alert",
+        className: "pt-3 text-danger",
+        selectable: true,
+        children: error
+      }) : null]
+    });
+    $[84] = appearance;
+    $[85] = apply;
+    $[86] = blocked;
+    $[87] = draft;
+    $[88] = error;
+    $[89] = label;
+    $[90] = maximumDate;
+    $[91] = minimumDate;
+    $[92] = mode;
+    $[93] = open;
+    $[94] = pending;
+    $[95] = testID;
+    $[96] = theme.primary;
+    $[97] = update;
+    $[98] = t33;
+  } else {
+    t33 = $[98];
+  }
+  let t34;
+  if ($[99] !== t16 || $[100] !== t17 || $[101] !== t30 || $[102] !== t31 || $[103] !== t32 || $[104] !== t33 || $[105] !== testID) {
+    t34 = _jsxs(View, {
+      className: t16,
+      testID: testID,
+      children: [t17, t30, t31, t32, t33]
+    });
+    $[99] = t16;
+    $[100] = t17;
+    $[101] = t30;
+    $[102] = t31;
+    $[103] = t32;
+    $[104] = t33;
+    $[105] = testID;
+    $[106] = t34;
+  } else {
+    t34 = $[106];
+  }
+  return t34;
 }
 export default DatePicker;