@seakoi/native-ui 1.2.0 → 1.3.0

package/src/components/base/select/select-popup.tsx

@@ -0,0 +1,384 @@
+import { CheckOutlined } from '@seakoi/svg-icons';
+import { useMemoizedFn } from 'ahooks';
+import React, { useMemo } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  type GestureResponderEvent,
+  type LayoutRectangle,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Pressable,
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Portal, Text } from '#components/base';
+import {
+  isSelectFlattenedGroupOption,
+  type SelectFlattenedGroupOption,
+  type UseSelectOptionsResult,
+} from '#components/base/select/hooks/use-select-options';
+import { useTheme } from '#native-provider';
+
+import { useSelectPopupStyles } from './style';
+import type { SelectOption } from './types';
+
+/** 下拉菜单默认最大高度 */
+export const DEFAULT_POPUP_MAX_HEIGHT = 256 as const;
+
+/**
+ * SelectPopup 组件的属性
+ *
+ * @template ValueType - 选项值的类型
+ */
+export interface SelectPopupProps<
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+> {
+  /**
+   * 是否展开
+   */
+  open: boolean;
+  /**
+   * 选择器布局信息
+   */
+  selectorLayout: LayoutRectangle;
+  /**
+   * 下拉菜单和选择器同宽
+   */
+  matchWidth?: boolean | number;
+  /**
+   * 下拉菜单位置,不指定时自动计算
+   */
+  placement?: 'top' | 'bottom';
+  /**
+   * 加载中状态
+   */
+  loading?: boolean;
+  /**
+   * 下拉列表为空时显示的内容
+   */
+  notFoundContent?: React.ReactNode;
+  /**
+   * 自定义选中项图标
+   */
+  selectedIcon?: React.ReactNode;
+  /**
+   * 自定义渲染下拉选项
+   */
+  optionRender?: (
+    option: OptionType,
+    info: { index: number; selected: boolean },
+  ) => React.ReactNode;
+  /**
+   * 下拉菜单最大高度
+   * @default {@link DEFAULT_POPUP_MAX_HEIGHT}
+   */
+  popupMaxHeight?: number;
+  /**
+   * 过滤后的选项列表
+   */
+  filteredOptions: UseSelectOptionsResult<ValueType, OptionType>['filteredOptions'];
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+  /**
+   * 选择模式
+   */
+  mode?: 'multiple' | 'tags';
+  /**
+   * 自定义样式
+   */
+  popupRootStyle?: StyleProp<ViewStyle>;
+  /**
+   * 弹出菜单列表样式
+   */
+  popupListStyle?: StyleProp<ViewStyle>;
+  /**
+   * 弹出菜单条目样式
+   */
+  popupListItemStyle?: StyleProp<ViewStyle>;
+  /**
+   * 分组标签样式
+   */
+  popupGroupLabelStyle?: StyleProp<TextStyle>;
+  /**
+   * 自定义下拉框内容
+   */
+  popupRender?: (originNode: React.ReactNode) => React.ReactNode;
+  /**
+   * 判断选项是否被选中
+   */
+  isOptionSelected: (option: OptionType) => boolean;
+  /**
+   * 关闭回调
+   */
+  onClose: () => void;
+  /**
+   * 选项点击回调
+   */
+  onOptionPress: (option: OptionType) => void;
+  /**
+   * 创建选项回调
+   */
+  onCreateOption: () => void;
+  /**
+   * 下拉列表滚动时回调
+   */
+  onPopupScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+}
+
+export const SelectPopup = <
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+>({
+  open,
+  selectorLayout,
+  matchWidth,
+  placement: forcedPlacement,
+  popupMaxHeight = DEFAULT_POPUP_MAX_HEIGHT,
+  loading,
+  filteredOptions,
+  notFoundContent,
+  searchValue,
+  mode,
+  popupRootStyle,
+  popupListStyle,
+  popupListItemStyle,
+  popupGroupLabelStyle,
+  selectedIcon,
+  optionRender,
+  popupRender,
+  isOptionSelected,
+  onClose,
+  onOptionPress,
+  onCreateOption,
+  onPopupScroll,
+}: SelectPopupProps<ValueType, OptionType>) => {
+  const theme = useTheme();
+  const styles = useSelectPopupStyles();
+
+  /**
+   * 计算下拉框位置信息
+   *
+   * @returns 包含位置信息和计算状态的对象
+   */
+  const positionInfo = useMemo(() => {
+    // 如果未打开或没有选择器布局信息，返回未计算状态
+    if (!open || !selectorLayout) {
+      return {
+        placement: 'bottom' as const,
+        isPositionCalculated: false,
+      };
+    }
+
+    const screenHeight = Dimensions.get('window').height;
+    const spaceBelow = screenHeight - (selectorLayout.y + selectorLayout.height);
+    const spaceAbove = selectorLayout.y;
+    const spacing = theme.spacing.xxs;
+
+    // 1. 如果指定了 placement,强制使用指定的位置
+    if (forcedPlacement) {
+      return {
+        placement: forcedPlacement,
+        isPositionCalculated: true,
+      };
+    }
+
+    // 2. 没有指定 placement,尝试在下方
+    if (spaceBelow >= popupMaxHeight + spacing) {
+      return {
+        placement: 'bottom' as const,
+        isPositionCalculated: true,
+      };
+    }
+
+    // 3. 下方空间不够,尝试上方
+    if (spaceAbove >= popupMaxHeight + spacing) {
+      return {
+        placement: 'top' as const,
+        isPositionCalculated: true,
+      };
+    }
+
+    // 4. 上方也不够,直接显示在下方
+    return {
+      placement: 'bottom' as const,
+      isPositionCalculated: true,
+    };
+  }, [open, selectorLayout, theme.spacing.xxs, forcedPlacement, popupMaxHeight]);
+
+  const { placement, isPositionCalculated } = positionInfo;
+
+  /**
+   * 下拉框容器样式
+   */
+  const popupStyle = useMemo<ViewStyle>(() => {
+    const style: ViewStyle = {
+      left: selectorLayout.x,
+      width:
+        matchWidth === true
+          ? selectorLayout.width
+          : typeof matchWidth === 'number'
+            ? matchWidth
+            : undefined,
+      maxHeight: popupMaxHeight,
+    };
+
+    if (placement === 'bottom') {
+      style.top = selectorLayout.y + selectorLayout.height + theme.spacing.xxs;
+    } else {
+      style.bottom =
+        Dimensions.get('window').height - selectorLayout.y + theme.spacing.xxs;
+    }
+
+    return style;
+  }, [selectorLayout, matchWidth, placement, theme.spacing.xxs, popupMaxHeight]);
+
+  /**
+   * 列表样式
+   */
+  const listStyle = useMemo<ViewStyle>(
+    () => ({
+      maxHeight: popupMaxHeight,
+    }),
+    [popupMaxHeight],
+  );
+
+  // 渲染下拉选项
+  const renderOption = ({
+    item,
+    index,
+  }: {
+    item: OptionType | SelectFlattenedGroupOption;
+    index: number;
+  }) => {
+    if (isSelectFlattenedGroupOption(item)) {
+      return (
+        <Text
+          color={theme.palette.fontGray3}
+          size={12}
+          font="semiBold"
+          style={[styles.popupGroupLabel, popupGroupLabelStyle]}
+        >
+          {item.label}
+        </Text>
+      );
+    }
+
+    const option = item;
+    const isSelected = isOptionSelected(option);
+
+    return (
+      <Pressable
+        style={[
+          styles.popupListItem,
+          isSelected && styles.popupListItemSelected,
+          option.disabled && styles.popupListItemDisabled,
+          popupListItemStyle,
+          option.style,
+        ]}
+        onPress={() => onOptionPress(option)}
+        disabled={option.disabled}
+      >
+        {optionRender ? (
+          optionRender(option, { index, selected: isSelected })
+        ) : (
+          <>
+            <Text
+              color={theme.palette.fontGray1}
+              size={14}
+              style={styles.popupListItemText}
+            >
+              {option.label}
+            </Text>
+            {isSelected &&
+              (selectedIcon || (
+                <CheckOutlined color={theme.palette.brand7} size={18} />
+              ))}
+          </>
+        )}
+      </Pressable>
+    );
+  };
+
+  // 渲染下拉框内容
+  const renderPopupContent = () => {
+    if (loading) {
+      return (
+        <View style={styles.loading}>
+          <ActivityIndicator color={theme.palette.brand7} />
+        </View>
+      );
+    }
+
+    if (filteredOptions.length === 0) {
+      if (mode === 'tags' && searchValue.trim()) {
+        return (
+          <Pressable style={styles.popupCreateOption} onPress={onCreateOption}>
+            <Text color={theme.palette.brand7} size={14}>
+              + 创建 "{searchValue.trim()}"
+            </Text>
+          </Pressable>
+        );
+      }
+
+      return (
+        <View style={styles.empty}>
+          <Text color={theme.palette.fontGray3} size={14}>
+            {notFoundContent}
+          </Text>
+        </View>
+      );
+    }
+
+    return (
+      <FlatList
+        data={filteredOptions}
+        renderItem={renderOption}
+        keyExtractor={(item, index) =>
+          isSelectFlattenedGroupOption(item)
+            ? `group-${item.key}`
+            : `option-${item.value}-${index}`
+        }
+        style={[styles.popupList, listStyle, popupListStyle]}
+        onScroll={onPopupScroll}
+        showsVerticalScrollIndicator
+        removeClippedSubviews
+        maxToRenderPerBatch={10}
+        windowSize={5}
+        initialNumToRender={10}
+      />
+    );
+  };
+
+  // 使用 useMemoizedFn 包装回调函数
+  const handleBackdropPress = useMemoizedFn((e: GestureResponderEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+      return;
+    }
+    e.stopPropagation();
+  });
+
+  if (!open || !isPositionCalculated) return null;
+
+  const popupContent = (
+    <View style={[styles.popupRoot, popupStyle, popupRootStyle]}>
+      {renderPopupContent()}
+    </View>
+  );
+
+  return (
+    <Portal>
+      <Pressable style={styles.backdrop} onPress={handleBackdropPress}>
+        {popupRender ? popupRender(popupContent) : popupContent}
+      </Pressable>
+    </Portal>
+  );
+};

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

@@ -0,0 +1,127 @@
+import React, { useCallback } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+
+import { Input, type SelectProps, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { useSelectSingleContentStyles } from './style';
+import type { SelectMode, SelectOption } from './types';
+
+/**
+ * Select 单选内容组件的 Props
+ *
+ * @template ValueType - 选项值的类型
+ */
+export interface SelectSingleContentProps<ValueType> {
+  /** 选中的选项 */
+  selectedOption?: SelectOption<ValueType>;
+  /** 自定义标签渲染函数 */
+  labelRender?: SelectProps<ValueType>['labelRender'];
+  /** 是否显示搜索输入框 */
+  showSearchInput?: boolean;
+  /** 当前搜索值 */
+  searchValue?: string;
+  /** 搜索值变化回调函数 */
+  onSearchChange?: (value: string) => void;
+  /** 占位符文本 */
+  placeholder?: string;
+  /** 选择模式 */
+  mode?: SelectMode;
+  /** 创建新选项的回调函数 */
+  onCreateOption?: (value: string) => void;
+  /** 占位符样式 */
+  placeholderStyle?: StyleProp<TextStyle>;
+  /** 输入框样式 */
+  inputStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * Select 单选内容组件
+ *
+ * 负责渲染单选模式下的选中值显示，支持占位符、自定义渲染和搜索输入。
+ *
+ * @template ValueType - 选项值的类型
+ * @param props - 组件属性
+ *
+ * @example
+ * <SelectSingleContent
+ *   selectedOption={{ label: '选项1', value: 1 }}
+ *   placeholder="请选择"
+ *   styles={styles}
+ * />
+ */
+export const SelectSingleContent = <ValueType = unknown,>({
+  selectedOption,
+  labelRender,
+  showSearchInput = false,
+  searchValue = '',
+  onSearchChange,
+  placeholder = '',
+  mode,
+  onCreateOption,
+  placeholderStyle,
+  inputStyle,
+}: SelectSingleContentProps<ValueType>) => {
+  const theme = useTheme();
+  const styles = useSelectSingleContentStyles();
+
+  /**
+   * 渲染占位符文本
+   *
+   * @param text - 占位符文本内容
+   * @returns 占位符文本组件
+   */
+  const renderPlaceholder = useCallback(
+    (text: string) => (
+      <Text size={14} color={theme.palette.fontGray3} style={placeholderStyle}>
+        {text}
+      </Text>
+    ),
+    [theme.palette.fontGray3, placeholderStyle],
+  );
+
+  /**
+   * 渲染选中内容
+   *
+   * @param content - 选中的内容
+   * @returns 选中内容组件
+   */
+  const renderSelectedContent = useCallback(
+    (content: React.ReactNode) => (
+      <Text size={14} color={theme.palette.fontGray1}>
+        {content}
+      </Text>
+    ),
+    [theme.palette.fontGray1],
+  );
+
+  if (showSearchInput) {
+    return (
+      <Input
+        variant="borderless"
+        style={[styles.input, inputStyle]}
+        inputStyle={styles.inputInner}
+        value={searchValue}
+        onChangeText={onSearchChange}
+        placeholder={!selectedOption ? placeholder : ''}
+        placeholderTextColor={theme.palette.fontGray3}
+        onSubmitEditing={() => {
+          if (mode === 'tags' && searchValue.trim() && onCreateOption) {
+            onCreateOption(searchValue);
+          }
+        }}
+        autoFocus
+      />
+    );
+  }
+
+  if (!selectedOption) {
+    return renderPlaceholder(placeholder);
+  }
+
+  if (labelRender) {
+    return renderSelectedContent(labelRender(selectedOption, { index: 0 }));
+  }
+
+  return renderSelectedContent(selectedOption.label);
+};

package/src/components/base/select/select-suffix.tsx

@@ -0,0 +1,100 @@
+import { CloseOutlined, DownOutlined, UpOutlined } from '@seakoi/svg-icons';
+import React from 'react';
+import {
+  type GestureResponderEvent,
+  Pressable,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '#native-provider';
+
+import { useSelectSuffixStyles } from './style';
+import type { SelectProps } from './types';
+
+/**
+ * SelectSuffix 组件的属性
+ */
+export interface SelectSuffixProps {
+  /**
+   * 是否显示清除按钮
+   */
+  showClearButton: boolean;
+  /**
+   * 是否允许清除
+   */
+  allowClear?: SelectProps['allowClear'];
+  /**
+   * 是否打开下拉框
+   */
+  open: boolean;
+  /**
+   * 自定义后缀图标
+   */
+  suffixIcon?: SelectProps['suffixIcon'];
+  /**
+   * 后缀元素样式
+   */
+  suffixStyle?: StyleProp<ViewStyle>;
+  /**
+   * 清除按钮样式
+   */
+  clearStyle?: StyleProp<ViewStyle>;
+  /**
+   * 清除按钮点击回调
+   */
+  onClear: (e: GestureResponderEvent) => void;
+}
+
+/**
+ * Select 后缀区域组件
+ *
+ * 包含清除按钮和下拉箭头图标
+ */
+export const SelectSuffix: React.FC<SelectSuffixProps> = ({
+  showClearButton,
+  allowClear,
+  open,
+  suffixIcon,
+  suffixStyle,
+  clearStyle,
+  onClear,
+}) => {
+  const theme = useTheme();
+  const styles = useSelectSuffixStyles();
+
+  const renderClearIcon = () => {
+    if (typeof allowClear === 'object' && allowClear.clearIcon) {
+      return allowClear.clearIcon;
+    }
+    return <CloseOutlined size={12} color={theme.palette.fontGray3} />;
+  };
+
+  const renderSuffixIcon = () => {
+    if (typeof suffixIcon === 'function') {
+      return suffixIcon(open);
+    }
+
+    if (suffixIcon) {
+      return suffixIcon;
+    }
+
+    return open ? (
+      <UpOutlined size={12} color={theme.palette.fontGray3} />
+    ) : (
+      <DownOutlined size={12} color={theme.palette.fontGray3} />
+    );
+  };
+
+  return (
+    <View style={[styles.suffix, suffixStyle]}>
+      {showClearButton && (
+        <Pressable style={[styles.clearButton, clearStyle]} onPress={onClear}>
+          {renderClearIcon()}
+        </Pressable>
+      )}
+      {renderSuffixIcon()}
+    </View>
+  );
+};