@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Form/Form.PickerField.js

@@ -0,0 +1,562 @@
+import { c as _c } from "react/compiler-runtime";
+import { FlashList } from "@shopify/flash-list";
+import Sheet from "../Dialog/Dialog.Sheet.js";
+import Icon from "../Display/Display.Icon.js";
+import { inputTextStyle } from "./input-text.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { matchesSearch } from "../utils/search.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, TextInput, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const SEARCH_DELAY_MS = 250;
+
+/**
+ * A field that opens a searchable list: the "selector" pattern every business
+ * app repeats (customer, product, payment method). Local or remote options,
+ * one virtualized list, the shared overlay sheet.
+ */
+function PickerField(t0) {
+  const $ = _c(100);
+  const {
+    label,
+    value,
+    onChange,
+    options,
+    search,
+    selectedLabel,
+    placeholder: t1,
+    title,
+    searchPlaceholder: t2,
+    emptyLabel: t3,
+    error,
+    disabled: t4,
+    className,
+    testID
+  } = t0;
+  const placeholder = t1 === undefined ? "Seleccionar" : t1;
+  const searchPlaceholder = t2 === undefined ? "Buscar\u2026" : t2;
+  const emptyLabel = t3 === undefined ? "Sin resultados" : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  let t5;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = [];
+    $[0] = t5;
+  } else {
+    t5 = $[0];
+  }
+  const [remote, setRemote] = useState(t5);
+  const [loading, setLoading] = useState(false);
+  const [failure, setFailure] = useState();
+  const request = useRef(0);
+  let t6;
+  let t7;
+  if ($[1] !== open || $[2] !== query || $[3] !== search) {
+    t6 = () => {
+      if (!open || !search) {
+        return;
+      }
+      const id = request.current = request.current + 1;
+      const timer = setTimeout(() => {
+        search(query).then(found => {
+          if (id !== request.current) {
+            return;
+          }
+          setRemote(found);
+          setLoading(false);
+        }, cause => {
+          if (id !== request.current) {
+            return;
+          }
+          setFailure(cause instanceof Error && cause.message.trim() ? cause.message : "No se pudo buscar. Vuelve a intentarlo.");
+          setLoading(false);
+        });
+      }, SEARCH_DELAY_MS);
+      return () => clearTimeout(timer);
+    };
+    t7 = [open, query, search];
+    $[1] = open;
+    $[2] = query;
+    $[3] = search;
+    $[4] = t6;
+    $[5] = t7;
+  } else {
+    t6 = $[4];
+    t7 = $[5];
+  }
+  useEffect(t6, t7);
+  let t8;
+  bb0: {
+    if (search) {
+      t8 = remote;
+      break bb0;
+    }
+    let t9;
+    if ($[6] !== options) {
+      t9 = options ?? [];
+      $[6] = options;
+      $[7] = t9;
+    } else {
+      t9 = $[7];
+    }
+    let t10;
+    if ($[8] !== query || $[9] !== t9) {
+      let t11;
+      if ($[11] !== query) {
+        t11 = option => matchesSearch(query, option.label, option.description);
+        $[11] = query;
+        $[12] = t11;
+      } else {
+        t11 = $[12];
+      }
+      t10 = t9.filter(t11);
+      $[8] = query;
+      $[9] = t9;
+      $[10] = t10;
+    } else {
+      t10 = $[10];
+    }
+    t8 = t10;
+  }
+  const results = t8;
+  let t9;
+  if ($[13] !== options || $[14] !== remote || $[15] !== selectedLabel || $[16] !== value) {
+    t9 = (options ?? remote).find(option_0 => option_0.value === value)?.label ?? selectedLabel;
+    $[13] = options;
+    $[14] = remote;
+    $[15] = selectedLabel;
+    $[16] = value;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  const current = t9;
+  let t10;
+  if ($[18] !== search) {
+    t10 = () => {
+      if (!search) {
+        return;
+      }
+      setLoading(true);
+      setFailure(undefined);
+    };
+    $[18] = search;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  const startSearch = t10;
+  let t11;
+  if ($[20] !== startSearch) {
+    t11 = text => {
+      setQuery(text);
+      startSearch();
+    };
+    $[20] = startSearch;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  const updateQuery = t11;
+  let t12;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => {
+      setOpen(false);
+      setQuery("");
+    };
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  const close = t12;
+  let t13;
+  if ($[23] !== onChange) {
+    t13 = option_1 => {
+      onChange(option_1.value, option_1);
+      setOpen(false);
+      setQuery("");
+    };
+    $[23] = onChange;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  const choose = t13;
+  let t14;
+  if ($[25] !== choose || $[26] !== theme.text.accent || $[27] !== value) {
+    t14 = t15 => {
+      const {
+        item
+      } = t15;
+      const selected = item.value === value;
+      return _jsxs(Pressable, {
+        accessibilityLabel: item.label,
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected
+        },
+        className: "flex-row items-center gap-3 border-b border-border-light py-3",
+        onPress: () => choose(item),
+        style: {
+          minHeight: 48
+        },
+        children: [_jsxs(View, {
+          style: {
+            flex: 1
+          },
+          children: [_jsx(Typography.Text, {
+            semibold: selected,
+            children: item.label
+          }), item.description ? _jsx(Typography.Text, {
+            className: "text-text-tertiary",
+            variant: "caption",
+            children: item.description
+          }) : null]
+        }), selected ? _jsx(Icon, {
+          color: theme.text.accent,
+          name: "check",
+          size: 18
+        }) : null]
+      });
+    };
+    $[25] = choose;
+    $[26] = theme.text.accent;
+    $[27] = value;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  const renderOption = t14;
+  let t15;
+  if ($[29] !== className) {
+    t15 = cn("gap-1", className);
+    $[29] = className;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  let t16;
+  if ($[31] !== label) {
+    t16 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      semibold: true,
+      variant: "bodySmall",
+      children: label
+    });
+    $[31] = label;
+    $[32] = t16;
+  } else {
+    t16 = $[32];
+  }
+  const t17 = `${label}: ${current ?? placeholder}`;
+  let t18;
+  if ($[33] !== disabled || $[34] !== open) {
+    t18 = {
+      disabled,
+      expanded: open
+    };
+    $[33] = disabled;
+    $[34] = open;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== startSearch) {
+    t19 = () => {
+      setOpen(true);
+      startSearch();
+    };
+    $[36] = startSearch;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+  let t20;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = {
+      minHeight: 48,
+      minWidth: 48
+    };
+    $[38] = t20;
+  } else {
+    t20 = $[38];
+  }
+  const t21 = current ? "text-text-primary" : "text-text-tertiary";
+  let t22;
+  if ($[39] !== t21) {
+    t22 = cn("flex-1", t21);
+    $[39] = t21;
+    $[40] = t22;
+  } else {
+    t22 = $[40];
+  }
+  let t23;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = {
+      paddingVertical: 12
+    };
+    $[41] = t23;
+  } else {
+    t23 = $[41];
+  }
+  const t24 = current ?? placeholder;
+  let t25;
+  if ($[42] !== t22 || $[43] !== t24) {
+    t25 = _jsx(Typography.Text, {
+      className: t22,
+      style: t23,
+      children: t24
+    });
+    $[42] = t22;
+    $[43] = t24;
+    $[44] = t25;
+  } else {
+    t25 = $[44];
+  }
+  let t26;
+  if ($[45] !== theme.icon.secondary) {
+    t26 = _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: "search",
+      size: 18
+    });
+    $[45] = theme.icon.secondary;
+    $[46] = t26;
+  } else {
+    t26 = $[46];
+  }
+  let t27;
+  if ($[47] !== disabled || $[48] !== t17 || $[49] !== t18 || $[50] !== t19 || $[51] !== t25 || $[52] !== t26) {
+    t27 = _jsxs(Pressable, {
+      accessibilityHint: "Abre la b\xFAsqueda de opciones",
+      accessibilityLabel: t17,
+      accessibilityRole: "button",
+      accessibilityState: t18,
+      className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3",
+      disabled: disabled,
+      onPress: t19,
+      style: t20,
+      children: [t25, t26]
+    });
+    $[47] = disabled;
+    $[48] = t17;
+    $[49] = t18;
+    $[50] = t19;
+    $[51] = t25;
+    $[52] = t26;
+    $[53] = t27;
+  } else {
+    t27 = $[53];
+  }
+  let t28;
+  if ($[54] !== error) {
+    t28 = error ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      className: "text-danger",
+      children: error
+    }) : null;
+    $[54] = error;
+    $[55] = t28;
+  } else {
+    t28 = $[55];
+  }
+  let t29;
+  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+    t29 = ["90%"];
+    $[56] = t29;
+  } else {
+    t29 = $[56];
+  }
+  const t30 = testID ? `${testID}-sheet` : undefined;
+  const t31 = title ?? label;
+  let t32;
+  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = {
+      flex: 1,
+      gap: 8
+    };
+    $[57] = t32;
+  } else {
+    t32 = $[57];
+  }
+  const t33 = theme.text.tertiary;
+  const t34 = theme.primary;
+  let t35;
+  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+    t35 = inputTextStyle();
+    $[58] = t35;
+  } else {
+    t35 = $[58];
+  }
+  let t36;
+  if ($[59] !== theme.text.primary) {
+    t36 = [t35, {
+      color: theme.text.primary
+    }];
+    $[59] = theme.text.primary;
+    $[60] = t36;
+  } else {
+    t36 = $[60];
+  }
+  const t37 = testID ? `${testID}-search` : undefined;
+  let t38;
+  if ($[61] !== query || $[62] !== searchPlaceholder || $[63] !== t36 || $[64] !== t37 || $[65] !== theme.primary || $[66] !== theme.text.tertiary || $[67] !== updateQuery) {
+    t38 = _jsx(TextInput, {
+      accessibilityLabel: searchPlaceholder,
+      autoCorrect: false,
+      className: "rounded-xl bg-bg-muted px-4 py-3",
+      onChangeText: updateQuery,
+      placeholder: searchPlaceholder,
+      placeholderTextColor: t33,
+      returnKeyType: "search",
+      selectionColor: t34,
+      style: t36,
+      testID: t37,
+      underlineColorAndroid: "transparent",
+      value: query
+    });
+    $[61] = query;
+    $[62] = searchPlaceholder;
+    $[63] = t36;
+    $[64] = t37;
+    $[65] = theme.primary;
+    $[66] = theme.text.tertiary;
+    $[67] = updateQuery;
+    $[68] = t38;
+  } else {
+    t38 = $[68];
+  }
+  let t39;
+  if ($[69] !== loading || $[70] !== theme.primary) {
+    t39 = loading ? _jsx(ActivityIndicator, {
+      color: theme.primary
+    }) : null;
+    $[69] = loading;
+    $[70] = theme.primary;
+    $[71] = t39;
+  } else {
+    t39 = $[71];
+  }
+  let t40;
+  if ($[72] !== failure) {
+    t40 = failure ? _jsx(Typography.Text, {
+      accessibilityRole: "alert",
+      className: "text-danger",
+      children: failure
+    }) : null;
+    $[72] = failure;
+    $[73] = t40;
+  } else {
+    t40 = $[73];
+  }
+  let t41;
+  if ($[74] !== emptyLabel || $[75] !== loading) {
+    t41 = loading ? null : _jsx(Typography.Text, {
+      className: "py-6 text-center text-text-tertiary",
+      children: emptyLabel
+    });
+    $[74] = emptyLabel;
+    $[75] = loading;
+    $[76] = t41;
+  } else {
+    t41 = $[76];
+  }
+  let t42;
+  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+    t42 = {
+      disabled: true
+    };
+    $[77] = t42;
+  } else {
+    t42 = $[77];
+  }
+  let t43;
+  if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+    t43 = {
+      flex: 1
+    };
+    $[78] = t43;
+  } else {
+    t43 = $[78];
+  }
+  let t44;
+  if ($[79] !== renderOption || $[80] !== results || $[81] !== t41) {
+    t44 = _jsx(FlashList, {
+      data: results,
+      keyboardDismissMode: "on-drag",
+      keyboardShouldPersistTaps: "handled",
+      keyExtractor: _temp,
+      ListEmptyComponent: t41,
+      maintainVisibleContentPosition: t42,
+      renderItem: renderOption,
+      style: t43
+    });
+    $[79] = renderOption;
+    $[80] = results;
+    $[81] = t41;
+    $[82] = t44;
+  } else {
+    t44 = $[82];
+  }
+  let t45;
+  if ($[83] !== t38 || $[84] !== t39 || $[85] !== t40 || $[86] !== t44) {
+    t45 = _jsxs(View, {
+      style: t32,
+      children: [t38, t39, t40, t44]
+    });
+    $[83] = t38;
+    $[84] = t39;
+    $[85] = t40;
+    $[86] = t44;
+    $[87] = t45;
+  } else {
+    t45 = $[87];
+  }
+  let t46;
+  if ($[88] !== open || $[89] !== t30 || $[90] !== t31 || $[91] !== t45) {
+    t46 = _jsx(Sheet, {
+      onClose: close,
+      scrollable: false,
+      snapPoints: t29,
+      testID: t30,
+      title: t31,
+      visible: open,
+      children: t45
+    });
+    $[88] = open;
+    $[89] = t30;
+    $[90] = t31;
+    $[91] = t45;
+    $[92] = t46;
+  } else {
+    t46 = $[92];
+  }
+  let t47;
+  if ($[93] !== t15 || $[94] !== t16 || $[95] !== t27 || $[96] !== t28 || $[97] !== t46 || $[98] !== testID) {
+    t47 = _jsxs(View, {
+      className: t15,
+      testID: testID,
+      children: [t16, t27, t28, t46]
+    });
+    $[93] = t15;
+    $[94] = t16;
+    $[95] = t27;
+    $[96] = t28;
+    $[97] = t46;
+    $[98] = testID;
+    $[99] = t47;
+  } else {
+    t47 = $[99];
+  }
+  return t47;
+}
+function _temp(option_2) {
+  return String(option_2.value);
+}
+export default PickerField;