@fountain-ui/lab 3.0.0-alpha.20 → 3.0.0-alpha.22

package/src/Carousel/components/ScrollViewGesture.tsx

@@ -1,9 +1,7 @@
-import type { ReactNode } from 'react';
-import React, { useCallback } from 'react';
-import { Animated, Platform } from 'react-native';
-import type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-import { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';
-import * as R from 'ramda';
+import { ReactNode } from 'react';
+import React from 'react';
+import { Animated } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';
 
 export interface ScrollViewGestureProps {
@@ -19,13 +17,7 @@ const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
 const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
 
 const ACTIVE_OFFSET_ABS_X = 5;
-const activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
-
-const endAnimationStates: Readonly<GestureHandlerState[]> = [
-    GestureHandlerState.CANCELLED,
-    GestureHandlerState.END,
-    GestureHandlerState.FAILED,
-];
+const WEB_TOUCH_ACTION = 'pan-y';
 
 function shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {
     const isSameDirection = translationX * velocityX > 0;
@@ -48,23 +40,20 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
 
     const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;
 
-    const handleGestureBegin = useCallback(() => {
-        pauseAutoplay();
-
-        interruptAnimation();
-    }, [interruptAnimation, pauseAutoplay]);
-
-    const handleGestureEvent = useCallback(Animated.event(
-        [{ nativeEvent: { translationX: gestureTranslationX } }],
-        { useNativeDriver: R.not(Platform.OS === 'android' && Platform.Version === 31) },
-    ), []);
-
-    const handleHandlerStateChange = useCallback((event: PanGestureHandlerStateChangeEvent) => {
-        const { nativeEvent: { translationX, velocityX, state } } = event;
-
-        if (endAnimationStates.includes(state)) {
-            const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)
-                ? (translationX < 0 ? 'next' : 'prev')
+    const panGesture = Gesture.Pan()
+        .runOnJS(true)
+        .activeOffsetX([-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X])
+        .enabled(scrollEnabled)
+        .onBegin(() => {
+            pauseAutoplay();
+            interruptAnimation();
+        })
+        .onUpdate((event) => {
+            gestureTranslationX.setValue(event.translationX);
+        })
+        .onEnd((event) => {
+            const direction: PagingDirection = shouldScrollToAdjacent(event.translationX, event.velocityX)
+                ? (event.translationX < 0 ? 'next' : 'prev')
                 : 'stay';
 
             startPagingAnimation(
@@ -72,22 +61,22 @@ export default function ScrollViewGesture(props: ScrollViewGestureProps) {
                 {
                     direction: direction,
                     isOriginatedFromGesture: true,
-                    lastGestureTranslationX: translationX,
+                    lastGestureTranslationX: event.translationX,
                 },
             );
 
             resumeAutoplay();
-        }
-    }, [startPagingAnimation, resumeAutoplay]);
+        })
+        .onFinalize(() => {
+            resumeAutoplay();
+        });
 
     return (
-        <PanGestureHandler
-            activeOffsetX={activeOffsetX}
-            children={children}
-            enabled={scrollEnabled}
-            onBegan={handleGestureBegin}
-            onGestureEvent={handleGestureEvent}
-            onHandlerStateChange={handleHandlerStateChange}
-        />
+        <GestureDetector
+            touchAction={WEB_TOUCH_ACTION}
+            gesture={panGesture}
+        >
+            {children}
+        </GestureDetector>
     );
 }

package/src/ComicViewer/FastScroll.tsx

@@ -55,7 +55,7 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: indicatorOffset.value }],
         opacity: indicatorOpacity.value,
-    }));
+    }), [indicatorOffset, indicatorOpacity]);
 
     const position = {
         ...absolutePosition,

package/src/FlipCard/FlipCard.tsx

@@ -37,7 +37,7 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${sharedAngle.value}deg` },
             ],
         };
-    }, []);
+    }, [sharedAngle]);
 
     const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
@@ -47,7 +47,7 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${(sharedAngle.value + 180)}deg` },
             ],
         };
-    }, []);
+    }, [sharedAngle]);
 
     useEffect(() => {
         sharedAngle.value = 0;

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -108,11 +108,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
             };
         }
         return {};
-    }, [
-        /**
-         * FIXME: Consider add `elevationStyle` to dependencies.
-         */
-    ]);
+    }, [translateY, overlapped, elevationStyle]);
 
     const indexRef = useRef<number>(0);
     const offsetsRef = useRef<Array<number>>([]);

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -22,5 +22,5 @@ export default function useAnimatedDisplayStyle(
 
     return useAnimatedStyle(() => ({
         display: display.value,
-    }), []);
+    }), [display]);
 };