fix: handles boundary cases for raw data

dohooo · Sep 8, 2021 · 4386bfd · 4386bfd
1 parent e9e0c47
commit 4386bfd
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -25,10 +25,10 @@ export default function App() {
                     mode="parallax"
                     width={width}
                     data={[
-                        { color: 'red' },
-                        { color: 'purple' },
-                        { color: 'blue' },
-                        { color: 'yellow' },
+                        // { color: 'red' },
+                        // { color: 'purple' },
+                        // { color: 'blue' },
+                        // { color: 'yellow' },
                     ]}
                     parallaxScrollingScale={0.8}
                     onSnapToItem={(index) => {

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -136,17 +136,25 @@ function Carousel<T extends unknown = any>(
     } = props;
     const handlerOffsetX = useSharedValue<number>(0);
     const data = React.useMemo<T[]>(() => {
+        if (!loop) return _data;
+
         if (_data.length === 1) {
             return [_data[0], _data[0], _data[0]];
         }
+
         if (_data.length === 2) {
             return [_data[0], _data[1], _data[0], _data[1]];
         }
+
         return _data;
-    }, [_data]);
+    }, [_data, loop]);
 
     const computedAnimResult = useComputedAnim(width, data.length);
-    const carouselController = useCarouselController({ width, handlerOffsetX });
+    const carouselController = useCarouselController({
+        width,
+        handlerOffsetX,
+        disable: !data.length,
+    });
     useLoop({
         autoPlay,
         autoPlayInterval,
@@ -166,8 +174,20 @@ function Carousel<T extends unknown = any>(
 
     useAnimatedReaction(
         () => index.value,
-        (i) => onSnapToItem && runOnJS(onSnapToItem)(i),
-        [onSnapToItem]
+        (i) => {
+            if (loop) {
+                switch (_data.length) {
+                    case 1:
+                        i = 0;
+                        break;
+                    case 2:
+                        i = i % 2;
+                        break;
+                }
+                onSnapToItem && runOnJS(onSnapToItem)(i);
+            }
+        },
+        [onSnapToItem, loop, _data]
     );
 
     const callComputedIndex = React.useCallback(

diff --git a/src/useCarouselController.tsx b/src/useCarouselController.tsx
@@ -6,6 +6,7 @@ import { useSharedValue } from 'react-native-reanimated';
 interface IOpts {
     width: number;
     handlerOffsetX: Animated.SharedValue<number>;
+    disable?: boolean;
 }
 
 export interface ICarouselController {
@@ -15,7 +16,7 @@ export interface ICarouselController {
 
 export function useCarouselController(opts: IOpts): ICarouselController {
     const lock = useSharedValue<boolean>(false);
-    const { width, handlerOffsetX } = opts;
+    const { width, handlerOffsetX, disable = false } = opts;
 
     const closeLock = React.useCallback(
         (isFinished: boolean) => {
@@ -31,6 +32,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
 
     const next = React.useCallback(
         (callback?: (isFinished: boolean) => void) => {
+            if (disable) return;
             if (lock.value) return;
             openLock();
             handlerOffsetX.value = _withTiming(
@@ -41,11 +43,12 @@ export function useCarouselController(opts: IOpts): ICarouselController {
                 }
             );
         },
-        [width, openLock, closeLock, lock, handlerOffsetX]
+        [width, openLock, closeLock, lock, handlerOffsetX, disable]
     );
 
     const prev = React.useCallback(
         (callback?: (isFinished: boolean) => void) => {
+            if (disable) return;
             if (lock.value) return;
             openLock();
             handlerOffsetX.value = _withTiming(
@@ -56,7 +59,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
                 }
             );
         },
-        [width, openLock, closeLock, lock, handlerOffsetX]
+        [width, openLock, closeLock, lock, handlerOffsetX, disable]
     );
 
     return {