@momo-kits/carousel 0.160.1-beta.10 → 0.160.1-beta.10-test.2

package/index.tsx

@@ -361,6 +361,10 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       const realIndex = getRealIndex(index);
 
       if (realIndex !== currentIndexRef.current) {
+        // eslint-disable-next-line no-console
+        console.log(
+          `[Carousel] SCROLL idx=${index} real=${realIndex} offsetX=${offsetX.toFixed(1)} layoutW=${layoutWidth.toFixed(1)} contentW=${contentWidth.toFixed(1)} itemWidth=${itemWidth.toFixed(1)} count=${dataWithClones.length}`
+        );
         currentIndexRef.current = realIndex;
         setCurrentIndex(realIndex);
 
@@ -369,7 +373,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         }
       }
     },
-    [resolveIndex, getRealIndex, onScrollIndexChanged]
+    [resolveIndex, getRealIndex, onScrollIndexChanged, itemWidth, dataWithClones.length]
   );
 
   const handleMomentumScrollEnd = useCallback(
@@ -384,8 +388,23 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       );
       const realIndex = getRealIndex(index);
 
-      currentIndexRef.current = realIndex;
-      setCurrentIndex(realIndex);
+      // eslint-disable-next-line no-console
+      console.log(
+        `[Carousel] MOMENTUM_END idx=${index} real=${realIndex} offsetX=${offsetX.toFixed(1)} layoutW=${layoutMeasurement.width.toFixed(1)} contentW=${contentSize.width.toFixed(1)} itemWidth=${itemWidth.toFixed(1)} count=${dataWithClones.length}`
+      );
+
+      // Report the final resting index here as well. The reanimated scroll
+      // handler isn't guaranteed to deliver the last momentum frame to JS in
+      // every runtime (e.g. miniapp hosts), so relying on handleScroll alone
+      // can leave onScrollIndexChanged stuck one item short of the end.
+      if (realIndex !== currentIndexRef.current) {
+        currentIndexRef.current = realIndex;
+        setCurrentIndex(realIndex);
+
+        if (onScrollIndexChanged) {
+          onScrollIndexChanged(realIndex);
+        }
+      }
 
       if (onSnapToItem) {
         onSnapToItem(realIndex);
@@ -397,7 +416,38 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         onMomentumScrollEndProp(event);
       }
     },
-    [resolveIndex, getRealIndex, onSnapToItem, handleLoopReposition, onMomentumScrollEndProp]
+    [resolveIndex, getRealIndex, onScrollIndexChanged, onSnapToItem, handleLoopReposition, onMomentumScrollEndProp, itemWidth, dataWithClones.length]
+  );
+
+  const handleScrollEndDrag = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      // Fallback for a drag released without enough velocity to fire a momentum
+      // scroll: report the resting index so onScrollIndexChanged isn't left
+      // stuck one item short of the end.
+      const { contentOffset, layoutMeasurement, contentSize } =
+        event.nativeEvent;
+      const index = resolveIndex(
+        contentOffset.x,
+        layoutMeasurement.width,
+        contentSize.width
+      );
+      const realIndex = getRealIndex(index);
+
+      // eslint-disable-next-line no-console
+      console.log(
+        `[Carousel] DRAG_END idx=${index} real=${realIndex} offsetX=${contentOffset.x.toFixed(1)} layoutW=${layoutMeasurement.width.toFixed(1)} contentW=${contentSize.width.toFixed(1)} itemWidth=${itemWidth.toFixed(1)} count=${dataWithClones.length}`
+      );
+
+      if (realIndex !== currentIndexRef.current) {
+        currentIndexRef.current = realIndex;
+        setCurrentIndex(realIndex);
+
+        if (onScrollIndexChanged) {
+          onScrollIndexChanged(realIndex);
+        }
+      }
+    },
+    [resolveIndex, getRealIndex, onScrollIndexChanged, itemWidth, dataWithClones.length]
   );
 
   const handleTouchStart = useCallback(
@@ -427,6 +477,10 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const { width } = event.nativeEvent.layout;
+      // eslint-disable-next-line no-console
+      console.log(
+        `[Carousel] LAYOUT width=${width.toFixed(1)} window=${viewportWidth.toFixed(1)} full=${full}`
+      );
       containerWidthRef.current = width;
       setContainerWidth(width);
       setIsLayoutReady(true);
@@ -435,7 +489,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         onLayoutProp(event);
       }
     },
-    [onLayoutProp]
+    [onLayoutProp, full]
   );
 
   const getItemLayout = useCallback(
@@ -581,6 +635,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         scrollEventThrottle={16}
         onScroll={onScrollEvent}
         onMomentumScrollEnd={handleMomentumScrollEnd}
+        onScrollEndDrag={handleScrollEndDrag}
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
         snapToOffsets={snapOffsets}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.160.1-beta.10",
+    "version": "0.160.1-beta.10-test.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {