@seakoi/native-ui 1.1.3 → 1.2.0

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

@@ -2,12 +2,19 @@
 
 import { clamp } from 'lodash-es';
 import React, { useCallback, useMemo, useState } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { Animated, View } from 'react-native';
 import { useTheme } from "../../../native-provider/index.js";
-import { useCarouselAutoplay, useCarouselIndex, useCarouselIndicator, useCarouselLifecycle, useCarouselPanResponder, useCarouselPosition, useCarouselSlides, useCarouselSwipe } from "./hooks/index.js";
+import { CarouselIndicator } from "./carousel-indicator.js";
+import { CarouselSlides } from "./carousel-slides.js";
+import { useCarouselAutoplay, useCarouselIndex, useCarouselLifecycle, useCarouselPanResponder, useCarouselPosition, useCarouselSwipe } from "./hooks/index.js";
 import { useCarouselStyles } from "./style/index.js";
-import { getDefaultTotal, isRenderPropChildren } from "./utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 虚拟渲染触发阈值
+ * 当轮播项数量超过此值时启用虚拟渲染优化
+ */
+const VIRTUAL_RENDER_THRESHOLD = 10;
+
 /**
  * 轮播图组件
  *
@@ -16,20 +23,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @example
  * ```tsx
  * // 基础用法
- * <Carousel>
- *   <Carousel.Item><View /></Carousel.Item>
- *   <Carousel.Item><View /></Carousel.Item>
- * </Carousel>
+ * <Carousel
+ *   data={[1, 2, 3]}
+ *   renderItem={(item) => <View><Text>{item}</Text></View>}
+ * />
  *
  * // 循环播放和自动轮播
- * <Carousel loop autoplay autoplayInterval={3000}>
- *   {items.map(item => <Carousel.Item key={item.id}>{item.content}</Carousel.Item>)}
- * </Carousel>
+ * <Carousel
+ *   data={items}
+ *   renderItem={(item) => <View>{item.content}</View>}
+ *   loop
+ *   autoplay
+ *   autoplayInterval={3000}
+ * />
  *
  * // 虚拟渲染（大量数据）
- * <Carousel total={1000}>
- *   {(index) => <Carousel.Item><Text>{index}</Text></Carousel.Item>}
- * </Carousel>
+ * <Carousel
+ *   data={largeDataArray}
+ *   renderItem={(item, index) => <View><Text>{index}: {item}</Text></View>}
+ * />
  * ```
  *
  * @param props - 组件属性
@@ -51,35 +63,43 @@ export const Carousel = props => {
     stuckAtBoundary = true,
     rubberband = true,
     virtualOverscan = 2,
-    total: totalProp,
-    children,
+    data,
+    renderItem,
     style,
     blockNativeResponder = true,
     ref
   } = props;
   const styles = useCarouselStyles();
   const theme = useTheme();
+
+  // 使用 state 存储 layout，使依赖更明确
   const [layout, setLayout] = useState({
     width: 0,
     height: 0
   });
-  const [dragging, setDragging] = useState(false);
-  const [animating, setAnimating] = useState(false);
-  const normalizedSlideSize = useMemo(() => {
-    if (!Number.isFinite(slideSize)) return 100;
-    return clamp(slideSize, 0, 100);
-  }, [slideSize]);
-  const normalizedTrackOffset = useMemo(() => {
+
+  // 分离拖动和动画状态，避免状态冲突
+  const [isDragging, setIsDragging] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // 合并归一化计算，减少 useMemo 调用
+  const {
+    normalizedSlideSize,
+    normalizedTrackOffset
+  } = useMemo(() => {
+    const slideSize_ = Number.isFinite(slideSize) ? clamp(slideSize, 0, 100) : 100;
+    let trackOffset_;
     if (stuckAtBoundary) {
-      return 100 - normalizedSlideSize;
+      trackOffset_ = 100 - slideSize_;
+    } else {
+      trackOffset_ = Number.isFinite(trackOffset) ? clamp(trackOffset, 0, 100 - slideSize_) : 0;
     }
-    if (!Number.isFinite(trackOffset)) return 0;
-    return clamp(trackOffset, 0, 100 - normalizedSlideSize);
-  }, [normalizedSlideSize, trackOffset, stuckAtBoundary]);
-  const total = useMemo(() => {
-    const normalizedDefault = getDefaultTotal(children);
-    return totalProp ?? normalizedDefault;
-  }, [children, totalProp]);
+    return {
+      normalizedSlideSize: slideSize_,
+      normalizedTrackOffset: trackOffset_
+    };
+  }, [slideSize, trackOffset, stuckAtBoundary]);
+  const total = data.length;
   const loopEnabled = loop && total > 1;
 
   // 计算循环播放时需要克隆的前置节点数量
@@ -100,16 +120,22 @@ export const Carousel = props => {
     return Math.max(1, trailingSlides + 1);
   }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
   const extTotal = loopEnabled ? total + clonesBefore + clonesAfter : total;
-  const slidePixels = useMemo(() => {
-    const trackSize = direction === 'horizontal' ? layout.width : layout.height;
-    if (trackSize <= 0) return 0;
-    return trackSize * (normalizedSlideSize / 100);
-  }, [direction, layout.height, layout.width, normalizedSlideSize]);
-  const trackOffsetPixels = useMemo(() => {
+
+  // 合并像素计算，减少重复的 trackSize 获取
+  const {
+    slidePixels,
+    trackOffsetPixels
+  } = useMemo(() => {
     const trackSize = direction === 'horizontal' ? layout.width : layout.height;
-    if (trackSize <= 0) return 0;
-    return trackSize * (normalizedTrackOffset / 100);
-  }, [direction, layout.height, layout.width, normalizedTrackOffset]);
+    if (trackSize <= 0) return {
+      slidePixels: 0,
+      trackOffsetPixels: 0
+    };
+    return {
+      slidePixels: trackSize * (normalizedSlideSize / 100),
+      trackOffsetPixels: trackSize * (normalizedTrackOffset / 100)
+    };
+  }, [direction, layout, normalizedSlideSize, normalizedTrackOffset]);
   const {
     current,
     updateCurrent,
@@ -140,6 +166,14 @@ export const Carousel = props => {
     setPositionImmediate
   } = useCarouselPosition();
 
+  // 状态设置函数
+  const setDragging = useCallback(dragging => {
+    setIsDragging(dragging);
+  }, []);
+  const setAnimating = useCallback(animating => {
+    setIsAnimating(animating);
+  }, []);
+
   // 切换逻辑
   const {
     swipeNext,
@@ -168,7 +202,7 @@ export const Carousel = props => {
     autoplay,
     autoplayInterval,
     total,
-    dragging,
+    dragging: isDragging,
     current,
     swipeNext,
     swipePrev
@@ -192,11 +226,13 @@ export const Carousel = props => {
       height
     } = e.nativeEvent.layout;
     setLayout(prev => {
-      if (prev.width === width && prev.height === height) return prev;
-      return {
-        width,
-        height
-      };
+      if (prev.width !== width || prev.height !== height) {
+        return {
+          width,
+          height
+        };
+      }
+      return prev;
     });
   }, []);
   const panResponder = useCarouselPanResponder({
@@ -231,15 +267,17 @@ export const Carousel = props => {
   }, [direction, position, trackOffsetPixels]);
 
   // 计算虚拟渲染的范围
-  // 注意: extIndexRef 的变化不会触发重新计算，
-  // 通过 dragging 和 animating 状态的变化来触发虚拟范围的更新
+  // 使用 current 状态而不是 extIndexRef，确保虚拟范围与当前索引同步
   const virtualRange = useMemo(() => {
     if (total <= 0 || slidePixels <= 0) {
       return null;
     }
-    const isVirtual = isRenderPropChildren(children) && typeof totalProp === 'number';
-    const effectiveOverscan = isVirtual ? Math.max(virtualOverscan, dragging || animating ? 1 : 0) : virtualOverscan;
-    const currentExtIndex = extIndexRef.current;
+    const isVirtual = total > VIRTUAL_RENDER_THRESHOLD;
+    const isInteracting = isDragging || isAnimating;
+    const effectiveOverscan = isVirtual ? Math.max(virtualOverscan, isInteracting ? 1 : 0) : virtualOverscan;
+
+    // 使用 current 计算 extIndex，确保响应式更新
+    const currentExtIndex = loopEnabled ? current + clonesBefore : current;
     const start = isVirtual ? clamp(currentExtIndex - effectiveOverscan, 0, extTotal - 1) : 0;
     const end = isVirtual ? clamp(currentExtIndex + effectiveOverscan, 0, extTotal - 1) : extTotal - 1;
     return {
@@ -247,87 +285,41 @@ export const Carousel = props => {
       end,
       isVirtual
     };
-  }, [total, slidePixels, children, totalProp, virtualOverscan, dragging, animating, extIndexRef,
-  // 保留以表明依赖关系，虽然不会触发更新
-  extTotal]);
+  }, [total, slidePixels, virtualOverscan, isDragging, isAnimating, current, loopEnabled, clonesBefore, extTotal]);
+  const trackInnerStyle = direction === 'horizontal' ? styles.trackInnerHorizontal : styles.trackInnerVertical;
 
-  // 计算滑块包装器样式
-  const slideWrapperStyle = useMemo(() => {
-    return direction === 'horizontal' ? {
-      width: slidePixels,
-      height: '100%'
-    } : {
-      height: slidePixels,
-      width: '100%'
-    };
-  }, [direction, slidePixels]);
-
-  // 计算虚拟渲染的占位空间样式
-  const spacerStyles = useMemo(() => {
-    if (!virtualRange) return null;
-    const {
-      start,
-      end
-    } = virtualRange;
-    const leadingSize = start * slidePixels;
-    const trailingSize = (extTotal - end - 1) * slidePixels;
-    return {
-      leading: direction === 'horizontal' ? {
-        width: leadingSize
-      } : {
-        height: leadingSize
-      },
-      trailing: direction === 'horizontal' ? {
-        width: trailingSize
-      } : {
-        height: trailingSize
-      },
-      leadingSize,
-      trailingSize
-    };
-  }, [virtualRange, slidePixels, extTotal, direction]);
-  const {
-    renderSlides
-  } = useCarouselSlides({
-    children,
-    total,
-    virtualRange,
-    loopEnabled,
-    clonesBefore,
-    slideWrapperStyle,
-    spacerStyles,
-    slideStyles: styles
-  });
-  const {
-    renderIndicator
-  } = useCarouselIndicator({
-    indicator,
-    indicatorProps,
-    total,
-    current,
-    activeColor: theme.palette.brand7,
-    inactiveColor: theme.palette.fontGray5,
-    styles
-  });
-  const trackInnerStyle = useMemo(() => {
-    return direction === 'horizontal' ? {
-      flexDirection: 'row',
-      height: '100%'
-    } : {
-      flexDirection: 'column',
-      width: '100%'
-    };
-  }, [direction]);
+  // 边界情况处理：空数据
+  if (!data || data.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(View, {
-    style: StyleSheet.flatten([styles.container, style]),
+    style: [styles.container, style],
     children: /*#__PURE__*/_jsxs(View, {
       style: styles.track,
       onLayout: onLayoutTrack,
       ...panResponder?.panHandlers,
       children: [/*#__PURE__*/_jsx(Animated.View, {
-        style: StyleSheet.flatten([styles.trackInner, trackInnerStyle, trackTransformStyle]),
-        children: renderSlides()
-      }), renderIndicator()]
+        style: [styles.trackInner, trackInnerStyle, trackTransformStyle],
+        children: /*#__PURE__*/_jsx(CarouselSlides, {
+          data: data,
+          renderItem: renderItem,
+          total: total,
+          virtualRange: virtualRange,
+          loopEnabled: loopEnabled,
+          clonesBefore: clonesBefore,
+          direction: direction,
+          slidePixels: slidePixels,
+          extTotal: extTotal
+        })
+      }), /*#__PURE__*/_jsx(CarouselIndicator, {
+        indicator: indicator,
+        indicatorProps: indicatorProps,
+        total: total,
+        current: current,
+        activeColor: theme.palette.brand7,
+        inactiveColor: theme.palette.fontGray5,
+        styles: styles
+      })]
     })
   });
 };

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

@@ -2,9 +2,7 @@
 
 export { useCarouselAutoplay } from "./use-carousel-autoplay.js";
 export { useCarouselIndex } from "./use-carousel-index.js";
-export { useCarouselIndicator } from "./use-carousel-indicator.js";
 export { useCarouselLifecycle } from "./use-carousel-lifecycle.js";
 export { useCarouselPanResponder } from "./use-carousel-pan-responder.js";
 export { useCarouselPosition } from "./use-carousel-position.js";
-export { useCarouselSlides } from "./use-carousel-slides.js";
 export { useCarouselSwipe } from "./use-carousel-swipe.js";

package/dist/module/components/base/carousel/hooks/use-carousel-index.js

@@ -3,8 +3,11 @@
 import { useMemoizedFn } from 'ahooks';
 import { clamp } from 'lodash-es';
 import { useCallback, useRef, useState } from 'react';
-import { RUBBERBAND_DAMPING } from "../constants.js";
-import { getBoundaryIndexRange } from "../utils.js";
+
+/**
+ * 橡皮筋效果阻尼系数
+ */
+const RUBBERBAND_DAMPING = 0.35;
 /**
  * 轮播图索引管理 Hook
  *
@@ -89,15 +92,16 @@ export const useCarouselIndex = params => {
     if (loopEnabled) return nextPosition;
     if (slidePixels <= 0) return nextPosition;
     if (total <= 0) return 0;
-    const {
-      min,
-      max
-    } = getBoundaryIndexRange({
-      total,
-      slideSize: normalizedSlideSize,
-      trackOffset: normalizedTrackOffset,
-      stuckAtBoundary
-    });
+
+    // 计算轮播边界索引范围
+    let min = 0;
+    let max = total - 1;
+    if (stuckAtBoundary) {
+      const slideRatio = normalizedSlideSize / 100;
+      const offsetRatio = normalizedTrackOffset / 100;
+      min = 0 + offsetRatio / (slideRatio || 1);
+      max = total - 1 - (1 - slideRatio - offsetRatio) / (slideRatio || 1);
+    }
     const minPos = min * slidePixels;
     const maxPos = max * slidePixels;
     if (nextPosition < minPos) {

package/dist/module/components/base/carousel/hooks/use-carousel-lifecycle.js

@@ -51,12 +51,16 @@ export const useCarouselLifecycle = params => {
     if (slidePixels > 0) {
       setPositionImmediate(getBoundedPosition(extIndex * slidePixels));
     }
-  }, [defaultIndex, getExtIndexFromIndex, getBoundedPosition, setPositionImmediate, slidePixels, total, updateCurrent, reportIndexRef, extIndexRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultIndex, getExtIndexFromIndex, getBoundedPosition, setPositionImmediate, slidePixels, total, updateCurrent
+  // refs 不需要在依赖数组中，它们的引用永远不变
+  ]);
 
   // 响应 slidePixels 变化
   useEffect(() => {
     if (slidePixels <= 0) return;
     const extIndex = extIndexRef.current;
     setPositionImmediate(getBoundedPosition(extIndex * slidePixels));
-  }, [getBoundedPosition, setPositionImmediate, slidePixels, extIndexRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getBoundedPosition, setPositionImmediate, slidePixels]);
 };

package/dist/module/components/base/carousel/hooks/use-carousel-pan-responder.js

@@ -1,9 +1,18 @@
 "use strict";
 
 import { clamp } from 'lodash-es';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { PanResponder } from 'react-native';
-import { GESTURE_MIN_DISTANCE, VELOCITY_PROJECTION_FACTOR } from "../constants.js";
+
+/**
+ * 手势识别最小移动距离（像素）
+ */
+const GESTURE_MIN_DISTANCE = 5;
+
+/**
+ * 速度投影系数（用于计算惯性滑动距离）
+ */
+const VELOCITY_PROJECTION_FACTOR = 2000;
 /**
  * 轮播图手势响应 Hook
  *
@@ -50,6 +59,26 @@ export const useCarouselPanResponder = params => {
     getBoundedPosition,
     swipeToExtIndex
   } = params;
+
+  // 使用 ref 存储回调，减少 PanResponder 重建
+  const callbacksRef = useRef({
+    setDragging,
+    setAnimating,
+    updateCurrent,
+    getIndexFromExtIndex,
+    getBoundedPosition,
+    swipeToExtIndex
+  });
+
+  // 更新回调 ref
+  callbacksRef.current = {
+    setDragging,
+    setAnimating,
+    updateCurrent,
+    getIndexFromExtIndex,
+    getBoundedPosition,
+    swipeToExtIndex
+  };
   return useMemo(() => {
     if (!allowTouchMove) return null;
     if (total <= 1) return null;
@@ -63,8 +92,8 @@ export const useCarouselPanResponder = params => {
     return PanResponder.create({
       onMoveShouldSetPanResponder: shouldSet,
       onPanResponderGrant: () => {
-        setDragging(true);
-        setAnimating(false);
+        callbacksRef.current.setDragging(true);
+        callbacksRef.current.setAnimating(false);
         position.current.stopAnimation();
         startPosition = positionValueRef.current;
       },
@@ -87,15 +116,15 @@ export const useCarouselPanResponder = params => {
             startPosition -= totalPixels;
           }
         }
-        const bounded = getBoundedPosition(nextPosition);
+        const bounded = callbacksRef.current.getBoundedPosition(nextPosition);
         position.current.setValue(bounded);
         positionValueRef.current = bounded;
         const nextExtIndex = clamp(Math.round(bounded / slidePixels), 0, extTotal - 1);
         extIndexRef.current = nextExtIndex;
-        updateCurrent(getIndexFromExtIndex(nextExtIndex));
+        callbacksRef.current.updateCurrent(callbacksRef.current.getIndexFromExtIndex(nextExtIndex));
       },
       onPanResponderRelease: (_evt, gestureState) => {
-        setDragging(false);
+        callbacksRef.current.setDragging(false);
         const velocity = axis === 'x' ? gestureState.vx : gestureState.vy;
         position.current.stopAnimation(value => {
           const baseIndex = value / slidePixels;
@@ -104,15 +133,15 @@ export const useCarouselPanResponder = params => {
           const maxAdj = minAdj + 1;
           const rounded = Math.round(projectedIndex);
           const adjacent = clamp(rounded, minAdj, maxAdj);
-          swipeToExtIndex(adjacent);
+          callbacksRef.current.swipeToExtIndex(adjacent);
         });
       },
       onPanResponderTerminate: () => {
-        setDragging(false);
-        swipeToExtIndex(extIndexRef.current);
+        callbacksRef.current.setDragging(false);
+        callbacksRef.current.swipeToExtIndex(extIndexRef.current);
       },
       onPanResponderTerminationRequest: () => false,
       onShouldBlockNativeResponder: () => blockNativeResponder
     });
-  }, [allowTouchMove, blockNativeResponder, clonesBefore, direction, extTotal, extIndexRef, getBoundedPosition, getIndexFromExtIndex, position, positionValueRef, setAnimating, setDragging, slidePixels, swipeToExtIndex, total, updateCurrent]);
+  }, [allowTouchMove, blockNativeResponder, clonesBefore, direction, extTotal, extIndexRef, position, positionValueRef, slidePixels, total]);
 };

package/dist/module/components/base/carousel/hooks/use-carousel-position.js

@@ -2,7 +2,11 @@
 
 import { useCallback, useRef } from 'react';
 import { Animated, Easing } from 'react-native';
-import { CAROUSEL_ANIMATION_DURATION } from "../constants.js";
+
+/**
+ * 轮播图动画时长（毫秒）
+ */
+const CAROUSEL_ANIMATION_DURATION = 300;
 
 /**
  * 轮播图位置和动画控制 Hook

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

@@ -1,9 +1,5 @@
 "use strict";
 
 import { Carousel as _Carousel } from "./carousel.js";
-import { CarouselItem } from "./carousel-item.js";
 export * from "./carousel.js";
-export * from "./carousel-item.js";
-export const Carousel = Object.assign(_Carousel, {
-  Item: CarouselItem
-});
+export const Carousel = _Carousel;

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

@@ -16,6 +16,18 @@ export const useCarouselStyles = createThemedStyles(theme => ({
     flexGrow: 0,
     flexShrink: 0
   },
+  trackInnerHorizontal: {
+    flexDirection: 'row',
+    height: '100%',
+    flexGrow: 0,
+    flexShrink: 0
+  },
+  trackInnerVertical: {
+    flexDirection: 'column',
+    width: '100%',
+    flexGrow: 0,
+    flexShrink: 0
+  },
   slide: {
     flexGrow: 0,
     flexShrink: 0,

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

@@ -1,68 +1,80 @@
 "use strict";
 
-import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
-import { DatePickerView, 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 } from "./../index.js";
+import { useDatePickerStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DatePicker = ({
   placeholder = '请选择日期',
-  disabled = false,
   formatter = 'YYYY/MM/DD',
-  style,
-  children,
   mode = 'Y-D',
-  title,
-  confirmText,
+  headerTitle,
+  confirmText = '确定',
   ...restProps
 }) => {
-  const [value, setValue] = useControllableValue(restProps, {
-    defaultValue: restProps.defaultValue
-  });
-  const [visible, setVisible] = useState(false);
+  const [draftValue, setDraftValue] = useState();
+  const styles = useDatePickerStyles();
+  const committedValueRef = useRef(new Date());
+  const handleOpen = useCallback(() => {
+    setDraftValue(committedValueRef.current);
+  }, []);
 
   /** 格式化显示文案 */
-  const displayText = useMemo(() => {
-    if (!value) return '';
+  const _renderValue = useMemoizedFn(value => {
+    if (!value) return;
     if (typeof formatter === 'string') {
       return dayjs(value).format(formatter);
     }
     return formatter(value);
-  }, [value, mode, formatter]);
-  const handleOpen = useMemoizedFn(() => {
-    setVisible(true);
-  });
-  const handleChange = useMemoizedFn(date => {
-    setValue(date);
-    setVisible(false);
-  });
-  const handleClose = useMemoizedFn(() => {
-    setVisible(false);
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(PickerTrigger, {
-      displayText: displayText,
+  const _headerTitle = useMemo(() => {
+    if (headerTitle) {
+      return headerTitle;
+    }
+    switch (mode) {
+      case 'Y':
+        return '请选择年';
+      case 'Y-M':
+        return '请选择年月';
+      case 'Y-D':
+        return '请选择年月日';
+      default:
+        return '请选择日期';
+    }
+  }, [mode, headerTitle]);
+  return /*#__PURE__*/_jsxs(Picker, {
+    ...restProps,
+    children: [/*#__PURE__*/_jsx(Picker.Field, {
       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__*/_jsx(DatePickerView, {
-          ...restProps,
-          mode: mode,
-          title: title,
-          confirmText: confirmText,
-          value: value,
-          onChange: handleChange,
-          onClose: handleClose
-        })
-      })
+      renderValue: _renderValue
+    }), /*#__PURE__*/_jsx(Picker.Content, {
+      headerTitle: _headerTitle,
+      onOpen: handleOpen,
+      children: ({
+        onChange,
+        value: contextValue
+      }) => {
+        // 同步 ref：始终保持最新的已提交值
+        committedValueRef.current = contextValue ?? new Date();
+        return /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          style: styles.container,
+          children: [/*#__PURE__*/_jsx(DatePickerView, {
+            mode: mode,
+            value: draftValue,
+            onChange: setDraftValue
+          }), /*#__PURE__*/_jsx(Button, {
+            text: confirmText,
+            size: "large",
+            onPress: () => {
+              onChange?.(draftValue);
+            }
+          })]
+        });
+      }
     })]
   });
 };