@seakoi/native-ui 1.1.3 → 1.3.0

package/dist/module/components/base/date-picker/date-range-picker.js

@@ -1,73 +1,165 @@
 "use strict";
 
-import { useControllableValue } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
-import { DateRangePickerView, Modal, PickerTrigger, Portal } from "./../index.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Button, DatePickerView, Flex, Picker, Text } from "./../index.js";
+import { useDateRangePickerStyles } from "../date-picker-view/style/index.js";
+import { sortRange } from "../date-picker-view/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DateRangePicker = ({
   placeholder = '请选择日期范围',
-  disabled = false,
   formatter = 'YYYY/MM/DD',
-  style,
   separator = ' ~ ',
-  children,
-  title,
-  confirmText,
-  resetText,
-  startText,
-  endText,
+  headerTitle,
+  startText = '请选择开始时间',
+  endText = '请选择结束时间',
+  confirmText = '确定',
+  resetText = '重置',
+  min,
+  max,
   ...restProps
 }) => {
-  const [value, setValue] = useControllableValue(restProps, {
-    defaultValue: restProps.defaultValue
-  });
-  const [visible, setVisible] = useState(false);
-  const openModal = () => {
-    setVisible(true);
-  };
-  const closeModal = () => {
-    setVisible(false);
-  };
+  const styles = useDateRangePickerStyles();
+
+  /** 当前编辑的是 start 还是 end */
+  const [selected, setSelected] = useState('start');
+
+  /**
+   * 草稿值：用户在弹窗内选择时的临时值
+   * - 弹窗打开时重置为已提交的值（通过 onOpen）
+   */
+  const [draft, setDraft] = useState([]);
+
+  /**
+   * 追踪 Picker context 中的已提交值
+   * 非受控模式下 restProps.value 始终是 undefined，真正的值在 Picker context 内
+   */
+  const committedValueRef = useRef(undefined);
+
+  /**
+   * 弹窗打开时，将草稿值重置为已提交的值
+   */
+  const handleOpen = useCallback(() => {
+    if (committedValueRef.current) {
+      setDraft(sortRange(committedValueRef.current));
+    } else {
+      setDraft([new Date(), undefined]);
+    }
+    setSelected('start');
+  }, []);
 
   /** 格式化显示文案 */
-  const displayText = useMemo(() => {
-    if (!value) return '';
+  const _renderValue = useMemoizedFn(value => {
+    if (!value) return;
     if (typeof formatter === 'string') {
       return dayjs(value[0]).format(formatter) + separator + dayjs(value[1]).format(formatter);
     }
     return formatter(value);
-  }, [value, formatter, separator]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(PickerTrigger, {
-      displayText: displayText,
+  });
+
+  /** Picker 当前值 */
+  const pickerValue = (selected === 'start' ? draft[0] : draft[1]) ?? new Date();
+
+  /** Picker 可选范围 */
+  const minDate = useMemo(() => {
+    return selected === 'end' ? draft[0] ?? min : min;
+  }, [selected, draft, min]);
+  const maxDate = useMemo(() => {
+    return selected === 'start' ? draft[1] ?? max : max;
+  }, [selected, draft, max]);
+
+  /** Picker 改 draft */
+  const onChangePicker = useCallback(date => {
+    setDraft(prev => {
+      const index = selected === 'start' ? 0 : 1;
+      if (prev[index]?.getTime() === date.getTime()) {
+        return prev;
+      }
+      const next = [prev[0], prev[1]];
+      next[index] = date;
+      return next;
+    });
+  }, [selected]);
+  const changeSelected = useCallback(nextSelected => {
+    setSelected(nextSelected);
+    setDraft(prev => {
+      const next = [prev[0], prev[1]];
+      const index = nextSelected === 'start' ? 0 : 1;
+      next[index] ??= new Date();
+      return next;
+    });
+  }, []);
+
+  /** 重置 */
+  const onReset = useCallback(() => {
+    setDraft([new Date(), undefined]);
+    setSelected('start');
+  }, []);
+
+  /** 是否可以确定 */
+  const canConfirm = Boolean(draft[0] && draft[1]);
+  const _startText = draft[0] && dayjs(draft[0]).format(typeof formatter === 'string' ? formatter : 'YYYY/MM/DD') || startText;
+  const _endText = draft[1] && dayjs(draft[1]).format(typeof formatter === 'string' ? formatter : 'YYYY/MM/DD') || endText;
+  return /*#__PURE__*/_jsxs(Picker, {
+    ...restProps,
+    children: [/*#__PURE__*/_jsx(Picker.Field, {
       placeholder: placeholder,
-      disabled: disabled,
-      style: style,
-      onPress: openModal,
-      children: children
-    }), /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(Modal, {
-        visible: visible,
-        position: "bottom",
-        safeAreaInsetBottom: true,
-        contentHeight: 490,
-        children: /*#__PURE__*/_jsx(DateRangePickerView, {
-          ...restProps,
-          title: title,
-          confirmText: confirmText,
-          resetText: resetText,
-          startText: startText,
-          endText: endText,
-          value: value,
-          onChange: range => {
-            setValue(range);
-            closeModal();
-          },
-          onClose: closeModal,
-          formatter: formatter
-        })
-      })
+      renderValue: _renderValue
+    }), /*#__PURE__*/_jsx(Picker.Content, {
+      headerTitle: headerTitle,
+      contentHeight: 490,
+      onOpen: handleOpen,
+      children: ({
+        onChange,
+        value: contextValue
+      }) => {
+        // 同步 ref：始终保持最新的已提交值
+        committedValueRef.current = contextValue;
+        return /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          style: styles.container,
+          children: [/*#__PURE__*/_jsxs(Flex, {
+            children: [/*#__PURE__*/_jsx(Button, {
+              variant: "outline",
+              theme: selected === 'start' ? 'primary' : 'default',
+              block: true,
+              text: _startText,
+              onPress: () => changeSelected('start')
+            }), /*#__PURE__*/_jsx(Text, {
+              children: "\u2014"
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "outline",
+              theme: selected === 'end' ? 'primary' : 'default',
+              block: true,
+              text: _endText,
+              onPress: () => changeSelected('end')
+            })]
+          }), /*#__PURE__*/_jsx(DatePickerView, {
+            value: pickerValue,
+            min: minDate,
+            max: maxDate,
+            onChange: onChangePicker
+          }), /*#__PURE__*/_jsxs(Button.Group, {
+            block: true,
+            children: [/*#__PURE__*/_jsx(Button, {
+              size: "large",
+              text: resetText,
+              theme: "secondary",
+              onPress: onReset
+            }), /*#__PURE__*/_jsx(Button, {
+              size: "large",
+              text: confirmText,
+              onPress: () => {
+                if (!draft[0] || !draft[1]) return;
+                onChange?.(sortRange([draft[0], draft[1]]));
+              },
+              disabled: !canConfirm
+            })]
+          })]
+        });
+      }
     })]
   });
 };

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

@@ -0,0 +1,11 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useDatePickerStyles = createThemedStyles(theme => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    padding: 16,
+    rowGap: 16,
+    flex: 1
+  }
+}));

package/dist/module/components/base/date-picker-view/date-picker-view.js

@@ -1,68 +1,34 @@
 "use strict";
 
-import { useMemoizedFn } from 'ahooks';
-import { useMemo, useRef, useState } from 'react';
-import { Button, DateTimePicker, Flex, ModalHeader } from "./../index.js";
-import { useDatePickerStyles } from "./style/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControllableValue } from 'ahooks';
+import { useMemo } from 'react';
+import { PickerView } from "./../index.js";
+import { useDateTimePicker } from "./hooks/use-date-time-picker.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DatePickerView = ({
   mode = 'Y-D',
-  onChange,
-  onClose,
-  title,
-  confirmText = '确定',
+  min,
+  max,
   ...restProps
 }) => {
-  const styles = useDatePickerStyles();
-
-  // 内部状态用于管理滚动时的临时值
-  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? new Date());
-  const lastValueRef = useRef(restProps.value);
-  if (restProps.value !== undefined && restProps.value !== lastValueRef.current) {
-    lastValueRef.current = restProps.value;
-    setLocalValue(restProps.value);
-  }
-  const _title = useMemo(() => {
-    if (title) {
-      return title;
-    }
-    switch (mode) {
-      case 'Y':
-        return '请选择年';
-      case 'Y-M':
-        return '请选择年月';
-      case 'Y-D':
-        return '请选择年月日';
-      default:
-        return '请选择日期';
-    }
-  }, [mode, title]);
-
-  // 滚动时只更新内部状态，不触发外部 onChange
-  const onChangePicker = useMemoizedFn(value => {
-    setLocalValue(value);
+  // 确保有一个稳定的默认日期值
+  const defaultDate = useMemo(() => new Date(), []);
+  const [value, onChange] = useControllableValue(restProps, {
+    defaultValue: defaultDate
   });
 
-  // 只在点击确定按钮时才调用外部 onChange
-  const onConfirm = useMemoizedFn(() => {
-    onChange?.(localValue);
+  // 确保 value 始终有值，避免 undefined 传递给 hook
+  const safeValue = value ?? defaultDate;
+  const [values, columns, onChangePicker] = useDateTimePicker({
+    mode,
+    value: safeValue,
+    onChange,
+    min,
+    max
   });
-  return /*#__PURE__*/_jsxs(Flex, {
-    vertical: true,
-    align: "stretch",
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(ModalHeader, {
-      title: _title,
-      onClose: onClose
-    }), /*#__PURE__*/_jsx(DateTimePicker, {
-      ...restProps,
-      mode: mode,
-      value: localValue,
-      onChange: onChangePicker
-    }), /*#__PURE__*/_jsx(Button, {
-      text: confirmText,
-      size: "large",
-      onPress: onConfirm
-    })]
+  return /*#__PURE__*/_jsx(PickerView, {
+    columns: columns,
+    value: values,
+    onChange: onChangePicker
   });
 };

package/dist/module/components/base/date-picker-view/index.js

@@ -1,5 +1,3 @@
 "use strict";
 
-export * from "./date-picker-view.js";
-export * from "./date-range-picker-view.js";
-export * from "./date-time-picker.js";
+export * from "./date-picker-view.js";

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

@@ -24,12 +24,16 @@ export * from "./link/index.js";
 export * from "./loading/index.js";
 export * from "./modal/index.js";
 export * from "./nav-bar/index.js";
+export * from "./overflow/index.js";
 export * from "./picker/index.js";
+export * from "./picker-backup/index.js";
 export * from "./picker-view/index.js";
 export * from "./portal/index.js";
 export * from "./radio/index.js";
 export * from "./result/index.js";
+export * from "./select/index.js";
 export * from "./surface/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
+export * from "./tag/index.js";
 export * from "./text/index.js";

package/dist/module/components/base/input/base-input.js

@@ -126,7 +126,9 @@ export const BaseInput = ({
         if (!elementState.current.pointerDown) {
           props.onBlur?.(event);
           setInputIsFocused(false);
-          setInputValue(inputValue?.trimEnd());
+          if (inputValue && inputValue?.trimEnd() !== inputValue) {
+            setInputValue(inputValue?.trimEnd());
+          }
         } else {
           inputRef.current?.focus();
         }
@@ -134,7 +136,7 @@ export const BaseInput = ({
           pointerDown: false
         };
       }
-    }), !!hasSuffixNode && /*#__PURE__*/_jsxs(Flex, {
+    }), hasSuffixNode && /*#__PURE__*/_jsxs(Flex, {
       align: "center",
       gap: theme.spacing.sm,
       children: [!!props.allowClear && /*#__PURE__*/_jsx(Animated.View, {

package/dist/module/components/base/overflow/all-mode-overflow.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 全部显示模式组件
+ */
+export const AllModeOverflow = ({
+  data,
+  renderItem,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  onVisibleCountChange,
+  styles,
+  getKey
+}) => {
+  useEffect(() => {
+    onVisibleCountChange?.(data.length);
+  }, [data.length, onVisibleCountChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.map((item, index) => {
+      const key = getKey(item, index);
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.item, itemStyle],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), suffix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  });
+};

package/dist/module/components/base/overflow/fixed-count-overflow.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import React, { useCallback, useEffect } from 'react';
+import { Text, View } from 'react-native';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 固定数量模式组件
+ */
+export const FixedCountOverflow = ({
+  data,
+  renderItem,
+  renderRest,
+  maxCount,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  restStyle,
+  onVisibleCountChange,
+  styles,
+  getKey
+}) => {
+  const visibleCount = Math.min(data.length, maxCount);
+  const showRest = data.length > maxCount;
+  const omittedData = data.slice(maxCount);
+  useEffect(() => {
+    onVisibleCountChange?.(visibleCount);
+  }, [visibleCount, onVisibleCountChange]);
+  const renderRestContent = useCallback(() => {
+    if (typeof renderRest === 'function') {
+      return renderRest(omittedData);
+    }
+    if (renderRest) {
+      return renderRest;
+    }
+    return /*#__PURE__*/_jsxs(Text, {
+      style: [styles.rest],
+      children: ["+", omittedData.length, "..."]
+    });
+  }, [renderRest, omittedData, styles.rest]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.slice(0, visibleCount).map((item, index) => {
+      const key = getKey(item, index);
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.item, itemStyle],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), showRest && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, restStyle],
+      children: renderRestContent()
+    }), suffix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  });
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./overflow.js";

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

@@ -0,0 +1,66 @@
+"use strict";
+
+import { isNumber } from 'lodash-es';
+import React, { useCallback } from 'react';
+import { AllModeOverflow } from "./all-mode-overflow.js";
+import { FixedCountOverflow } from "./fixed-count-overflow.js";
+import { ResponsiveOverflow } from "./responsive-overflow.js";
+import { useOverflowStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Overflow 组件
+ *
+ * 利用 onLayout 在渲染前触发的特性，实现单次渲染的溢出处理组件
+ * 固定数量模式直接渲染，响应式模式通过预先计算确定最终显示状态
+ *
+ * @param props - 组件属性
+ * @returns React 元素
+ */
+export const Overflow = props => {
+  const {
+    maxCount = 'responsive',
+    itemKey
+  } = props;
+  const styles = useOverflowStyles({
+    maxCount
+  });
+
+  /**
+   * 获取元素唯一标识
+   */
+  const getKey = useCallback((item, index) => {
+    if (typeof itemKey === 'function') {
+      return itemKey(item, index);
+    }
+    if (itemKey && typeof item === 'object' && item !== null && typeof itemKey === 'string') {
+      const value = item[itemKey];
+      return typeof value === 'string' || typeof value === 'number' ? value : index;
+    }
+    return index;
+  }, [itemKey]);
+
+  // 固定数量模式
+  if (isNumber(maxCount)) {
+    return /*#__PURE__*/_jsx(FixedCountOverflow, {
+      ...props,
+      styles: styles,
+      getKey: getKey
+    });
+  }
+
+  // 全部显示模式
+  if (maxCount === 'all') {
+    return /*#__PURE__*/_jsx(AllModeOverflow, {
+      ...props,
+      styles: styles,
+      getKey: getKey
+    });
+  }
+
+  // 响应式模式
+  return /*#__PURE__*/_jsx(ResponsiveOverflow, {
+    ...props,
+    styles: styles,
+    getKey: getKey
+  });
+};