feat: support pagingEnabled enableSnap

#65
dohooo · Jan 2, 2022 · 000658e · 000658e
1 parent 0957502
commit 000658e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 27 deletions.
diff --git a/example/src/stack/index.tsx b/example/src/stack/index.tsx
@@ -18,7 +18,7 @@ function Index() {
         'left'
     );
     const [pagingEnabled, setPagingEnabled] = React.useState<boolean>(true);
-    const [snapToItem, setSnapToItem] = React.useState<boolean>(true);
+    const [enableSnap, setEnableSnap] = React.useState<boolean>(true);
     const [loop, setLoop] = React.useState<boolean>(true);
 
     const animationConfig = React.useMemo<StackAnimationConfig>(() => {
@@ -48,6 +48,8 @@ function Index() {
                     alignSelf: 'center',
                     justifyContent: 'center',
                 }}
+                pagingEnabled={pagingEnabled}
+                enableSnap={enableSnap}
                 mode="stack"
                 autoPlay
                 autoPlayInterval={2000}
@@ -90,10 +92,10 @@ function Index() {
             </SButton>
             <SButton
                 onPress={() => {
-                    setSnapToItem(!snapToItem);
+                    setEnableSnap(!enableSnap);
                 }}
             >
-                {`snapToItem:${snapToItem}`}
+                {`enableSnap:${enableSnap}`}
             </SButton>
         </View>
     );

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -39,6 +39,8 @@ function Carousel<T>(
         onSnapToItem,
         onScrollBegin,
         onProgressChange,
+        pagingEnabled = true,
+        enableSnap = true,
     } = props;
 
     let animationConfig: StackAnimationConfig | undefined;
@@ -273,7 +275,8 @@ function Carousel<T>(
     return (
         <View style={[styles.container, layoutStyle, style]}>
             <ScrollViewGesture
-                pagingEnabled
+                pagingEnabled={pagingEnabled}
+                enableSnap={enableSnap}
                 vertical={vertical}
                 infinite={loop}
                 translation={handlerOffsetX}

diff --git a/src/ScrollViewGesture.tsx b/src/ScrollViewGesture.tsx
@@ -25,6 +25,7 @@ interface Props {
     style?: StyleProp<ViewStyle>;
     infinite?: boolean;
     pagingEnabled?: boolean;
+    enableSnap?: boolean;
     vertical?: boolean;
     panGestureHandlerProps?: Omit<
         Partial<PanGestureHandlerProps>,
@@ -44,7 +45,8 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         infinite,
         vertical,
         translation,
-        pagingEnabled,
+        pagingEnabled = true,
+        enableSnap = true,
         panGestureHandlerProps = {},
         onScrollBegin,
         onScrollEnd,
@@ -57,7 +59,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     const scrollEndTranslation = useSharedValue(0);
     const scrollEndVelocity = useSharedValue(0);
 
-    const endWithSpring = React.useCallback(
+    const _withSpring = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
             'worklet';
             return withSpring(
@@ -75,9 +77,24 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         []
     );
 
-    const withPaging = React.useCallback(
+    const endWithSpring = React.useCallback(
         (onFinished?: () => void) => {
             'worklet';
+            const origin = translation.value;
+            const velocity = scrollEndVelocity.value;
+            if (!pagingEnabled) {
+                if (enableSnap) {
+                    const nextPage =
+                        Math.round((origin + velocity * 0.4) / size) * size;
+                    translation.value = _withSpring(nextPage, onFinished);
+                    return;
+                }
+                translation.value = withDecay({
+                    velocity,
+                    deceleration: 0.999,
+                });
+                return;
+            }
             const page = Math.round(-translation.value / size);
             const velocityPage = Math.round(
                 -(translation.value + scrollEndVelocity.value) / size
@@ -89,9 +106,19 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             if (!infinite) {
                 finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));
             }
-            translation.value = endWithSpring(-finalPage * size, onFinished);
+
+            translation.value = _withSpring(-finalPage * size, onFinished);
         },
-        [infinite, endWithSpring, translation, scrollEndVelocity, size, maxPage]
+        [
+            infinite,
+            _withSpring,
+            translation,
+            scrollEndVelocity,
+            size,
+            maxPage,
+            pagingEnabled,
+            enableSnap,
+        ]
     );
 
     const resetBoundary = React.useCallback(() => {
@@ -120,7 +147,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 return;
             }
             if (!infinite) {
-                translation.value = endWithSpring(0);
+                translation.value = _withSpring(0);
                 return;
             }
         }
@@ -131,14 +158,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 return;
             }
             if (!infinite) {
-                translation.value = endWithSpring(-((maxPage - 1) * size));
+                translation.value = _withSpring(-((maxPage - 1) * size));
                 return;
             }
         }
     }, [
         infinite,
         touching,
-        endWithSpring,
+        _withSpring,
         translation,
         scrollEndTranslation,
         scrollEndVelocity,
@@ -194,27 +221,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                     ? translationX
                     : translationY;
 
-                if (pagingEnabled) {
-                    withPaging(() => onScrollEnd && runOnJS(onScrollEnd)());
-                    return;
-                }
-                translation.value = withDecay(
-                    {
-                        velocity: scrollEndVelocity.value,
-                    },
-                    (isFinished) => {
-                        if (isFinished) {
-                            onScrollEnd && runOnJS(onScrollEnd)();
-                        }
-                    }
-                );
+                endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());
 
                 if (!infinite) {
                     touching.value = false;
                 }
             },
         },
-        [pagingEnabled, isHorizontal.value, infinite, maxPage, size]
+        [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]
     );
 
     const directionStyle = React.useMemo(() => {

diff --git a/src/types.ts b/src/types.ts
@@ -120,6 +120,8 @@ export type TCarouselProps<T = any> = {
      * @default 0 all items will respond to pan gesture events.
      */
     windowSize?: number;
+    pagingEnabled?: boolean;
+    enableSnap?: boolean;
     /**
      * Render carousel item.
      */