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

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useCollapsibleAppBar;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _reactNative = require("react-native");
 
@@ -24,7 +24,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaultOptions = {
   keyboardDismissMode: 'none'
 };
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG = {
+  duration: 100
+};
 const SUPPORTS_DRAG_DETECTION = _reactNative.Platform.OS !== 'web';
 
 function useCollapsibleAppBar() {
@@ -38,36 +40,34 @@ function useCollapsibleAppBar() {
   const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const [appBarHeight, onAppBarLayout] = (0, _hooks.useHeight)();
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _hooks.useHeight)();
-  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight);
+  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
   const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
   const elevationStyle = (0, _useElevationStyle.default)(4);
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const transform = [{
+      translateY: translateY.value
+    }];
+
     if (_reactNative.Platform.OS === 'web') {
       return {
-        transform: [{
-          translateY: translateY.value
-        }],
+        transform,
         boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
       };
     }
 
     if (_reactNative.Platform.OS === 'android') {
       return {
-        transform: [{
-          translateY: translateY.value
-        }],
+        transform,
         elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0
       };
     }
 
     if (_reactNative.Platform.OS === 'ios') {
       return {
-        transform: [{
-          translateY: translateY.value
-        }],
+        transform,
         shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
         shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
         shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
@@ -76,11 +76,13 @@ function useCollapsibleAppBar() {
     }
 
     return {};
-  });
-
-  const indexRef = _react.default.useRef(0);
-
-  const offsetsRef = _react.default.useRef([]);
+  }, [
+    /**
+     * FIXME: Consider add `elevationStyle` to dependencies.
+     */
+  ]);
+  const indexRef = (0, _react.useRef)(0);
+  const offsetsRef = (0, _react.useRef)([]);
 
   const onScrollViewChanged = nextIndex => {
     const prevIndex = indexRef.current;
@@ -97,9 +99,7 @@ function useCollapsibleAppBar() {
     overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
 
     if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-      translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
     }
   };
 
@@ -126,15 +126,11 @@ function useCollapsibleAppBar() {
       } else {
         if (offsetY > -maxTy) {
           if (ty === 0) {
-            translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), {
-              duration: ANIMATION_DURATION_MILLIS
-            });
+            translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
           }
         } else {
           if (ty === maxTy) {
-            translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
-              duration: ANIMATION_DURATION_MILLIS
-            });
+            translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
           }
         }
 
@@ -158,11 +154,9 @@ function useCollapsibleAppBar() {
       const threshold = maxTy * 0.5;
       const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
       overlapped.value = offsetY + nextTranslateY > 0;
-      translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, ANIMATION_CONFIG);
     }
-  });
+  }, [keyboardDismissMode]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","keyboardDismissMode","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        if (Platform.OS === 'web') {\n            return {\n                transform: [{ translateY: translateY.value }],\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform: [{ translateY: translateY.value }],\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform: [{ translateY: translateY.value }],\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, ANIMATION_CONFIG);\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, ANIMATION_CONFIG);\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n        },\n    }, [keyboardDismissMode]);\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useFadeInAppBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useFadeInAppBar;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _reactNative = require("react-native");
 
@@ -48,37 +48,36 @@ function useFadeInAppBar() {
   const styles = (0, _useAppbarStyles.default)();
   const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const [appBarHeight, onAppBarLayout] = (0, _hooks.useHeight)();
-
-  const [fromOffsetY, toOffsetY] = _react.default.useMemo(() => {
+  const [fromOffsetY, toOffsetY] = (0, _react.useMemo)(() => {
     const endY = typeof fadeInEndY === 'function' ? fadeInEndY(appBarHeight) : fadeInEndY;
     const beginY = typeof fadeInBeginY === 'function' ? fadeInBeginY(endY, appBarHeight) : fadeInBeginY;
     return [beginY, endY];
   }, [fadeInBeginY, fadeInBeginY, appBarHeight]);
-
   const dy = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   const normalized = (0, _reactNativeReanimated.useSharedValue)(0);
-  const backgroundColor = theme.palette.background.default;
-
-  const [r, g, b] = _react.default.useMemo(() => (0, _utils.rgb)(backgroundColor), [backgroundColor]);
-
+  const originalBackgroundColor = theme.palette.background.default;
+  const rgbValues = (0, _react.useMemo)(() => (0, _utils.rgb)(originalBackgroundColor), [originalBackgroundColor]);
   const animatedAppBarStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const [r, g, b] = rgbValues;
+    const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
+
     if (_reactNative.Platform.OS === 'web') {
       return {
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`
+        backgroundColor
       };
     }
 
     if (_reactNative.Platform.OS === 'android') {
       return {
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+        backgroundColor,
         elevation: normalized.value >= 1 ? 6 : 0
       };
     }
 
     if (_reactNative.Platform.OS === 'ios') {
       return {
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+        backgroundColor,
         shadowColor: '#000',
         shadowOffset,
         shadowRadius: 4.65,
@@ -87,10 +86,10 @@ function useFadeInAppBar() {
     }
 
     return {};
-  });
+  }, [rgbValues]);
   const animatedTitleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: normalized.value
-  }));
+  }), []);
   const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
     onBeginDrag: () => {
       if (keyboardDismissMode === 'on-drag') {
@@ -110,7 +109,7 @@ function useFadeInAppBar() {
     onMomentumEnd: event => {
       lastOffsetY.value = event.contentOffset.y;
     }
-  });
+  }, [keyboardDismissMode]);
   const appBarStyle = [animatedAppBarStyle, {
     paddingTop: safeAreaInsets.top
   }, floating ? styles.floating : undefined];

package/build/commonjs/hooks/useFadeInAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","rgb","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const backgroundColor = theme.palette.background.default;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        if (Platform.OS === 'web') {\n            return {\n                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n                elevation: normalized.value >= 1 ? 6 : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n                shadowColor: '#000',\n                shadowOffset,\n                shadowRadius: 4.65,\n                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n            };\n        }\n        return {};\n    });\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","rgb","animatedAppBarStyle","useAnimatedStyle","r","g","b","backgroundColor","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        if (Platform.OS === 'web') {\n            return { backgroundColor };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                backgroundColor,\n                elevation: normalized.value >= 1 ? 6 : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                backgroundColor,\n                shadowColor: '#000',\n                shadowOffset,\n                shadowRadius: 4.65,\n                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n            };\n        }\n        return {};\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    }, [keyboardDismissMode]);\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}

package/build/module/Accordion/Accordion.js

@@ -7,7 +7,7 @@ import Divider from '../Divider';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
 import { useTheme } from '../styles';
-const ANIMATION_OPTION = {
+const ANIMATION_CONFIG = {
   duration: 250
 };
 
@@ -36,11 +36,11 @@ export default function Accordion(props) {
     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 /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(ButtonBase, {

package/build/module/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","prev","isValidElement"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : <ChevronDownIcon/>}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAT,QAAyB,WAAzB;AAMA,MAAMC,gBAAgB,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;EACA,MAAM+B,MAAM,GAAG5B,cAAc,CAAC,CAAD,CAA7B;EAEA,MAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,OAAO;IACtD+B,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,CAAlD;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBL,aAAa,CAACM,IAAI,IAAI,CAACA,IAAV,CAAb;IACAL,MAAM,CAACG,KAAP,GAAe9B,UAAU,CAAC,CAACyB,UAAD,GAAc,GAAd,GAAoB,CAArB,EAAwBhB,gBAAxB,CAAzB;EACH,CAHD;;EAKA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,OAAO,EAAEsB,OADb;IAEI,KAAK,EAAEP,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEK;EAAtB,GACKP,SAAS,GAAGA,SAAH,gBAAe,oBAAC,eAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAA9B,KAAK,CAACsC,cAAN,CAAqBd,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,oBAAC,OAAD,OAtCJ,CADJ;AA0CH"}
+{"version":3,"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_CONFIG","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","prev","isValidElement"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : <ChevronDownIcon/>}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAT,QAAyB,WAAzB;AAMA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IAFf;EADH,CAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,OADE;IAEFC,QAFE;IAGFC,SAHE;IAIFC,KAJE;IAKFC,YAAY,GAAG;EALb,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;EAEA,MAAM+B,MAAM,GAAG5B,cAAc,CAAC,CAAD,CAA7B;EAEA,MAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,OAAO;IACtD+B,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,EAE9C,EAF8C,CAAlD;;EAIA,MAAMC,OAAO,GAAG,MAAM;IAClBL,aAAa,CAACM,IAAI,IAAI,CAACA,IAAV,CAAb;IACAL,MAAM,CAACG,KAAP,GAAe9B,UAAU,CAAC,CAACyB,UAAD,GAAc,GAAd,GAAoB,CAArB,EAAwBhB,gBAAxB,CAAzB;EACH,CAHD;;EAKA,oBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;IACI,OAAO,EAAEsB,OADb;IAEI,KAAK,EAAEP,MAAM,CAACX;EAFlB,GAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;IACI,QAAQ,EAAEE,KADd;IAEI,OAAO,EAAEC;EAFb,EAXJ,eAgBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAhBJ,eAkBI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEK;EAAtB,GACKP,SAAS,GAAGA,SAAH,gBAAe,oBAAC,eAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,aAAA9B,KAAK,CAACsC,cAAN,CAAqBd,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;IACI,QAAQ,EAAEA,OADd;IAEI,KAAK,EAAE,eAFX;IAGI,OAAO,EAAE;EAHb,EAFG,GAQP,IApCR,eAsCI,oBAAC,OAAD,OAtCJ,CADJ;AA0CH"}

package/build/module/ButtonBase/ButtonBase.js

@@ -11,7 +11,7 @@ export const DISABLED_OPACITY = .3;
 const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
-const animationTimingConfig = {
+const ANIMATION_CONFIG = {
   duration: 150
 };
 const styles = StyleSheet.create({
@@ -44,7 +44,7 @@ export default function ButtonBase(props) {
     transform: [{
       scale: scale.value
     }]
-  }));
+  }), []);
   useDisabledReaction(disabled, opacity);
 
   const startAnimation = function (pressIn) {
@@ -58,13 +58,13 @@ export default function ButtonBase(props) {
       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));
+        scale.value = withDelay(100, withTiming(MINIFIED_SCALE, ANIMATION_CONFIG));
       } else {
-        scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);
+        scale.value = withTiming(ORIGINAL_SCALE, ANIMATION_CONFIG);
       }
     }
   };

package/build/module/ButtonBase/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useAnimatedStyle","useSharedValue","withDelay","withTiming","useThrottle","AnimatedPressable","StyleSheet","useDisabledReaction","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","animatedStyle","value","startAnimation","pressIn","isHovered","undefined","hovered"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n    disabled: {\n        opacity: DISABLED_OPACITY,\n        transform: [{ scale: ORIGINAL_SCALE }],\n    },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useSharedValue(ORIGINAL_OPACITY);\n    const scale = useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }));\n\n    useDisabledReaction(disabled, opacity);\n\n    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = withDelay(\n                    100,\n                    withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);\n            }\n        }\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[\n                animatedStyle,\n                disabled ? styles.disabled : undefined,\n                style,\n            ]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useAnimatedStyle","useSharedValue","withDelay","withTiming","useThrottle","AnimatedPressable","StyleSheet","useDisabledReaction","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","ANIMATION_CONFIG","duration","styles","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","animatedStyle","value","startAnimation","pressIn","isHovered","undefined","hovered"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nconst styles = StyleSheet.create({\n    disabled: {\n        opacity: DISABLED_OPACITY,\n        transform: [{ scale: ORIGINAL_SCALE }],\n    },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = useSharedValue(ORIGINAL_OPACITY);\n    const scale = useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    useDisabledReaction(disabled, opacity);\n\n    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = withTiming(ORIGINAL_OPACITY, ANIMATION_CONFIG);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = withDelay(\n                    100,\n                    withTiming(MINIFIED_SCALE, ANIMATION_CONFIG),\n                );\n            } else {\n                scale.value = withTiming(ORIGINAL_SCALE, ANIMATION_CONFIG);\n            }\n        }\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[\n                animatedStyle,\n                disabled ? styles.disabled : undefined,\n                style,\n            ]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined && !disabled) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"],"mappings":"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"}

package/build/module/ButtonBase/useDisabledReaction/index.js

@@ -7,6 +7,6 @@ export default function useDisabledReaction(disabled, opacity) {
     } else {
       opacity.value = ORIGINAL_OPACITY;
     }
-  });
+  }, [disabled]);
 }
 //# sourceMappingURL=index.js.map

package/build/module/ButtonBase/useDisabledReaction/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAnimatedReaction","DISABLED_OPACITY","ORIGINAL_OPACITY","useDisabledReaction","disabled","opacity","result","value"],"sources":["index.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction } from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {\n    useAnimatedReaction(\n        () => disabled,\n        (result) => {\n            if (result) {\n                opacity.value = DISABLED_OPACITY;\n            } else {\n                opacity.value = ORIGINAL_OPACITY;\n            }\n        },\n    );\n}\n"],"mappings":"AACA,SAASA,mBAAT,QAAoC,yBAApC;AACA,SAASC,gBAAT,EAA2BC,gBAA3B,QAAmD,eAAnD;AAEA,eAAe,SAASC,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAA8E;EACzFL,mBAAmB,CACf,MAAMI,QADS,EAEdE,MAAD,IAAY;IACR,IAAIA,MAAJ,EAAY;MACRD,OAAO,CAACE,KAAR,GAAgBN,gBAAhB;IACH,CAFD,MAEO;MACHI,OAAO,CAACE,KAAR,GAAgBL,gBAAhB;IACH;EACJ,CARc,CAAnB;AAUH"}
+{"version":3,"names":["useAnimatedReaction","DISABLED_OPACITY","ORIGINAL_OPACITY","useDisabledReaction","disabled","opacity","result","value"],"sources":["index.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction } from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {\n    useAnimatedReaction(\n        () => disabled,\n        (result) => {\n            if (result) {\n                opacity.value = DISABLED_OPACITY;\n            } else {\n                opacity.value = ORIGINAL_OPACITY;\n            }\n        },\n        [disabled],\n    );\n}\n"],"mappings":"AACA,SAASA,mBAAT,QAAoC,yBAApC;AACA,SAASC,gBAAT,EAA2BC,gBAA3B,QAAmD,eAAnD;AAEA,eAAe,SAASC,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAA8E;EACzFL,mBAAmB,CACf,MAAMI,QADS,EAEdE,MAAD,IAAY;IACR,IAAIA,MAAJ,EAAY;MACRD,OAAO,CAACE,KAAR,GAAgBN,gBAAhB;IACH,CAFD,MAEO;MACHI,OAAO,CAACE,KAAR,GAAgBL,gBAAhB;IACH;EACJ,CARc,EASf,CAACE,QAAD,CATe,CAAnB;AAWH"}

package/build/module/CircularProgress/CircularProgress.js

@@ -1,7 +1,13 @@
-import React from 'react';
-import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
 import { css } from '../styles';
+const ANIMATION_CONFIG = {
+  duration: 900,
+  easing: Easing.linear
+};
+const MIN_ROTATE = 0;
+const MAX_ROTATE = 360;
 
 const useStyles = function () {
   return {
@@ -18,20 +24,14 @@ export default function CircularProgress(props) {
   } = props;
   const styles = useStyles();
   const rootStyle = css([styles.root, style]);
-  const sharedSpin = useSharedValue(0);
-  const spinStyle = useAnimatedStyle(() => {
-    const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
-    return {
-      transform: [{
-        rotate: `${interpolatedSpin}deg`
-      }]
-    };
-  });
-  React.useEffect(() => {
-    sharedSpin.value = withRepeat(withTiming(1, {
-      duration: 900,
-      easing: Easing.linear
-    }), -1, false);
+  const rotate = useSharedValue(MIN_ROTATE);
+  const spinStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${rotate}deg`
+    }]
+  }), []);
+  useEffect(() => {
+    rotate.value = withRepeat(withTiming(MAX_ROTATE, ANIMATION_CONFIG), -1, false);
   }, []);
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [spinStyle, rootStyle]

package/build/module/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","css","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","sharedSpin","spinStyle","interpolatedSpin","value","transform","rotate","useEffect","duration","easing","linear"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, {\n    Easing,\n    interpolate,\n    useAnimatedStyle,\n    useSharedValue,\n    withRepeat,\n    withTiming,\n} from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = useSharedValue(0);\n\n    const spinStyle = useAnimatedStyle(() => {\n        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = withRepeat(\n            withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IACIC,MADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,cAJJ,EAKIC,UALJ,EAMIC,UANJ,QAOO,yBAPP;AAQA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASN,gBAAT,CAA0BO,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGN,SAAS,EAAxB;EAEA,MAAMO,SAAS,GAAGR,GAAG,CAAC,CAClBO,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;EAKA,MAAMG,UAAU,GAAGd,cAAc,CAAC,CAAD,CAAjC;EAEA,MAAMe,SAAS,GAAGhB,gBAAgB,CAAC,MAAM;IACrC,MAAMiB,gBAAgB,GAAGlB,WAAW,CAACgB,UAAU,CAACG,KAAZ,EAAmB,CAAC,CAAD,EAAI,CAAJ,CAAnB,EAA2B,CAAC,CAAD,EAAI,GAAJ,CAA3B,CAApC;IAEA,OAAO;MACHC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAG,GAAEH,gBAAiB;MAA9B,CAAD;IADR,CAAP;EAGH,CANiC,CAAlC;EAQArB,KAAK,CAACyB,SAAN,CAAgB,MAAM;IAClBN,UAAU,CAACG,KAAX,GAAmBhB,UAAU,CACzBC,UAAU,CAAC,CAAD,EAAI;MAAEmB,QAAQ,EAAE,GAAZ;MAAiBC,MAAM,EAAEzB,MAAM,CAAC0B;IAAhC,CAAJ,CADe,EAEzB,CAAC,CAFwB,EAGzB,KAHyB,CAA7B;EAKH,CAND,EAMG,EANH;EAQA,oBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACR,SAAD,EAAYF,SAAZ;EAAtB,gBACI,oBAAC,oBAAD,OADJ,CADJ;AAKH;AAAA"}
+{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","css","ANIMATION_CONFIG","duration","easing","linear","MIN_ROTATE","MAX_ROTATE","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","rotate","spinStyle","transform","value"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };\n\nconst MIN_ROTATE = 0;\nconst MAX_ROTATE = 360;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const rotate = useSharedValue(MIN_ROTATE);\n\n    const spinStyle = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate}deg` }],\n    }), []);\n\n    useEffect(() => {\n        rotate.value = withRepeat(\n            withTiming(MAX_ROTATE, ANIMATION_CONFIG),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAIA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,EAAyEC,UAAzE,QAA2F,yBAA3F;AACA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;AAKA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE,GAAZ;EAAiBC,MAAM,EAAEV,MAAM,CAACW;AAAhC,CAArD;AAEA,MAAMC,UAAU,GAAG,CAAnB;AACA,MAAMC,UAAU,GAAG,GAAnB;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASZ,gBAAT,CAA0Ba,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGN,SAAS,EAAxB;EAEA,MAAMO,SAAS,GAAGd,GAAG,CAAC,CAClBa,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;EAKA,MAAMG,MAAM,GAAGpB,cAAc,CAACU,UAAD,CAA7B;EAEA,MAAMW,SAAS,GAAGtB,gBAAgB,CAAC,OAAO;IACtCuB,SAAS,EAAE,CAAC;MAAEF,MAAM,EAAG,GAAEA,MAAO;IAApB,CAAD;EAD2B,CAAP,CAAD,EAE9B,EAF8B,CAAlC;EAIAxB,SAAS,CAAC,MAAM;IACZwB,MAAM,CAACG,KAAP,GAAetB,UAAU,CACrBC,UAAU,CAACS,UAAD,EAAaL,gBAAb,CADW,EAErB,CAAC,CAFoB,EAGrB,KAHqB,CAAzB;EAKH,CANQ,EAMN,EANM,CAAT;EAQA,oBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACe,SAAD,EAAYF,SAAZ;EAAtB,gBACI,oBAAC,oBAAD,OADJ,CADJ;AAKH;AAAA"}

package/build/module/ImageCore/ImageCoreNative.js

@@ -3,7 +3,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-na
 import FastImage from 'react-native-fast-image';
 // @ts-ignore
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
-const animationConfig = {
+const ANIMATION_CONFIG = {
   duration: 150
 };
 export default function ImageCore(props) {
@@ -22,10 +22,10 @@ export default function ImageCore(props) {
   const opacity = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value
-  }));
+  }), []);
 
   const handleLoad = () => {
-    opacity.value = withTiming(1, animationConfig);
+    opacity.value = withTiming(1, ANIMATION_CONFIG);
 
     if (onLoad) {
       onLoad();

package/build/module/ImageCore/ImageCoreNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","useAnimatedStyle","useSharedValue","withTiming","FastImage","AnimatedFastImage","createAnimatedComponent","animationConfig","duration","ImageCore","props","height","onError","onLoad","resizeMode","source","width","style","opacity","animatedStyle","value","handleLoad","uri"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport FastImage from 'react-native-fast-image';\nimport type ImageCoreProps from './ImageCoreProps';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst animationConfig: WithTimingConfig = { duration: 150 };\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const style = { width, height };\n\n    const opacity = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n    }));\n\n    const handleLoad = () => {\n        opacity.value = withTiming(1, animationConfig);\n\n        if (onLoad) {\n            onLoad();\n        }\n    };\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{ uri: source.uri }}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AAGA;AACA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCF,SAAjC,CAA1B;AAEA,MAAMG,eAAiC,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAA1C;AAEA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,MADE;IAEFC,OAFE;IAGFC,MAHE;IAIFC,UAJE;IAKFC,MALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAMO,KAAK,GAAG;IAAED,KAAF;IAASL;EAAT,CAAd;EAEA,MAAMO,OAAO,GAAGhB,cAAc,CAAC,CAAD,CAA9B;EAEA,MAAMiB,aAAa,GAAGlB,gBAAgB,CAAC,OAAO;IAC1CiB,OAAO,EAAEA,OAAO,CAACE;EADyB,CAAP,CAAD,CAAtC;;EAIA,MAAMC,UAAU,GAAG,MAAM;IACrBH,OAAO,CAACE,KAAR,GAAgBjB,UAAU,CAAC,CAAD,EAAII,eAAJ,CAA1B;;IAEA,IAAIM,MAAJ,EAAY;MACRA,MAAM;IACT;EACJ,CAND;;EAQA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAES,UAFZ;IAGI,UAAU,EAAEP,UAHhB;IAII,MAAM,EAAE;MAAEQ,GAAG,EAAEP,MAAM,CAACO;IAAd,CAJZ;IAKI,KAAK,EAAE,CACHH,aADG,EAEHF,KAFG;EALX,EADJ;AAYH;AAAA"}
+{"version":3,"names":["React","Animated","useAnimatedStyle","useSharedValue","withTiming","FastImage","AnimatedFastImage","createAnimatedComponent","ANIMATION_CONFIG","duration","ImageCore","props","height","onError","onLoad","resizeMode","source","width","style","opacity","animatedStyle","value","handleLoad","uri"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport FastImage from 'react-native-fast-image';\nimport type ImageCoreProps from './ImageCoreProps';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        height,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const style = { width, height };\n\n    const opacity = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        opacity: opacity.value,\n    }), []);\n\n    const handleLoad = () => {\n        opacity.value = withTiming(1, ANIMATION_CONFIG);\n\n        if (onLoad) {\n            onLoad();\n        }\n    };\n\n    return (\n        <AnimatedFastImage\n            onError={onError}\n            onLoad={handleLoad}\n            resizeMode={resizeMode}\n            source={{ uri: source.uri }}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AAGA;AACA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCF,SAAjC,CAA1B;AAEA,MAAMG,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AAEA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,MADE;IAEFC,OAFE;IAGFC,MAHE;IAIFC,UAJE;IAKFC,MALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAMO,KAAK,GAAG;IAAED,KAAF;IAASL;EAAT,CAAd;EAEA,MAAMO,OAAO,GAAGhB,cAAc,CAAC,CAAD,CAA9B;EAEA,MAAMiB,aAAa,GAAGlB,gBAAgB,CAAC,OAAO;IAC1CiB,OAAO,EAAEA,OAAO,CAACE;EADyB,CAAP,CAAD,EAElC,EAFkC,CAAtC;;EAIA,MAAMC,UAAU,GAAG,MAAM;IACrBH,OAAO,CAACE,KAAR,GAAgBjB,UAAU,CAAC,CAAD,EAAII,gBAAJ,CAA1B;;IAEA,IAAIM,MAAJ,EAAY;MACRA,MAAM;IACT;EACJ,CAND;;EAQA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAES,UAFZ;IAGI,UAAU,EAAEP,UAHhB;IAII,MAAM,EAAE;MAAEQ,GAAG,EAAEP,MAAM,CAACO;IAAd,CAJZ;IAKI,KAAK,EAAE,CACHH,aADG,EAEHF,KAFG;EALX,EADJ;AAYH;AAAA"}