fix: fix onSnapToItem no call when auto playing

dohooo · Sep 30, 2021 · 4953b98 · 4953b98
1 parent 7e00489
commit 4953b98
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 50 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -150,6 +150,8 @@ function Carousel<T extends unknown = any>(
         lockController,
         timingConfig,
         disable: !data.length,
+        onNext: (isFinished) => isFinished && callComputedIndex(),
+        onPrev: (isFinished) => isFinished && callComputedIndex(),
     });
     useAutoPlay({
         autoPlay,
@@ -193,12 +195,12 @@ function Carousel<T extends unknown = any>(
     );
 
     const next = React.useCallback(() => {
-        return carouselController.next(callComputedIndex);
-    }, [carouselController, callComputedIndex]);
+        return carouselController.next();
+    }, [carouselController]);
 
     const prev = React.useCallback(() => {
-        return carouselController.prev(callComputedIndex);
-    }, [carouselController, callComputedIndex]);
+        return carouselController.prev();
+    }, [carouselController]);
 
     const getCurrentIndex = React.useCallback(() => {
         return index.value;

diff --git a/src/useCarouselController.tsx b/src/useCarouselController.tsx
@@ -9,11 +9,13 @@ interface IOpts {
     lockController: ILockController;
     timingConfig: Animated.WithTimingConfig;
     disable?: boolean;
+    onPrev?: (isFinished: boolean) => void;
+    onNext?: (isFinished: boolean) => void;
 }
 
 export interface ICarouselController {
-    prev: (callback?: (isFinished: boolean) => void) => void;
-    next: (callback?: (isFinished: boolean) => void) => void;
+    prev: () => void;
+    next: () => void;
 }
 
 export function useCarouselController(opts: IOpts): ICarouselController {
@@ -23,6 +25,8 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         timingConfig,
         lockController,
         disable = false,
+        onPrev,
+        onNext,
     } = opts;
 
     const closeLock = React.useCallback(
@@ -34,53 +38,49 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         [lockController]
     );
 
-    const next = React.useCallback(
-        (callback?: (isFinished: boolean) => void) => {
-            if (disable) return;
-            if (lockController.isLock()) return;
-            lockController.lock();
-            handlerOffsetX.value = withTiming(
-                handlerOffsetX.value - width,
-                timingConfig,
-                (isFinished: boolean) => {
-                    !!callback && runOnJS(callback)(isFinished);
-                    runOnJS(closeLock)(isFinished);
-                }
-            );
-        },
-        [
-            width,
-            lockController,
+    const next = React.useCallback(() => {
+        if (disable) return;
+        if (lockController.isLock()) return;
+        lockController.lock();
+        handlerOffsetX.value = withTiming(
+            handlerOffsetX.value - width,
             timingConfig,
-            closeLock,
-            handlerOffsetX,
-            disable,
-        ]
-    );
+            (isFinished: boolean) => {
+                !!onNext && runOnJS(onNext)(isFinished);
+                runOnJS(closeLock)(isFinished);
+            }
+        );
+    }, [
+        onNext,
+        width,
+        lockController,
+        timingConfig,
+        closeLock,
+        handlerOffsetX,
+        disable,
+    ]);
 
-    const prev = React.useCallback(
-        (callback?: (isFinished: boolean) => void) => {
-            if (disable) return;
-            if (lockController.isLock()) return;
-            lockController.lock();
-            handlerOffsetX.value = withTiming(
-                handlerOffsetX.value + width,
-                timingConfig,
-                (isFinished: boolean) => {
-                    !!callback && runOnJS(callback)(isFinished);
-                    runOnJS(closeLock)(isFinished);
-                }
-            );
-        },
-        [
-            width,
-            lockController,
+    const prev = React.useCallback(() => {
+        if (disable) return;
+        if (lockController.isLock()) return;
+        lockController.lock();
+        handlerOffsetX.value = withTiming(
+            handlerOffsetX.value + width,
             timingConfig,
-            closeLock,
-            handlerOffsetX,
-            disable,
-        ]
-    );
+            (isFinished: boolean) => {
+                !!onPrev && runOnJS(onPrev)(isFinished);
+                runOnJS(closeLock)(isFinished);
+            }
+        );
+    }, [
+        onPrev,
+        width,
+        lockController,
+        timingConfig,
+        closeLock,
+        handlerOffsetX,
+        disable,
+    ]);
 
     return {
         next,