@fountain-ui/core 2.0.0-beta.11 → 2.0.0-beta.12

package/src/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
@@ -13,7 +14,7 @@ import AccordionProps from './AccordionProps';
 
 type AccordionStyles = NamedStylesStringUnion<'root'>;
 
-const ANIMATION_OPTION = { duration: 250 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
     const theme = useTheme();
@@ -38,15 +39,16 @@ export default function Accordion(props: AccordionProps) {
     const styles = useStyles();
 
     const [isExpanded, setIsExpanded] = useState(false);
+
     const rotate = useSharedValue(0);
 
     const animatedChevronDownStyles = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
-    }));
+    }), []);
 
     const onPress = () => {
         setIsExpanded(prev => !prev);
-        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
     };
 
     return (

package/src/ButtonBase/ButtonBase.tsx

@@ -14,7 +14,7 @@ const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
 
-const animationTimingConfig: WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 const styles = StyleSheet.create({
     disabled: {
@@ -46,7 +46,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
     const animatedStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     useDisabledReaction(disabled, opacity);
 
@@ -59,16 +59,16 @@ export default function ButtonBase(props: ButtonBaseProps) {
             if (pressIn) {
                 opacity.value = ACTIVE_OPACITY;
             } else {
-                opacity.value = withTiming(ORIGINAL_OPACITY, animationTimingConfig);
+                opacity.value = withTiming(ORIGINAL_OPACITY, ANIMATION_CONFIG);
             }
         } else if (!isHovered) {
             if (pressIn) {
                 scale.value = withDelay(
                     100,
-                    withTiming(MINIFIED_SCALE, animationTimingConfig),
+                    withTiming(MINIFIED_SCALE, ANIMATION_CONFIG),
                 );
             } else {
-                scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);
+                scale.value = withTiming(ORIGINAL_SCALE, ANIMATION_CONFIG);
             }
         }
     };

package/src/ButtonBase/useDisabledReaction/index.ts

@@ -12,5 +12,6 @@ export default function useDisabledReaction(disabled: boolean, opacity: SharedVa
                 opacity.value = ORIGINAL_OPACITY;
             }
         },
+        [disabled],
     );
 }

package/src/CircularProgress/CircularProgress.tsx

@@ -1,20 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ViewProps } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Animated, {
-    Easing,
-    interpolate,
-    useAnimatedStyle,
-    useSharedValue,
-    withRepeat,
-    withTiming,
-} from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
 import { css } from '../styles';
 import { OverridableComponentProps } from '../types';
 
 type CircularProgressStyles = NamedStylesStringUnion<'root'>;
 
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };
+
+const MIN_ROTATE = 0;
+const MAX_ROTATE = 360;
+
 const useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {
     return {
         root: {
@@ -34,19 +33,15 @@ export default function CircularProgress(props: OverridableComponentProps<ViewPr
         style,
     ]);
 
-    const sharedSpin = useSharedValue(0);
-
-    const spinStyle = useAnimatedStyle(() => {
-        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
+    const rotate = useSharedValue(MIN_ROTATE);
 
-        return {
-            transform: [{ rotate: `${interpolatedSpin}deg` }],
-        };
-    });
+    const spinStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotate}deg` }],
+    }), []);
 
-    React.useEffect(() => {
-        sharedSpin.value = withRepeat(
-            withTiming(1, { duration: 900, easing: Easing.linear }),
+    useEffect(() => {
+        rotate.value = withRepeat(
+            withTiming(MAX_ROTATE, ANIMATION_CONFIG),
             -1,
             false,
         );

package/src/ImageCore/ImageCoreNative.tsx

@@ -7,7 +7,7 @@ import type ImageCoreProps from './ImageCoreProps';
 // @ts-ignore
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
 
-const animationConfig: WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function ImageCore(props: ImageCoreProps) {
     const {
@@ -25,10 +25,10 @@ export default function ImageCore(props: ImageCoreProps) {
 
     const animatedStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
-    }));
+    }), []);
 
     const handleLoad = () => {
-        opacity.value = withTiming(1, animationConfig);
+        opacity.value = withTiming(1, ANIMATION_CONFIG);
 
         if (onLoad) {
             onLoad();

package/src/Slide/Slide.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { useEffect } from 'react';
+import { Dimensions } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type SlideProps from './SlideProps';
@@ -7,6 +7,8 @@ import type SlideProps from './SlideProps';
 const defaultEnterDuration = 300;
 const defaultExitDuration = 300;
 
+const getDisappearingOffsetY = (): number => Dimensions.get('window').height;
+
 export default function Slide(props: SlideProps) {
     const {
         animatedY: animatedYProp,
@@ -21,38 +23,38 @@ export default function Slide(props: SlideProps) {
         ...otherProps
     } = props;
 
-    const window = useWindowDimensions();
-
-    const y = useSharedValue(window.height);
+    const y = useSharedValue(getDisappearingOffsetY());
     const animatedY = animatedYProp || y;
 
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }));
+    }), []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (appear) {
-            const enterConfig: WithTimingConfig = {
+            onEnter?.();
+
+            const toValue = 0;
+            const enterConfig: Readonly<WithTimingConfig> = {
                 duration: enterDuration,
                 easing: Easing.out(Easing.exp),
             };
 
-            onEnter?.();
-
-            animatedY.value = withTiming(0, enterConfig, isFinished => {
+            animatedY.value = withTiming(toValue, enterConfig, isFinished => {
                 if (isFinished && onEntered) {
                     runOnJS(onEntered)();
                 }
             });
         } else {
-            const exitConfig: WithTimingConfig = {
+            onExit?.();
+
+            const toValue = getDisappearingOffsetY();
+            const exitConfig: Readonly<WithTimingConfig> = {
                 duration: exitDuration,
                 easing: Easing.in(Easing.ease),
             };
 
-            onExit?.();
-
-            animatedY.value = withTiming(window.height, exitConfig, isFinished => {
+            animatedY.value = withTiming(toValue, exitConfig, isFinished => {
                 if (isFinished && onExited) {
                     runOnJS(onExited)();
                 }

package/src/Tabs/TabIndicator.tsx

@@ -54,7 +54,7 @@ export default function TabIndicator(props: TabIndicatorProps) {
             left: x1 + leftInset,
             width: Math.max(x2 - x1 - rightInset, 0),
         };
-    });
+    }, [coordinates, scrollable]);
 
     return (
         <Animated.View

package/src/Tabs/Tabs.tsx

@@ -89,7 +89,7 @@ export default function Tabs(props: TabsProps) {
     useEffect(() => {
         const scrollView = scrollViewRef.current;
 
-        if (scrollView && scrollPosition > 0) {
+        if (scrollView) {
             scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });
         }
     }, [scrollPosition, containerWidth]);

package/src/Tooltip/Tooltip.tsx

@@ -12,7 +12,7 @@ import UpArrow from './UpArrow';
 const defaultOpacity = 0.8;
 const initialLayout = { width: 0, height: 0, x: 0, y: 0 };
 
-const animationTimingConfig: WithTimingConfig = { duration: 150 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
 export default function Tooltip(props: TooltipProps) {
     const {
@@ -36,7 +36,7 @@ export default function Tooltip(props: TooltipProps) {
 
     const tooltipAnimatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }));
+    }), []);
 
     const [r, g, b] = rgb(theme.palette.primary.main);
 
@@ -54,9 +54,9 @@ export default function Tooltip(props: TooltipProps) {
     };
 
     React.useEffect(() => {
-        const nextValue = visible ? 1 : 0;
+        const nextScaleValue = visible ? 1 : 0;
 
-        scale.value = withTiming(nextValue, animationTimingConfig);
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
     const touchableStyle: ViewProps['style'] = {

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import {
     runOnJS,
     useAnimatedScrollHandler,
@@ -45,7 +46,7 @@ const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
 };
 
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
@@ -62,7 +63,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
     const translateY = useSharedValue<number>(0);
     const lastTranslateY = useSharedValue<number>(0);
@@ -71,21 +72,23 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const elevationStyle = useElevationStyle(4);
     const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
         if (Platform.OS === 'web') {
             return {
-                transform: [{ translateY: translateY.value }],
+                transform,
                 boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
             };
         }
         if (Platform.OS === 'android') {
             return {
-                transform: [{ translateY: translateY.value }],
+                transform,
                 elevation: overlapped.value ? elevationStyle?.elevation : 0,
             };
         }
         if (Platform.OS === 'ios') {
             return {
-                transform: [{ translateY: translateY.value }],
+                transform,
                 shadowColor: elevationStyle?.shadowColor,
                 shadowOffset: elevationStyle?.shadowOffset,
                 shadowRadius: elevationStyle?.shadowRadius,
@@ -93,10 +96,14 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
             };
         }
         return {};
-    });
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
 
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
 
     const onScrollViewChanged = (nextIndex: number) => {
         const prevIndex = indexRef.current;
@@ -116,9 +123,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = withTiming(0, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
         }
     };
 
@@ -147,15 +152,11 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = withTiming(0, {
-                            duration: ANIMATION_DURATION_MILLIS,
-                        });
+                        translateY.value = withTiming(0, ANIMATION_CONFIG);
                     }
                 }
 
@@ -186,11 +187,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = withTiming(nextTranslateY, {
-                duration: ANIMATION_DURATION_MILLIS,
-            });
+            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    });
+    }, [keyboardDismissMode]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useFadeInAppBar.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
@@ -58,7 +58,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
 
     const [appBarHeight, onAppBarLayout] = useHeight();
 
-    const [fromOffsetY, toOffsetY] = React.useMemo(() => {
+    const [fromOffsetY, toOffsetY] = useMemo(() => {
         const endY = typeof fadeInEndY === 'function'
             ? fadeInEndY(appBarHeight)
             : fadeInEndY;
@@ -74,24 +74,25 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     const lastOffsetY = useSharedValue<number>(0);
     const normalized = useSharedValue<number>(0);
 
-    const backgroundColor = theme.palette.background.default;
-    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
+    const originalBackgroundColor = theme.palette.background.default;
+    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
 
     const animatedAppBarStyle = useAnimatedStyle(() => {
+        const [r, g, b] = rgbValues;
+        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
+
         if (Platform.OS === 'web') {
-            return {
-                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-            };
+            return { backgroundColor };
         }
         if (Platform.OS === 'android') {
             return {
-                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+                backgroundColor,
                 elevation: normalized.value >= 1 ? 6 : 0,
             };
         }
         if (Platform.OS === 'ios') {
             return {
-                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+                backgroundColor,
                 shadowColor: '#000',
                 shadowOffset,
                 shadowRadius: 4.65,
@@ -99,11 +100,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
             };
         }
         return {};
-    });
+    }, [rgbValues]);
 
     const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,
-    }));
+    }), []);
 
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
@@ -127,7 +128,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    });
+    }, [keyboardDismissMode]);
 
     const appBarStyle = [
         animatedAppBarStyle,