@seakoi/native-ui 1.1.3 → 1.3.0

package/dist/commonjs/components/base/picker-backup/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeColumns = void 0;
+/** 默认字段名 */
+const DEFAULT_FIELD_NAMES = {
+  label: 'label',
+  value: 'value',
+  children: 'children'
+};
+
+/**
+ * 将自定义字段名的数据标准化为内部使用的 { label, value, children } 格式
+ * 如果 fieldNames 与默认值相同，则直接返回原始数据（零开销）
+ */
+const normalizeColumns = (columns, fieldNames) => {
+  if (!fieldNames) return columns;
+  const merged = {
+    ...DEFAULT_FIELD_NAMES,
+    ...fieldNames
+  };
+
+  // 如果所有字段名都和默认值一样，无需转换
+  if (merged.label === 'label' && merged.value === 'value' && merged.children === 'children') {
+    return columns;
+  }
+  const normalizeOption = item => {
+    const normalized = {
+      ...item
+    };
+    if (merged.label !== 'label') {
+      normalized.label = item[merged.label];
+    }
+    if (merged.value !== 'value') {
+      normalized.value = item[merged.value];
+    }
+    if (merged.children !== 'children' && item[merged.children]) {
+      normalized.children = item[merged.children].map(normalizeOption);
+    } else if (item.children) {
+      normalized.children = item.children.map(normalizeOption);
+    }
+    return normalized;
+  };
+  return columns.map(column => {
+    if (Array.isArray(column)) {
+      return column.map(normalizeOption);
+    }
+    return normalizeOption(column);
+  });
+};
+exports.normalizeColumns = normalizeColumns;

package/dist/commonjs/components/base/picker-view/picker-view-column.js

@@ -52,6 +52,21 @@ const PickerViewColumn = exports.PickerViewColumn = /*#__PURE__*/(0, _react.memo
     }
   });
   const selectedIndex = (0, _column.getSelectedIndex)(options.findIndex(item => item.value === value));
+
+  /**
+   * 自初始化：当 value 为空或不在 options 中时，主动上报第一个可用选项
+   * 这从根本上解决了「不滚动就拿不到值」的问题
+   */
+  (0, _react.useEffect)(() => {
+    if (options.length === 0) return;
+    const hasValidValue = value !== undefined && value !== null && options.some(item => item.value === value);
+    if (!hasValidValue) {
+      const defaultIndex = (0, _column.findUsableOptionIndex)(options, true, 0, false);
+      if (defaultIndex >= 0) {
+        onChange?.(options[defaultIndex]);
+      }
+    }
+  }, [options, value, onChange]);
   (0, _react.useEffect)(() => {
     if (selectedIndex >= 0 && selectedIndex < options.length) {
       flatListRef.current?.scrollToIndex({

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

@@ -53,8 +53,8 @@ const PickerView = ({
   }, [dataType, columns, value]);
 
   // 保存 columnDefaultValues 到 ref，供 handleChange 使用
-  const columnDefaultValuesRef = (0, _react.useRef)(columnDefaultValues);
-  columnDefaultValuesRef.current = columnDefaultValues;
+  // const columnDefaultValuesRef = useRef<PickerValue[]>(columnDefaultValues);
+  // columnDefaultValuesRef.current = columnDefaultValues;
 
   /** 获取容器实际高度 */
   const handleLayout = (0, _react.useCallback)(event => {
@@ -78,7 +78,7 @@ const PickerView = ({
       case 'multiple':
         {
           const newValues = [...value];
-          columnDefaultValuesRef.current.forEach((item, i) => {
+          columnDefaultValues.forEach((item, i) => {
             if ((0, _lodashEs.isNil)(newValues[i])) {
               newValues[i] = item;
             }
@@ -144,7 +144,7 @@ const PickerView = ({
         }
         if (!isControlled && !isNoDefaultValue) {
           if (dataType === 'multiple') {
-            return columnDefaultValuesRef.current[index];
+            return columnDefaultValues[index];
           }
 
           // 真的没有就默认第一个选项

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];
+    }
+  });
+});