feat: add goToIndex method

dohooo · dohooo · commit b33bb788e584 · 2021-10-08T14:34:03.000+08:00
diff --git a/README.md b/README.md
@@ -77,6 +77,7 @@ import Carousel from "react-native-reanimated-carousel";
 | --------------- | ---------- | ---------------------- |
 | prev            | ()=>void   | Play the last one      |
 | loop            | ()=>void   | Play the next one      |
+| goToIndex | (index: number, animated?: boolean) => void | Go to index |
 | getCurrentIndex | ()=>number | Get current item index |
 
 ## Contributing
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,16 +1,23 @@
 /* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import { Button, Dimensions, Text, View } from 'react-native';
+import { Alert, Button, Dimensions, Text, TextInput, View } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import { ICarouselInstance } from '../../src/Carousel';
 
 import Carousel from '../../src/index';
 
 const { width } = Dimensions.get('window');
 
+const data = [
+    { color: 'red' },
+    { color: 'purple' },
+    { color: 'blue' },
+    { color: 'yellow' },
+];
+
 export default function App() {
+    const [index, setIndex] = React.useState<string>('');
     const r = React.useRef<ICarouselInstance | null>(null);
-
     return (
         <View
             style={{
@@ -26,12 +33,7 @@ export default function App() {
                     ref={r}
                     mode="parallax"
                     width={width}
-                    data={[
-                        { color: 'red' },
-                        { color: 'purple' },
-                        { color: 'blue' },
-                        { color: 'yellow' },
-                    ]}
+                    data={data}
                     parallaxScrollingScale={0.8}
                     onSnapToItem={(index) => {
                         console.log('current index:', index);
@@ -81,6 +83,24 @@ export default function App() {
                     r.current.next();
                 }}
             />
+            <TextInput
+                placeholder={'Set go to index'}
+                placeholderTextColor="white"
+                style={{ color: 'white' }}
+                value={index}
+                onChangeText={setIndex}
+            />
+            <Button
+                title="GoTo"
+                onPress={() => {
+                    const idx = Number(index);
+                    if (idx < 0 || idx >= data.length) {
+                        Alert.alert('invalid index');
+                        return;
+                    }
+                    r.current.goToIndex(idx, true);
+                }}
+            />
         </View>
     );
 }
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -18,7 +18,7 @@ import { ParallaxLayout } from './layouts/index';
 import { useCarouselController } from './useCarouselController';
 import { useComputedAnim } from './useComputedAnim';
 import { useAutoPlay } from './useAutoPlay';
-import { useComputedIndex } from './useComputedIndex';
+import { useIndexController } from './useIndexController';
 import { useLockController } from './useLock';
 
 const defaultTimingConfig: Animated.WithTimingConfig = {
@@ -105,6 +105,10 @@ export interface ICarouselInstance {
      * Get current item index
      */
     getCurrentIndex: () => number;
+    /**
+     * Go to index
+     */
+    goToIndex: (index: number, animated?: boolean) => void;
 }
 
 function Carousel<T extends unknown = any>(
@@ -144,32 +148,38 @@ function Carousel<T extends unknown = any>(
     }, [_data, loop]);
 
     const computedAnimResult = useComputedAnim(width, data.length);
+
+    const indexController = useIndexController({
+        length: data.length,
+        handlerOffsetX,
+        width,
+    });
+
     const carouselController = useCarouselController({
         width,
         handlerOffsetX,
+        indexController,
         lockController,
         timingConfig,
         disable: !data.length,
         onNext: (isFinished) => isFinished && callComputedIndex(),
         onPrev: (isFinished) => isFinished && callComputedIndex(),
     });
+
+    const { index, computedIndex } = indexController;
+
+    const offsetX = useDerivedValue(() => {
+        const x = handlerOffsetX.value % computedAnimResult.WL;
+        return isNaN(x) ? 0 : x;
+    }, [computedAnimResult]);
+
     useAutoPlay({
         autoPlay,
         autoPlayInterval,
         autoPlayReverse,
         carouselController,
         lockController,
     });
-    const { index, computedIndex } = useComputedIndex({
-        length: data.length,
-        handlerOffsetX,
-        width,
-    });
-
-    const offsetX = useDerivedValue(() => {
-        const x = handlerOffsetX.value % computedAnimResult.WL;
-        return isNaN(x) ? 0 : x;
-    }, [computedAnimResult]);
 
     useAnimatedReaction(
         () => index.value,
@@ -206,6 +216,13 @@ function Carousel<T extends unknown = any>(
         return index.value;
     }, [index]);
 
+    const goToIndex = React.useCallback(
+        (i: number, animated?: boolean) => {
+            carouselController.to(i, animated);
+        },
+        [carouselController]
+    );
+
     const animatedListScrollHandler =
         useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
             {
@@ -302,6 +319,7 @@ function Carousel<T extends unknown = any>(
             next,
             prev,
             getCurrentIndex,
+            goToIndex,
         };
     });
 
diff --git a/src/useCarouselController.tsx b/src/useCarouselController.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
 import { runOnJS, withTiming } from 'react-native-reanimated';
+import type { IIndexController } from './useIndexController';
 import type { ILockController } from './useLock';
 
 interface IOpts {
     width: number;
     handlerOffsetX: Animated.SharedValue<number>;
     lockController: ILockController;
+    indexController: IIndexController;
     timingConfig: Animated.WithTimingConfig;
     disable?: boolean;
     onPrev?: (isFinished: boolean) => void;
@@ -16,6 +18,7 @@ interface IOpts {
 export interface ICarouselController {
     prev: () => void;
     next: () => void;
+    to: (index: number, animated?: boolean) => void;
 }
 
 export function useCarouselController(opts: IOpts): ICarouselController {
@@ -24,11 +27,16 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         handlerOffsetX,
         timingConfig,
         lockController,
+        indexController,
         disable = false,
         onPrev,
         onNext,
     } = opts;
 
+    const canSliding = React.useCallback(() => {
+        return !disable && !lockController.isLock();
+    }, [lockController, disable]);
+
     const closeLock = React.useCallback(
         (isFinished: boolean) => {
             if (isFinished) {
@@ -39,8 +47,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
     );
 
     const next = React.useCallback(() => {
-        if (disable) return;
-        if (lockController.isLock()) return;
+        if (!canSliding()) return;
         lockController.lock();
         handlerOffsetX.value = withTiming(
             handlerOffsetX.value - width,
@@ -52,17 +59,17 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         );
     }, [
         onNext,
+        closeLock,
+        canSliding,
         width,
-        lockController,
         timingConfig,
-        closeLock,
         handlerOffsetX,
-        disable,
+        lockController,
     ]);
 
     const prev = React.useCallback(() => {
-        if (disable) return;
-        if (lockController.isLock()) return;
+        if (!canSliding()) return;
+
         lockController.lock();
         handlerOffsetX.value = withTiming(
             handlerOffsetX.value + width,
@@ -74,16 +81,54 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         );
     }, [
         onPrev,
+        closeLock,
+        canSliding,
         width,
-        lockController,
         timingConfig,
-        closeLock,
         handlerOffsetX,
-        disable,
+        lockController,
     ]);
 
+    const to = React.useCallback(
+        (index: number, animated: boolean = false) => {
+            if (index === indexController.index.value) return;
+            if (!canSliding()) return;
+
+            lockController.lock();
+
+            const offset =
+                handlerOffsetX.value +
+                (indexController.index.value - index) * width;
+
+            if (animated) {
+                handlerOffsetX.value = withTiming(
+                    offset,
+                    timingConfig,
+                    (isFinished: boolean) => {
+                        indexController.index.value = index;
+                        runOnJS(closeLock)(isFinished);
+                    }
+                );
+            } else {
+                handlerOffsetX.value = offset;
+                indexController.index.value = index;
+                runOnJS(closeLock)(true);
+            }
+        },
+        [
+            canSliding,
+            closeLock,
+            width,
+            timingConfig,
+            indexController,
+            lockController,
+            handlerOffsetX,
+        ]
+    );
+
     return {
         next,
         prev,
+        to,
     };
 }
diff --git a/src/useIndexController.ts b/src/useIndexController.ts
@@ -1,11 +1,16 @@
 import * as React from 'react';
 import Animated, { useSharedValue } from 'react-native-reanimated';
 
-export function useComputedIndex(opts: {
+export interface IIndexController {
+    index: Animated.SharedValue<number>;
+    computedIndex: () => void;
+}
+
+export function useIndexController(opts: {
     handlerOffsetX: Animated.SharedValue<number>;
     length: number;
     width: number;
-}) {
+}): IIndexController {
     const { length, width, handlerOffsetX } = opts;
     const index = useSharedValue<number>(0);
 
