@seakoi/native-ui 1.2.0 → 1.3.0

package/src/components/base/picker/picker-field.tsx

@@ -1,4 +1,5 @@
 import { useLatest } from 'ahooks';
+import { isNil } from 'lodash-es';
 import React, { useContext, useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
 
@@ -17,20 +18,22 @@ export interface PickerFieldProps<Value = Any> {
 }
 export function PickerField<Value>(props: PickerFieldProps<Value>) {
   const theme = useTheme();
+  const styles = usePickerFieldStyles();
   const context = useContext(PickerContext);
 
   const renderValueRef = useLatest(props.renderValue);
 
-  const styles = usePickerFieldStyles();
-
-  // const hasValue = !!context?.value || typeof context?.value === 'number';
+  const value = context?.value;
+  const hasControllableValue =
+    !isNil(value) && (!Array.isArray(value) || value.length > 0);
 
-  const displayValue = useMemo(
-    () => renderValueRef.current?.(context?.value),
-    [context?.value, renderValueRef],
-  );
+  const displayValue = useMemo(() => {
+    return typeof renderValueRef.current !== 'function'
+      ? value
+      : renderValueRef.current?.(value);
+  }, [value, renderValueRef]);
 
-  const textColor = displayValue
+  const textColor = hasControllableValue
     ? theme.palette.fontGray1
     : theme.palette.fontGray3;
 
@@ -40,11 +43,14 @@ export function PickerField<Value>(props: PickerFieldProps<Value>) {
       onPress={context?.toggleVisible}
       disabled={!!context?.disabled}
     >
-      {safetyRenderChildren(displayValue ?? props.placeholder, displayText => (
-        <Text size={14} color={textColor}>
-          {displayText}
-        </Text>
-      ))}
+      {safetyRenderChildren(
+        hasControllableValue ? displayValue : props.placeholder,
+        displayText => (
+          <Text size={14} color={textColor}>
+            {displayText}
+          </Text>
+        ),
+      )}
     </TouchableOpacity>
   );
 }

package/src/components/base/picker/picker.tsx

@@ -7,11 +7,20 @@ import type { PickerContentProps } from './picker-content';
 import { PickerContext } from './picker-context';
 import type { PickerFieldProps } from './picker-field';
 
+/**
+ * Picker 组件的基础属性接口
+ * @template T 选择器值的类型
+ */
 export interface PickerProps<T = Any> {
+  /** 受控模式下的当前值 */
   value?: T;
+  /** 非受控模式下的默认值 */
   defaultValue?: T;
+  /** 触发 onChange 的事件名称,默认为 'onChange' */
   trigger?: string;
+  /** 是否禁用选择器 */
   disabled?: boolean;
+  /** 值变化时的回调函数 */
   onChange?: (value: T) => void;
 }
 
@@ -42,7 +51,7 @@ export const Picker: React.FC<PropsWithChildren<PickerProps>> = props => {
       toggleVisible,
       onChange: _onChange,
     }),
-    [value, visible, disabled, toggleVisible, setDisabled, setValue],
+    [value, visible, disabled, toggleVisible, _onChange],
   );
 
   return (

package/src/components/base/picker/style/index.ts

@@ -12,3 +12,7 @@ export const usePickerFieldStyles = createThemedStyles(theme => ({
     backgroundColor: theme.palette.blueGray2,
   },
 }));
+
+export const usePickerContentStyles = createThemedStyles(() => ({
+  container: { flex: 1, padding: 16 },
+}));

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,
+  };
+};