From 4953b9805beb5a591ee0b261c81c7dd623337a75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= <zhaodonghao586@outlook.com>
Date: Thu, 30 Sep 2021 17:10:48 +0800
Subject: [PATCH] fix: fix onSnapToItem no call when auto playing

---
 src/Carousel.tsx              | 10 ++--
 src/useCarouselController.tsx | 92 +++++++++++++++++------------------
 2 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
index 66239127..52a3e086 100644
--- 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
index bf045c8d..ef190368 100644
--- 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,