@seakoi/native-ui 1.2.0 → 1.3.0

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

@@ -0,0 +1,155 @@
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { type RefObject, useRef, useState } from 'react';
+import { type LayoutRectangle, type View } from 'react-native';
+
+/**
+ * 选择器 Hook 参数
+ */
+export interface UseSelectorParams {
+  /**
+   * 默认打开状态
+   */
+  defaultOpen?: boolean;
+  /**
+   * 受控的打开状态
+   */
+  open?: boolean;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 打开状态变化回调
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * 选择器 Hook 返回值
+ */
+export interface UseSelectorResult {
+  /**
+   * 选择器 ref
+   */
+  selectorRef: RefObject<View | null>;
+  /**
+   * 是否打开
+   */
+  open: boolean;
+  /**
+   * 选择器布局信息
+   */
+  selectorLayout: LayoutRectangle | null;
+  /**
+   * 是否聚焦
+   */
+  isFocused: boolean;
+  /**
+   * 设置打开状态
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * 更新选择器位置
+   */
+  updateSelectorLayout: () => void;
+  /**
+   * 处理选择器点击
+   */
+  handleSelectorPress: () => void;
+  /**
+   * 处理选择器布局变化
+   */
+  handleSelectorLayout: () => void;
+  /**
+   * 关闭下拉框
+   */
+  closePopup: () => void;
+}
+
+/**
+ * 选择器 Hook
+ *
+ * 封装 Select 组件中与选择器相关的逻辑,包括:
+ * - 选择器 ref 管理
+ * - 打开/关闭状态管理
+ * - 选择器位置获取
+ * - 焦点状态管理
+ * - 选择器点击处理
+ *
+ * @example
+ * const {
+ *   selectorRef,
+ *   open,
+ *   selectorLayout,
+ *   isFocused,
+ *   handleSelectorPress,
+ *   handleSelectorLayout
+ * } = useSelector({
+ *   defaultOpen: false,
+ *   disabled: false,
+ *   onOpenChange
+ * });
+ */
+export const useSelector = (params: UseSelectorParams): UseSelectorResult => {
+  const selectorRef = useRef<View>(null);
+  const [open, setOpen] = useControllableValue(params, {
+    valuePropName: 'open',
+    defaultValuePropName: 'defaultOpen',
+    trigger: 'onOpenChange',
+  });
+  const [selectorLayout, setSelectorLayout] = useState<LayoutRectangle | null>(
+    null,
+  );
+  const [isFocused, setIsFocused] = useState(false);
+
+  // 更新选择器位置
+  const updateSelectorLayout = useMemoizedFn(() => {
+    if (!selectorRef.current?.measure) return;
+
+    selectorRef.current.measure((_x, _y, width, height, pageX, pageY) => {
+      setSelectorLayout({ x: pageX, y: pageY, width, height });
+    });
+  });
+
+  // 处理选择器点击
+  const handleSelectorPress = useMemoizedFn(() => {
+    if (params.disabled) return;
+
+    if (!open) {
+      // 打开下拉框时,先获取位置再打开
+      updateSelectorLayout();
+      setOpen(true);
+      setIsFocused(true);
+    } else {
+      // 关闭下拉框
+      setOpen(false);
+      setIsFocused(false);
+    }
+  });
+
+  // 处理选择器布局变化
+  const handleSelectorLayout = useMemoizedFn(() => {
+    // 当选择器布局变化时,如果下拉框是打开的,更新位置
+    if (open) {
+      updateSelectorLayout();
+    }
+  });
+
+  // 关闭下拉框
+  const closePopup = useMemoizedFn(() => {
+    setOpen(false);
+    setIsFocused(false);
+  });
+
+  return {
+    selectorRef,
+    open,
+    selectorLayout,
+    isFocused,
+    setOpen,
+    updateSelectorLayout,
+    handleSelectorPress,
+    handleSelectorLayout,
+    closePopup,
+  };
+};

package/src/components/base/select/index.ts

@@ -0,0 +1,2 @@
+export * from './select';
+export type * from './types';

package/src/components/base/select/select-multiple-content.tsx

@@ -0,0 +1,292 @@
+import { CloseOutlined } from '@seakoi/svg-icons';
+import React, {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Platform,
+  Pressable,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Input, Overflow, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useSelectMultipleContentStyles } from './style';
+import type { SelectMode, SelectOption, SelectProps } from './types';
+
+const IS_NATIVE = Platform.OS !== 'web';
+
+/**
+ * Select 多选内容组件的 Props
+ */
+export interface SelectMultipleContentProps<ValueType>
+  extends Pick<
+    SelectProps<ValueType>,
+    'maxTagCount' | 'maxTagPlaceholder' | 'maxTagTextLength' | 'tagRender'
+  > {
+  /** 选中的选项列表 */
+  selectedOptions: SelectOption<ValueType>[];
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 自定义标签渲染 */
+  labelRender?: SelectProps<ValueType>['labelRender'];
+  /** 占位符样式 */
+  placeholderStyle?: StyleProp<TextStyle>;
+  /** 输入框样式 */
+  inputStyle?: StyleProp<TextStyle>;
+  /** 标签项容器样式 */
+  tagItemStyle?: StyleProp<ViewStyle>;
+  /** 标签文本内容样式 */
+  tagContentStyle?: StyleProp<TextStyle>;
+  /** 标签删除按钮样式 */
+  tagRemoveStyle?: StyleProp<ViewStyle>;
+  /** 标签整体容器样式 */
+  tagContainerStyle?: StyleProp<ViewStyle>;
+  /** 标签关闭事件 */
+  onTagClose: (option: SelectOption<ValueType>) => void;
+  /** 是否显示搜索输入框 */
+  showSearchInput?: boolean;
+  /** 搜索值 */
+  searchValue?: string;
+  /** 搜索值变化回调 */
+  onSearchChange?: (value: string) => void;
+  /** 占位符文本 */
+  placeholder?: string;
+  /** 选择模式 */
+  mode?: SelectMode;
+  /** 创建选项回调 */
+  onCreateOption?: (value: string) => void;
+  /** 下拉框是否打开 */
+  open: boolean;
+}
+
+const INPUT_INIT_WIDTH = 1;
+/**
+ * Select 多选内容组件
+ *
+ * 负责渲染多选模式下的标签列表，包括标签的显示、关闭按钮等功能。
+ *
+ * @template ValueType - 选项值的类型
+ */
+export const SelectMultipleContent = <ValueType = unknown,>({
+  selectedOptions,
+  disabled = false,
+  maxTagCount,
+  maxTagTextLength,
+  maxTagPlaceholder,
+  tagRender,
+  labelRender,
+  placeholderStyle,
+  inputStyle,
+  tagItemStyle,
+  tagContentStyle,
+  tagRemoveStyle,
+  tagContainerStyle,
+  onTagClose,
+  showSearchInput = false,
+  searchValue = '',
+  onSearchChange,
+  placeholder = '',
+  mode,
+  onCreateOption,
+  open,
+}: SelectMultipleContentProps<ValueType>) => {
+  const theme = useTheme();
+  const styles = useSelectMultipleContentStyles();
+
+  const [inputWidth, setInputWidth] = useState(INPUT_INIT_WIDTH);
+
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setInputWidth(INPUT_INIT_WIDTH);
+  }, [open]);
+
+  /**
+   * 渲染标签项的回调函数
+   *
+   * @param option - 选项数据
+   * @returns 渲染的标签组件
+   */
+  const renderItem = useCallback(
+    (option: SelectOption<ValueType>) => {
+      // 提取条件变量
+      const isOptionDisabled = disabled || !!option.disabled;
+      const showCloseButton = !disabled && !option.disabled;
+
+      // 提取标签内容渲染逻辑
+      let tagContent;
+      if (tagRender) {
+        tagContent = tagRender(option, {
+          disabled: isOptionDisabled,
+          onClose: () => onTagClose(option),
+          closable: showCloseButton,
+        });
+      } else {
+        let labelContent: ReactNode;
+        if (labelRender) {
+          labelContent = labelRender(option, { index: 0 });
+        } else if (
+          typeof option.label === 'string' &&
+          maxTagTextLength &&
+          option.label.length > maxTagTextLength
+        ) {
+          labelContent = option.label.slice(0, maxTagTextLength) + '...';
+        } else {
+          labelContent = option.label;
+        }
+
+        tagContent = <>{labelContent}</>;
+      }
+
+      return (
+        <View style={[styles.tagItem, tagItemStyle]}>
+          <Text color={theme.palette.brand7} size={12} style={[tagContentStyle]}>
+            {tagContent}
+          </Text>
+          {showCloseButton && (
+            <Pressable
+              style={[styles.tagRemoveButton, tagRemoveStyle]}
+              onPress={() => onTagClose(option)}
+            >
+              <CloseOutlined size={10} color={theme.palette.fontGray3} />
+            </Pressable>
+          )}
+        </View>
+      );
+    },
+    [
+      styles.tagItem,
+      styles.tagRemoveButton,
+      tagItemStyle,
+      tagContentStyle,
+      tagRemoveStyle,
+      theme.palette.brand7,
+      theme.palette.fontGray3,
+      tagRender,
+      disabled,
+      onTagClose,
+      labelRender,
+      maxTagTextLength,
+    ],
+  );
+
+  /**
+   * 渲染剩余标签的回调函数
+   *
+   * @param omittedItems - 被省略的标签项数组
+   * @returns 渲染的剩余标签组件
+   */
+  const renderRest = useCallback(
+    (omittedItems: SelectOption<ValueType>[]) => (
+      <View style={[styles.tagItem, tagItemStyle]}>
+        <Text color={theme.palette.fontGray2} size={12} style={tagContentStyle}>
+          {typeof maxTagPlaceholder === 'function'
+            ? maxTagPlaceholder(omittedItems)
+            : maxTagPlaceholder || `+${omittedItems.length}`}
+        </Text>
+      </View>
+    ),
+    [
+      styles.tagItem,
+      theme.palette.fontGray2,
+      tagItemStyle,
+      tagContentStyle,
+      maxTagPlaceholder,
+    ],
+  );
+
+  /**
+   * 后缀内容的记忆化组件
+   */
+  const suffix = useMemo(() => {
+    if (showSearchInput) {
+      return (
+        <Input
+          variant="borderless"
+          style={[
+            styles.input,
+            inputStyle,
+            { width: selectedOptions.length === 0 ? '100%' : inputWidth },
+          ]}
+          inputStyle={styles.inputInner}
+          value={searchValue}
+          onChangeText={onSearchChange}
+          placeholder={selectedOptions.length === 0 ? placeholder : ''}
+          placeholderTextColor={theme.palette.fontGray3}
+          onSubmitEditing={() => {
+            if (mode === 'tags' && searchValue.trim() && onCreateOption) {
+              onCreateOption(searchValue);
+            }
+          }}
+          onContentSizeChange={
+            IS_NATIVE
+              ? e => {
+                  setInputWidth(e.nativeEvent.contentSize.width);
+                }
+              : undefined
+          }
+          onChange={
+            IS_NATIVE
+              ? undefined
+              : e => {
+                  setInputWidth(
+                    (e.nativeEvent.target as unknown as HTMLInputElement)
+                      .scrollWidth,
+                  );
+                }
+          }
+          autoFocus
+        />
+      );
+    }
+
+    if (selectedOptions.length === 0) {
+      return (
+        <Text size={14} color={theme.palette.fontGray3} style={placeholderStyle}>
+          {placeholder}
+        </Text>
+      );
+    }
+
+    return null;
+  }, [
+    showSearchInput,
+    styles.input,
+    styles.inputInner,
+    inputStyle,
+    placeholderStyle,
+    inputWidth,
+    searchValue,
+    onSearchChange,
+    selectedOptions.length,
+    placeholder,
+    theme.palette.fontGray3,
+    mode,
+    onCreateOption,
+    IS_NATIVE,
+  ]);
+
+  return (
+    <Overflow
+      data={selectedOptions}
+      itemKey="value"
+      maxCount={maxTagCount}
+      renderItem={renderItem}
+      renderRest={renderRest}
+      itemsWidthTolerance={2}
+      suffix={suffix}
+      style={tagContainerStyle}
+      suffixStyle={styles.overflowSuffix}
+    />
+  );
+};