@seakoi/native-ui 1.1.3 → 1.3.0

package/src/components/base/picker-view/picker-view-column.tsx

@@ -65,6 +65,26 @@ export const PickerViewColumn: React.FC<PickerViewColumnProps> = memo(
       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/src/components/base/picker-view/picker-view.tsx

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

package/src/components/base/picker-view/utils/picker.ts

@@ -4,7 +4,6 @@ import type {
   PickerOptionCascade,
   PickerOptionType,
   PickerValue,
-  PickerViewProps,
 } from '../types';
 
 export const getVisibleItemCount = (n: number) => {
@@ -161,7 +160,7 @@ export const findDefaultValue = (value: PickerValue, options: PickerOption[]) =>
  */
 export const findOptionsByValue = (
   value: PickerValue[],
-  columns: PickerViewProps['columns'],
+  columns: Column[],
 ): PickerOption[] => {
   if (!value?.length) return [];
 
@@ -192,6 +191,7 @@ export const findOptionsByValue = (
     default: {
       const options = columns as PickerOption[];
       const option = options.find(item => item.value === value[0]);
+
       return option ? [option] : [];
     }
   }
@@ -200,9 +200,7 @@ export const findOptionsByValue = (
 /**
  * 获取 columns 的默认值（每列的第一个选项）
  */
-export const getDefaultValues = (
-  columns: PickerViewProps['columns'],
-): PickerValue[] => {
+export const getDefaultValues = (columns: Column[]): PickerValue[] => {
   const dataType = getDataType(columns);
 
   switch (dataType) {

package/src/components/base/portal/portal-host.tsx

@@ -1,4 +1,10 @@
-import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { DeviceEventEmitter, View } from 'react-native';
 
 import {
@@ -20,7 +26,11 @@ import {
   type PortalManagerRef,
 } from './types';
 
-export const PortalHost: React.FC<PortalHostProps> = ({ children, name }) => {
+export const PortalHost: React.FC<PortalHostProps> = ({
+  children,
+  name,
+  style,
+}) => {
   const portalHostStyles = usePortalHostStyles();
 
   const managerRef = useRef<PortalManagerRef | null>(null);
@@ -119,7 +129,7 @@ export const PortalHost: React.FC<PortalHostProps> = ({ children, name }) => {
   return (
     <PortalContext.Provider value={contextValue}>
       {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
-      <View style={portalHostStyles.container} collapsable={false}>
+      <View style={[portalHostStyles.container, style]} collapsable={false}>
         {children}
       </View>
       <PortalManager ref={managerRef} />

package/src/components/base/portal/types.ts

@@ -1,4 +1,5 @@
 import { type PropsWithChildren, type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { type PortalMethods } from './portal-context';
 
@@ -8,6 +9,7 @@ export const DEFAULT_PORTAL_HOST = 'default';
 export interface PortalHostProps extends PropsWithChildren {
   // PortalHost 的名称，用于指定 Portal 传送目标
   name?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
 export interface PortalProps {

package/src/components/base/select/hooks/use-select-actions.ts

@@ -0,0 +1,263 @@
+import { useMemoizedFn } from 'ahooks';
+import type { GestureResponderEvent } from 'react-native';
+
+import type { SelectMode, SelectOption } from '../types';
+
+/**
+ * 选项操作 Hook 参数
+ *
+ * @template ValueType - 选项值的类型
+ */
+export interface UseSelectActionsParams<
+  ValueType = unknown,
+  RealValueType = unknown,
+> {
+  /**
+   * 当前值
+   */
+  value: RealValueType;
+  /**
+   * 选择模式
+   */
+  mode?: SelectMode;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 最大选择数量
+   */
+  maxCount?: number;
+  /**
+   * 自动清空搜索
+   */
+  autoClearSearchValue?: boolean;
+  /**
+   * 设置值
+   */
+  setValue: (value: RealValueType) => void;
+  /**
+   * 清空搜索
+   */
+  clearSearch: () => void;
+  /**
+   * 关闭下拉框
+   */
+  closePopup: () => void;
+  /**
+   * 判断选项是否被选中
+   */
+  isOptionSelected: (option: SelectOption<ValueType>) => boolean;
+  /**
+   * 激活回调
+   */
+  onActive?: (value: ValueType) => void;
+  /**
+   * 选择回调
+   */
+  onSelect?: (value: ValueType, option: SelectOption<ValueType>) => void;
+  /**
+   * 取消选择回调
+   */
+  onDeselect?: (value: ValueType) => void;
+  /**
+   * 清除回调
+   */
+  onClear?: () => void;
+  /**
+   * 创建选项回调
+   */
+  onCreateOption?: (
+    inputValue: string,
+  ) => SelectOption<ValueType> | void | undefined;
+}
+
+/**
+ * 选项操作 Hook 返回值
+ */
+export interface UseSelectActionsResult<ValueType = unknown> {
+  /**
+   * 处理选项点击
+   */
+  handleOptionPress: (option: SelectOption<ValueType>) => void;
+  /**
+   * 处理标签移除
+   */
+  handleTagClose: (option: SelectOption<ValueType>) => void;
+  /**
+   * 处理清除
+   */
+  handleClear: (e: GestureResponderEvent) => void;
+  /**
+   * 处理创建新选项
+   */
+  handleCreateOption: (searchValue: string) => void;
+}
+
+/**
+ * 选项操作 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 = <ValueType = unknown, RealValueType = unknown>(
+  params: UseSelectActionsParams<ValueType, RealValueType>,
+): UseSelectActionsResult<ValueType> => {
+  const {
+    value,
+    mode,
+    disabled,
+    maxCount,
+    autoClearSearchValue,
+    setValue,
+    clearSearch,
+    closePopup,
+    isOptionSelected,
+    onActive,
+    onSelect,
+    onDeselect,
+    onClear,
+    onCreateOption,
+  } = params;
+
+  // 处理选项点击
+  const handleOptionPress = useMemoizedFn((option: SelectOption<ValueType>) => {
+    if (option.disabled) return;
+
+    onActive?.(option.value);
+
+    // 多选
+    if (mode) {
+      const values: ValueType[] = Array.isArray(value) ? value : [];
+      const isSelected = isOptionSelected(option);
+
+      if (isSelected) {
+        // 取消选中
+        const newValues = values.filter((v: ValueType) => {
+          return v !== option.value;
+        });
+        setValue(newValues as RealValueType);
+        onDeselect?.(option.value);
+      } else {
+        // 选中
+        if (maxCount && values.length >= maxCount) {
+          return;
+        }
+        const newValues = [...values, option.value];
+        setValue(newValues as RealValueType);
+        onSelect?.(option.value, option);
+      }
+
+      // 清空搜索
+      if (autoClearSearchValue) {
+        clearSearch();
+      }
+    } else {
+      // 单选模式
+      setValue(option.value as unknown as RealValueType);
+      onSelect?.(option.value, option);
+      closePopup();
+      clearSearch();
+    }
+  });
+
+  // 处理标签移除
+  const handleTagClose = useMemoizedFn((option: SelectOption<ValueType>) => {
+    if (disabled) return;
+
+    const values = Array.isArray(value) ? value : [];
+    const newValues = values.filter((v: ValueType) => {
+      return v !== option.value;
+    });
+    setValue(newValues as RealValueType);
+    onDeselect?.(option.value);
+  });
+
+  // 处理清除
+  const handleClear = useMemoizedFn((e: GestureResponderEvent) => {
+    e.stopPropagation();
+    setValue((mode ? [] : undefined) as RealValueType);
+    clearSearch();
+    onClear?.();
+  });
+
+  // 处理创建新选项(tags 模式)
+  const handleCreateOption = useMemoizedFn((searchValue: string) => {
+    if (mode !== 'tags' || !searchValue.trim()) return;
+
+    const newOption = onCreateOption?.(searchValue.trim());
+    if (newOption) {
+      handleOptionPress(newOption);
+    } else {
+      // 默认创建逻辑
+      const defaultOption: SelectOption<ValueType> = {
+        label: searchValue.trim(),
+        value: searchValue.trim() as ValueType,
+      };
+      handleOptionPress(defaultOption);
+    }
+    clearSearch();
+  });
+
+  return {
+    handleOptionPress,
+    handleTagClose,
+    handleClear,
+    handleCreateOption,
+  };
+};
+
+/**
+ * 搜索配置
+ *
+ * @template OptionType - 选项类型
+ */
+export interface SelectSearchConfig<
+  OptionType extends SelectOption = SelectOption,
+> {
+  /**
+   * 是否在选中项后清空搜索框(仅 multiple/tags 模式)
+   * @default true
+   */
+  autoClearSearchValue?: boolean;
+  /** 是否根据输入项进行筛选 */
+  filterOption?: boolean | ((inputValue: string, option: OptionType) => boolean);
+  /** 搜索时对筛选结果排序 */
+  filterSort?: (
+    optionA: OptionType,
+    optionB: OptionType,
+    info: { searchValue: string },
+  ) => number;
+  /** 搜索时过滤对应的 option 属性 */
+  optionFilterProp?: string | string[];
+  /** 控制搜索文本 */
+  searchValue?: string;
+  /** 文本框值变化时回调 */
+  onSearch?: (value: string) => void;
+}

package/src/components/base/select/hooks/use-select-options.ts

@@ -0,0 +1,250 @@
+import { useMemoizedFn } from 'ahooks';
+import { useMemo } from 'react';
+
+import type { SelectSearchConfig } from '#components/base/select/hooks/use-select-actions';
+
+import type { SelectMode, SelectOption, SelectOptionGroup } from '../types';
+
+export interface SelectFlattenedGroupOption
+  extends Pick<SelectOptionGroup, 'label' | 'key'> {
+  /** 是否为分组标题 */
+  isGroup?: boolean;
+  /** 分组 key */
+  groupKey?: string;
+}
+
+/**
+ * 判断选项是否为分组
+ *
+ * @template ValueType - 选项值的类型
+ */
+export const isSelectOptionGroup = <
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+>(
+  item: SelectOption<ValueType> | SelectOptionGroup<OptionType>,
+): item is SelectOptionGroup<OptionType> => {
+  return 'options' in item;
+};
+
+export function isSelectFlattenedGroupOption<OptionType extends SelectOption>(
+  v: SelectFlattenedGroupOption | OptionType,
+): v is SelectFlattenedGroupOption {
+  return !!v.isGroup;
+}
+
+function isOptionType<OptionType extends SelectOption>(
+  v: SelectFlattenedGroupOption | OptionType,
+): v is OptionType {
+  return !v.isGroup;
+}
+
+/**
+ * Select 选项处理 Hook 参数
+ *
+ * @template ValueType - 选项值的类型
+ * @template OptionType - 选项类型
+ * @template M - 选择模式
+ * @template RealValueType - 实际值类型
+ */
+export interface UseSelectOptionsParams<
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+  M extends SelectMode | undefined = undefined,
+  RealValueType = unknown,
+> extends SelectSearchConfig<OptionType> {
+  /**
+   * 选项列表
+   */
+  options: (OptionType | SelectOptionGroup<OptionType>)[];
+  /**
+   * 当前选中的值
+   */
+  value: RealValueType;
+  /**
+   * 选择模式
+   */
+  mode?: M;
+}
+
+/**
+ * Select 选项处理 Hook 返回值
+ *
+ * @template ValueType - 选项值的类型
+ * @template OptionType - 选项类型
+ */
+export interface UseSelectOptionsResult<
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+> {
+  /**
+   * 扁平化后的选项列表(包含分组标题)
+   */
+  flattenedOptions: (OptionType | SelectFlattenedGroupOption)[];
+  /**
+   * 所有可选项(不包含分组标题)
+   */
+  allOptions: SelectOption<ValueType>[];
+  /**
+   * 过滤后的选项列表
+   */
+  filteredOptions: (OptionType | SelectFlattenedGroupOption)[];
+  /**
+   * 当前选中的选项
+   */
+  selectedOptions: OptionType[];
+  /**
+   * 判断选项是否被选中
+   */
+  isOptionSelected: (option: OptionType) => boolean;
+}
+
+/**
+ * Select 选项处理 Hook
+ *
+ * 封装 Select 组件中与选项相关的逻辑,包括:
+ * - 扁平化选项列表
+ * - 过滤选项
+ * - 获取选中的选项
+ * - 判断选项是否被选中
+ *
+ * @example
+ * const {
+ *   allOptions,
+ *   filteredOptions,
+ *   selectedOptions,
+ *   isOptionSelected
+ * } = useSelectOptions({
+ *   options,
+ *   value,
+ *   mode,
+ *   searchValue,
+ *   filterOption: true,
+ *   optionFilterProp: 'label'
+ * });
+ */
+export const useSelectOptions = <
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+  M extends SelectMode | undefined = undefined,
+  RealValueType = unknown,
+>(
+  params: UseSelectOptionsParams<ValueType, OptionType, M, RealValueType>,
+): UseSelectOptionsResult<ValueType> => {
+  const {
+    options,
+    value,
+    mode,
+    searchValue,
+    filterOption,
+    filterSort,
+    optionFilterProp,
+  } = params;
+
+  // 扁平化选项列表
+  const flattenedOptions = useMemo<
+    (OptionType | SelectFlattenedGroupOption)[]
+  >(() => {
+    const result: (OptionType | SelectFlattenedGroupOption)[] = [];
+    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<SelectOption<ValueType>[]>(() => {
+    return flattenedOptions.filter(
+      item => !item.isGroup,
+    ) as SelectOption<ValueType>[];
+  }, [flattenedOptions]);
+
+  // 过滤选项
+  const filteredOptions = useMemo<
+    (OptionType | SelectFlattenedGroupOption)[]
+  >(() => {
+    if (!searchValue || !filterOption) {
+      return flattenedOptions;
+    }
+
+    const filterFn =
+      typeof filterOption === 'function'
+        ? filterOption
+        : (input: string, option: SelectOption<ValueType>) => {
+            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<SelectOption<ValueType>[]>(() => {
+    if (!value) return [];
+
+    if (mode) {
+      const values = Array.isArray(value) ? value : [];
+      return values
+        .map((v: ValueType) => {
+          return allOptions.find(opt => opt.value === v);
+        })
+        .filter(Boolean) as SelectOption<ValueType>[];
+    } else {
+      const option = allOptions.find(opt => opt.value === value);
+      return option ? [option] : [];
+    }
+  }, [value, allOptions, mode]);
+
+  // 判断选项是否被选中
+  const isOptionSelected = useMemoizedFn((option: SelectOption<ValueType>) => {
+    if (!value) return false;
+
+    if (mode) {
+      const values = Array.isArray(value) ? value : [];
+      return values.some((v: ValueType) => v === option.value);
+    } else {
+      return value === option.value;
+    }
+  });
+
+  return {
+    flattenedOptions,
+    allOptions,
+    filteredOptions,
+    selectedOptions,
+    isOptionSelected,
+  };
+};