@seakoi/native-ui 1.1.3 → 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/index.js

@@ -1,4 +1,12 @@
 "use strict";
 
+import { Picker as _Picker } from "./picker.js";
+import { PickerContent } from "./picker-content.js";
+import { PickerField } from "./picker-field.js";
 export * from "./picker.js";
-export * from "./picker-trigger.js";
+export * from "./picker-content.js";
+export * from "./picker-field.js";
+export const Picker = Object.assign(_Picker, {
+  Field: PickerField,
+  Content: PickerContent
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+
+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,
+  hiddenHeaderCloseIcon,
+  ...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, injectToChildrenProps);
+  } else if (typeof children === 'function') {
+    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, {
+      safeAreaInsetBottom: true,
+      position: "bottom",
+      contentHeight: '50%',
+      ...modalProps,
+      visible: !!context?.visible,
+      children: /*#__PURE__*/_jsxs(Flex, {
+        vertical: true,
+        align: "stretch",
+        gap: 16,
+        style: [styles.container, style],
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          title: headerTitle,
+          style: headerStyle,
+          onClose: context?.toggleVisible,
+          showClose: !hiddenHeaderCloseIcon
+        }), childNode]
+      })
+    })
+  });
+};

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

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const PickerContext = /*#__PURE__*/React.createContext(null);

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

@@ -0,0 +1,34 @@
+"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";
+import { useTheme } from "../../../native-provider/index.js";
+import { safetyRenderChildren } from "../../../shared/utils/index.js";
+import { PickerContext } from "./picker-context.js";
+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 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(hasControllableValue ? displayValue : props.placeholder, displayText => /*#__PURE__*/_jsx(Text, {
+      size: 14,
+      color: textColor,
+      children: displayText
+    }))
+  });
+}

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

@@ -1,105 +1,36 @@
 "use strict";
 
-import { useControllableValue, useMemoizedFn } from 'ahooks';
-import { useMemo, useRef, useState } from 'react';
-import { Button } from "../button/index.js";
-import { Flex } from "../flex/index.js";
-import { Modal, ModalHeader } from "../modal/index.js";
-import { PickerView } from "../picker-view/index.js";
-import { findOptionsByValue, getDefaultValues } from "../picker-view/utils/picker.js";
-import { Portal } from "../portal/index.js";
-import { PickerTrigger } from "./picker-trigger.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const Picker = ({
-  placeholder = '请选择',
-  disabled = false,
-  title = '请选择',
-  formatter,
-  children,
-  style,
-  confirmText = '确定',
-  ...restProps
-}) => {
-  const [value, setValue] = useControllableValue(restProps, {
-    defaultValue: restProps.defaultValue
-  });
-  const [visible, setVisible] = useState(false);
-
-  // 内部状态用于管理滚动时的临时值
-  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? []);
-
-  // 用 ref 同步保存最新值，解决 useMemoizedFn 闭包问题
-  const localValueRef = useRef(localValue);
-  localValueRef.current = localValue;
-
-  // 滑动时的临时 options（不用于 displayText）
-  const localOptionsRef = useRef([]);
+import { useControllableValue, useMemoizedFn, useToggle } from 'ahooks';
+import { useMemo, useState } from 'react';
+import { PickerContext } from "./picker-context.js";
 
-  /** 格式化显示文案 - 根据 value 从 columns 计算 */
-  const displayText = useMemo(() => {
-    if (!value?.length) return '';
-
-    // 从 columns 计算对应的 options
-    const options = findOptionsByValue(value, restProps.columns);
-    if (formatter) {
-      return formatter(value, options);
-    }
-    return options.map(opt => opt?.label).filter(Boolean).join(' / ');
-  }, [value, restProps.columns, formatter]);
-  const handleOpen = useMemoizedFn(() => {
-    // 打开时同步外部 value 到内部
-    // 如果 value 为空，使用 columns 的默认值（第一个选项）
-    const initialValue = value?.length ? value : getDefaultValues(restProps.columns);
-    setLocalValue(initialValue);
-    setVisible(true);
-  });
-  const handleClose = useMemoizedFn(() => {
-    setVisible(false);
-  });
-  const handleChange = useMemoizedFn((v, options) => {
-    setLocalValue(v);
-    localOptionsRef.current = options;
+/**
+ * Picker 组件的基础属性接口
+ * @template T 选择器值的类型
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Picker = props => {
+  const [visible, {
+    toggle: toggleVisible
+  }] = useToggle();
+  const [disabled, setDisabled] = useState(props.disabled);
+  const [value, setValue] = useControllableValue(props, {
+    trigger: props.trigger
   });
-  const handleConfirm = useMemoizedFn(() => {
-    setVisible(false);
-    setValue(localValueRef.current);
+  const _onChange = useMemoizedFn(value => {
+    setValue(value);
+    toggleVisible();
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(PickerTrigger, {
-      displayText: displayText,
-      placeholder: placeholder,
-      disabled: disabled,
-      style: style,
-      onPress: handleOpen,
-      children: children
-    }), /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(Modal, {
-        visible: visible,
-        position: "bottom",
-        safeAreaInsetBottom: true,
-        contentHeight: '50%',
-        children: /*#__PURE__*/_jsxs(Flex, {
-          vertical: true,
-          align: "stretch",
-          gap: 16,
-          style: {
-            flex: 1,
-            padding: 16
-          },
-          children: [/*#__PURE__*/_jsx(ModalHeader, {
-            title: title,
-            onClose: handleClose
-          }), /*#__PURE__*/_jsx(PickerView, {
-            ...restProps,
-            value: localValue,
-            onChange: handleChange
-          }), /*#__PURE__*/_jsx(Button, {
-            text: confirmText,
-            size: "large",
-            onPress: handleConfirm
-          })]
-        })
-      })
-    })]
+  const contextValue = useMemo(() => ({
+    value,
+    visible,
+    disabled,
+    setDisabled,
+    toggleVisible,
+    onChange: _onChange
+  }), [value, visible, disabled, toggleVisible, _onChange]);
+  return /*#__PURE__*/_jsx(PickerContext.Provider, {
+    value: contextValue,
+    children: props.children
   });
 };

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

@@ -4,9 +4,7 @@ import { createThemedStyles } from "../../../../native-provider/index.js";
 export const usePickerFieldStyles = createThemedStyles(theme => ({
   container: {
     flex: 1,
-    alignSelf: 'stretch'
-  },
-  content: {
+    alignSelf: 'stretch',
     backgroundColor: theme.palette.white,
     paddingVertical: 12,
     paddingHorizontal: 12
@@ -14,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/picker-backup/base-picker-container.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { Flex } from "../flex/index.js";
+import { Modal, ModalHeader } from "../modal/index.js";
+import { Portal } from "../portal/index.js";
+import { PickerTrigger } from "./picker-trigger.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const BasePickerContainer = ({
+  children,
+  pickerTriggerProps,
+  modalProps
+}) => {
+  const [visible, setVisible] = useState(false);
+  const controller = useMemo(() => ({
+    visible,
+    setVisible
+  }), [visible]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      ...pickerTriggerProps
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Modal, {
+        visible: visible,
+        position: "bottom",
+        safeAreaInsetBottom: true,
+        contentHeight: '50%',
+        ...modalProps,
+        children: /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          gap: 16,
+          style: {
+            flex: 1,
+            padding: 16
+          },
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            onClose: () => setVisible(false)
+          }), children(controller)]
+        })
+      })
+    })]
+  });
+};

package/dist/module/components/base/picker-backup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./picker-backup.js";
+export * from "./picker-trigger.js";