fix: autoplay will paused when click

fix #115
dohooo · Jan 24, 2022 · eb21293 · eb21293
1 parent ef211e5
commit eb21293
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 28 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -90,21 +90,25 @@ function Carousel<T>(
         carouselController,
     });
 
-    const scrollViewGestureOnScrollBegin = React.useCallback(() => {
-        pause();
-        onScrollBegin?.();
-    }, [onScrollBegin, pause]);
-
     const _onScrollEnd = React.useCallback(() => {
         computedIndex();
         onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);
     }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);
 
+    const scrollViewGestureOnScrollBegin = React.useCallback(() => {
+        pause();
+        onScrollBegin?.();
+    }, [onScrollBegin, pause]);
+
     const scrollViewGestureOnScrollEnd = React.useCallback(() => {
         start();
         _onScrollEnd();
     }, [_onScrollEnd, start]);
 
+    const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);
+
+    const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);
+
     const goToIndex = React.useCallback(
         (i: number, animated?: boolean) => {
             carouselController.to(i, animated);
@@ -186,6 +190,8 @@ function Carousel<T>(
                     translation={handlerOffsetX}
                     onScrollBegin={scrollViewGestureOnScrollBegin}
                     onScrollEnd={scrollViewGestureOnScrollEnd}
+                    onTouchBegin={scrollViewGestureOnTouchBegin}
+                    onTouchEnd={scrollViewGestureOnTouchEnd}
                 >
                     <Animated.View
                         key={mode}

diff --git a/src/ScrollViewGesture.tsx b/src/ScrollViewGesture.tsx
@@ -25,8 +25,10 @@ type GestureContext = {
 interface Props {
     size: number;
     infinite?: boolean;
-    onScrollEnd?: () => void;
     onScrollBegin?: () => void;
+    onScrollEnd?: () => void;
+    onTouchBegin?: () => void;
+    onTouchEnd?: () => void;
     style?: StyleProp<ViewStyle>;
     translation: Animated.SharedValue<number>;
 }
@@ -45,7 +47,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         },
     } = React.useContext(CTX);
 
-    const { translation, onScrollBegin, onScrollEnd, size } = props;
+    const {
+        translation,
+        size,
+        onScrollBegin,
+        onScrollEnd,
+        onTouchBegin,
+        onTouchEnd,
+    } = props;
 
     const maxPage = data.length;
     const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
@@ -116,22 +125,28 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         ]
     );
 
-    const resetBoundary = React.useCallback(() => {
-        'worklet';
-        const onFinish = (isFinished: boolean) => {
+    const onFinish = React.useCallback(
+        (isFinished: boolean) => {
+            'worklet';
             if (isFinished) {
                 touching.value = false;
                 onScrollEnd && runOnJS(onScrollEnd)();
             }
-        };
-        const activeDecay = () => {
-            touching.value = true;
-            translation.value = withDecay(
-                { velocity: scrollEndVelocity.value },
-                onFinish
-            );
-        };
+        },
+        [onScrollEnd, touching]
+    );
+
+    const activeDecay = React.useCallback(() => {
+        'worklet';
+        touching.value = true;
+        translation.value = withDecay(
+            { velocity: scrollEndVelocity.value },
+            onFinish
+        );
+    }, [onFinish, scrollEndVelocity.value, touching, translation]);
 
+    const resetBoundary = React.useCallback(() => {
+        'worklet';
         if (touching.value) {
             return;
         }
@@ -158,15 +173,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             }
         }
     }, [
-        infinite,
-        touching,
-        _withSpring,
+        touching.value,
         translation,
-        scrollEndTranslation,
-        scrollEndVelocity,
-        onScrollEnd,
         maxPage,
         size,
+        scrollEndTranslation.value,
+        infinite,
+        activeDecay,
+        _withSpring,
     ]);
 
     useAnimatedReaction(
@@ -176,7 +190,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 resetBoundary();
             }
         },
-        [pagingEnabled]
+        [pagingEnabled, resetBoundary]
     );
 
     const panGestureEventHandler = useAnimatedGestureHandler<
@@ -227,15 +241,28 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             },
         },
-        [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]
+        [
+            pagingEnabled,
+            isHorizontal.value,
+            infinite,
+            maxPage,
+            size,
+            enableSnap,
+            onScrollBegin,
+            onScrollEnd,
+        ]
     );
 
     const directionStyle = React.useMemo(() => {
         return vertical ? styles.contentHorizontal : styles.contentVertical;
     }, [vertical]);
 
     return (
-        <Animated.View style={[styles.container, directionStyle, style]}>
+        <Animated.View
+            style={[styles.container, directionStyle, style]}
+            onTouchStart={onTouchBegin}
+            onTouchEnd={onTouchEnd}
+        >
             <PanGestureHandler
                 {...panGestureHandlerProps}
                 onGestureEvent={panGestureEventHandler}

diff --git a/src/hooks/useAutoPlay.ts b/src/hooks/useAutoPlay.ts
@@ -30,9 +30,12 @@ export function useAutoPlay(opts: {
     }, [autoPlayReverse, autoPlayInterval, carouselController]);
 
     const pause = React.useCallback(() => {
+        if (!autoPlay) {
+            return;
+        }
         timer.current && clearInterval(timer.current);
         stopped.current = true;
-    }, []);
+    }, [autoPlay]);
 
     const start = React.useCallback(() => {
         if (!autoPlay) {