@seakoi/native-ui 1.2.0 → 1.3.0

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

@@ -0,0 +1,302 @@
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { isUndefined, omitBy } from 'lodash-es';
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { useSelectActions } from './hooks/use-select-actions';
+import { useSelectOptions } from './hooks/use-select-options';
+import { useSelector } from './hooks/use-selector';
+import { SelectMultipleContent } from './select-multiple-content';
+import { SelectPopup } from './select-popup';
+import { SelectSingleContent } from './select-single-content';
+import { SelectSuffix } from './select-suffix';
+import { useSelectStyles } from './style';
+import type { SelectMode, SelectOption, SelectProps } from './types';
+
+/**
+ * Select 选择器组件
+ *
+ * 支持单选、多选和标签模式，提供搜索、清除、自定义渲染等功能。
+ *
+ * @template ValueType - 选项值的类型
+ * @template M - 选择模式，可以是 'multiple' | 'tags' | undefined
+ *
+ * @param props - 组件属性
+ *
+ * @example
+ * // 单选模式
+ * <Select
+ *   options={[{ label: '选项1', value: 1 }]}
+ *   placeholder="请选择"
+ *   onChange={value => console.log(value)}
+ * />
+ *
+ * @example
+ * // 多选模式
+ * <Select
+ *   mode="multiple"
+ *   options={options}
+ *   value={[1, 2]}
+ *   onChange={values => console.log(values)}
+ * />
+ *
+ * @example
+ * // 标签模式（支持创建新选项）
+ * <Select
+ *   mode="tags"
+ *   options={options}
+ *   showSearch
+ *   onChange={values => console.log(values)}
+ * />
+ */
+export const Select = <
+  ValueType = unknown,
+  OptionType extends SelectOption<ValueType> = SelectOption<ValueType>,
+  M extends SelectMode | undefined = undefined,
+  RealValueType extends M extends SelectMode
+    ? ValueType[]
+    : ValueType = M extends SelectMode ? ValueType[] : ValueType,
+>(
+  props: SelectProps<ValueType, OptionType, M, RealValueType>,
+) => {
+  const {
+    allowClear = false,
+    disabled = false,
+    labelRender,
+    mode,
+    options = [],
+    placeholder = '请选择',
+    prefix,
+    showSearch = false,
+    suffixIcon,
+    popupMatchWidth: popupMatchSelectWidth = true,
+    popupPlacement: placement,
+    popupLoading: loading = false,
+    popupNotFoundContent: notFoundContent = '暂无数据',
+    popupSelectedIcon: menuItemSelectedIcon,
+    popupOptionRender: optionRender,
+    popupRender,
+    onPopupScroll,
+    popupMaxHeight,
+    tagMaxCount: maxCount,
+    maxTagCount,
+    maxTagPlaceholder,
+    maxTagTextLength,
+    tagRender,
+    autoClearSearchValue = true,
+    filterOption = true,
+    filterSort,
+    optionFilterProp = 'label',
+    onSearch,
+    prefixStyle,
+    contentStyle,
+    placeholderStyle,
+    inputStyle,
+    tagItemStyle,
+    tagContentStyle,
+    tagRemoveStyle,
+    tagContainerStyle,
+    suffixStyle,
+    clearStyle,
+    popupRootStyle,
+    popupListStyle,
+    popupListItemStyle,
+    popupGroupLabelStyle,
+    onActive,
+    onClear,
+    onDeselect,
+    onSelect,
+    onCreateOption,
+    style,
+  } = props;
+
+  const styles = useSelectStyles();
+
+  const [value, setValue] = useControllableValue<RealValueType>(props);
+
+  // 使用选择器 Hook
+  const {
+    selectorRef,
+    open,
+    selectorLayout,
+    isFocused,
+    handleSelectorPress,
+    handleSelectorLayout,
+    closePopup,
+  } = useSelector(props);
+
+  const [searchValue, setSearchValue] = useControllableValue<string>(
+    omitBy({ value: props.searchValue, onChange: props.onSearch }, isUndefined),
+  );
+
+  // 处理搜索输入
+  const handleSearchChange = useMemoizedFn((text: string) => {
+    setSearchValue(text);
+    onSearch?.(text);
+  });
+
+  // 清空搜索值
+  const clearSearch = useMemoizedFn(() => setSearchValue(''));
+
+  // 使用选项处理 Hook
+  const { filteredOptions, selectedOptions, isOptionSelected } = useSelectOptions<
+    ValueType,
+    OptionType,
+    M
+  >({
+    options,
+    value,
+    mode,
+    searchValue,
+    autoClearSearchValue,
+    filterOption,
+    filterSort,
+    optionFilterProp,
+    onSearch,
+  });
+
+  /**
+   * 关闭下拉框并清空搜索值
+   */
+  const handleClosePopup = useMemoizedFn(() => {
+    closePopup();
+    clearSearch();
+  });
+
+  // 使用选项操作 Hook
+  const { handleOptionPress, handleTagClose, handleClear, handleCreateOption } =
+    useSelectActions<ValueType, RealValueType>({
+      value,
+      mode,
+      disabled,
+      maxCount,
+      autoClearSearchValue,
+      setValue,
+      clearSearch,
+      closePopup: handleClosePopup,
+      isOptionSelected,
+      onActive,
+      onSelect,
+      onDeselect,
+      onClear,
+      onCreateOption,
+    });
+
+  /**
+   * 渲染内容区域
+   * @returns 内容区域的渲染结果
+   */
+  const renderContent = () => {
+    if (mode) {
+      // 多选模式
+      return (
+        <SelectMultipleContent<ValueType>
+          open={open}
+          selectedOptions={selectedOptions}
+          disabled={disabled}
+          maxTagCount={maxTagCount}
+          maxTagTextLength={maxTagTextLength}
+          maxTagPlaceholder={maxTagPlaceholder}
+          tagRender={tagRender}
+          labelRender={labelRender}
+          placeholderStyle={placeholderStyle}
+          inputStyle={inputStyle}
+          tagItemStyle={tagItemStyle}
+          tagContentStyle={tagContentStyle}
+          tagRemoveStyle={tagRemoveStyle}
+          tagContainerStyle={tagContainerStyle}
+          onTagClose={handleTagClose}
+          showSearchInput={showSearchInput}
+          searchValue={searchValue}
+          onSearchChange={handleSearchChange}
+          placeholder={placeholder}
+          mode={mode}
+          onCreateOption={handleCreateOption}
+        />
+      );
+    } else {
+      // 单选模式
+      return (
+        <SelectSingleContent<ValueType>
+          selectedOption={selectedOptions[0]}
+          labelRender={labelRender}
+          placeholderStyle={placeholderStyle}
+          inputStyle={inputStyle}
+          showSearchInput={showSearchInput}
+          searchValue={searchValue}
+          onSearchChange={handleSearchChange}
+          placeholder={placeholder}
+          mode={mode}
+          onCreateOption={handleCreateOption}
+        />
+      );
+    }
+  };
+
+  /** 是否显示清除按钮 */
+  const showClearButton =
+    allowClear && !disabled && (mode ? selectedOptions.length > 0 : !!value);
+
+  /** 是否显示搜索输入框 */
+  const showSearchInput = showSearch && open;
+
+  const onCreateOptionByCurSearch = useMemoizedFn(() =>
+    handleCreateOption(searchValue),
+  );
+  return (
+    <View style={[styles.root, style]}>
+      <Pressable
+        ref={selectorRef}
+        style={[
+          styles.selector,
+          disabled && styles.selectorDisabled,
+          isFocused && styles.selectorFocused,
+        ]}
+        onPress={handleSelectorPress}
+        onLayout={handleSelectorLayout}
+        disabled={disabled}
+      >
+        {prefix && <View style={[styles.prefix, prefixStyle]}>{prefix}</View>}
+
+        <View style={[styles.content, contentStyle]}>{renderContent()}</View>
+
+        <SelectSuffix
+          showClearButton={showClearButton}
+          allowClear={allowClear}
+          open={open}
+          suffixIcon={suffixIcon}
+          suffixStyle={suffixStyle}
+          clearStyle={clearStyle}
+          onClear={handleClear}
+        />
+      </Pressable>
+
+      {selectorLayout && (
+        <SelectPopup<ValueType>
+          open={open}
+          selectorLayout={selectorLayout}
+          matchWidth={popupMatchSelectWidth}
+          placement={placement}
+          popupMaxHeight={popupMaxHeight}
+          loading={loading}
+          filteredOptions={filteredOptions}
+          notFoundContent={notFoundContent}
+          searchValue={searchValue}
+          mode={mode}
+          popupRootStyle={popupRootStyle}
+          popupListStyle={popupListStyle}
+          popupListItemStyle={popupListItemStyle}
+          popupGroupLabelStyle={popupGroupLabelStyle}
+          selectedIcon={menuItemSelectedIcon}
+          optionRender={optionRender}
+          popupRender={popupRender}
+          isOptionSelected={isOptionSelected}
+          onClose={handleClosePopup}
+          onOptionPress={handleOptionPress}
+          onCreateOption={onCreateOptionByCurSearch}
+          onPopupScroll={onPopupScroll}
+        />
+      )}
+    </View>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { useSelectMultipleContentStyles } from './select-multiple-content-styles';
+export { useSelectPopupStyles } from './select-popup-styles';
+export { useSelectSingleContentStyles } from './select-single-content-styles';
+export { useSelectStyles } from './select-styles';
+export { useSelectSuffixStyles } from './select-suffix-styles';

package/src/components/base/select/style/select-multiple-content-styles.ts

@@ -0,0 +1,41 @@
+import { createThemedStyles } from '#native-provider';
+
+/**
+ * SelectMultipleContent 组件样式
+ */
+export const useSelectMultipleContentStyles = createThemedStyles(theme => ({
+  input: {
+    flex: 1,
+    minWidth: 0,
+    margin: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    maxWidth: '100%',
+  },
+  inputInner: {
+    ...theme.fonts.regular.size14,
+    color: theme.palette.fontGray1,
+    padding: 0,
+    margin: 0,
+    minWidth: 0,
+    width: 'auto',
+  },
+  tagItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing.xs,
+    paddingVertical: theme.spacing.xxs,
+    borderRadius: theme.roundness.sm,
+    gap: theme.spacing.xxs,
+    flexShrink: 0,
+    height: '100%',
+    backgroundColor: theme.palette.gray1,
+  },
+  tagRemoveButton: {
+    marginLeft: theme.spacing.xxs,
+    padding: theme.spacing.xxs,
+  },
+  overflowSuffix: {
+    flexShrink: 1,
+  },
+}));

package/src/components/base/select/style/select-popup-styles.ts

@@ -0,0 +1,62 @@
+import { createThemedStyles } from '#native-provider';
+
+/**
+ * SelectPopup 组件样式
+ */
+export const useSelectPopupStyles = createThemedStyles(theme => ({
+  popupRoot: {
+    position: 'absolute',
+    backgroundColor: theme.palette.white,
+    borderRadius: theme.roundness.md,
+    borderWidth: 1,
+    borderColor: theme.palette.gray4,
+    zIndex: 1000,
+  },
+  popupList: {},
+  popupListItem: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  popupListItemSelected: {
+    backgroundColor: theme.palette.brand1,
+  },
+  popupListItemDisabled: {
+    opacity: 0.5,
+  },
+  popupListItemText: {
+    flex: 1,
+  },
+  popupGroupLabel: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.xs,
+    backgroundColor: theme.palette.gray1,
+  },
+  popupCreateOption: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray3,
+  },
+  loading: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.lg,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  empty: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.lg,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+}));

package/src/components/base/select/style/select-single-content-styles.ts

@@ -0,0 +1,23 @@
+import { createThemedStyles } from '#native-provider';
+
+/**
+ * SelectSingleContent 组件样式
+ */
+export const useSelectSingleContentStyles = createThemedStyles(theme => ({
+  input: {
+    flex: 1,
+    minWidth: 0,
+    margin: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    maxWidth: '100%',
+  },
+  inputInner: {
+    ...theme.fonts.regular.size14,
+    color: theme.palette.fontGray1,
+    padding: 0,
+    margin: 0,
+    minWidth: 0,
+    width: 'auto',
+  },
+}));

package/src/components/base/select/style/select-styles.ts

@@ -0,0 +1,41 @@
+import { createThemedStyles } from '#native-provider';
+
+/**
+ * Select 主组件样式
+ */
+export const useSelectStyles = createThemedStyles(theme => ({
+  root: {
+    position: 'relative',
+    minHeight: 40,
+    width: '100%',
+  },
+  selector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 40,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.xs,
+    backgroundColor: theme.palette.white,
+    borderWidth: 1,
+    borderColor: theme.palette.gray4,
+    borderRadius: theme.roundness.md,
+  },
+  selectorDisabled: {
+    backgroundColor: theme.palette.gray2,
+    borderColor: theme.palette.gray3,
+  },
+  selectorFocused: {
+    borderColor: theme.palette.brand7,
+    borderWidth: 1,
+  },
+  prefix: {
+    marginRight: theme.spacing.xs,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing.xs,
+  },
+}));

package/src/components/base/select/style/select-suffix-styles.ts

@@ -0,0 +1,16 @@
+import { createThemedStyles } from '#native-provider';
+
+/**
+ * SelectSuffix 组件样式
+ */
+export const useSelectSuffixStyles = createThemedStyles(theme => ({
+  suffix: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: theme.spacing.xs,
+    gap: theme.spacing.xs,
+  },
+  clearButton: {
+    padding: theme.spacing.xxs,
+  },
+}));