@seakoi/native-ui 1.2.0 → 1.3.0

package/dist/module/components/base/overflow/responsive-overflow.js

@@ -0,0 +1,274 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import React, { useEffect, useRef, useState } from 'react';
+import { Text, View } from 'react-native';
+
+/**
+ * 测量数据 - 存储所有测量的宽度信息
+ */
+
+/**
+ * 计算结果 - 存储基于测量数据计算出的显示状态
+ */
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 响应式 Overflow 组件
+ * 只有在 props 变化时才重新测量，onLayout 不直接触发测量
+ */
+export const ResponsiveOverflow = ({
+  data,
+  renderItem,
+  renderRest,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  restStyle,
+  onVisibleCountChange,
+  itemsWidthTolerance = 0,
+  styles,
+  getKey
+}) => {
+  // 测量数据
+  const measurementDataRef = useRef({
+    container: 0,
+    items: new Map(),
+    prefix: 0,
+    suffix: 0,
+    rest: 0
+  });
+
+  // 计算结果
+  const calculationResultRef = useRef({
+    visibleCount: 0,
+    showRest: false
+  });
+
+  // 上一次的结果（用于测量期间的显示优化）
+  const previousResultRef = useRef({
+    visibleCount: 0,
+    showRest: false
+  });
+
+  // 测量完成标记
+  const measurementFlags = useRef({
+    container: false,
+    prefix: false,
+    suffix: false,
+    rest: false,
+    items: new Set()
+  });
+
+  // 状态管理
+  const [, forceUpdate] = useState({});
+  const [remeasureKey, setRemeasureKey] = useState(0);
+  const isComplete = useRef(false);
+  const triggerRerender = useMemoizedFn(() => forceUpdate({}));
+  /**
+   * 重置所有测量状态
+   */
+  const resetMeasurement = useMemoizedFn(() => {
+    if (!isComplete.current) {
+      return;
+    }
+    // 保存当前结果作为上一次的结果
+    previousResultRef.current = {
+      ...calculationResultRef.current
+    };
+    measurementDataRef.current = {
+      container: 0,
+      items: new Map(),
+      prefix: 0,
+      suffix: 0,
+      rest: 0
+    };
+    calculationResultRef.current = {
+      visibleCount: 0,
+      showRest: false
+    };
+    isComplete.current = false;
+    measurementFlags.current = {
+      container: false,
+      prefix: false,
+      suffix: false,
+      rest: false,
+      items: new Set()
+    };
+    setRemeasureKey(prev => prev + 1);
+  });
+
+  /**
+   * 检查是否所有必要的测量都已完成
+   */
+  const isAllMeasurementsComplete = () => {
+    const flags = measurementFlags.current;
+    if (!flags.container || !flags.rest) return false;
+    if (prefix && !flags.prefix) return false;
+    if (suffix && !flags.suffix) return false;
+
+    // 检查所有元素是否都已测量
+    for (let i = 0; i < data.length; i++) {
+      const key = getKey(data[i], i);
+      if (!flags.items.has(key)) return false;
+    }
+    return true;
+  };
+
+  /**
+   * 计算最终显示状态
+   */
+  const calculateDisplayState = measurementData => {
+    const {
+      container,
+      items,
+      prefix,
+      suffix,
+      rest
+    } = measurementData;
+    if (!container || data.length === 0) {
+      return {
+        visibleCount: 0,
+        showRest: false
+      };
+    }
+    const availableWidth = container - prefix - suffix;
+    let currentWidth = 0;
+    let visibleCount = 0;
+
+    // 计算所有元素的总宽度
+    let totalItemsWidth = 0;
+    for (let i = 0; i < data.length; i++) {
+      const key = getKey(data[i], i);
+      const itemWidth = items.get(key) || 0;
+      totalItemsWidth += itemWidth;
+    }
+
+    // 如果所有元素都能放下（考虑容差）
+    if (totalItemsWidth <= availableWidth + itemsWidthTolerance) {
+      return {
+        visibleCount: data.length,
+        showRest: false
+      };
+    }
+
+    // 需要截断，从前往后累积宽度
+    for (let i = 0; i < data.length; i++) {
+      const key = getKey(data[i], i);
+      const itemWidth = items.get(key) || 0;
+
+      // 检查加上当前元素和rest节点是否会超出
+      if (currentWidth + itemWidth + rest > availableWidth) {
+        // 如果是第一个元素就超出，至少显示一个
+        visibleCount = i === 0 ? 1 : i;
+        break;
+      }
+      currentWidth += itemWidth;
+      visibleCount = i + 1;
+    }
+    return {
+      visibleCount,
+      showRest: visibleCount < data.length
+    };
+  };
+
+  /**
+   * 完成测量并更新结果
+   */
+  const completeMeasurement = useMemoizedFn(() => {
+    if (!isAllMeasurementsComplete()) return;
+    const result = calculateDisplayState(measurementDataRef.current);
+    calculationResultRef.current = result;
+    isComplete.current = true;
+    previousResultRef.current = {
+      ...result
+    };
+    onVisibleCountChange?.(result.visibleCount);
+    triggerRerender();
+  });
+
+  // 影响布局的 props 变化时标记需要重新计算
+  useEffect(() => {
+    resetMeasurement();
+  }, [data, renderItem, renderRest, prefix, suffix, style, prefixStyle, itemStyle, suffixStyle, restStyle, onVisibleCountChange, itemsWidthTolerance, styles, getKey]);
+
+  /**
+   * 布局测量处理函数
+   */
+  const createLayoutHandler = useMemoizedFn((elementType, itemKey) => event => {
+    // 测量完成后不再更新数据
+    if (isComplete.current) {
+      return;
+    }
+    const {
+      width
+    } = event.nativeEvent.layout;
+
+    // 更新测量数据和标记
+    if (elementType === 'items') {
+      measurementFlags.current.items.add(itemKey);
+      measurementDataRef.current.items.set(itemKey, width);
+    } else {
+      measurementFlags.current[elementType] = true;
+      measurementDataRef.current[elementType] = width;
+    }
+
+    // 检查是否可以完成测量
+    completeMeasurement();
+  });
+
+  /**
+   * 渲染 Rest 内容
+   */
+  const renderRestContent = () => {
+    const omittedData = data.slice(calculationResultRef.current.visibleCount);
+    if (typeof renderRest === 'function') {
+      return renderRest(omittedData);
+    }
+    if (renderRest) {
+      return renderRest;
+    }
+    return /*#__PURE__*/_jsxs(Text, {
+      style: [styles.rest, restStyle],
+      children: ["+", omittedData.length, "..."]
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: createLayoutHandler('container'),
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/_jsx(View, {
+      onLayout: createLayoutHandler('prefix'),
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.map((item, index) => {
+      const key = getKey(item, index);
+
+      // 测量完成后，不渲染超出可见范围的元素
+      if (isComplete.current && index >= calculationResultRef.current.visibleCount) {
+        return null;
+      }
+
+      // 测量期间，如果有上一次的结果且当前元素超出上一次的可见范围，需要隐藏
+      const shouldHideInMeasurement = !isComplete.current && previousResultRef.current.visibleCount > 0 && index >= previousResultRef.current.visibleCount;
+      return /*#__PURE__*/_jsx(View, {
+        onLayout: createLayoutHandler('items', key),
+        style: [styles.item, itemStyle, shouldHideInMeasurement && styles.hidden],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), !isComplete.current || calculationResultRef.current.showRest ? /*#__PURE__*/_jsx(View, {
+      onLayout: createLayoutHandler('rest'),
+      style: [styles.item, restStyle,
+      // 测量期间隐藏，测量完成后根据 showRest 决定是否隐藏
+      !isComplete.current && !previousResultRef.current.showRest && styles.hidden],
+      children: renderRestContent()
+    }) : null, suffix && /*#__PURE__*/_jsx(View, {
+      onLayout: createLayoutHandler('suffix'),
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  }, remeasureKey);
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+
+/**
+ * 创建样式
+ */
+export const useOverflowStyles = createThemedStyles((theme, {
+  maxCount
+}) => ({
+  container: {
+    flexDirection: 'row',
+    flexWrap: maxCount === 'responsive' ? 'nowrap' : 'wrap',
+    overflow: 'hidden',
+    width: '100%'
+  },
+  item: {
+    flexShrink: 0,
+    paddingHorizontal: theme.spacing.xxs / 2,
+    paddingVertical: theme.spacing.xxs / 4
+  },
+  rest: {
+    backgroundColor: theme.palette.gray1,
+    borderRadius: theme.roundness.sm,
+    paddingHorizontal: theme.spacing.xs,
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.palette.fontGray3
+  },
+  hidden: {
+    opacity: 0,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+}));

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

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

package/dist/module/components/base/picker/picker-content.js

@@ -3,8 +3,15 @@
 import React, { useContext, useEffect } from 'react';
 import { Flex, Modal, ModalHeader, Portal } from "./../index.js";
 import { PickerContext } from "./picker-context.js";
+import { usePickerContentStyles } from "./style/index.js";
+
+/**
+ * Picker 内容组件的属性接口
+ * 继承自 Modal 组件,排除 visible 和 children 属性
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PickerContent = ({
+  style,
   children,
   headerTitle,
   headerStyle,
@@ -12,20 +19,20 @@ export const PickerContent = ({
   ...modalProps
 }) => {
   const context = useContext(PickerContext);
+  const styles = usePickerContentStyles();
   let childNode = null;
+  const injectToChildrenProps = {
+    value: context?.value,
+    onChange: context?.onChange
+  };
   if (/*#__PURE__*/React.isValidElement(children)) {
-    childNode = /*#__PURE__*/React.cloneElement(children, {
-      value: context?.value,
-      onChange: context?.onChange
-    });
+    childNode = /*#__PURE__*/React.cloneElement(children, injectToChildrenProps);
   } else if (typeof children === 'function') {
-    childNode = children({
-      value: context?.value,
-      onChange: context?.onChange
-    });
+    childNode = children(injectToChildrenProps);
   }
   useEffect(() => {
     context?.setDisabled?.(!!childNode?.props?.disabled);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [childNode?.props?.disabled, context?.setDisabled]);
   return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsx(Modal, {
@@ -38,10 +45,7 @@ export const PickerContent = ({
         vertical: true,
         align: "stretch",
         gap: 16,
-        style: {
-          flex: 1,
-          padding: 16
-        },
+        style: [styles.container, style],
         children: [/*#__PURE__*/_jsx(ModalHeader, {
           title: headerTitle,
           style: headerStyle,

package/dist/module/components/base/picker/picker-field.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { useLatest } from 'ahooks';
+import { isNil } from 'lodash-es';
 import React, { useContext, useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { Text } from "./../index.js";
@@ -11,19 +12,20 @@ import { usePickerFieldStyles } from "./style/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function PickerField(props) {
   const theme = useTheme();
+  const styles = usePickerFieldStyles();
   const context = useContext(PickerContext);
   const renderValueRef = useLatest(props.renderValue);
-  const styles = usePickerFieldStyles();
-
-  // const hasValue = !!context?.value || typeof context?.value === 'number';
-
-  const displayValue = useMemo(() => renderValueRef.current?.(context?.value), [context?.value, renderValueRef]);
-  const textColor = displayValue ? theme.palette.fontGray1 : theme.palette.fontGray3;
+  const value = context?.value;
+  const hasControllableValue = !isNil(value) && (!Array.isArray(value) || value.length > 0);
+  const displayValue = useMemo(() => {
+    return typeof renderValueRef.current !== 'function' ? value : renderValueRef.current?.(value);
+  }, [value, renderValueRef]);
+  const textColor = hasControllableValue ? theme.palette.fontGray1 : theme.palette.fontGray3;
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     style: [styles.container, context?.disabled && styles.disabled],
     onPress: context?.toggleVisible,
     disabled: !!context?.disabled,
-    children: safetyRenderChildren(displayValue ?? props.placeholder, displayText => /*#__PURE__*/_jsx(Text, {
+    children: safetyRenderChildren(hasControllableValue ? displayValue : props.placeholder, displayText => /*#__PURE__*/_jsx(Text, {
       size: 14,
       color: textColor,
       children: displayText

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

@@ -3,6 +3,11 @@
 import { useControllableValue, useMemoizedFn, useToggle } from 'ahooks';
 import { useMemo, useState } from 'react';
 import { PickerContext } from "./picker-context.js";
+
+/**
+ * Picker 组件的基础属性接口
+ * @template T 选择器值的类型
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Picker = props => {
   const [visible, {
@@ -23,7 +28,7 @@ export const Picker = props => {
     setDisabled,
     toggleVisible,
     onChange: _onChange
-  }), [value, visible, disabled, toggleVisible, setDisabled, setValue]);
+  }), [value, visible, disabled, toggleVisible, _onChange]);
   return /*#__PURE__*/_jsx(PickerContext.Provider, {
     value: contextValue,
     children: props.children

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

@@ -12,4 +12,10 @@ export const usePickerFieldStyles = createThemedStyles(theme => ({
   disabled: {
     backgroundColor: theme.palette.blueGray2
   }
+}));
+export const usePickerContentStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    padding: 16
+  }
 }));

package/dist/module/components/base/portal/portal-host.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { DeviceEventEmitter, View } from 'react-native';
 import { NATIVE_UI_PORTAL_ADD_EVENT, NATIVE_UI_PORTAL_REMOVE_EVENT } from "../../../shared/constants/index.js";
 import { PortalContext, registerHost, unregisterHost } from "./portal-context.js";
@@ -9,7 +9,8 @@ import { usePortalHostStyles } from "./style/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PortalHost = ({
   children,
-  name
+  name,
+  style
 }) => {
   const portalHostStyles = usePortalHostStyles();
   const managerRef = useRef(null);
@@ -104,7 +105,7 @@ export const PortalHost = ({
   return /*#__PURE__*/_jsxs(PortalContext.Provider, {
     value: contextValue,
     children: [/*#__PURE__*/_jsx(View, {
-      style: portalHostStyles.container,
+      style: [portalHostStyles.container, style],
       collapsable: false,
       children: children
     }), /*#__PURE__*/_jsx(PortalManager, {

package/dist/module/components/base/select/hooks/use-select-actions.js

@@ -0,0 +1,151 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+
+/**
+ * 选项操作 Hook 参数
+ *
+ * @template ValueType - 选项值的类型
+ */
+
+/**
+ * 选项操作 Hook 返回值
+ */
+
+/**
+ * 选项操作 Hook
+ *
+ * 封装 Select 组件中与选项操作相关的逻辑,包括:
+ * - 选项点击处理
+ * - 标签移除处理
+ * - 清除操作处理
+ * - 创建新选项处理
+ *
+ * @template ValueType - 选项值的类型
+ *
+ * @example
+ * const {
+ *   handleOptionPress,
+ *   handleTagClose,
+ *   handleClear,
+ *   handleCreateOption
+ * } = useSelectActions({
+ *   value,
+ *   mode,
+ *   disabled,
+ *   maxCount,
+ *   autoClearSearchValue,
+ *   setValue,
+ *   clearSearch,
+ *   closePopup,
+ *   isOptionSelected,
+ *   onSelect,
+ *   onDeselect,
+ *   onClear
+ * });
+ */
+export const useSelectActions = params => {
+  const {
+    value,
+    mode,
+    disabled,
+    maxCount,
+    autoClearSearchValue,
+    setValue,
+    clearSearch,
+    closePopup,
+    isOptionSelected,
+    onActive,
+    onSelect,
+    onDeselect,
+    onClear,
+    onCreateOption
+  } = params;
+
+  // 处理选项点击
+  const handleOptionPress = useMemoizedFn(option => {
+    if (option.disabled) return;
+    onActive?.(option.value);
+
+    // 多选
+    if (mode) {
+      const values = Array.isArray(value) ? value : [];
+      const isSelected = isOptionSelected(option);
+      if (isSelected) {
+        // 取消选中
+        const newValues = values.filter(v => {
+          return v !== option.value;
+        });
+        setValue(newValues);
+        onDeselect?.(option.value);
+      } else {
+        // 选中
+        if (maxCount && values.length >= maxCount) {
+          return;
+        }
+        const newValues = [...values, option.value];
+        setValue(newValues);
+        onSelect?.(option.value, option);
+      }
+
+      // 清空搜索
+      if (autoClearSearchValue) {
+        clearSearch();
+      }
+    } else {
+      // 单选模式
+      setValue(option.value);
+      onSelect?.(option.value, option);
+      closePopup();
+      clearSearch();
+    }
+  });
+
+  // 处理标签移除
+  const handleTagClose = useMemoizedFn(option => {
+    if (disabled) return;
+    const values = Array.isArray(value) ? value : [];
+    const newValues = values.filter(v => {
+      return v !== option.value;
+    });
+    setValue(newValues);
+    onDeselect?.(option.value);
+  });
+
+  // 处理清除
+  const handleClear = useMemoizedFn(e => {
+    e.stopPropagation();
+    setValue(mode ? [] : undefined);
+    clearSearch();
+    onClear?.();
+  });
+
+  // 处理创建新选项(tags 模式)
+  const handleCreateOption = useMemoizedFn(searchValue => {
+    if (mode !== 'tags' || !searchValue.trim()) return;
+    const newOption = onCreateOption?.(searchValue.trim());
+    if (newOption) {
+      handleOptionPress(newOption);
+    } else {
+      // 默认创建逻辑
+      const defaultOption = {
+        label: searchValue.trim(),
+        value: searchValue.trim()
+      };
+      handleOptionPress(defaultOption);
+    }
+    clearSearch();
+  });
+  return {
+    handleOptionPress,
+    handleTagClose,
+    handleClear,
+    handleCreateOption
+  };
+};
+
+/**
+ * 搜索配置
+ *
+ * @template OptionType - 选项类型
+ */