@seakoi/native-ui 1.2.0 → 1.3.0

package/dist/module/components/base/select/select-single-content.js

@@ -0,0 +1,94 @@
+"use strict";
+
+import React, { useCallback } from 'react';
+import { Input, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useSelectSingleContentStyles } from "./style/index.js";
+
+/**
+ * Select 单选内容组件的 Props
+ *
+ * @template ValueType - 选项值的类型
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Select 单选内容组件
+ *
+ * 负责渲染单选模式下的选中值显示，支持占位符、自定义渲染和搜索输入。
+ *
+ * @template ValueType - 选项值的类型
+ * @param props - 组件属性
+ *
+ * @example
+ * <SelectSingleContent
+ *   selectedOption={{ label: '选项1', value: 1 }}
+ *   placeholder="请选择"
+ *   styles={styles}
+ * />
+ */
+export const SelectSingleContent = ({
+  selectedOption,
+  labelRender,
+  showSearchInput = false,
+  searchValue = '',
+  onSearchChange,
+  placeholder = '',
+  mode,
+  onCreateOption,
+  placeholderStyle,
+  inputStyle
+}) => {
+  const theme = useTheme();
+  const styles = useSelectSingleContentStyles();
+
+  /**
+   * 渲染占位符文本
+   *
+   * @param text - 占位符文本内容
+   * @returns 占位符文本组件
+   */
+  const renderPlaceholder = useCallback(text => /*#__PURE__*/_jsx(Text, {
+    size: 14,
+    color: theme.palette.fontGray3,
+    style: placeholderStyle,
+    children: text
+  }), [theme.palette.fontGray3, placeholderStyle]);
+
+  /**
+   * 渲染选中内容
+   *
+   * @param content - 选中的内容
+   * @returns 选中内容组件
+   */
+  const renderSelectedContent = useCallback(content => /*#__PURE__*/_jsx(Text, {
+    size: 14,
+    color: theme.palette.fontGray1,
+    children: content
+  }), [theme.palette.fontGray1]);
+  if (showSearchInput) {
+    return /*#__PURE__*/_jsx(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: true
+    });
+  }
+  if (!selectedOption) {
+    return renderPlaceholder(placeholder);
+  }
+  if (labelRender) {
+    return renderSelectedContent(labelRender(selectedOption, {
+      index: 0
+    }));
+  }
+  return renderSelectedContent(selectedOption.label);
+};

package/dist/module/components/base/select/select-suffix.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import { CloseOutlined, DownOutlined, UpOutlined } from '@seakoi/svg-icons';
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { useSelectSuffixStyles } from "./style/index.js";
+
+/**
+ * SelectSuffix 组件的属性
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Select 后缀区域组件
+ *
+ * 包含清除按钮和下拉箭头图标
+ */
+export const SelectSuffix = ({
+  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 /*#__PURE__*/_jsx(CloseOutlined, {
+      size: 12,
+      color: theme.palette.fontGray3
+    });
+  };
+  const renderSuffixIcon = () => {
+    if (typeof suffixIcon === 'function') {
+      return suffixIcon(open);
+    }
+    if (suffixIcon) {
+      return suffixIcon;
+    }
+    return open ? /*#__PURE__*/_jsx(UpOutlined, {
+      size: 12,
+      color: theme.palette.fontGray3
+    }) : /*#__PURE__*/_jsx(DownOutlined, {
+      size: 12,
+      color: theme.palette.fontGray3
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.suffix, suffixStyle],
+    children: [showClearButton && /*#__PURE__*/_jsx(Pressable, {
+      style: [styles.clearButton, clearStyle],
+      onPress: onClear,
+      children: renderClearIcon()
+    }), renderSuffixIcon()]
+  });
+};

package/dist/module/components/base/select/select.js

@@ -0,0 +1,279 @@
+"use strict";
+
+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.js";
+import { useSelectOptions } from "./hooks/use-select-options.js";
+import { useSelector } from "./hooks/use-selector.js";
+import { SelectMultipleContent } from "./select-multiple-content.js";
+import { SelectPopup } from "./select-popup.js";
+import { SelectSingleContent } from "./select-single-content.js";
+import { SelectSuffix } from "./select-suffix.js";
+import { useSelectStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 = props => {
+  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(props);
+
+  // 使用选择器 Hook
+  const {
+    selectorRef,
+    open,
+    selectorLayout,
+    isFocused,
+    handleSelectorPress,
+    handleSelectorLayout,
+    closePopup
+  } = useSelector(props);
+  const [searchValue, setSearchValue] = useControllableValue(omitBy({
+    value: props.searchValue,
+    onChange: props.onSearch
+  }, isUndefined));
+
+  // 处理搜索输入
+  const handleSearchChange = useMemoizedFn(text => {
+    setSearchValue(text);
+    onSearch?.(text);
+  });
+
+  // 清空搜索值
+  const clearSearch = useMemoizedFn(() => setSearchValue(''));
+
+  // 使用选项处理 Hook
+  const {
+    filteredOptions,
+    selectedOptions,
+    isOptionSelected
+  } = useSelectOptions({
+    options,
+    value,
+    mode,
+    searchValue,
+    autoClearSearchValue,
+    filterOption,
+    filterSort,
+    optionFilterProp,
+    onSearch
+  });
+
+  /**
+   * 关闭下拉框并清空搜索值
+   */
+  const handleClosePopup = useMemoizedFn(() => {
+    closePopup();
+    clearSearch();
+  });
+
+  // 使用选项操作 Hook
+  const {
+    handleOptionPress,
+    handleTagClose,
+    handleClear,
+    handleCreateOption
+  } = useSelectActions({
+    value,
+    mode,
+    disabled,
+    maxCount,
+    autoClearSearchValue,
+    setValue,
+    clearSearch,
+    closePopup: handleClosePopup,
+    isOptionSelected,
+    onActive,
+    onSelect,
+    onDeselect,
+    onClear,
+    onCreateOption
+  });
+
+  /**
+   * 渲染内容区域
+   * @returns 内容区域的渲染结果
+   */
+  const renderContent = () => {
+    if (mode) {
+      // 多选模式
+      return /*#__PURE__*/_jsx(SelectMultipleContent, {
+        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 /*#__PURE__*/_jsx(SelectSingleContent, {
+        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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, style],
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      ref: selectorRef,
+      style: [styles.selector, disabled && styles.selectorDisabled, isFocused && styles.selectorFocused],
+      onPress: handleSelectorPress,
+      onLayout: handleSelectorLayout,
+      disabled: disabled,
+      children: [prefix && /*#__PURE__*/_jsx(View, {
+        style: [styles.prefix, prefixStyle],
+        children: prefix
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.content, contentStyle],
+        children: renderContent()
+      }), /*#__PURE__*/_jsx(SelectSuffix, {
+        showClearButton: showClearButton,
+        allowClear: allowClear,
+        open: open,
+        suffixIcon: suffixIcon,
+        suffixStyle: suffixStyle,
+        clearStyle: clearStyle,
+        onClear: handleClear
+      })]
+    }), selectorLayout && /*#__PURE__*/_jsx(SelectPopup, {
+      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
+    })]
+  });
+};

package/dist/module/components/base/select/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export { useSelectMultipleContentStyles } from "./select-multiple-content-styles.js";
+export { useSelectPopupStyles } from "./select-popup-styles.js";
+export { useSelectSingleContentStyles } from "./select-single-content-styles.js";
+export { useSelectStyles } from "./select-styles.js";
+export { useSelectSuffixStyles } from "./select-suffix-styles.js";

package/dist/module/components/base/select/style/select-multiple-content-styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+
+/**
+ * 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/dist/module/components/base/select/style/select-popup-styles.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+
+/**
+ * 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/dist/module/components/base/select/style/select-single-content-styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+
+/**
+ * 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/dist/module/components/base/select/style/select-styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+
+/**
+ * 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/dist/module/components/base/select/style/select-suffix-styles.js

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

package/dist/module/components/base/select/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/dist/module/components/base/tabs/style/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useTabsStyles = createThemedStyles(theme => {
+  return {
+    container: {
+      width: '100%'
+    },
+    tabItem: {
+      paddingVertical: 16,
+      paddingHorizontal: 10
+    },
+    labelText: {
+      color: theme.palette.fontGray2
+    },
+    labelTab: {
+      paddingHorizontal: 16,
+      paddingVertical: 4,
+      borderWidth: 1,
+      borderColor: theme.palette.blueGray1,
+      backgroundColor: theme.palette.blueGray1,
+      borderRadius: theme.roundness.md,
+      gap: 4
+    },
+    labelTabActive: {
+      backgroundColor: theme.palette.brand1,
+      borderColor: theme.palette.brand7
+    },
+    labelTextActive: {
+      color: theme.palette.brand7
+    }
+  };
+});