@seakoi/native-ui 1.1.0 → 1.1.1

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

@@ -7,38 +7,40 @@ exports.Carousel = void 0;
 var _lodashEs = require("lodash-es");
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _utils = require("./utils.js");
 var _index = require("../../../native-provider/index.js");
-var _index2 = require("./style/index.js");
+var _index2 = require("./hooks/index.js");
+var _index3 = require("./style/index.js");
+var _utils = require("./utils.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 getBoundaryIndexRange = ({
-  total,
-  slideSize,
-  trackOffset,
-  stuckAtBoundary
-}) => {
-  if (total <= 0) return {
-    min: 0,
-    max: 0
-  };
-  if (!stuckAtBoundary) return {
-    min: 0,
-    max: total - 1
-  };
-  const slideRatio = slideSize / 100;
-  const offsetRatio = trackOffset / 100;
-  const min = 0 + offsetRatio / (slideRatio || 1);
-  const max = total - 1 - (1 - slideRatio - offsetRatio) / (slideRatio || 1);
-  return {
-    min,
-    max
-  };
-};
 /**
- * 轮播图
+ * 轮播图组件
+ *
+ * 支持水平/垂直滑动、循环播放、自动轮播、虚拟渲染等功能的高性能轮播组件。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <Carousel>
+ *   <Carousel.Item><View /></Carousel.Item>
+ *   <Carousel.Item><View /></Carousel.Item>
+ * </Carousel>
+ *
+ * // 循环播放和自动轮播
+ * <Carousel loop autoplay autoplayInterval={3000}>
+ *   {items.map(item => <Carousel.Item key={item.id}>{item.content}</Carousel.Item>)}
+ * </Carousel>
+ *
+ * // 虚拟渲染（大量数据）
+ * <Carousel total={1000}>
+ *   {(index) => <Carousel.Item><Text>{index}</Text></Carousel.Item>}
+ * </Carousel>
+ * ```
+ *
+ * @param props - 组件属性
+ * @returns 轮播图组件
  */
-const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+const Carousel = props => {
   const {
     defaultIndex = 0,
     allowTouchMove = true,
@@ -56,9 +58,11 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
     virtualOverscan = 2,
     total: totalProp,
     children,
-    style
+    style,
+    blockNativeResponder = true,
+    ref
   } = props;
-  const styles = (0, _index2.useCarouselStyles)();
+  const styles = (0, _index3.useCarouselStyles)();
   const theme = (0, _index.useTheme)();
   const [layout, setLayout] = (0, _react.useState)({
     width: 0,
@@ -66,9 +70,6 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
   });
   const [dragging, setDragging] = (0, _react.useState)(false);
   const [animating, setAnimating] = (0, _react.useState)(false);
-  const [current, setCurrent] = (0, _react.useState)(0);
-  const position = (0, _react.useRef)(new _reactNative.Animated.Value(0));
-  const positionValueRef = (0, _react.useRef)(0);
   const normalizedSlideSize = (0, _react.useMemo)(() => {
     if (!Number.isFinite(slideSize)) return 100;
     return (0, _lodashEs.clamp)(slideSize, 0, 100);
@@ -85,9 +86,24 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
     return totalProp ?? normalizedDefault;
   }, [children, totalProp]);
   const loopEnabled = loop && total > 1;
+
+  // 计算循环播放时需要克隆的前置节点数量
   // 若是非全屏的轮播项，则在循环播放开启的情况下，则会在下一轮展示第一项时看见下一项为空白（或闪烁），这需要额外渲染更多的项（与offset、slideSize相关）
-  const clonesBefore = loopEnabled ? Math.max(1, normalizedSlideSize > 0 ? Math.ceil(normalizedTrackOffset / normalizedSlideSize) + 1 : 1) : 0;
-  const clonesAfter = loopEnabled ? Math.max(1, normalizedSlideSize > 0 ? Math.ceil((100 - normalizedTrackOffset - normalizedSlideSize) / normalizedSlideSize) + 1 : 1) : 0;
+  const clonesBefore = (0, _react.useMemo)(() => {
+    if (!loopEnabled) return 0;
+    if (normalizedSlideSize <= 0) return 1;
+    const offsetSlides = Math.ceil(normalizedTrackOffset / normalizedSlideSize);
+    return Math.max(1, offsetSlides + 1);
+  }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
+
+  // 计算循环播放时需要克隆的后置节点数量
+  const clonesAfter = (0, _react.useMemo)(() => {
+    if (!loopEnabled) return 0;
+    if (normalizedSlideSize <= 0) return 1;
+    const remainingSpace = 100 - normalizedTrackOffset - normalizedSlideSize;
+    const trailingSlides = Math.ceil(remainingSpace / normalizedSlideSize);
+    return Math.max(1, trailingSlides + 1);
+  }, [loopEnabled, normalizedSlideSize, normalizedTrackOffset]);
   const extTotal = loopEnabled ? total + clonesBefore + clonesAfter : total;
   const slidePixels = (0, _react.useMemo)(() => {
     const trackSize = direction === 'horizontal' ? layout.width : layout.height;
@@ -99,205 +115,82 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
     if (trackSize <= 0) return 0;
     return trackSize * (normalizedTrackOffset / 100);
   }, [direction, layout.height, layout.width, normalizedTrackOffset]);
-  const extIndexRef = (0, _react.useRef)(0);
-  const reportIndexRef = (0, _react.useRef)(null);
-  const staticSlides = (0, _react.useMemo)(() => {
-    if ((0, _utils.isRenderPropChildren)(children)) return [];
-    return (0, _utils.normalizeChildren)(children, total);
-  }, [children, total]);
-  const updateCurrent = (0, _react.useCallback)(next => {
-    const normalized = total > 0 ? (0, _lodashEs.clamp)(next, 0, total - 1) : 0;
-    setCurrent(normalized);
-  }, [total]);
-  const maybeReportIndex = (0, _react.useCallback)(index => {
-    if (!onIndexChange) return;
-    if (reportIndexRef.current === index) return;
-    reportIndexRef.current = index;
-    onIndexChange(index);
-  }, [onIndexChange]);
-  const getExtIndexFromIndex = (0, _react.useCallback)(index => {
-    if (!loopEnabled) return index;
-    return (0, _lodashEs.clamp)(index, 0, total - 1) + clonesBefore;
-  }, [clonesBefore, loopEnabled, total]);
-  const getIndexFromExtIndex = (0, _react.useCallback)(extIndex => {
-    if (!loopEnabled) return (0, _lodashEs.clamp)(extIndex, 0, total - 1);
-    if (extIndex < clonesBefore) {
-      return ((extIndex - clonesBefore) % total + total) % total;
-    }
-    if (extIndex >= clonesBefore + total) {
-      return (extIndex - clonesBefore - total) % total;
-    }
-    return extIndex - clonesBefore;
-  }, [clonesBefore, loopEnabled, total]);
-  const getTargetExtIndexForIndex = (0, _react.useCallback)(targetIndex => {
-    if (!loopEnabled) return (0, _lodashEs.clamp)(targetIndex, 0, total - 1);
-    const currentExt = extIndexRef.current;
-    const normalizedTarget = (0, _lodashEs.clamp)(targetIndex, 0, total - 1);
-    const targetExt = normalizedTarget + clonesBefore;
-    if (currentExt === clonesBefore && normalizedTarget === total - 1) return clonesBefore - 1;
-    if (currentExt === clonesBefore + total - 1 && normalizedTarget === 0) return clonesBefore + total;
-    return targetExt;
-  }, [clonesBefore, loopEnabled, total]);
-  const getBoundedPosition = (0, _react.useCallback)(nextPosition => {
-    if (loopEnabled) return nextPosition;
-    if (slidePixels <= 0) return nextPosition;
-    if (total <= 0) return 0;
-    const {
-      min,
-      max
-    } = getBoundaryIndexRange({
-      total,
-      slideSize: normalizedSlideSize,
-      trackOffset: normalizedTrackOffset,
-      stuckAtBoundary
-    });
-    const minPos = min * slidePixels;
-    const maxPos = max * slidePixels;
-    if (nextPosition < minPos) {
-      if (!rubberband) return minPos;
-      return minPos - (minPos - nextPosition) * 0.35;
-    }
-    if (nextPosition > maxPos) {
-      if (!rubberband) return maxPos;
-      return maxPos + (nextPosition - maxPos) * 0.35;
-    }
-    return nextPosition;
-  }, [loopEnabled, rubberband, slidePixels, normalizedSlideSize, stuckAtBoundary, total, normalizedTrackOffset]);
-  const animateTo = (0, _react.useCallback)((toValue, onFinished) => {
-    const listenerId = position.current.addListener(({
-      value
-    }) => {
-      positionValueRef.current = value;
-    });
-    _reactNative.Animated.timing(position.current, {
-      toValue,
-      duration: 300,
-      easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    }).start(({
-      finished
-    }) => {
-      position.current.removeListener(listenerId);
-      if (finished) {
-        positionValueRef.current = toValue;
-        onFinished?.();
-      }
-    });
-  }, []);
-  const setPositionImmediate = (0, _react.useCallback)(toValue => {
-    position.current.stopAnimation();
-    position.current.setValue(toValue);
-    positionValueRef.current = toValue;
-  }, []);
-  const finalizeLoopJumpIfNeeded = (0, _react.useCallback)(() => {
-    if (!loopEnabled) return;
-    const currentExt = extIndexRef.current;
-    if (currentExt < clonesBefore) {
-      const targetExt = currentExt + total;
-      extIndexRef.current = targetExt;
-      if (slidePixels > 0) setPositionImmediate(targetExt * slidePixels);
-      return;
-    }
-    if (currentExt >= clonesBefore + total) {
-      const targetExt = currentExt - total;
-      extIndexRef.current = targetExt;
-      if (slidePixels > 0) setPositionImmediate(targetExt * slidePixels);
-    }
-  }, [clonesBefore, loopEnabled, setPositionImmediate, slidePixels, total]);
-  const swipeToExtIndex = (0, _react.useCallback)(targetExtIndex => {
-    if (total <= 0) return;
-    if (slidePixels <= 0) {
-      extIndexRef.current = (0, _lodashEs.clamp)(targetExtIndex, 0, extTotal - 1);
-      setAnimating(false);
-      updateCurrent(getIndexFromExtIndex(extIndexRef.current));
-      return;
-    }
-    const boundedExtIndex = (0, _lodashEs.clamp)(targetExtIndex, 0, extTotal - 1);
-    extIndexRef.current = boundedExtIndex;
-    const nextIndex = getIndexFromExtIndex(boundedExtIndex);
-    updateCurrent(nextIndex);
-    const rawPosition = boundedExtIndex * slidePixels;
-    const toPosition = getBoundedPosition(rawPosition);
-    setAnimating(true);
-    animateTo(toPosition, () => {
-      finalizeLoopJumpIfNeeded();
-      const normalizedIndex = getIndexFromExtIndex(extIndexRef.current);
-      updateCurrent(normalizedIndex);
-      maybeReportIndex(normalizedIndex);
-      setAnimating(false);
-    });
-  }, [animateTo, extTotal, finalizeLoopJumpIfNeeded, getBoundedPosition, getIndexFromExtIndex, maybeReportIndex, slidePixels, total, updateCurrent]);
-  const swipeTo = (0, _react.useCallback)(index => {
-    if (total <= 0) return;
-    const targetIndex = (0, _lodashEs.clamp)(Math.round(index), 0, total - 1);
-    const targetExtIndex = getTargetExtIndexForIndex(targetIndex);
-    swipeToExtIndex(targetExtIndex);
-  }, [getTargetExtIndexForIndex, swipeToExtIndex, total]);
-  const swipeNext = (0, _react.useCallback)(() => {
-    if (total <= 1) return;
-    let currentExt = extIndexRef.current;
-    // 若当前处于 after-clone 区域（快速连击导致 finalizeLoopJumpIfNeeded 尚未执行），
-    // 立即将位置平移回真实 item 区域（视觉内容相同，不可感知），再继续前进
-    if (clonesBefore > 0 && currentExt >= clonesBefore + total) {
-      currentExt -= total;
-      extIndexRef.current = currentExt;
-      if (slidePixels > 0) setPositionImmediate(currentExt * slidePixels);
-    }
-    swipeToExtIndex(currentExt + 1);
-  }, [clonesBefore, setPositionImmediate, slidePixels, swipeToExtIndex, total]);
-  const swipePrev = (0, _react.useCallback)(() => {
-    if (total <= 1) return;
-    let currentExt = extIndexRef.current;
-    // 若当前处于 before-clone 区域（快速连击导致 finalizeLoopJumpIfNeeded 尚未执行），
-    // 立即将位置平移回真实 item 区域（视觉内容相同，不可感知），再继续后退
-    if (clonesBefore > 0 && currentExt < clonesBefore) {
-      currentExt += total;
-      extIndexRef.current = currentExt;
-      if (slidePixels > 0) setPositionImmediate(currentExt * slidePixels);
-    }
-    swipeToExtIndex(currentExt - 1);
-  }, [clonesBefore, setPositionImmediate, slidePixels, swipeToExtIndex, total]);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    swipeTo,
+  const {
+    current,
+    updateCurrent,
+    extIndexRef,
+    reportIndexRef,
+    maybeReportIndex,
+    getExtIndexFromIndex,
+    getIndexFromExtIndex,
+    getTargetExtIndexForIndex,
+    getBoundedPosition
+  } = (0, _index2.useCarouselIndex)({
+    total,
+    loopEnabled,
+    clonesBefore,
+    slidePixels,
+    normalizedSlideSize,
+    normalizedTrackOffset,
+    stuckAtBoundary,
+    rubberband,
+    onIndexChange
+  });
+
+  // 位置和动画控制
+  const {
+    position,
+    positionValueRef,
+    animateTo,
+    setPositionImmediate
+  } = (0, _index2.useCarouselPosition)();
+
+  // 切换逻辑
+  const {
+    swipeNext,
+    swipePrev,
+    swipeToExtIndex
+  } = (0, _index2.useCarouselSwipe)({
+    total,
+    loopEnabled,
+    clonesBefore,
+    slidePixels,
+    extTotal,
+    extIndexRef,
+    getBoundedPosition,
+    getIndexFromExtIndex,
+    getTargetExtIndexForIndex,
+    updateCurrent,
+    maybeReportIndex,
+    setAnimating,
+    animateTo,
+    setPositionImmediate,
+    ref
+  });
+
+  // 自动轮播
+  (0, _index2.useCarouselAutoplay)({
+    autoplay,
+    autoplayInterval,
+    total,
+    dragging,
+    current,
     swipeNext,
     swipePrev
-  }), [swipeNext, swipePrev, swipeTo]);
-  (0, _react.useEffect)(() => {
-    if (total <= 0) {
-      updateCurrent(0);
-      reportIndexRef.current = null;
-      extIndexRef.current = 0;
-      setPositionImmediate(0);
-      return;
-    }
-    const normalizedDefault = (0, _lodashEs.clamp)(Math.round(defaultIndex), 0, total - 1);
-    updateCurrent(normalizedDefault);
-    reportIndexRef.current = normalizedDefault;
-    const extIndex = getExtIndexFromIndex(normalizedDefault);
-    extIndexRef.current = extIndex;
-    if (slidePixels > 0) {
-      setPositionImmediate(getBoundedPosition(extIndex * slidePixels));
-    }
-  }, [defaultIndex, getExtIndexFromIndex, getBoundedPosition, setPositionImmediate, slidePixels, total, updateCurrent]);
-  (0, _react.useEffect)(() => {
-    if (slidePixels <= 0) return;
-    const extIndex = extIndexRef.current;
-    setPositionImmediate(getBoundedPosition(extIndex * slidePixels));
-  }, [getBoundedPosition, setPositionImmediate, slidePixels]);
+  });
 
-  // 每当 current 变化时，若允许自动轮播 且 开启了自动轮播，则执行轮播
-  (0, _react.useEffect)(() => {
-    if (!autoplay) return;
-    if (total <= 1) return;
-    if (dragging) return;
-    if (autoplayInterval <= 0) return;
-    const timer = setTimeout(() => {
-      if (autoplay === 'reverse') swipePrev();else swipeNext();
-    }, autoplayInterval);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [autoplay, autoplayInterval, dragging, swipeNext, swipePrev, total, current]);
+  // 生命周期管理
+  (0, _index2.useCarouselLifecycle)({
+    total,
+    defaultIndex,
+    slidePixels,
+    extIndexRef,
+    reportIndexRef,
+    getExtIndexFromIndex,
+    getBoundedPosition,
+    updateCurrent,
+    setPositionImmediate
+  });
   const onLayoutTrack = (0, _react.useCallback)(e => {
     const {
       width,
@@ -311,74 +204,24 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
       };
     });
   }, []);
-  const panResponder = (0, _react.useMemo)(() => {
-    if (!allowTouchMove) return null;
-    if (total <= 1) return null;
-    if (slidePixels <= 0) return null;
-    let startPosition = 0;
-    const axis = direction === 'horizontal' ? 'x' : 'y';
-    const shouldSet = (_, gestureState) => {
-      const primary = axis === 'x' ? gestureState.dx : gestureState.dy;
-      // const secondary = axis === 'x' ? gestureState.dy : gestureState.dx;
-      if (Math.abs(primary) < 5) return false;
-      // return Math.abs(primary) >= Math.abs(secondary);
-      return true;
-    };
-    return _reactNative.PanResponder.create({
-      onMoveShouldSetPanResponder: shouldSet,
-      onPanResponderGrant: () => {
-        setDragging(true);
-        setAnimating(false);
-        position.current.stopAnimation();
-        startPosition = positionValueRef.current;
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        const delta = axis === 'x' ? gestureState.dx : gestureState.dy;
-        let nextPosition = startPosition - delta;
-
-        // loop 开启时，拖动到最外层有效克隆中心之外则循环偏移，保证视口内始终有内容
-        // minPos/maxPos 是 outermost before/after clone 的中心位置，由 clonesBefore 公式保证此范围内视口始终被覆盖
-        if (extTotal > total && slidePixels > 0) {
-          const totalPixels = total * slidePixels;
-          const minPos = (clonesBefore - 1) * slidePixels;
-          const maxPos = (clonesBefore + total) * slidePixels;
-          while (nextPosition < minPos) {
-            nextPosition += totalPixels;
-            startPosition += totalPixels;
-          }
-          while (nextPosition > maxPos) {
-            nextPosition -= totalPixels;
-            startPosition -= totalPixels;
-          }
-        }
-        const bounded = getBoundedPosition(nextPosition);
-        position.current.setValue(bounded);
-        positionValueRef.current = bounded;
-        const nextExtIndex = (0, _lodashEs.clamp)(Math.round(bounded / slidePixels), 0, extTotal - 1);
-        extIndexRef.current = nextExtIndex;
-        updateCurrent(getIndexFromExtIndex(nextExtIndex));
-      },
-      onPanResponderRelease: (_evt, gestureState) => {
-        setDragging(false);
-        const velocity = axis === 'x' ? gestureState.vx : gestureState.vy;
-        position.current.stopAnimation(value => {
-          const baseIndex = value / slidePixels;
-          const projectedIndex = (value - velocity * 2000) / slidePixels;
-          const minAdj = Math.floor(baseIndex);
-          const maxAdj = minAdj + 1;
-          const rounded = Math.round(projectedIndex);
-          const adjacent = (0, _lodashEs.clamp)(rounded, minAdj, maxAdj);
-          swipeToExtIndex(adjacent);
-        });
-      },
-      onPanResponderTerminate: () => {
-        setDragging(false);
-        swipeToExtIndex(extIndexRef.current);
-      },
-      onPanResponderTerminationRequest: () => false,
-      onShouldBlockNativeResponder: () => true
-    });
-  }, [allowTouchMove, clonesBefore, direction, extTotal, getBoundedPosition, getIndexFromExtIndex, slidePixels, swipeToExtIndex, total, updateCurrent]);
+  const panResponder = (0, _index2.useCarouselPanResponder)({
+    allowTouchMove,
+    total,
+    slidePixels,
+    direction,
+    extTotal,
+    clonesBefore,
+    blockNativeResponder,
+    position,
+    positionValueRef,
+    extIndexRef,
+    setDragging,
+    setAnimating,
+    updateCurrent,
+    getIndexFromExtIndex,
+    getBoundedPosition,
+    swipeToExtIndex
+  });
   const trackTransformStyle = (0, _react.useMemo)(() => {
     const translate = _reactNative.Animated.add(_reactNative.Animated.multiply(position.current, -1), trackOffsetPixels);
     return direction === 'horizontal' ? {
@@ -390,80 +233,87 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
         translateY: translate
       }]
     };
-  }, [direction, trackOffsetPixels]);
-  const renderSlides = (0, _react.useCallback)(() => {
-    if (total <= 0) return null;
-    if (slidePixels <= 0) return null;
+  }, [direction, position, trackOffsetPixels]);
+
+  // 计算虚拟渲染的范围
+  // 注意: extIndexRef 的变化不会触发重新计算，
+  // 通过 dragging 和 animating 状态的变化来触发虚拟范围的更新
+  const virtualRange = (0, _react.useMemo)(() => {
+    if (total <= 0 || slidePixels <= 0) {
+      return null;
+    }
     const isVirtual = (0, _utils.isRenderPropChildren)(children) && typeof totalProp === 'number';
     const effectiveOverscan = isVirtual ? Math.max(virtualOverscan, dragging || animating ? 1 : 0) : virtualOverscan;
     const currentExtIndex = extIndexRef.current;
     const start = isVirtual ? (0, _lodashEs.clamp)(currentExtIndex - effectiveOverscan, 0, extTotal - 1) : 0;
     const end = isVirtual ? (0, _lodashEs.clamp)(currentExtIndex + effectiveOverscan, 0, extTotal - 1) : extTotal - 1;
-    const leadingSize = start * slidePixels;
-    const trailingSize = (extTotal - end - 1) * slidePixels;
-    const leadSpacerStyle = direction === 'horizontal' ? {
-      width: leadingSize
-    } : {
-      height: leadingSize
-    };
-    const trailSpacerStyle = direction === 'horizontal' ? {
-      width: trailingSize
-    } : {
-      height: trailingSize
+    return {
+      start,
+      end,
+      isVirtual
     };
-    const slideWrapperBaseStyle = direction === 'horizontal' ? {
+  }, [total, slidePixels, children, totalProp, virtualOverscan, dragging, animating, extIndexRef,
+  // 保留以表明依赖关系，虽然不会触发更新
+  extTotal]);
+
+  // 计算滑块包装器样式
+  const slideWrapperStyle = (0, _react.useMemo)(() => {
+    return direction === 'horizontal' ? {
       width: slidePixels,
       height: '100%'
     } : {
       height: slidePixels,
       width: '100%'
     };
-    const getElementForExtIndex = extIndex => {
-      const logicalIndex = loopEnabled ? getIndexFromExtIndex(extIndex) : (0, _lodashEs.clamp)(extIndex, 0, total - 1);
-      if ((0, _utils.isRenderPropChildren)(children)) return children(logicalIndex);
-      return staticSlides[logicalIndex];
+  }, [direction, slidePixels]);
+
+  // 计算虚拟渲染的占位空间样式
+  const spacerStyles = (0, _react.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
     };
-    const slideElements = [];
-    for (let extIndex = start; extIndex <= end; extIndex += 1) {
-      const element = getElementForExtIndex(extIndex);
-      if (!element) continue;
-      slideElements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.slide, slideWrapperBaseStyle],
-        children: element
-      }, extIndex));
-    }
-    const leadSpacer = isVirtual && leadingSize > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: leadSpacerStyle
-    }) : null;
-    const trailSpacer = isVirtual && trailingSize > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: trailSpacerStyle
-    }) : null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [leadSpacer, slideElements, trailSpacer]
-    });
-  }, [children, direction, extTotal, getIndexFromExtIndex, dragging, animating, loopEnabled, slidePixels, staticSlides, styles.slide, total, totalProp, virtualOverscan]);
-  const renderIndicator = (0, _react.useCallback)(() => {
-    if (indicator === false) return null;
-    if (total <= 1) return null;
-    if (typeof indicator === 'function') {
-      return indicator(total, current);
-    }
-    const activeColor = indicatorProps?.color ?? theme.palette.brand7;
-    const inactiveColor = theme.palette.fontGray5;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: _reactNative.StyleSheet.flatten([styles.indicatorContainer, indicatorProps?.style]),
-      children: Array.from({
-        length: total
-      }, (_, i) => {
-        const isActive = i === current;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: _reactNative.StyleSheet.flatten([styles.indicatorDot, {
-            backgroundColor: isActive ? activeColor : inactiveColor
-          }, isActive && styles.indicatorDotActive])
-        }, i);
-      })
-    });
-  }, [current, indicator, indicatorProps?.color, indicatorProps?.style, styles.indicatorContainer, styles.indicatorDot, styles.indicatorDotActive, theme.palette.brand7, theme.palette.fontGray5, total]);
+  }, [virtualRange, slidePixels, extTotal, direction]);
+  const {
+    renderSlides
+  } = (0, _index2.useCarouselSlides)({
+    children,
+    total,
+    virtualRange,
+    loopEnabled,
+    clonesBefore,
+    slideWrapperStyle,
+    spacerStyles,
+    slideStyles: styles
+  });
+  const {
+    renderIndicator
+  } = (0, _index2.useCarouselIndicator)({
+    indicator,
+    indicatorProps,
+    total,
+    current,
+    activeColor: theme.palette.brand7,
+    inactiveColor: theme.palette.fontGray5,
+    styles
+  });
   const trackInnerStyle = (0, _react.useMemo)(() => {
     return direction === 'horizontal' ? {
       flexDirection: 'row',
@@ -485,5 +335,5 @@ const Carousel = exports.Carousel = /*#__PURE__*/(0, _react.forwardRef)((props,
       }), renderIndicator()]
     })
   });
-});
-Carousel.displayName = 'Carousel';
+};
+exports.Carousel = Carousel;

package/dist/commonjs/components/base/carousel/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VELOCITY_PROJECTION_FACTOR = exports.RUBBERBAND_DAMPING = exports.GESTURE_MIN_DISTANCE = exports.CAROUSEL_ANIMATION_DURATION = void 0;
+/**
+ * 轮播图动画时长（毫秒）
+ */
+const CAROUSEL_ANIMATION_DURATION = exports.CAROUSEL_ANIMATION_DURATION = 300;
+
+/**
+ * 橡皮筋效果阻尼系数
+ */
+const RUBBERBAND_DAMPING = exports.RUBBERBAND_DAMPING = 0.35;
+
+/**
+ * 手势识别最小移动距离（像素）
+ */
+const GESTURE_MIN_DISTANCE = exports.GESTURE_MIN_DISTANCE = 5;
+
+/**
+ * 速度投影系数（用于计算惯性滑动距离）
+ */
+const VELOCITY_PROJECTION_FACTOR = exports.VELOCITY_PROJECTION_FACTOR = 2000;