@seakoi/native-ui 1.2.0 → 1.3.0

package/dist/commonjs/components/base/select/select-multiple-content.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectMultipleContent = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const IS_NATIVE = _reactNative.Platform.OS !== 'web';
+
+/**
+ * Select 多选内容组件的 Props
+ */
+
+const INPUT_INIT_WIDTH = 1;
+/**
+ * Select 多选内容组件
+ *
+ * 负责渲染多选模式下的标签列表，包括标签的显示、关闭按钮等功能。
+ *
+ * @template ValueType - 选项值的类型
+ */
+const SelectMultipleContent = ({
+  selectedOptions,
+  disabled = false,
+  maxTagCount,
+  maxTagTextLength,
+  maxTagPlaceholder,
+  tagRender,
+  labelRender,
+  placeholderStyle,
+  inputStyle,
+  tagItemStyle,
+  tagContentStyle,
+  tagRemoveStyle,
+  tagContainerStyle,
+  onTagClose,
+  showSearchInput = false,
+  searchValue = '',
+  onSearchChange,
+  placeholder = '',
+  mode,
+  onCreateOption,
+  open
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useSelectMultipleContentStyles)();
+  const [inputWidth, setInputWidth] = (0, _react.useState)(INPUT_INIT_WIDTH);
+  (0, _react.useEffect)(() => {
+    if (open) {
+      return;
+    }
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setInputWidth(INPUT_INIT_WIDTH);
+  }, [open]);
+
+  /**
+   * 渲染标签项的回调函数
+   *
+   * @param option - 选项数据
+   * @returns 渲染的标签组件
+   */
+  const renderItem = (0, _react.useCallback)(option => {
+    // 提取条件变量
+    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;
+      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 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: labelContent
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.tagItem, tagItemStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        color: theme.palette.brand7,
+        size: 12,
+        style: [tagContentStyle],
+        children: tagContent
+      }), showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: [styles.tagRemoveButton, tagRemoveStyle],
+        onPress: () => onTagClose(option),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.CloseOutlined, {
+          size: 10,
+          color: theme.palette.fontGray3
+        })
+      })]
+    });
+  }, [styles.tagItem, styles.tagRemoveButton, tagItemStyle, tagContentStyle, tagRemoveStyle, theme.palette.brand7, theme.palette.fontGray3, tagRender, disabled, onTagClose, labelRender, maxTagTextLength]);
+
+  /**
+   * 渲染剩余标签的回调函数
+   *
+   * @param omittedItems - 被省略的标签项数组
+   * @returns 渲染的剩余标签组件
+   */
+  const renderRest = (0, _react.useCallback)(omittedItems => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.tagItem, tagItemStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      color: theme.palette.fontGray2,
+      size: 12,
+      style: tagContentStyle,
+      children: typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedItems) : maxTagPlaceholder || `+${omittedItems.length}`
+    })
+  }), [styles.tagItem, theme.palette.fontGray2, tagItemStyle, tagContentStyle, maxTagPlaceholder]);
+
+  /**
+   * 后缀内容的记忆化组件
+   */
+  const suffix = (0, _react.useMemo)(() => {
+    if (showSearchInput) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.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.scrollWidth);
+        },
+        autoFocus: true
+      });
+    }
+    if (selectedOptions.length === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        size: 14,
+        color: theme.palette.fontGray3,
+        style: placeholderStyle,
+        children: placeholder
+      });
+    }
+    return null;
+  }, [showSearchInput, styles.input, styles.inputInner, inputStyle, placeholderStyle, inputWidth, searchValue, onSearchChange, selectedOptions.length, placeholder, theme.palette.fontGray3, mode, onCreateOption, IS_NATIVE]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Overflow, {
+    data: selectedOptions,
+    itemKey: "value",
+    maxCount: maxTagCount,
+    renderItem: renderItem,
+    renderRest: renderRest,
+    itemsWidthTolerance: 2,
+    suffix: suffix,
+    style: tagContainerStyle,
+    suffixStyle: styles.overflowSuffix
+  });
+};
+exports.SelectMultipleContent = SelectMultipleContent;

package/dist/commonjs/components/base/select/select-popup.js

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectPopup = exports.DEFAULT_POPUP_MAX_HEIGHT = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _useSelectOptions = require("./hooks/use-select-options.js");
+var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** 下拉菜单默认最大高度 */
+const DEFAULT_POPUP_MAX_HEIGHT = exports.DEFAULT_POPUP_MAX_HEIGHT = 256;
+
+/**
+ * SelectPopup 组件的属性
+ *
+ * @template ValueType - 选项值的类型
+ */
+
+const SelectPopup = ({
+  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
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useSelectPopupStyles)();
+
+  /**
+   * 计算下拉框位置信息
+   *
+   * @returns 包含位置信息和计算状态的对象
+   */
+  const positionInfo = (0, _react.useMemo)(() => {
+    // 如果未打开或没有选择器布局信息，返回未计算状态
+    if (!open || !selectorLayout) {
+      return {
+        placement: 'bottom',
+        isPositionCalculated: false
+      };
+    }
+    const screenHeight = _reactNative.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',
+        isPositionCalculated: true
+      };
+    }
+
+    // 3. 下方空间不够,尝试上方
+    if (spaceAbove >= popupMaxHeight + spacing) {
+      return {
+        placement: 'top',
+        isPositionCalculated: true
+      };
+    }
+
+    // 4. 上方也不够,直接显示在下方
+    return {
+      placement: 'bottom',
+      isPositionCalculated: true
+    };
+  }, [open, selectorLayout, theme.spacing.xxs, forcedPlacement, popupMaxHeight]);
+  const {
+    placement,
+    isPositionCalculated
+  } = positionInfo;
+
+  /**
+   * 下拉框容器样式
+   */
+  const popupStyle = (0, _react.useMemo)(() => {
+    const style = {
+      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 = _reactNative.Dimensions.get('window').height - selectorLayout.y + theme.spacing.xxs;
+    }
+    return style;
+  }, [selectorLayout, matchWidth, placement, theme.spacing.xxs, popupMaxHeight]);
+
+  /**
+   * 列表样式
+   */
+  const listStyle = (0, _react.useMemo)(() => ({
+    maxHeight: popupMaxHeight
+  }), [popupMaxHeight]);
+
+  // 渲染下拉选项
+  const renderOption = ({
+    item,
+    index
+  }) => {
+    if ((0, _useSelectOptions.isSelectFlattenedGroupOption)(item)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        color: theme.palette.fontGray3,
+        size: 12,
+        font: "semiBold",
+        style: [styles.popupGroupLabel, popupGroupLabelStyle],
+        children: item.label
+      });
+    }
+    const option = item;
+    const isSelected = isOptionSelected(option);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [styles.popupListItem, isSelected && styles.popupListItemSelected, option.disabled && styles.popupListItemDisabled, popupListItemStyle, option.style],
+      onPress: () => onOptionPress(option),
+      disabled: option.disabled,
+      children: optionRender ? optionRender(option, {
+        index,
+        selected: isSelected
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          color: theme.palette.fontGray1,
+          size: 14,
+          style: styles.popupListItemText,
+          children: option.label
+        }), isSelected && (selectedIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.CheckOutlined, {
+          color: theme.palette.brand7,
+          size: 18
+        }))]
+      })
+    });
+  };
+
+  // 渲染下拉框内容
+  const renderPopupContent = () => {
+    if (loading) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.loading,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          color: theme.palette.brand7
+        })
+      });
+    }
+    if (filteredOptions.length === 0) {
+      if (mode === 'tags' && searchValue.trim()) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: styles.popupCreateOption,
+          onPress: onCreateOption,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Text, {
+            color: theme.palette.brand7,
+            size: 14,
+            children: ["+ \u521B\u5EFA \"", searchValue.trim(), "\""]
+          })
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.empty,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          color: theme.palette.fontGray3,
+          size: 14,
+          children: notFoundContent
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: filteredOptions,
+      renderItem: renderOption,
+      keyExtractor: (item, index) => (0, _useSelectOptions.isSelectFlattenedGroupOption)(item) ? `group-${item.key}` : `option-${item.value}-${index}`,
+      style: [styles.popupList, listStyle, popupListStyle],
+      onScroll: onPopupScroll,
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      maxToRenderPerBatch: 10,
+      windowSize: 5,
+      initialNumToRender: 10
+    });
+  };
+
+  // 使用 useMemoizedFn 包装回调函数
+  const handleBackdropPress = (0, _ahooks.useMemoizedFn)(e => {
+    if (e.target === e.currentTarget) {
+      onClose();
+      return;
+    }
+    e.stopPropagation();
+  });
+  if (!open || !isPositionCalculated) return null;
+  const popupContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.popupRoot, popupStyle, popupRootStyle],
+    children: renderPopupContent()
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Portal, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: styles.backdrop,
+      onPress: handleBackdropPress,
+      children: popupRender ? popupRender(popupContent) : popupContent
+    })
+  });
+};
+exports.SelectPopup = SelectPopup;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectSingleContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Select 单选内容组件的 Props
+ *
+ * @template ValueType - 选项值的类型
+ */
+
+/**
+ * Select 单选内容组件
+ *
+ * 负责渲染单选模式下的选中值显示，支持占位符、自定义渲染和搜索输入。
+ *
+ * @template ValueType - 选项值的类型
+ * @param props - 组件属性
+ *
+ * @example
+ * <SelectSingleContent
+ *   selectedOption={{ label: '选项1', value: 1 }}
+ *   placeholder="请选择"
+ *   styles={styles}
+ * />
+ */
+const SelectSingleContent = ({
+  selectedOption,
+  labelRender,
+  showSearchInput = false,
+  searchValue = '',
+  onSearchChange,
+  placeholder = '',
+  mode,
+  onCreateOption,
+  placeholderStyle,
+  inputStyle
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useSelectSingleContentStyles)();
+
+  /**
+   * 渲染占位符文本
+   *
+   * @param text - 占位符文本内容
+   * @returns 占位符文本组件
+   */
+  const renderPlaceholder = (0, _react.useCallback)(text => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+    size: 14,
+    color: theme.palette.fontGray3,
+    style: placeholderStyle,
+    children: text
+  }), [theme.palette.fontGray3, placeholderStyle]);
+
+  /**
+   * 渲染选中内容
+   *
+   * @param content - 选中的内容
+   * @returns 选中内容组件
+   */
+  const renderSelectedContent = (0, _react.useCallback)(content => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+    size: 14,
+    color: theme.palette.fontGray1,
+    children: content
+  }), [theme.palette.fontGray1]);
+  if (showSearchInput) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.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);
+};
+exports.SelectSingleContent = SelectSingleContent;

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectSuffix = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _index2 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * SelectSuffix 组件的属性
+ */
+
+/**
+ * Select 后缀区域组件
+ *
+ * 包含清除按钮和下拉箭头图标
+ */
+const SelectSuffix = ({
+  showClearButton,
+  allowClear,
+  open,
+  suffixIcon,
+  suffixStyle,
+  clearStyle,
+  onClear
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _index2.useSelectSuffixStyles)();
+  const renderClearIcon = () => {
+    if (typeof allowClear === 'object' && allowClear.clearIcon) {
+      return allowClear.clearIcon;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.CloseOutlined, {
+      size: 12,
+      color: theme.palette.fontGray3
+    });
+  };
+  const renderSuffixIcon = () => {
+    if (typeof suffixIcon === 'function') {
+      return suffixIcon(open);
+    }
+    if (suffixIcon) {
+      return suffixIcon;
+    }
+    return open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.UpOutlined, {
+      size: 12,
+      color: theme.palette.fontGray3
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.DownOutlined, {
+      size: 12,
+      color: theme.palette.fontGray3
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.suffix, suffixStyle],
+    children: [showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [styles.clearButton, clearStyle],
+      onPress: onClear,
+      children: renderClearIcon()
+    }), renderSuffixIcon()]
+  });
+};
+exports.SelectSuffix = SelectSuffix;