@seakoi/native-ui 1.2.0 → 1.3.0

package/dist/commonjs/components/base/overflow/style/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverflowStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+/**
+ * 创建样式
+ */
+const useOverflowStyles = exports.useOverflowStyles = (0, _index.createThemedStyles)((theme, {
+  maxCount
+}) => ({
+  container: {
+    flexDirection: 'row',
+    flexWrap: maxCount === 'responsive' ? 'nowrap' : 'wrap',
+    overflow: 'hidden',
+    width: '100%'
+  },
+  item: {
+    flexShrink: 0,
+    paddingHorizontal: theme.spacing.xxs / 2,
+    paddingVertical: theme.spacing.xxs / 4
+  },
+  rest: {
+    backgroundColor: theme.palette.gray1,
+    borderRadius: theme.roundness.sm,
+    paddingHorizontal: theme.spacing.xs,
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.palette.fontGray3
+  },
+  hidden: {
+    opacity: 0,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+}));

package/dist/commonjs/components/base/overflow/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/commonjs/components/base/picker/picker-content.js

@@ -7,9 +7,16 @@ exports.PickerContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("./../index.js");
 var _pickerContext = require("./picker-context.js");
+var _index2 = require("./style/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); }
+/**
+ * Picker 内容组件的属性接口
+ * 继承自 Modal 组件,排除 visible 和 children 属性
+ */
+
 const PickerContent = ({
+  style,
   children,
   headerTitle,
   headerStyle,
@@ -17,20 +24,20 @@ const PickerContent = ({
   ...modalProps
 }) => {
   const context = (0, _react.useContext)(_pickerContext.PickerContext);
+  const styles = (0, _index2.usePickerContentStyles)();
   let childNode = null;
+  const injectToChildrenProps = {
+    value: context?.value,
+    onChange: context?.onChange
+  };
   if (/*#__PURE__*/_react.default.isValidElement(children)) {
-    childNode = /*#__PURE__*/_react.default.cloneElement(children, {
-      value: context?.value,
-      onChange: context?.onChange
-    });
+    childNode = /*#__PURE__*/_react.default.cloneElement(children, injectToChildrenProps);
   } else if (typeof children === 'function') {
-    childNode = children({
-      value: context?.value,
-      onChange: context?.onChange
-    });
+    childNode = children(injectToChildrenProps);
   }
   (0, _react.useEffect)(() => {
     context?.setDisabled?.(!!childNode?.props?.disabled);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [childNode?.props?.disabled, context?.setDisabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Modal, {
@@ -43,10 +50,7 @@ const PickerContent = ({
         vertical: true,
         align: "stretch",
         gap: 16,
-        style: {
-          flex: 1,
-          padding: 16
-        },
+        style: [styles.container, style],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ModalHeader, {
           title: headerTitle,
           style: headerStyle,

package/dist/commonjs/components/base/picker/picker-field.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PickerField = PickerField;
 var _ahooks = require("ahooks");
+var _lodashEs = require("lodash-es");
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("./../index.js");
@@ -16,19 +17,20 @@ 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); }
 function PickerField(props) {
   const theme = (0, _index2.useTheme)();
+  const styles = (0, _index4.usePickerFieldStyles)();
   const context = (0, _react.useContext)(_pickerContext.PickerContext);
   const renderValueRef = (0, _ahooks.useLatest)(props.renderValue);
-  const styles = (0, _index4.usePickerFieldStyles)();
-
-  // const hasValue = !!context?.value || typeof context?.value === 'number';
-
-  const displayValue = (0, _react.useMemo)(() => renderValueRef.current?.(context?.value), [context?.value, renderValueRef]);
-  const textColor = displayValue ? theme.palette.fontGray1 : theme.palette.fontGray3;
+  const value = context?.value;
+  const hasControllableValue = !(0, _lodashEs.isNil)(value) && (!Array.isArray(value) || value.length > 0);
+  const displayValue = (0, _react.useMemo)(() => {
+    return typeof renderValueRef.current !== 'function' ? value : renderValueRef.current?.(value);
+  }, [value, renderValueRef]);
+  const textColor = hasControllableValue ? theme.palette.fontGray1 : theme.palette.fontGray3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     style: [styles.container, context?.disabled && styles.disabled],
     onPress: context?.toggleVisible,
     disabled: !!context?.disabled,
-    children: (0, _index3.safetyRenderChildren)(displayValue ?? props.placeholder, displayText => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+    children: (0, _index3.safetyRenderChildren)(hasControllableValue ? displayValue : props.placeholder, displayText => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
       size: 14,
       color: textColor,
       children: displayText

package/dist/commonjs/components/base/picker/picker.js

@@ -8,6 +8,11 @@ var _ahooks = require("ahooks");
 var _react = require("react");
 var _pickerContext = require("./picker-context.js");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Picker 组件的基础属性接口
+ * @template T 选择器值的类型
+ */
+
 const Picker = props => {
   const [visible, {
     toggle: toggleVisible
@@ -27,7 +32,7 @@ const Picker = props => {
     setDisabled,
     toggleVisible,
     onChange: _onChange
-  }), [value, visible, disabled, toggleVisible, setDisabled, setValue]);
+  }), [value, visible, disabled, toggleVisible, _onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pickerContext.PickerContext.Provider, {
     value: contextValue,
     children: props.children

package/dist/commonjs/components/base/picker/style/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePickerFieldStyles = void 0;
+exports.usePickerFieldStyles = exports.usePickerContentStyles = void 0;
 var _index = require("../../../../native-provider/index.js");
 const usePickerFieldStyles = exports.usePickerFieldStyles = (0, _index.createThemedStyles)(theme => ({
   container: {
@@ -16,4 +16,10 @@ const usePickerFieldStyles = exports.usePickerFieldStyles = (0, _index.createThe
   disabled: {
     backgroundColor: theme.palette.blueGray2
   }
+}));
+const usePickerContentStyles = exports.usePickerContentStyles = (0, _index.createThemedStyles)(() => ({
+  container: {
+    flex: 1,
+    padding: 16
+  }
 }));

package/dist/commonjs/components/base/portal/portal-host.js

@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PortalHost = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../../shared/constants/index.js");
 var _portalContext = require("./portal-context.js");
 var _portalManager = require("./portal-manager.js");
 var _index2 = require("./style/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 PortalHost = ({
   children,
-  name
+  name,
+  style
 }) => {
   const portalHostStyles = (0, _index2.usePortalHostStyles)();
   const managerRef = (0, _react.useRef)(null);
@@ -108,7 +110,7 @@ const PortalHost = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_portalContext.PortalContext.Provider, {
     value: contextValue,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: portalHostStyles.container,
+      style: [portalHostStyles.container, style],
       collapsable: false,
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_portalManager.PortalManager, {

package/dist/commonjs/components/base/select/hooks/use-select-actions.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectActions = void 0;
+var _ahooks = require("ahooks");
+/**
+ * 选项操作 Hook 参数
+ *
+ * @template ValueType - 选项值的类型
+ */
+
+/**
+ * 选项操作 Hook 返回值
+ */
+
+/**
+ * 选项操作 Hook
+ *
+ * 封装 Select 组件中与选项操作相关的逻辑,包括:
+ * - 选项点击处理
+ * - 标签移除处理
+ * - 清除操作处理
+ * - 创建新选项处理
+ *
+ * @template ValueType - 选项值的类型
+ *
+ * @example
+ * const {
+ *   handleOptionPress,
+ *   handleTagClose,
+ *   handleClear,
+ *   handleCreateOption
+ * } = useSelectActions({
+ *   value,
+ *   mode,
+ *   disabled,
+ *   maxCount,
+ *   autoClearSearchValue,
+ *   setValue,
+ *   clearSearch,
+ *   closePopup,
+ *   isOptionSelected,
+ *   onSelect,
+ *   onDeselect,
+ *   onClear
+ * });
+ */
+const useSelectActions = params => {
+  const {
+    value,
+    mode,
+    disabled,
+    maxCount,
+    autoClearSearchValue,
+    setValue,
+    clearSearch,
+    closePopup,
+    isOptionSelected,
+    onActive,
+    onSelect,
+    onDeselect,
+    onClear,
+    onCreateOption
+  } = params;
+
+  // 处理选项点击
+  const handleOptionPress = (0, _ahooks.useMemoizedFn)(option => {
+    if (option.disabled) return;
+    onActive?.(option.value);
+
+    // 多选
+    if (mode) {
+      const values = Array.isArray(value) ? value : [];
+      const isSelected = isOptionSelected(option);
+      if (isSelected) {
+        // 取消选中
+        const newValues = values.filter(v => {
+          return v !== option.value;
+        });
+        setValue(newValues);
+        onDeselect?.(option.value);
+      } else {
+        // 选中
+        if (maxCount && values.length >= maxCount) {
+          return;
+        }
+        const newValues = [...values, option.value];
+        setValue(newValues);
+        onSelect?.(option.value, option);
+      }
+
+      // 清空搜索
+      if (autoClearSearchValue) {
+        clearSearch();
+      }
+    } else {
+      // 单选模式
+      setValue(option.value);
+      onSelect?.(option.value, option);
+      closePopup();
+      clearSearch();
+    }
+  });
+
+  // 处理标签移除
+  const handleTagClose = (0, _ahooks.useMemoizedFn)(option => {
+    if (disabled) return;
+    const values = Array.isArray(value) ? value : [];
+    const newValues = values.filter(v => {
+      return v !== option.value;
+    });
+    setValue(newValues);
+    onDeselect?.(option.value);
+  });
+
+  // 处理清除
+  const handleClear = (0, _ahooks.useMemoizedFn)(e => {
+    e.stopPropagation();
+    setValue(mode ? [] : undefined);
+    clearSearch();
+    onClear?.();
+  });
+
+  // 处理创建新选项(tags 模式)
+  const handleCreateOption = (0, _ahooks.useMemoizedFn)(searchValue => {
+    if (mode !== 'tags' || !searchValue.trim()) return;
+    const newOption = onCreateOption?.(searchValue.trim());
+    if (newOption) {
+      handleOptionPress(newOption);
+    } else {
+      // 默认创建逻辑
+      const defaultOption = {
+        label: searchValue.trim(),
+        value: searchValue.trim()
+      };
+      handleOptionPress(defaultOption);
+    }
+    clearSearch();
+  });
+  return {
+    handleOptionPress,
+    handleTagClose,
+    handleClear,
+    handleCreateOption
+  };
+};
+
+/**
+ * 搜索配置
+ *
+ * @template OptionType - 选项类型
+ */
+exports.useSelectActions = useSelectActions;

package/dist/commonjs/components/base/select/hooks/use-select-options.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectFlattenedGroupOption = isSelectFlattenedGroupOption;
+exports.useSelectOptions = exports.isSelectOptionGroup = void 0;
+var _ahooks = require("ahooks");
+var _react = require("react");
+/**
+ * 判断选项是否为分组
+ *
+ * @template ValueType - 选项值的类型
+ */
+const isSelectOptionGroup = item => {
+  return 'options' in item;
+};
+exports.isSelectOptionGroup = isSelectOptionGroup;
+function isSelectFlattenedGroupOption(v) {
+  return !!v.isGroup;
+}
+function isOptionType(v) {
+  return !v.isGroup;
+}
+
+/**
+ * Select 选项处理 Hook 参数
+ *
+ * @template ValueType - 选项值的类型
+ * @template OptionType - 选项类型
+ * @template M - 选择模式
+ * @template RealValueType - 实际值类型
+ */
+
+/**
+ * Select 选项处理 Hook 返回值
+ *
+ * @template ValueType - 选项值的类型
+ * @template OptionType - 选项类型
+ */
+
+/**
+ * Select 选项处理 Hook
+ *
+ * 封装 Select 组件中与选项相关的逻辑,包括:
+ * - 扁平化选项列表
+ * - 过滤选项
+ * - 获取选中的选项
+ * - 判断选项是否被选中
+ *
+ * @example
+ * const {
+ *   allOptions,
+ *   filteredOptions,
+ *   selectedOptions,
+ *   isOptionSelected
+ * } = useSelectOptions({
+ *   options,
+ *   value,
+ *   mode,
+ *   searchValue,
+ *   filterOption: true,
+ *   optionFilterProp: 'label'
+ * });
+ */
+const useSelectOptions = params => {
+  const {
+    options,
+    value,
+    mode,
+    searchValue,
+    filterOption,
+    filterSort,
+    optionFilterProp
+  } = params;
+
+  // 扁平化选项列表
+  const flattenedOptions = (0, _react.useMemo)(() => {
+    const result = [];
+    options.forEach(item => {
+      if (isSelectOptionGroup(item)) {
+        result.push({
+          label: item.label,
+          key: item.key,
+          isGroup: true,
+          groupKey: item.key
+        });
+        item.options.forEach(opt => {
+          result.push({
+            ...opt,
+            groupKey: item.key
+          });
+        });
+      } else {
+        result.push(item);
+      }
+    });
+    return result;
+  }, [options]);
+
+  // 获取所有可选项(不包含分组标题)
+  const allOptions = (0, _react.useMemo)(() => {
+    return flattenedOptions.filter(item => !item.isGroup);
+  }, [flattenedOptions]);
+
+  // 过滤选项
+  const filteredOptions = (0, _react.useMemo)(() => {
+    if (!searchValue || !filterOption) {
+      return flattenedOptions;
+    }
+    const filterFn = typeof filterOption === 'function' ? filterOption : (input, option) => {
+      const props = Array.isArray(optionFilterProp) ? optionFilterProp : [optionFilterProp || 'label'];
+      return props.some(prop => {
+        const value = option[prop];
+        if (typeof value === 'string') {
+          return value.toLowerCase().includes(input.toLowerCase());
+        }
+        return false;
+      });
+    };
+    const filtered = flattenedOptions.filter(item => {
+      if (isSelectFlattenedGroupOption(item)) return true;
+      return filterFn(searchValue, item);
+    });
+
+    // 排序
+    if (filterSort) {
+      const sortableItems = filtered.filter(item => isOptionType(item));
+      sortableItems.sort((a, b) => filterSort(a, b, {
+        searchValue
+      }));
+      return sortableItems;
+    }
+    return filtered;
+  }, [flattenedOptions, searchValue, filterOption, filterSort, optionFilterProp]);
+
+  // 获取选中的选项
+  const selectedOptions = (0, _react.useMemo)(() => {
+    if (!value) return [];
+    if (mode) {
+      const values = Array.isArray(value) ? value : [];
+      return values.map(v => {
+        return allOptions.find(opt => opt.value === v);
+      }).filter(Boolean);
+    } else {
+      const option = allOptions.find(opt => opt.value === value);
+      return option ? [option] : [];
+    }
+  }, [value, allOptions, mode]);
+
+  // 判断选项是否被选中
+  const isOptionSelected = (0, _ahooks.useMemoizedFn)(option => {
+    if (!value) return false;
+    if (mode) {
+      const values = Array.isArray(value) ? value : [];
+      return values.some(v => v === option.value);
+    } else {
+      return value === option.value;
+    }
+  });
+  return {
+    flattenedOptions,
+    allOptions,
+    filteredOptions,
+    selectedOptions,
+    isOptionSelected
+  };
+};
+exports.useSelectOptions = useSelectOptions;

package/dist/commonjs/components/base/select/hooks/use-selector.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelector = void 0;
+var _ahooks = require("ahooks");
+var _react = require("react");
+/**
+ * 选择器 Hook 参数
+ */
+
+/**
+ * 选择器 Hook 返回值
+ */
+
+/**
+ * 选择器 Hook
+ *
+ * 封装 Select 组件中与选择器相关的逻辑,包括:
+ * - 选择器 ref 管理
+ * - 打开/关闭状态管理
+ * - 选择器位置获取
+ * - 焦点状态管理
+ * - 选择器点击处理
+ *
+ * @example
+ * const {
+ *   selectorRef,
+ *   open,
+ *   selectorLayout,
+ *   isFocused,
+ *   handleSelectorPress,
+ *   handleSelectorLayout
+ * } = useSelector({
+ *   defaultOpen: false,
+ *   disabled: false,
+ *   onOpenChange
+ * });
+ */
+const useSelector = params => {
+  const selectorRef = (0, _react.useRef)(null);
+  const [open, setOpen] = (0, _ahooks.useControllableValue)(params, {
+    valuePropName: 'open',
+    defaultValuePropName: 'defaultOpen',
+    trigger: 'onOpenChange'
+  });
+  const [selectorLayout, setSelectorLayout] = (0, _react.useState)(null);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+
+  // 更新选择器位置
+  const updateSelectorLayout = (0, _ahooks.useMemoizedFn)(() => {
+    if (!selectorRef.current?.measure) return;
+    selectorRef.current.measure((_x, _y, width, height, pageX, pageY) => {
+      setSelectorLayout({
+        x: pageX,
+        y: pageY,
+        width,
+        height
+      });
+    });
+  });
+
+  // 处理选择器点击
+  const handleSelectorPress = (0, _ahooks.useMemoizedFn)(() => {
+    if (params.disabled) return;
+    if (!open) {
+      // 打开下拉框时,先获取位置再打开
+      updateSelectorLayout();
+      setOpen(true);
+      setIsFocused(true);
+    } else {
+      // 关闭下拉框
+      setOpen(false);
+      setIsFocused(false);
+    }
+  });
+
+  // 处理选择器布局变化
+  const handleSelectorLayout = (0, _ahooks.useMemoizedFn)(() => {
+    // 当选择器布局变化时,如果下拉框是打开的,更新位置
+    if (open) {
+      updateSelectorLayout();
+    }
+  });
+
+  // 关闭下拉框
+  const closePopup = (0, _ahooks.useMemoizedFn)(() => {
+    setOpen(false);
+    setIsFocused(false);
+  });
+  return {
+    selectorRef,
+    open,
+    selectorLayout,
+    isFocused,
+    setOpen,
+    updateSelectorLayout,
+    handleSelectorPress,
+    handleSelectorLayout,
+    closePopup
+  };
+};
+exports.useSelector = useSelector;

package/dist/commonjs/components/base/select/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _select = require("./select.js");
+Object.keys(_select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _select[key];
+    }
+  });
+});