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

package/build/commonjs/AnimatedY/AnimatedY.js

@@ -29,7 +29,7 @@ function AnimatedY(props) {
     transform: [{
       translateY: animatedY.value
     }]
-  }), []);
+  }), [animatedY]);
   (0, _react.useEffect)(() => {
     if (translateY >= 0) {
       animatedY.value = (0, _reactNativeReanimated.withTiming)(translateY, ANIMATION_CONFIG);

package/build/commonjs/AnimatedY/AnimatedY.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_CONFIG","duration","easing","Easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","useEffect","withTiming"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 150,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAGA,MAAMA,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;AAFyC,CAArD;;AAKe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAG,IAAAC,qCAAA,EAAeH,UAAf,CAAlB;EACA,MAAMI,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEN,UAAU,EAAEE,SAAS,CAACK;IAAxB,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,IAAAC,gBAAA,EAAU,MAAM;IACZ,IAAIR,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACK,KAAV,GAAkB,IAAAE,iCAAA,EAAWT,UAAX,EAAuBT,gBAAvB,CAAlB;IACH;EACJ,CAJD,EAIG,CAACS,UAAD,CAJH;EAMA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHK,aADG,EAEHH,KAFG;EAFX,EADJ;AASH;;AAAA"}
+{"version":3,"names":["ANIMATION_CONFIG","duration","easing","Easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","useEffect","withTiming"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 150,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), [animatedY]);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;AAGA,MAAMA,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;AAFyC,CAArD;;AAKe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAG,IAAAC,qCAAA,EAAeH,UAAf,CAAlB;EACA,MAAMI,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEN,UAAU,EAAEE,SAAS,CAACK;IAAxB,CAAD;EAD+B,CAAP,CAAjB,EAElB,CAACL,SAAD,CAFkB,CAAtB;EAIA,IAAAM,gBAAA,EAAU,MAAM;IACZ,IAAIR,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACK,KAAV,GAAkB,IAAAE,iCAAA,EAAWT,UAAX,EAAuBT,gBAAvB,CAAlB;IACH;EACJ,CAJD,EAIG,CAACS,UAAD,CAJH;EAMA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHK,aADG,EAEHH,KAFG;EAFX,EADJ;AASH;;AAAA"}

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -33,7 +33,7 @@ const NoHandle = () => null;
 
 const DEFAULT_PADDING_BOTTOM = 24;
 const DEFAULT_PADDING_TOP = 22;
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 
 function BottomSheet(props) {
   const {

package/build/commonjs/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","useSafeAreaInsets","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","useDynamicSnapPoints","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\nconst TOP_ELEMENT_HIDDEN_OFFSET = 16;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n            paddingTop: DEFAULT_PADDING_TOP,\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                enableOverDrag={false}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","useSafeAreaInsets","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","useDynamicSnapPoints","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n            paddingTop: DEFAULT_PADDING_TOP,\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                enableOverDrag={false}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -50,7 +50,7 @@ const useStyles = function () {
   };
 };
 
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 
 function BottomSheet(props) {
   const {

package/build/commonjs/BottomSheet/BottomSheetWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","filteredSnapPoints","filter","point","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","length","contentStyles","css","maxHeight","StyleSheet","absoluteFill","top"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            width: '100%',\n        },\n    };\n};\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 16;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints: filteredSnapPoints,\n    });\n\n    const translateY = convertedSnapPoints.length > 0\n        ? highestSnapPoint - (convertedSnapPoints[index] ?? 0)\n        : 0;\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={[styles.topElementLocation, { top: -topElementHeight }]}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","filteredSnapPoints","filter","point","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","length","contentStyles","css","maxHeight","StyleSheet","absoluteFill","top"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            width: '100%',\n        },\n    };\n};\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints: filteredSnapPoints,\n    });\n\n    const translateY = convertedSnapPoints.length > 0\n        ? highestSnapPoint - (convertedSnapPoints[index] ?? 0)\n        : 0;\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={[styles.topElementLocation, { top: -topElementHeight }]}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Carousel/components/ScrollViewGesture.js

@@ -5,23 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ScrollViewGesture;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
+var _react = _interopRequireDefault(require("react"));
 
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
-var R = _interopRequireWildcard(require("ramda"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;
 const SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;
 const ACTIVE_OFFSET_ABS_X = 5;
-const activeOffsetX = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];
-const endAnimationStates = [_reactNativeGestureHandler.State.CANCELLED, _reactNativeGestureHandler.State.END, _reactNativeGestureHandler.State.FAILED];
+const WEB_TOUCH_ACTION = 'pan-y';
 
 function shouldScrollToAdjacent(translationX, velocityX) {
   const isSameDirection = translationX * velocityX > 0;
@@ -42,43 +35,27 @@ function ScrollViewGesture(props) {
     pause: pauseAutoplay,
     resume: resumeAutoplay
   } = autoplayController;
-  const handleGestureBegin = (0, _react.useCallback)(() => {
+
+  const panGesture = _reactNativeGestureHandler.Gesture.Pan().runOnJS(true).activeOffsetX([-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X]).enabled(scrollEnabled).onBegin(() => {
     pauseAutoplay();
     interruptAnimation();
-  }, [interruptAnimation, pauseAutoplay]);
-  const handleGestureEvent = (0, _react.useCallback)(_reactNative.Animated.event([{
-    nativeEvent: {
-      translationX: gestureTranslationX
-    }
-  }], {
-    useNativeDriver: R.not(_reactNative.Platform.OS === 'android' && _reactNative.Platform.Version === 31)
-  }), []);
-  const handleHandlerStateChange = (0, _react.useCallback)(event => {
-    const {
-      nativeEvent: {
-        translationX,
-        velocityX,
-        state
-      }
-    } = event;
-
-    if (endAnimationStates.includes(state)) {
-      const direction = shouldScrollToAdjacent(translationX, velocityX) ? translationX < 0 ? 'next' : 'prev' : 'stay';
-      startPagingAnimation('directional', {
-        direction: direction,
-        isOriginatedFromGesture: true,
-        lastGestureTranslationX: translationX
-      });
-      resumeAutoplay();
-    }
-  }, [startPagingAnimation, resumeAutoplay]);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
-    activeOffsetX: activeOffsetX,
-    children: children,
-    enabled: scrollEnabled,
-    onBegan: handleGestureBegin,
-    onGestureEvent: handleGestureEvent,
-    onHandlerStateChange: handleHandlerStateChange
+  }).onUpdate(event => {
+    gestureTranslationX.setValue(event.translationX);
+  }).onEnd(event => {
+    const direction = shouldScrollToAdjacent(event.translationX, event.velocityX) ? event.translationX < 0 ? 'next' : 'prev' : 'stay';
+    startPagingAnimation('directional', {
+      direction: direction,
+      isOriginatedFromGesture: true,
+      lastGestureTranslationX: event.translationX
+    });
+    resumeAutoplay();
+  }).onFinalize(() => {
+    resumeAutoplay();
   });
+
+  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
+    touchAction: WEB_TOUCH_ACTION,
+    gesture: panGesture
+  }, children);
 }
 //# sourceMappingURL=ScrollViewGesture.js.map

package/build/commonjs/Carousel/components/ScrollViewGesture.js.map

@@ -1 +1 @@
-{"version":3,"names":["SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","GestureHandlerState","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","gestureTranslationX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","useCallback","handleGestureEvent","Animated","event","nativeEvent","useNativeDriver","R","not","Platform","OS","Version","handleHandlerStateChange","state","includes","direction","isOriginatedFromGesture","lastGestureTranslationX"],"sources":["ScrollViewGesture.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback } from 'react';\nimport { Animated, Platform } from 'react-native';\nimport type { PanGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';\nimport { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';\nimport * as R from 'ramda';\nimport type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';\n\nexport interface ScrollViewGestureProps {\n    autoplayController: AutoplayController;\n    children: ReactNode;\n    gestureTranslationX: Animated.Value,\n    interruptAnimation: () => void;\n    scrollEnabled: boolean;\n    startPagingAnimation: StartPagingAnimation;\n}\n\nconst SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;\nconst SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;\n\nconst ACTIVE_OFFSET_ABS_X = 5;\nconst activeOffsetX: number[] = [-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X];\n\nconst endAnimationStates: Readonly<GestureHandlerState[]> = [\n    GestureHandlerState.CANCELLED,\n    GestureHandlerState.END,\n    GestureHandlerState.FAILED,\n];\n\nfunction shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {\n    const isSameDirection = translationX * velocityX > 0;\n    const isEnoughMovement =\n        Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD\n        || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;\n\n    return isSameDirection && isEnoughMovement;\n}\n\nexport default function ScrollViewGesture(props: ScrollViewGestureProps) {\n    const {\n        autoplayController,\n        children,\n        interruptAnimation,\n        gestureTranslationX,\n        scrollEnabled,\n        startPagingAnimation,\n    } = props;\n\n    const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;\n\n    const handleGestureBegin = useCallback(() => {\n        pauseAutoplay();\n\n        interruptAnimation();\n    }, [interruptAnimation, pauseAutoplay]);\n\n    const handleGestureEvent = useCallback(Animated.event(\n        [{ nativeEvent: { translationX: gestureTranslationX } }],\n        { useNativeDriver: R.not(Platform.OS === 'android' && Platform.Version === 31) },\n    ), []);\n\n    const handleHandlerStateChange = useCallback((event: PanGestureHandlerStateChangeEvent) => {\n        const { nativeEvent: { translationX, velocityX, state } } = event;\n\n        if (endAnimationStates.includes(state)) {\n            const direction: PagingDirection = shouldScrollToAdjacent(translationX, velocityX)\n                ? (translationX < 0 ? 'next' : 'prev')\n                : 'stay';\n\n            startPagingAnimation(\n                'directional',\n                {\n                    direction: direction,\n                    isOriginatedFromGesture: true,\n                    lastGestureTranslationX: translationX,\n                },\n            );\n\n            resumeAutoplay();\n        }\n    }, [startPagingAnimation, resumeAutoplay]);\n\n    return (\n        <PanGestureHandler\n            activeOffsetX={activeOffsetX}\n            children={children}\n            enabled={scrollEnabled}\n            onBegan={handleGestureBegin}\n            onGestureEvent={handleGestureEvent}\n            onHandlerStateChange={handleHandlerStateChange}\n        />\n    );\n}\n"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;AACA;;;;;;AAYA,MAAMA,+BAA+B,GAAG,EAAxC;AACA,MAAMC,+BAA+B,GAAG,IAAxC;AAEA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,aAAuB,GAAG,CAAC,CAACD,mBAAF,EAAuBA,mBAAvB,CAAhC;AAEA,MAAME,kBAAmD,GAAG,CACxDC,gCAAA,CAAoBC,SADoC,EAExDD,gCAAA,CAAoBE,GAFoC,EAGxDF,gCAAA,CAAoBG,MAHoC,CAA5D;;AAMA,SAASC,sBAAT,CAAgCC,YAAhC,EAAsDC,SAAtD,EAAkF;EAC9E,MAAMC,eAAe,GAAGF,YAAY,GAAGC,SAAf,GAA2B,CAAnD;EACA,MAAME,gBAAgB,GAClBC,IAAI,CAACC,GAAL,CAASL,YAAT,KAA0BV,+BAA1B,IACGc,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBV,+BAF9B;EAIA,OAAOW,eAAe,IAAIC,gBAA1B;AACH;;AAEc,SAASG,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IACFC,kBADE;IAEFC,QAFE;IAGFC,kBAHE;IAIFC,mBAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM;IAAEO,KAAK,EAAEC,aAAT;IAAwBC,MAAM,EAAEC;EAAhC,IAAmDT,kBAAzD;EAEA,MAAMU,kBAAkB,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACzCJ,aAAa;IAEbL,kBAAkB;EACrB,CAJ0B,EAIxB,CAACA,kBAAD,EAAqBK,aAArB,CAJwB,CAA3B;EAMA,MAAMK,kBAAkB,GAAG,IAAAD,kBAAA,EAAYE,qBAAA,CAASC,KAAT,CACnC,CAAC;IAAEC,WAAW,EAAE;MAAEvB,YAAY,EAAEW;IAAhB;EAAf,CAAD,CADmC,EAEnC;IAAEa,eAAe,EAAEC,CAAC,CAACC,GAAF,CAAMC,qBAAA,CAASC,EAAT,KAAgB,SAAhB,IAA6BD,qBAAA,CAASE,OAAT,KAAqB,EAAxD;EAAnB,CAFmC,CAAZ,EAGxB,EAHwB,CAA3B;EAKA,MAAMC,wBAAwB,GAAG,IAAAX,kBAAA,EAAaG,KAAD,IAA8C;IACvF,MAAM;MAAEC,WAAW,EAAE;QAAEvB,YAAF;QAAgBC,SAAhB;QAA2B8B;MAA3B;IAAf,IAAsDT,KAA5D;;IAEA,IAAI5B,kBAAkB,CAACsC,QAAnB,CAA4BD,KAA5B,CAAJ,EAAwC;MACpC,MAAME,SAA0B,GAAGlC,sBAAsB,CAACC,YAAD,EAAeC,SAAf,CAAtB,GAC5BD,YAAY,GAAG,CAAf,GAAmB,MAAnB,GAA4B,MADA,GAE7B,MAFN;MAIAa,oBAAoB,CAChB,aADgB,EAEhB;QACIoB,SAAS,EAAEA,SADf;QAEIC,uBAAuB,EAAE,IAF7B;QAGIC,uBAAuB,EAAEnC;MAH7B,CAFgB,CAApB;MASAiB,cAAc;IACjB;EACJ,CAnBgC,EAmB9B,CAACJ,oBAAD,EAAuBI,cAAvB,CAnB8B,CAAjC;EAqBA,oBACI,6BAAC,4CAAD;IACI,aAAa,EAAExB,aADnB;IAEI,QAAQ,EAAEgB,QAFd;IAGI,OAAO,EAAEG,aAHb;IAII,OAAO,EAAEM,kBAJb;IAKI,cAAc,EAAEE,kBALpB;IAMI,oBAAoB,EAAEU;EAN1B,EADJ;AAUH"}
+{"version":3,"names":["SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","WEB_TOUCH_ACTION","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","gestureTranslationX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","panGesture","Gesture","Pan","runOnJS","activeOffsetX","enabled","onBegin","onUpdate","event","setValue","onEnd","direction","isOriginatedFromGesture","lastGestureTranslationX","onFinalize"],"sources":["ScrollViewGesture.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport React from 'react';\nimport { Animated } from 'react-native';\nimport { GestureDetector, Gesture } from 'react-native-gesture-handler';\nimport type { AutoplayController, PagingDirection, StartPagingAnimation } from '../types';\n\nexport interface ScrollViewGestureProps {\n    autoplayController: AutoplayController;\n    children: ReactNode;\n    gestureTranslationX: Animated.Value,\n    interruptAnimation: () => void;\n    scrollEnabled: boolean;\n    startPagingAnimation: StartPagingAnimation;\n}\n\nconst SCROLL_TO_ADJACENT_TX_THRESHOLD = 80;\nconst SCROLL_TO_ADJACENT_VX_THRESHOLD = 1000;\n\nconst ACTIVE_OFFSET_ABS_X = 5;\nconst WEB_TOUCH_ACTION = 'pan-y';\n\nfunction shouldScrollToAdjacent(translationX: number, velocityX: number): boolean {\n    const isSameDirection = translationX * velocityX > 0;\n    const isEnoughMovement =\n        Math.abs(translationX) >= SCROLL_TO_ADJACENT_TX_THRESHOLD\n        || Math.abs(velocityX) >= SCROLL_TO_ADJACENT_VX_THRESHOLD;\n\n    return isSameDirection && isEnoughMovement;\n}\n\nexport default function ScrollViewGesture(props: ScrollViewGestureProps) {\n    const {\n        autoplayController,\n        children,\n        interruptAnimation,\n        gestureTranslationX,\n        scrollEnabled,\n        startPagingAnimation,\n    } = props;\n\n    const { pause: pauseAutoplay, resume: resumeAutoplay } = autoplayController;\n\n    const panGesture = Gesture.Pan()\n        .runOnJS(true)\n        .activeOffsetX([-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X])\n        .enabled(scrollEnabled)\n        .onBegin(() => {\n            pauseAutoplay();\n            interruptAnimation();\n        })\n        .onUpdate((event) => {\n            gestureTranslationX.setValue(event.translationX);\n        })\n        .onEnd((event) => {\n            const direction: PagingDirection = shouldScrollToAdjacent(event.translationX, event.velocityX)\n                ? (event.translationX < 0 ? 'next' : 'prev')\n                : 'stay';\n\n            startPagingAnimation(\n                'directional',\n                {\n                    direction: direction,\n                    isOriginatedFromGesture: true,\n                    lastGestureTranslationX: event.translationX,\n                },\n            );\n\n            resumeAutoplay();\n        })\n        .onFinalize(() => {\n            resumeAutoplay();\n        });\n\n    return (\n        <GestureDetector\n            touchAction={WEB_TOUCH_ACTION}\n            gesture={panGesture}\n        >\n            {children}\n        </GestureDetector>\n    );\n}\n"],"mappings":";;;;;;;AACA;;AAEA;;;;AAYA,MAAMA,+BAA+B,GAAG,EAAxC;AACA,MAAMC,+BAA+B,GAAG,IAAxC;AAEA,MAAMC,mBAAmB,GAAG,CAA5B;AACA,MAAMC,gBAAgB,GAAG,OAAzB;;AAEA,SAASC,sBAAT,CAAgCC,YAAhC,EAAsDC,SAAtD,EAAkF;EAC9E,MAAMC,eAAe,GAAGF,YAAY,GAAGC,SAAf,GAA2B,CAAnD;EACA,MAAME,gBAAgB,GAClBC,IAAI,CAACC,GAAL,CAASL,YAAT,KAA0BL,+BAA1B,IACGS,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBL,+BAF9B;EAIA,OAAOM,eAAe,IAAIC,gBAA1B;AACH;;AAEc,SAASG,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IACFC,kBADE;IAEFC,QAFE;IAGFC,kBAHE;IAIFC,mBAJE;IAKFC,aALE;IAMFC;EANE,IAOFN,KAPJ;EASA,MAAM;IAAEO,KAAK,EAAEC,aAAT;IAAwBC,MAAM,EAAEC;EAAhC,IAAmDT,kBAAzD;;EAEA,MAAMU,UAAU,GAAGC,kCAAA,CAAQC,GAAR,GACdC,OADc,CACN,IADM,EAEdC,aAFc,CAEA,CAAC,CAACzB,mBAAF,EAAuBA,mBAAvB,CAFA,EAGd0B,OAHc,CAGNX,aAHM,EAIdY,OAJc,CAIN,MAAM;IACXT,aAAa;IACbL,kBAAkB;EACrB,CAPc,EAQde,QARc,CAQJC,KAAD,IAAW;IACjBf,mBAAmB,CAACgB,QAApB,CAA6BD,KAAK,CAAC1B,YAAnC;EACH,CAVc,EAWd4B,KAXc,CAWPF,KAAD,IAAW;IACd,MAAMG,SAA0B,GAAG9B,sBAAsB,CAAC2B,KAAK,CAAC1B,YAAP,EAAqB0B,KAAK,CAACzB,SAA3B,CAAtB,GAC5ByB,KAAK,CAAC1B,YAAN,GAAqB,CAArB,GAAyB,MAAzB,GAAkC,MADN,GAE7B,MAFN;IAIAa,oBAAoB,CAChB,aADgB,EAEhB;MACIgB,SAAS,EAAEA,SADf;MAEIC,uBAAuB,EAAE,IAF7B;MAGIC,uBAAuB,EAAEL,KAAK,CAAC1B;IAHnC,CAFgB,CAApB;IASAiB,cAAc;EACjB,CA1Bc,EA2Bde,UA3Bc,CA2BH,MAAM;IACdf,cAAc;EACjB,CA7Bc,CAAnB;;EA+BA,oBACI,6BAAC,0CAAD;IACI,WAAW,EAAEnB,gBADjB;IAEI,OAAO,EAAEoB;EAFb,GAIKT,QAJL,CADJ;AAQH"}

package/build/commonjs/ComicViewer/FastScroll.js

@@ -72,7 +72,7 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       translateY: indicatorOffset.value
     }],
     opacity: indicatorOpacity.value
-  }));
+  }), [indicatorOffset, indicatorOpacity]);
   const position = { ...absolutePosition,
     right: R.defaultTo(0)(absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.right) + INDICATOR_WIDTH
   };

package/build/commonjs/ComicViewer/FastScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["INDICATOR_WIDTH","styles","StyleSheet","create","indicator","width","height","backgroundColor","baseColors","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","offsetToPercentage","initialLastIndicatorOffset","percentageToOffset","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","onContentScroll","useCallback","event","current","nativeEvent","y","offset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect","commonColors","static","strongInverse"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { baseColors, commonColors } from '@fountain-ui/styles';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n    indicator: {\n        width: INDICATOR_WIDTH,\n        height: 48,\n        backgroundColor: baseColors.gray['650'],\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: {\n        position: 'absolute',\n        width: 0,\n    },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        initialScrollPercentage = 0,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const totalContentLength = contentLength + additionalLength;\n\n    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n    const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n    const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n    const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(0);\n    const [visible, setVisible] = useState(false);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const position = {\n        ...absolutePosition,\n        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n    };\n\n    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        if (!isIndicatorDragging.current) {\n            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n            const offset = percentageToOffset(contentPercentage, movementRange);\n\n            if (offset < 0 || indicatorOffset.value < 0) {\n                lastIndicatorOffset.value = 0;\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (offset > movementRange || indicatorOffset.value > movementRange) {\n                lastIndicatorOffset.value = movementRange;\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            lastIndicatorOffset.value = offset;\n            indicatorOffset.value = offset;\n        } else {\n            setVisible(true);\n        }\n    }, [totalContentLength, movementRange]);\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [onContentScroll],\n    );\n\n    const handleUpdate = () => {\n        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n        const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n        scrollContentToOffset(offset);\n    };\n\n    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n    const pan = Gesture.Pan()\n        .onBegin((e) => {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(true);\n        })\n        .onUpdate((e) => {\n            if (indicatorOffset.value <= 0 && e.translationY < 0) {\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n            runOnJS(handleUpdate)();\n        })\n        .onFinalize((e) => {\n            lastIndicatorOffset.value = indicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(false);\n        });\n\n    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n    useEffect(() => {\n        if (visible) {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            show();\n        } else {\n            hide();\n        }\n    }, [visible]);\n\n    return (\n        <View\n            style={[\n                { height: movementRange },\n                styles.view,\n                position,\n            ]}\n        >\n            <GestureDetector gesture={pan}>\n                <Animated.View style={[\n                    animatedStyle,\n                    styles.indicator,\n                ]}>\n                    <ChevronUp fill={commonColors.static.strongInverse}/>\n\n                    <ChevronDown fill={commonColors.static.strongInverse}/>\n                </Animated.View>\n            </GestureDetector>\n        </View>\n    );\n});\n\nexport default FastScroll;"],"mappings":"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"}
+{"version":3,"names":["INDICATOR_WIDTH","styles","StyleSheet","create","indicator","width","height","backgroundColor","baseColors","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","offsetToPercentage","initialLastIndicatorOffset","percentageToOffset","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","onContentScroll","useCallback","event","current","nativeEvent","y","offset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect","commonColors","static","strongInverse"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { baseColors, commonColors } from '@fountain-ui/styles';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n    indicator: {\n        width: INDICATOR_WIDTH,\n        height: 48,\n        backgroundColor: baseColors.gray['650'],\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: {\n        position: 'absolute',\n        width: 0,\n    },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        initialScrollPercentage = 0,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const totalContentLength = contentLength + additionalLength;\n\n    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n    const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n    const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n    const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(0);\n    const [visible, setVisible] = useState(false);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }), [indicatorOffset, indicatorOpacity]);\n\n    const position = {\n        ...absolutePosition,\n        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n    };\n\n    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        if (!isIndicatorDragging.current) {\n            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n            const offset = percentageToOffset(contentPercentage, movementRange);\n\n            if (offset < 0 || indicatorOffset.value < 0) {\n                lastIndicatorOffset.value = 0;\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (offset > movementRange || indicatorOffset.value > movementRange) {\n                lastIndicatorOffset.value = movementRange;\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            lastIndicatorOffset.value = offset;\n            indicatorOffset.value = offset;\n        } else {\n            setVisible(true);\n        }\n    }, [totalContentLength, movementRange]);\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [onContentScroll],\n    );\n\n    const handleUpdate = () => {\n        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n        const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n        scrollContentToOffset(offset);\n    };\n\n    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n    const pan = Gesture.Pan()\n        .onBegin((e) => {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(true);\n        })\n        .onUpdate((e) => {\n            if (indicatorOffset.value <= 0 && e.translationY < 0) {\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n            runOnJS(handleUpdate)();\n        })\n        .onFinalize((e) => {\n            lastIndicatorOffset.value = indicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(false);\n        });\n\n    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n    useEffect(() => {\n        if (visible) {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            show();\n        } else {\n            hide();\n        }\n    }, [visible]);\n\n    return (\n        <View\n            style={[\n                { height: movementRange },\n                styles.view,\n                position,\n            ]}\n        >\n            <GestureDetector gesture={pan}>\n                <Animated.View style={[\n                    animatedStyle,\n                    styles.indicator,\n                ]}>\n                    <ChevronUp fill={commonColors.static.strongInverse}/>\n\n                    <ChevronDown fill={commonColors.static.strongInverse}/>\n                </Animated.View>\n            </GestureDetector>\n        </View>\n    );\n});\n\nexport default FastScroll;"],"mappings":"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"}

package/build/commonjs/FlipCard/FlipCard.js

@@ -48,7 +48,7 @@ function FlipCard(props) {
         rotateX: `${sharedAngle.value}deg`
       }]
     };
-  }, []);
+  }, [sharedAngle]);
   const animatedBackCardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
@@ -58,7 +58,7 @@ function FlipCard(props) {
         rotateX: `${sharedAngle.value + 180}deg`
       }]
     };
-  }, []);
+  }, [sharedAngle]);
   (0, _react.useEffect)(() => {
     sharedAngle.value = 0;
     sharedAngle.value = (0, _reactNativeReanimated.withTiming)(180, {

package/build/commonjs/FlipCard/FlipCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","container","height","width","animatedCard","alignItems","backfaceVisibility","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","useSharedValue","animatedFrontCardStyle","useAnimatedStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","useEffect","withTiming","duration"],"sources":["FlipCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type FlipCardProps from './FlipCardProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        height: 32,\n        width: 24,\n    },\n    animatedCard: {\n        alignItems: 'center',\n        backfaceVisibility: 'hidden',\n        justifyContent: 'center',\n        position: 'absolute',\n    },\n});\n\nconst PERSPECTIVE = 100;\nconst Z_INDEX_CHANGE_ANGLE = 90;\n\nexport default function FlipCard(props: FlipCardProps) {\n    const {\n        backCard,\n        frontCard,\n        reanimationKey,\n        style,\n    } = props;\n\n    const sharedAngle = useSharedValue(0);\n\n    const animatedFrontCardStyle = useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${sharedAngle.value}deg` },\n            ],\n        };\n    }, []);\n\n    const animatedBackCardStyle = useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${(sharedAngle.value + 180)}deg` },\n            ],\n        };\n    }, []);\n\n    useEffect(() => {\n        sharedAngle.value = 0;\n        sharedAngle.value = withTiming(180, { duration: 500 });\n    }, [reanimationKey]);\n\n    return (\n        <View style={[styles.container, style]}>\n            <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>\n                {frontCard}\n            </Animated.View>\n\n            <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>\n                {backCard}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,MAAM,EAAE,EADD;IAEPC,KAAK,EAAE;EAFA,CADkB;EAK7BC,YAAY,EAAE;IACVC,UAAU,EAAE,QADF;IAEVC,kBAAkB,EAAE,QAFV;IAGVC,cAAc,EAAE,QAHN;IAIVC,QAAQ,EAAE;EAJA;AALe,CAAlB,CAAf;;AAaA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,SAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFJ,KALJ;EAOA,MAAMK,WAAW,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAApB;EAEA,MAAMC,sBAAsB,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IAClD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,GAAoBZ,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAER,WAAW,CAACK,KAAM;MAAhC,CAFO;IAFR,CAAP;EAOH,CAR8B,EAQ5B,EAR4B,CAA/B;EAUA,MAAMI,qBAAqB,GAAG,IAAAN,uCAAA,EAAiB,MAAM;IACjD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,IAAqBZ,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAGR,WAAW,CAACK,KAAZ,GAAoB,GAAK;MAAxC,CAFO;IAFR,CAAP;EAOH,CAR6B,EAQ3B,EAR2B,CAA9B;EAUA,IAAAK,gBAAA,EAAU,MAAM;IACZV,WAAW,CAACK,KAAZ,GAAoB,CAApB;IACAL,WAAW,CAACK,KAAZ,GAAoB,IAAAM,iCAAA,EAAW,GAAX,EAAgB;MAAEC,QAAQ,EAAE;IAAZ,CAAhB,CAApB;EACH,CAHD,EAGG,CAACd,cAAD,CAHH;EAKA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACjB,MAAM,CAACG,SAAR,EAAmBe,KAAnB;EAAb,gBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAClB,MAAM,CAACM,YAAR,EAAsBe,sBAAtB;EAAtB,GACKL,SADL,CADJ,eAKI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAChB,MAAM,CAACM,YAAR,EAAsBsB,qBAAtB;EAAtB,GACKb,QADL,CALJ,CADJ;AAWH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","container","height","width","animatedCard","alignItems","backfaceVisibility","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","useSharedValue","animatedFrontCardStyle","useAnimatedStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","useEffect","withTiming","duration"],"sources":["FlipCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type FlipCardProps from './FlipCardProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        height: 32,\n        width: 24,\n    },\n    animatedCard: {\n        alignItems: 'center',\n        backfaceVisibility: 'hidden',\n        justifyContent: 'center',\n        position: 'absolute',\n    },\n});\n\nconst PERSPECTIVE = 100;\nconst Z_INDEX_CHANGE_ANGLE = 90;\n\nexport default function FlipCard(props: FlipCardProps) {\n    const {\n        backCard,\n        frontCard,\n        reanimationKey,\n        style,\n    } = props;\n\n    const sharedAngle = useSharedValue(0);\n\n    const animatedFrontCardStyle = useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${sharedAngle.value}deg` },\n            ],\n        };\n    }, [sharedAngle]);\n\n    const animatedBackCardStyle = useAnimatedStyle(() => {\n        return {\n            zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,\n            transform: [\n                { perspective: PERSPECTIVE },\n                { rotateX: `${(sharedAngle.value + 180)}deg` },\n            ],\n        };\n    }, [sharedAngle]);\n\n    useEffect(() => {\n        sharedAngle.value = 0;\n        sharedAngle.value = withTiming(180, { duration: 500 });\n    }, [reanimationKey]);\n\n    return (\n        <View style={[styles.container, style]}>\n            <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>\n                {frontCard}\n            </Animated.View>\n\n            <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>\n                {backCard}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,MAAM,EAAE,EADD;IAEPC,KAAK,EAAE;EAFA,CADkB;EAK7BC,YAAY,EAAE;IACVC,UAAU,EAAE,QADF;IAEVC,kBAAkB,EAAE,QAFV;IAGVC,cAAc,EAAE,QAHN;IAIVC,QAAQ,EAAE;EAJA;AALe,CAAlB,CAAf;;AAaA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,SAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFJ,KALJ;EAOA,MAAMK,WAAW,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAApB;EAEA,MAAMC,sBAAsB,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IAClD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,GAAoBZ,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAER,WAAW,CAACK,KAAM;MAAhC,CAFO;IAFR,CAAP;EAOH,CAR8B,EAQ5B,CAACL,WAAD,CAR4B,CAA/B;EAUA,MAAMS,qBAAqB,GAAG,IAAAN,uCAAA,EAAiB,MAAM;IACjD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,IAAqBZ,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAGR,WAAW,CAACK,KAAZ,GAAoB,GAAK;MAAxC,CAFO;IAFR,CAAP;EAOH,CAR6B,EAQ3B,CAACL,WAAD,CAR2B,CAA9B;EAUA,IAAAU,gBAAA,EAAU,MAAM;IACZV,WAAW,CAACK,KAAZ,GAAoB,CAApB;IACAL,WAAW,CAACK,KAAZ,GAAoB,IAAAM,iCAAA,EAAW,GAAX,EAAgB;MAAEC,QAAQ,EAAE;IAAZ,CAAhB,CAApB;EACH,CAHD,EAGG,CAACd,cAAD,CAHH;EAKA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACjB,MAAM,CAACG,SAAR,EAAmBe,KAAnB;EAAb,gBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAClB,MAAM,CAACM,YAAR,EAAsBe,sBAAtB;EAAtB,GACKL,SADL,CADJ,eAKI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAChB,MAAM,CAACM,YAAR,EAAsBsB,qBAAtB;EAAtB,GACKb,QADL,CALJ,CADJ;AAWH;;AAAA"}

package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js

@@ -84,11 +84,7 @@ function useUnstableCollapsibleAppBar() {
     }
 
     return {};
-  }, [
-    /**
-     * FIXME: Consider add `elevationStyle` to dependencies.
-     */
-  ]);
+  }, [translateY, overlapped, elevationStyle]);
   const indexRef = (0, _react.useRef)(0);
   const offsetsRef = (0, _react.useRef)([]);
   const onScrollViewChanged = (0, _react.useCallback)(nextIndex => {

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

@@ -1 +1 @@
-{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\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    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: 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 appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\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 prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\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 = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\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            vectorY.value = 0;\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\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            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\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        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","useRef","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\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    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: 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 appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\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 prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\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    }, [translateY, overlapped, elevationStyle]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = useCallback((nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\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            vectorY.value = 0;\n        }\n    }, [appBarHeight]);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\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            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\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        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"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"}

package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js

@@ -20,7 +20,7 @@ function useAnimatedDisplayStyle(vectorY) {
   }, [threshold]);
   return (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     display: display.value
-  }), []);
+  }), [display]);
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = useSharedValue(defaultDisplay);\n\n    useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n        [threshold],\n    );\n\n    return useAnimatedStyle(() => ({\n        display: display.value,\n    }), []);\n};\n"],"mappings":";;;;;;;AACA;;AAEe,SAASA,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAG,IAAAC,qCAAA,EAAeF,cAAf,CAAhB;EAEA,IAAAG,0CAAA,EACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIN,SAAV,EAAqB;MACjBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;MACvBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH;EACJ,CARL,EASI,CAACL,SAAD,CATJ;EAYA,OAAO,IAAAO,uCAAA,EAAiB,OAAO;IAC3BL,OAAO,EAAEA,OAAO,CAACG;EADU,CAAP,CAAjB,EAEH,EAFG,CAAP;AAGH;;AAAA"}
+{"version":3,"names":["useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = useSharedValue(defaultDisplay);\n\n    useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n        [threshold],\n    );\n\n    return useAnimatedStyle(() => ({\n        display: display.value,\n    }), [display]);\n};\n"],"mappings":";;;;;;;AACA;;AAEe,SAASA,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAG,IAAAC,qCAAA,EAAeF,cAAf,CAAhB;EAEA,IAAAG,0CAAA,EACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIN,SAAV,EAAqB;MACjBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;MACvBE,OAAO,CAACG,KAAR,GAAgB,MAAhB;IACH;EACJ,CARL,EASI,CAACL,SAAD,CATJ;EAYA,OAAO,IAAAO,uCAAA,EAAiB,OAAO;IAC3BL,OAAO,EAAEA,OAAO,CAACG;EADU,CAAP,CAAjB,EAEH,CAACH,OAAD,CAFG,CAAP;AAGH;;AAAA"}

package/build/module/AnimatedY/AnimatedY.js

@@ -15,7 +15,7 @@ export default function AnimatedY(props) {
     transform: [{
       translateY: animatedY.value
     }]
-  }), []);
+  }), [animatedY]);
   useEffect(() => {
     if (translateY >= 0) {
       animatedY.value = withTiming(translateY, ANIMATION_CONFIG);

package/build/module/AnimatedY/AnimatedY.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","ANIMATION_CONFIG","duration","easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","animatedStyle","transform","value"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 150,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), []);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,QAA+E,yBAA/E;AAGA,MAAMC,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEN,MAAM,CAACO,GAAP,CAAWP,MAAM,CAACQ,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAGZ,cAAc,CAACU,UAAD,CAAhC;EACA,MAAMG,aAAa,GAAGd,gBAAgB,CAAC,OAAO;IAC1Ce,SAAS,EAAE,CAAC;MAAEJ,UAAU,EAAEE,SAAS,CAACG;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIAnB,SAAS,CAAC,MAAM;IACZ,IAAIc,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACG,KAAV,GAAkBd,UAAU,CAACS,UAAD,EAAaR,gBAAb,CAA5B;IACH;EACJ,CAJQ,EAIN,CAACQ,UAAD,CAJM,CAAT;EAMA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHI,aADG,EAEHF,KAFG;EAFX,EADJ;AASH;AAAA"}
+{"version":3,"names":["React","useEffect","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","ANIMATION_CONFIG","duration","easing","out","exp","AnimatedY","props","children","translateY","style","animatedY","animatedStyle","transform","value"],"sources":["AnimatedY.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type AnimatedYProps from './AnimatedYProps';\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 150,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function AnimatedY(props: AnimatedYProps) {\n    const {\n        children,\n        translateY,\n        style,\n    } = props;\n\n    const animatedY = useSharedValue(translateY);\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }), [animatedY]);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = withTiming(translateY, ANIMATION_CONFIG);\n        }\n    }, [translateY]);\n\n    return (\n        <Animated.View\n            children={children}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,QAA+E,yBAA/E;AAGA,MAAMC,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEN,MAAM,CAACO,GAAP,CAAWP,MAAM,CAACQ,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,UAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAMI,SAAS,GAAGZ,cAAc,CAACU,UAAD,CAAhC;EACA,MAAMG,aAAa,GAAGd,gBAAgB,CAAC,OAAO;IAC1Ce,SAAS,EAAE,CAAC;MAAEJ,UAAU,EAAEE,SAAS,CAACG;IAAxB,CAAD;EAD+B,CAAP,CAAD,EAElC,CAACH,SAAD,CAFkC,CAAtC;EAIAhB,SAAS,CAAC,MAAM;IACZ,IAAIc,UAAU,IAAI,CAAlB,EAAqB;MACjBE,SAAS,CAACG,KAAV,GAAkBd,UAAU,CAACS,UAAD,EAAaR,gBAAb,CAA5B;IACH;EACJ,CAJQ,EAIN,CAACQ,UAAD,CAJM,CAAT;EAMA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAED,QADd;IAEI,KAAK,EAAE,CACHI,aADG,EAEHF,KAFG;EAFX,EADJ;AASH;AAAA"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -13,7 +13,7 @@ const NoHandle = () => null;
 
 const DEFAULT_PADDING_BOTTOM = 24;
 const DEFAULT_PADDING_TOP = 22;
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,