@seakoi/native-ui 1.1.3 → 1.3.0

package/dist/module/components/base/picker-backup/picker-backup.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Button } from "../button/index.js";
+import { Picker } from "../picker/index.js";
+import { PickerView } from "../picker-view/index.js";
+import { findOptionsByValue } from "../picker-view/utils/picker.js";
+import { normalizeColumns } from "./utils.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const PickerBackup = ({
+  placeholder = '请选择',
+  headerTitle = '请选择',
+  formatter,
+  confirmText = '确定',
+  columns: rawColumns,
+  fieldNames,
+  ...restProps
+}) => {
+  const [draftValue, setDraftValue] = useState();
+  const committedValueRef = useRef(restProps.value ?? []);
+  const handleOpen = useCallback(() => {
+    setDraftValue(committedValueRef.current);
+  }, []);
+
+  /** 标准化列数据：将自定义字段名映射为内部标准格式 */
+  const columns = useMemo(() => normalizeColumns(rawColumns, fieldNames), [rawColumns, fieldNames]);
+
+  /** 格式化显示文案 - 根据 value 从 columns 计算 */
+  const _renderValue = useMemoizedFn(value => {
+    if (!value?.length) return;
+    const options = findOptionsByValue(value, columns);
+    if (formatter) {
+      return formatter(value, options);
+    }
+    return options.map(opt => opt?.label).filter(Boolean).join(' / ');
+  });
+  return /*#__PURE__*/_jsxs(Picker, {
+    ...restProps,
+    children: [/*#__PURE__*/_jsx(Picker.Field, {
+      placeholder: placeholder,
+      renderValue: _renderValue
+    }), /*#__PURE__*/_jsx(Picker.Content, {
+      headerTitle: headerTitle,
+      onOpen: handleOpen,
+      children: ({
+        onChange,
+        value: contextValue
+      }) => {
+        // 同步 ref：始终保持最新的已提交值
+        committedValueRef.current = contextValue ?? [];
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(PickerView, {
+            columns: columns,
+            itemHeight: restProps.itemHeight,
+            value: draftValue,
+            onChange: setDraftValue
+          }), /*#__PURE__*/_jsx(Button, {
+            text: confirmText,
+            size: "large",
+            onPress: () => {
+              onChange?.(draftValue);
+            }
+          })]
+        });
+      }
+    })]
+  });
+};

package/dist/module/components/base/picker-backup/picker-copy.js

@@ -0,0 +1,101 @@
+"use strict";
+
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from "../button/index.js";
+import { Flex } from "../flex/index.js";
+import { Modal, ModalHeader } from "../modal/index.js";
+import { PickerView } from "../picker-view/index.js";
+import { findOptionsByValue, getDefaultValues } from "../picker-view/utils/picker.js";
+import { Portal } from "../portal/index.js";
+import { PickerTrigger } from "./picker-trigger.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Picker = ({
+  placeholder = '请选择',
+  disabled = false,
+  title = '请选择',
+  formatter,
+  children,
+  style,
+  confirmText = '确定',
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue(restProps, {
+    defaultValue: restProps.defaultValue
+  });
+  const [visible, setVisible] = useState(false);
+
+  // 内部状态用于管理滚动时的临时值
+  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? []);
+
+  // 滑动时的临时 options（不用于 displayText）
+  const localOptionsRef = useRef([]);
+
+  /** 格式化显示文案 - 根据 value 从 columns 计算 */
+  const displayText = useMemo(() => {
+    if (!value?.length) return '';
+
+    // 从 columns 计算对应的 options
+    const options = findOptionsByValue(value, restProps.columns);
+    if (formatter) {
+      return formatter(value, options);
+    }
+    return options.map(opt => opt?.label).filter(Boolean).join(' / ');
+  }, [value, restProps.columns, formatter]);
+  const handleOpen = useMemoizedFn(() => {
+    // 打开时同步外部 value 到内部
+    // 如果 value 为空，使用 columns 的默认值（第一个选项）
+    const initialValue = value?.length ? value : getDefaultValues(restProps.columns);
+    setLocalValue(initialValue);
+    setVisible(true);
+  });
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
+  });
+  const handleChange = useMemoizedFn((v, options) => {
+    setLocalValue(v);
+    localOptionsRef.current = options;
+  });
+  const handleConfirm = useMemoizedFn(() => {
+    setVisible(false);
+    setValue(localValue);
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      displayText: displayText,
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      onPress: handleOpen,
+      children: children
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Modal, {
+        visible: visible,
+        position: "bottom",
+        safeAreaInsetBottom: true,
+        contentHeight: '50%',
+        children: /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          gap: 16,
+          style: {
+            flex: 1,
+            padding: 16
+          },
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            title: title,
+            onClose: handleClose
+          }), /*#__PURE__*/_jsx(PickerView, {
+            ...restProps,
+            value: localValue,
+            onChange: handleChange
+          }), /*#__PURE__*/_jsx(Button, {
+            text: confirmText,
+            size: "large",
+            onPress: handleConfirm
+          })]
+        })
+      })
+    })]
+  });
+};

package/dist/module/components/base/{picker → picker-backup}/picker-trigger.js

@@ -4,8 +4,8 @@ import React, { cloneElement, isValidElement } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { useTheme } from "../../../native-provider/index.js";
 import { Flex } from "../flex/index.js";
+import { usePickerFieldStyles } from "../picker/style/index.js";
 import { Text } from "../text/index.js";
-import { usePickerFieldStyles } from "./style/index.js";
 
 /** Picker 基础触发器 Props */
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
@@ -38,7 +38,7 @@ export const PickerTrigger = ({
       children: /*#__PURE__*/_jsx(Flex, {
         align: "center",
         gap: theme.spacing.sm,
-        style: [styles.content, disabled && styles.disabled, style],
+        style: [disabled && styles.disabled, style],
         children: /*#__PURE__*/React.isValidElement(displayText) ? displayText : /*#__PURE__*/_jsx(Text, {
           size: 14,
           color: displayText ? theme.palette.fontGray1 : theme.palette.fontGray3,

package/dist/module/components/base/picker-backup/style/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const usePickerFieldStyles = createThemedStyles(theme => ({
+  container: {
+    flex: 1,
+    alignSelf: 'stretch',
+    backgroundColor: theme.palette.white,
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  disabled: {
+    backgroundColor: theme.palette.blueGray2
+  }
+}));

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

@@ -0,0 +1,48 @@
+"use strict";
+
+/** 默认字段名 */
+const DEFAULT_FIELD_NAMES = {
+  label: 'label',
+  value: 'value',
+  children: 'children'
+};
+
+/**
+ * 将自定义字段名的数据标准化为内部使用的 { label, value, children } 格式
+ * 如果 fieldNames 与默认值相同，则直接返回原始数据（零开销）
+ */
+export 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);
+  });
+};

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

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

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

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

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { DeviceEventEmitter, View } from 'react-native';
 import { NATIVE_UI_PORTAL_ADD_EVENT, NATIVE_UI_PORTAL_REMOVE_EVENT } from "../../../shared/constants/index.js";
 import { PortalContext, registerHost, unregisterHost } from "./portal-context.js";
@@ -9,7 +9,8 @@ import { usePortalHostStyles } from "./style/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PortalHost = ({
   children,
-  name
+  name,
+  style
 }) => {
   const portalHostStyles = usePortalHostStyles();
   const managerRef = useRef(null);
@@ -104,7 +105,7 @@ export const PortalHost = ({
   return /*#__PURE__*/_jsxs(PortalContext.Provider, {
     value: contextValue,
     children: [/*#__PURE__*/_jsx(View, {
-      style: portalHostStyles.container,
+      style: [portalHostStyles.container, style],
       collapsable: false,
       children: children
     }), /*#__PURE__*/_jsx(PortalManager, {

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

@@ -0,0 +1,151 @@
+"use strict";
+
+import { useMemoizedFn } from '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
+ * });
+ */
+export const useSelectActions = params => {
+  const {
+    value,
+    mode,
+    disabled,
+    maxCount,
+    autoClearSearchValue,
+    setValue,
+    clearSearch,
+    closePopup,
+    isOptionSelected,
+    onActive,
+    onSelect,
+    onDeselect,
+    onClear,
+    onCreateOption
+  } = params;
+
+  // 处理选项点击
+  const handleOptionPress = 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 = 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 = useMemoizedFn(e => {
+    e.stopPropagation();
+    setValue(mode ? [] : undefined);
+    clearSearch();
+    onClear?.();
+  });
+
+  // 处理创建新选项(tags 模式)
+  const handleCreateOption = 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 - 选项类型
+ */

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

@@ -0,0 +1,162 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import { useMemo } from 'react';
+/**
+ * 判断选项是否为分组
+ *
+ * @template ValueType - 选项值的类型
+ */
+export const isSelectOptionGroup = item => {
+  return 'options' in item;
+};
+export 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'
+ * });
+ */
+export const useSelectOptions = params => {
+  const {
+    options,
+    value,
+    mode,
+    searchValue,
+    filterOption,
+    filterSort,
+    optionFilterProp
+  } = params;
+
+  // 扁平化选项列表
+  const flattenedOptions = 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 = useMemo(() => {
+    return flattenedOptions.filter(item => !item.isGroup);
+  }, [flattenedOptions]);
+
+  // 过滤选项
+  const filteredOptions = 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 = 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 = 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
+  };
+};