@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = Autocomplete;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _corners = require("../../utils/corners.js");
+var _index4 = require("../Input/index.js");
+var _index5 = require("../Spinner/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const defaultGetLabel = o => typeof o === 'string' ? o : String(o);
+function Autocomplete(props) {
+  const {
+    options,
+    value,
+    defaultValue,
+    onChangeText,
+    onSelect,
+    getOptionLabel,
+    getOptionKey,
+    filter,
+    minChars = 1,
+    maxResults = 8,
+    emptyText = 'No matches',
+    loading = false,
+    filterMode = 'client',
+    loadingText = 'Searching…',
+    placeholder,
+    label,
+    error,
+    helperText,
+    disabled = false,
+    size = 'md',
+    variant,
+    haptic,
+    style,
+    listStyle,
+    optionTextStyle,
+    testID
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [text, setText] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? '',
+    onChange: onChangeText
+  });
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [fieldHeight, setFieldHeight] = (0, _react.useState)(0);
+  const blurTimer = (0, _react.useRef)(null);
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : defaultGetLabel(o), [getOptionLabel]);
+  const filtered = (0, _react.useMemo)(() => {
+    // Server-side search: trust the provided options, don't re-filter them away.
+    if (filterMode === 'none') {
+      return options.slice(0, maxResults);
+    }
+    const q = text.trim();
+    if (q.length < minChars) {
+      return [];
+    }
+    const lower = q.toLowerCase();
+    const match = filter ? o => filter(o, q) : o => labelOf(o).toLowerCase().includes(lower);
+    return options.filter(match).slice(0, maxResults);
+  }, [options, text, minChars, maxResults, filter, labelOf, filterMode]);
+  const showList = focused && (loading || text.trim().length >= minChars);
+  const handleSelect = (0, _react.useCallback)(o => {
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+    }
+    setText(labelOf(o));
+    setFocused(false);
+    _reactNative.Keyboard.dismiss();
+    onSelect(o);
+  }, [haptic, setText, labelOf, onSelect]);
+  _react.default.useEffect(() => () => {
+    if (blurTimer.current) {
+      clearTimeout(blurTimer.current);
+    }
+  }, []);
+  const onFieldLayout = (0, _react.useCallback)(e => {
+    setFieldHeight(e.nativeEvent.layout.height);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: onFieldLayout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Input, {
+        value: text,
+        onChangeText: setText,
+        onFocus: () => {
+          if (blurTimer.current) {
+            clearTimeout(blurTimer.current);
+          }
+          setFocused(true);
+        },
+        onBlur: () => {
+          blurTimer.current = setTimeout(() => setFocused(false), 120);
+        },
+        placeholder: placeholder,
+        label: label,
+        error: error,
+        helperText: helperText,
+        editable: !disabled
+        // editable={false} stops typing but says nothing to a screen reader,
+        // so a disabled field announced as editable is the bug this closes.
+        ,
+        accessibilityState: {
+          disabled
+        },
+        size: size,
+        variant: variant,
+        autoCorrect: false,
+        autoCapitalize: "none"
+      })
+    }), showList ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.list, {
+        top: fieldHeight,
+        backgroundColor: theme.colors.background.elevated,
+        borderColor: theme.colors.border.primary,
+        borderRadius: theme.radius.md,
+        ..._corners.smoothCorners,
+        ...theme.shadows.lg
+      }, listStyle],
+      children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.loadingRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Spinner, {
+          size: "sm"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.loadingText, {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          children: loadingText
+        })]
+      }) : filtered.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.empty, {
+          color: theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.sm
+        }],
+        children: emptyText
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        keyboardShouldPersistTaps: "handled",
+        style: styles.scroll,
+        children: filtered.map((o, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          onPress: () => handleSelect(o),
+          android_ripple: {
+            color: theme.colors.surface.pressed
+          },
+          style: ({
+            pressed
+          }) => [styles.option, {
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }],
+          accessibilityRole: "button",
+          accessibilityLabel: labelOf(o),
+          accessibilityState: {
+            selected: labelOf(o) === text
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.optionText, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base
+            }, optionTextStyle],
+            numberOfLines: 1,
+            children: labelOf(o)
+          })
+        }, getOptionKey ? getOptionKey(o) : `${labelOf(o)}-${i}`))
+      })
+    }) : null]
+  });
+}
+Autocomplete.displayName = 'Autocomplete';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+    zIndex: 10
+  },
+  list: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+    zIndex: 20,
+    maxHeight: 240
+  },
+  scroll: {
+    maxHeight: 240
+  },
+  option: {
+    width: '100%'
+  },
+  optionText: {
+    includeFontPadding: false
+  },
+  empty: {
+    padding: theme.spacing.md,
+    textAlign: 'center',
+    includeFontPadding: false
+  },
+  loadingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    padding: theme.spacing.md
+  },
+  loadingText: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

package/lib/commonjs/components/Autocomplete/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.Autocomplete;
+  }
+});
+var _Autocomplete = require("./Autocomplete.js");
+//# sourceMappingURL=index.js.map