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

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","useSafeAreaInsets","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","useDynamicSnapPoints","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","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","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":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","useSafeAreaInsets","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","useDynamicSnapPoints","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","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","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":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,EAAgDC,QAAhD,QAAgE,OAAhE;AACA,SAASC,QAAT,EAAsCC,mBAAtC,QAA4E,cAA5E;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SACIC,mBADJ,EAGIC,gBAHJ,EAIIC,wBAJJ,EAKIC,eALJ,QAMO,sBANP;AAOA,SAASC,MAAT,EAAiBC,GAAjB,EAAqCC,cAArC,EAAqDC,gBAArD,QAA6E,mBAA7E;AACA,SAASC,QAAT,QAAyB,qBAAzB;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,oBAAP,MAAiC,+BAAjC;;AAEA,MAAMC,QAAQ,GAAG,MAAM,IAAvB;;AAEA,MAAMC,sBAAsB,GAAG,EAA/B;AACA,MAAMC,mBAAmB,GAAG,EAA5B;AACA,MAAMC,yBAAyB,GAAG,EAAlC;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eAAe,GAAG,GADhB;IAEFC,eAAe,EAAEC,mBAFf;IAGFC,YAAY,EAAEC,gBAHZ;IAIFC,QAJE;IAKFC,mBAAmB,GAAG,IALpB;IAMFC,UANE;IAOFC,KAPE;IAQFC,wBAAwB,GAAG,GARzB;IASFC,QATE;IAUFC,UAAU,GAAG,EAVX;IAWFC,KAAK,EAAEC;EAXL,IAYFd,KAZJ;EAcA,MAAMe,QAAQ,GAAGpC,MAAM,CAAS,CAAC,CAAV,CAAvB;EACA,MAAMqC,cAAc,GAAGrC,MAAM,CAA0B,IAA1B,CAA7B;EAEA,MAAM;IAAEsC,MAAM,EAAEC;EAAV,IAA2BpC,mBAAmB,EAApD;EACA,MAAM,CAACqC,gBAAD,EAAmBC,mBAAnB,IAA0CxC,QAAQ,CAAC,CAAD,CAAxD;EAEA,MAAMyC,6BAA6B,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYJ,gBAAgB,GAAGrB,yBAA/B,CAAtC;EACA,MAAM0B,qBAAqB,GAAGF,IAAI,CAACG,KAAL,CAAWP,YAAY,GAAGR,wBAA1B,IAAsDW,6BAApF;;EAEA,MAAMK,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEV;IAAF,IAAaU,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAT,mBAAmB,CAACH,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMa,YAAY,GAAGrD,WAAW,CAAEsD,QAAD,IAAsB;IACnDhB,QAAQ,CAACiB,OAAT,GAAmBD,QAAnB;;IAEA,IAAIpB,QAAJ,EAAc;MACVA,QAAQ,CAACoB,QAAD,CAAR;IACH;EACJ,CAN+B,EAM7B,CAACpB,QAAD,CAN6B,CAAhC;EAQA,MAAMsB,aAAa,GAAGxD,WAAW,CAAC,MAAM;IACpCqD,YAAY,CAAC,CAAC,CAAF,CAAZ;EACH,CAFgC,EAE9B,CAACA,YAAD,CAF8B,CAAjC;EAIApD,SAAS,CAAC,MAAM;IACZ,IAAI+B,KAAK,KAAKM,QAAQ,CAACiB,OAAvB,EAAgC;MAC5B;IACH;;IAED,IAAIjB,QAAQ,CAACiB,OAAT,GAAmB,CAAnB,IAAwBvB,KAAK,IAAI,CAArC,EAAwC;MAAA;;MACpC,yBAAAO,cAAc,CAACgB,OAAf,gFAAwBE,OAAxB;IACH,CAFD,MAEO,IAAInB,QAAQ,CAACiB,OAAT,IAAoB,CAApB,IAAyBvB,KAAK,GAAG,CAArC,EAAwC;MAAA;;MAC3C,0BAAAO,cAAc,CAACgB,OAAf,kFAAwBG,OAAxB;IACH,CAFM,MAEA;MAAA;;MACH;MACA,0BAAAnB,cAAc,CAACgB,OAAf,kFAAwBI,WAAxB,CAAoC3B,KAApC;IACH;EACJ,CAbQ,EAaN,CAACA,KAAD,CAbM,CAAT;EAeA,MAAM4B,KAAK,GAAG7C,QAAQ,EAAtB;EAEA,MAAMY,YAAY,GAAGC,gBAAgB,IAAIgC,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,GAA5D;EACA,MAAMtC,eAAe,GAAGb,GAAG,CAAC,CACxB;IACIoD,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,OAAd,CAAsBC,IAD3C;IAEIC,mBAAmB,EAAEzC,YAFzB;IAGI0C,oBAAoB,EAAE1C;EAH1B,CADwB,EAMxBD,mBANwB,CAAD,CAA3B;EASA,MAAM;IAAE4C,MAAM,EAAEC;EAAV,IAA8BjE,iBAAiB,EAArD;EAEA,MAAMkE,mBAA8B,GAAG5D,GAAG,CAAC,CACvC;IACIoD,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC,OAAd,CAAsBC,IAD3C;IAEIC,mBAAmB,EAAEzC,YAFzB;IAGI0C,oBAAoB,EAAE1C,YAH1B;IAII8C,UAAU,EAAE,CAJhB;IAKIC,SAAS,EAAE3B,qBALf;IAMI4B,SAAS,EAAE,GANf;IAOIC,QAAQ,EAAE,QAPd;IAQIC,aAAa,EAAE1D,sBAAsB,GAAGoD,eAR5C;IASIO,UAAU,EAAE1D;EAThB,CADuC,EAYvCiB,SAZuC,CAAD,CAA1C;EAeA,MAAM0C,qBAAqB,GAAGvD,eAAe,IAAI,CAAjD;;EAEA,MAAMwD,oBAAoB,GAAIzD,KAAD,iBACzB,oBAAC,mBAAD,eACQA,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,OAAO,EAAEC,eAJb;IAKI,aAAa,EAAEU,QAAQ,GAAG,OAAH,GAAa;EALxC,GADJ;;EAUA,MAAM+C,iBAAiB,GAAGnE,gBAAgB,CAAC,CAAD,CAA1C;EACA,MAAMoE,wBAAmE,GAAG;IAAEC,OAAO,EAAEF;EAAX,CAA5E;EACA,MAAMG,uBAAsC,GAAG;IAC3CC,QAAQ,EAAE,UADiC;IAE3CC,KAAK,EAAE,MAFoC;IAG3ChB,MAAM,EAAE;EAHmC,CAA/C;;EAKA,MAAMiB,SAAS,GAAG,CAACC,SAAD,EAAoBC,OAApB,KAAwC;IACtD,MAAMC,SAAS,GAAGD,OAAO,GAAG,CAAC,CAA7B;IAEArF,QAAQ,CAACuF,MAAT,CAAgBV,iBAAhB,EAAmC;MAC/BW,OAAO,EAAEF,SAAS,GAAG,CAAH,GAAO,CADM;MAE/BG,QAAQ,EAAE,CAFqB;MAG/BC,eAAe,EAAEjF;IAHc,CAAnC,EAIGkF,KAJH;EAKH,CARD;;EAUA,MAAM;IACFC,oBADE;IAEFC,kBAFE;IAGFC,qBAHE;IAIFC;EAJE,IAKFlF,oBAAoB,CAACkB,UAAD,CALxB;EAOA,oBACI,oBAAC,wBAAD,qBACI,oBAAC,gBAAD;IACI,iBAAiB,EAAE4C,qBAAqB,GAAG/D,mBAAH,GAAyBgE,oBADrE,CAEI;IAFJ;IAGI,eAAe,EAAEvD,eAHrB;IAII,cAAc,EAAE,KAJpB;IAKI,KAAK,EAAEO,KALX;IAMI,eAAe,EAAEd,QANrB;IAOI,QAAQ,EAAEmC,YAPd;IAQI,SAAS,EAAEG,aARf;IASI,GAAG,EAAEjB,cATT;IAUI,oBAAoB,EAAE6D,OAAO,CAAClE,QAAD,CAVjC;IAWI,mBAAmB,EAAEJ,mBAXzB;IAYI,qBAAqB,EAAEiB,qBAZ3B;IAaI,QAAQ,EAAEqD,OAAO,CAACrE,UAAD,CAbrB;IAcI,SAAS,EAAEA,UAAU,GAAGwD,SAAH,GAAec,SAdxC;IAeI,UAAU,EAAEJ,kBAfhB;IAgBI,YAAY,EAAED,oBAhBlB;IAiBI,aAAa,EAAEE;EAjBnB,GAmBKnE,UAAU,gBACP,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEmD;EAAtB,gBACI,oBAAC,MAAD;IACI,QAAQ,EAAEjC,sBADd;IAEI,KAAK,EAAEmC;EAFX,GAIKrD,UAJL,CADJ,CADO,GASP,IA5BR,eA8BI,oBAAC,eAAD;IACI,QAAQ,EAAEoE,mBADd;IAEI,KAAK,EAAE3B;EAFX,GAIK3C,QAJL,CA9BJ,CADJ,CADJ;AAyCH;AAAA"}

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -33,7 +33,7 @@ const useStyles = function () {
   };
 };
 
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 export default function BottomSheet(props) {
   const {
     backdropOpacity,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","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","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","filteredSnapPoints","filter","point","convertedSnapPoints","handleLayout","highestSnapPoint","translateY","length","contentStyles","maxHeight","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":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAA4BC,mBAA5B,EAAiDC,IAAjD,QAA6D,cAA7D;AACA,SAASC,MAAT,EAAiBC,GAAjB,EAAsBC,KAAtB,EAA6BC,UAA7B,EAAyCC,QAAzC,QAAyD,mBAAzD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AAEA,OAAOC,oBAAP,MAAiC,wBAAjC;;AAIA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,eAAe,EAAEV,KAAK,CAACW,OAAN,CAAcC,OAAd,CAAsBC,IADpC;MAEHC,mBAAmB,EAAEd,KAAK,CAACe,KAAN,CAAYC,MAAZ,CAAmBC,GAFrC;MAGHC,oBAAoB,EAAElB,KAAK,CAACe,KAAN,CAAYC,MAAZ,CAAmBC,GAHtC;MAIHE,QAAQ,EAAE,CAJP;MAKHC,SAAS,EAAE,GALR;MAMHC,QAAQ,EAAE,QANP;MAOHC,aAAa,EAAEtB,KAAK,CAACuB,OAAN,CAAc,CAAd,CAPZ;MAQHC,UAAU,EAAExB,KAAK,CAACuB,OAAN,CAAc,GAAd;IART,CAVJ;IAoBHE,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBlB,KAAK,EAAE;IAFS;EApBjB,CAAP;AAyBH,CA5BD;;AA8BA,MAAMmB,yBAAyB,GAAG,EAAlC;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,YAFE;IAGFC,QAHE;IAIFC,mBAAmB,GAAG,IAJpB;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG,EATX;IAUFC,KAAK,EAAEC;EAVL,IAWFX,KAXJ;EAaA,MAAMY,MAAM,GAAG1C,SAAS,EAAxB;EAEA,MAAM;IAAE2C,MAAM,EAAEC;EAAV,IAA2BrD,mBAAmB,EAApD;EAEA,MAAM,CAACsD,gBAAD,EAAmBC,mBAAnB,IAA0CxD,QAAQ,CAAC,CAAD,CAAxD;EAEA,MAAMyD,6BAA6B,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYJ,gBAAgB,GAAGjB,yBAA/B,CAAtC;EACA,MAAMsB,qBAAqB,GAAGF,IAAI,CAACG,KAAL,CAAWP,YAAY,GAAGP,wBAA1B,IAAsDU,6BAApF;;EAEA,MAAMK,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEV;IAAF,IAAaU,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAT,mBAAmB,CAACH,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMa,WAAW,GAAG,MAAM;IACtB,IAAIlB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMmB,kBAAkB,GAAGlB,UAAU,CAACmB,MAAX,CAAkBC,KAAK,IAAIA,KAAK,KAAK,gBAArC,CAA3B;EAEA,MAAM;IACFC,mBADE;IAEFC,YAFE;IAGFC;EAHE,IAIF/D,oBAAoB,CAAC;IACrBmC,mBADqB;IAErBgB,qBAFqB;IAGrBX,UAAU,EAAEkB;EAHS,CAAD,CAJxB;EAUA,MAAMM,UAAU,GAAGH,mBAAmB,CAACI,MAApB,GAA6B,CAA7B,GACbF,gBAAgB,IAAIF,mBAAmB,CAACxB,KAAD,CAAnB,IAA8B,CAAlC,CADH,GAEb,CAFN;EAIA,MAAM6B,aAAa,GAAGvE,GAAG,CAAC,CACtBgD,MAAM,CAAChC,KADe,EAEtB,EACI,IAAIsB,YAAY,GAAG;MAAEjB,mBAAmB,EAAEiB,YAAvB;MAAqCb,oBAAoB,EAAEa;IAA3D,CAAH,GAA+E,EAA/F,CADJ;IAEI,IAAI,CAACE,mBAAD,IAAwB4B,gBAAgB,KAAKZ,qBAA7C,GAAqE;MAAEP,MAAM,EAAEmB;IAAV,CAArE,GAAoG,EAAxG,CAFJ;IAGII,SAAS,EAAEhB;EAHf,CAFsB,EAOtBT,SAPsB,CAAD,CAAzB;EAUA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEV,eADrB;IAEI,OAAO,EAAEyB,WAFb;IAGI,OAAO,EAAEpB,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE1C,GAAG,CAAC,CAACE,UAAU,CAACuE,YAAZ,EAA0BzB,MAAM,CAACxC,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IAAW,UAAU,EAAE6D;EAAvB,GACK5B,UAAU,gBACP,oBAAC,MAAD;IACI,QAAQ,EAAEiB,sBADd;IAEI,KAAK,EAAE,CAACV,MAAM,CAAChB,kBAAR,EAA4B;MAAE0C,GAAG,EAAE,CAACvB;IAAR,CAA5B;EAFX,GAIKV,UAJL,CADO,GAOP,IARR,eAUI,oBAAC,IAAD;IACI,QAAQ,EAAE0B,YADd;IAEI,KAAK,EAAEI;EAFX,GAIKhC,QAJL,CAVJ,CANJ,CADJ;AA0BH;AAAA"}
+{"version":3,"names":["React","useState","useWindowDimensions","View","Column","css","Modal","StyleSheet","useTheme","AnimatedY","useDynamicSnapPoints","useStyles","theme","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","topElementHeight","setTopElementHeight","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","filteredSnapPoints","filter","point","convertedSnapPoints","handleLayout","highestSnapPoint","translateY","length","contentStyles","maxHeight","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/module/Carousel/components/ScrollViewGesture.js

@@ -1,12 +1,9 @@
-import React, { useCallback } from 'react';
-import { Animated, Platform } from 'react-native';
-import { PanGestureHandler, State as GestureHandlerState } from 'react-native-gesture-handler';
-import * as R from 'ramda';
+import React from 'react';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 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 = [GestureHandlerState.CANCELLED, GestureHandlerState.END, GestureHandlerState.FAILED];
+const WEB_TOUCH_ACTION = 'pan-y';
 
 function shouldScrollToAdjacent(translationX, velocityX) {
   const isSameDirection = translationX * velocityX > 0;
@@ -27,43 +24,25 @@ export default function ScrollViewGesture(props) {
     pause: pauseAutoplay,
     resume: resumeAutoplay
   } = autoplayController;
-  const handleGestureBegin = useCallback(() => {
+  const panGesture = Gesture.Pan().runOnJS(true).activeOffsetX([-ACTIVE_OFFSET_ABS_X, ACTIVE_OFFSET_ABS_X]).enabled(scrollEnabled).onBegin(() => {
     pauseAutoplay();
     interruptAnimation();
-  }, [interruptAnimation, pauseAutoplay]);
-  const handleGestureEvent = useCallback(Animated.event([{
-    nativeEvent: {
-      translationX: gestureTranslationX
-    }
-  }], {
-    useNativeDriver: R.not(Platform.OS === 'android' && Platform.Version === 31)
-  }), []);
-  const handleHandlerStateChange = useCallback(event => {
-    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.createElement(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.createElement(GestureDetector, {
+    touchAction: WEB_TOUCH_ACTION,
+    gesture: panGesture
+  }, children);
 }
 //# sourceMappingURL=ScrollViewGesture.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","Animated","Platform","PanGestureHandler","State","GestureHandlerState","R","SCROLL_TO_ADJACENT_TX_THRESHOLD","SCROLL_TO_ADJACENT_VX_THRESHOLD","ACTIVE_OFFSET_ABS_X","activeOffsetX","endAnimationStates","CANCELLED","END","FAILED","shouldScrollToAdjacent","translationX","velocityX","isSameDirection","isEnoughMovement","Math","abs","ScrollViewGesture","props","autoplayController","children","interruptAnimation","gestureTranslationX","scrollEnabled","startPagingAnimation","pause","pauseAutoplay","resume","resumeAutoplay","handleGestureBegin","handleGestureEvent","event","nativeEvent","useNativeDriver","not","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,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,SAASC,QAAT,EAAmBC,QAAnB,QAAmC,cAAnC;AAEA,SAASC,iBAAT,EAA4BC,KAAK,IAAIC,mBAArC,QAAgE,8BAAhE;AACA,OAAO,KAAKC,CAAZ,MAAmB,OAAnB;AAYA,MAAMC,+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,CACxDN,mBAAmB,CAACO,SADoC,EAExDP,mBAAmB,CAACQ,GAFoC,EAGxDR,mBAAmB,CAACS,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,KAA0BT,+BAA1B,IACGa,IAAI,CAACC,GAAL,CAASJ,SAAT,KAAuBT,+BAF9B;EAIA,OAAOU,eAAe,IAAIC,gBAA1B;AACH;;AAED,eAAe,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,GAAGlC,WAAW,CAAC,MAAM;IACzC+B,aAAa;IAEbL,kBAAkB;EACrB,CAJqC,EAInC,CAACA,kBAAD,EAAqBK,aAArB,CAJmC,CAAtC;EAMA,MAAMI,kBAAkB,GAAGnC,WAAW,CAACC,QAAQ,CAACmC,KAAT,CACnC,CAAC;IAAEC,WAAW,EAAE;MAAErB,YAAY,EAAEW;IAAhB;EAAf,CAAD,CADmC,EAEnC;IAAEW,eAAe,EAAEhC,CAAC,CAACiC,GAAF,CAAMrC,QAAQ,CAACsC,EAAT,KAAgB,SAAhB,IAA6BtC,QAAQ,CAACuC,OAAT,KAAqB,EAAxD;EAAnB,CAFmC,CAAD,EAGnC,EAHmC,CAAtC;EAKA,MAAMC,wBAAwB,GAAG1C,WAAW,CAAEoC,KAAD,IAA8C;IACvF,MAAM;MAAEC,WAAW,EAAE;QAAErB,YAAF;QAAgBC,SAAhB;QAA2B0B;MAA3B;IAAf,IAAsDP,KAA5D;;IAEA,IAAIzB,kBAAkB,CAACiC,QAAnB,CAA4BD,KAA5B,CAAJ,EAAwC;MACpC,MAAME,SAA0B,GAAG9B,sBAAsB,CAACC,YAAD,EAAeC,SAAf,CAAtB,GAC5BD,YAAY,GAAG,CAAf,GAAmB,MAAnB,GAA4B,MADA,GAE7B,MAFN;MAIAa,oBAAoB,CAChB,aADgB,EAEhB;QACIgB,SAAS,EAAEA,SADf;QAEIC,uBAAuB,EAAE,IAF7B;QAGIC,uBAAuB,EAAE/B;MAH7B,CAFgB,CAApB;MASAiB,cAAc;IACjB;EACJ,CAnB2C,EAmBzC,CAACJ,oBAAD,EAAuBI,cAAvB,CAnByC,CAA5C;EAqBA,oBACI,oBAAC,iBAAD;IACI,aAAa,EAAEvB,aADnB;IAEI,QAAQ,EAAEe,QAFd;IAGI,OAAO,EAAEG,aAHb;IAII,OAAO,EAAEM,kBAJb;IAKI,cAAc,EAAEC,kBALpB;IAMI,oBAAoB,EAAEO;EAN1B,EADJ;AAUH"}
+{"version":3,"names":["React","GestureDetector","Gesture","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","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,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,eAAT,EAA0BC,OAA1B,QAAyC,8BAAzC;AAYA,MAAMC,+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;;AAED,eAAe,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,GAAGxB,OAAO,CAACyB,GAAR,GACdC,OADc,CACN,IADM,EAEdC,aAFc,CAEA,CAAC,CAACxB,mBAAF,EAAuBA,mBAAvB,CAFA,EAGdyB,OAHc,CAGNV,aAHM,EAIdW,OAJc,CAIN,MAAM;IACXR,aAAa;IACbL,kBAAkB;EACrB,CAPc,EAQdc,QARc,CAQJC,KAAD,IAAW;IACjBd,mBAAmB,CAACe,QAApB,CAA6BD,KAAK,CAACzB,YAAnC;EACH,CAVc,EAWd2B,KAXc,CAWPF,KAAD,IAAW;IACd,MAAMG,SAA0B,GAAG7B,sBAAsB,CAAC0B,KAAK,CAACzB,YAAP,EAAqByB,KAAK,CAACxB,SAA3B,CAAtB,GAC5BwB,KAAK,CAACzB,YAAN,GAAqB,CAArB,GAAyB,MAAzB,GAAkC,MADN,GAE7B,MAFN;IAIAa,oBAAoB,CAChB,aADgB,EAEhB;MACIe,SAAS,EAAEA,SADf;MAEIC,uBAAuB,EAAE,IAF7B;MAGIC,uBAAuB,EAAEL,KAAK,CAACzB;IAHnC,CAFgB,CAApB;IASAiB,cAAc;EACjB,CA1Bc,EA2Bdc,UA3Bc,CA2BH,MAAM;IACdd,cAAc;EACjB,CA7Bc,CAAnB;EA+BA,oBACI,oBAAC,eAAD;IACI,WAAW,EAAEnB,gBADjB;IAEI,OAAO,EAAEoB;EAFb,GAIKT,QAJL,CADJ;AAQH"}

package/build/module/ComicViewer/FastScroll.js

@@ -50,7 +50,7 @@ const FastScroll = /*#__PURE__*/React.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/module/ComicViewer/FastScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","R","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","baseColors","commonColors","offsetToPercentage","percentageToOffset","INDICATOR_WIDTH","styles","create","indicator","width","height","backgroundColor","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","initialLastIndicatorOffset","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","onContentScroll","event","current","nativeEvent","y","offset","getIsIndicatorDragging","handleUpdate","setIsIndicatorDragging","pan","Pan","onBegin","e","onUpdate","translationY","onFinalize","hide","duration","show","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":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","R","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","baseColors","commonColors","offsetToPercentage","percentageToOffset","INDICATOR_WIDTH","styles","create","indicator","width","height","backgroundColor","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","initialLastIndicatorOffset","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","onContentScroll","event","current","nativeEvent","y","offset","getIsIndicatorDragging","handleUpdate","setIsIndicatorDragging","pan","Pan","onBegin","e","onUpdate","translationY","onFinalize","hide","duration","show","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/module/FlipCard/FlipCard.js

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

package/build/module/FlipCard/FlipCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","StyleSheet","View","Animated","useAnimatedStyle","useSharedValue","withTiming","styles","create","container","height","width","animatedCard","alignItems","backfaceVisibility","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","animatedFrontCardStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","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,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAGA,MAAMC,MAAM,GAAGN,UAAU,CAACO,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;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,SAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFJ,KALJ;EAOA,MAAMK,WAAW,GAAGpB,cAAc,CAAC,CAAD,CAAlC;EAEA,MAAMqB,sBAAsB,GAAGtB,gBAAgB,CAAC,MAAM;IAClD,OAAO;MACHuB,MAAM,EAAEF,WAAW,CAACG,KAAZ,GAAoBV,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;MAEHW,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEb;MAAf,CADO,EAEP;QAAEc,OAAO,EAAG,GAAEN,WAAW,CAACG,KAAM;MAAhC,CAFO;IAFR,CAAP;EAOH,CAR8C,EAQ5C,EAR4C,CAA/C;EAUA,MAAMI,qBAAqB,GAAG5B,gBAAgB,CAAC,MAAM;IACjD,OAAO;MACHuB,MAAM,EAAEF,WAAW,CAACG,KAAZ,IAAqBV,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;MAEHW,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEb;MAAf,CADO,EAEP;QAAEc,OAAO,EAAG,GAAGN,WAAW,CAACG,KAAZ,GAAoB,GAAK;MAAxC,CAFO;IAFR,CAAP;EAOH,CAR6C,EAQ3C,EAR2C,CAA9C;EAUA5B,SAAS,CAAC,MAAM;IACZyB,WAAW,CAACG,KAAZ,GAAoB,CAApB;IACAH,WAAW,CAACG,KAAZ,GAAoBtB,UAAU,CAAC,GAAD,EAAM;MAAE2B,QAAQ,EAAE;IAAZ,CAAN,CAA9B;EACH,CAHQ,EAGN,CAACV,cAAD,CAHM,CAAT;EAKA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAE,CAAChB,MAAM,CAACE,SAAR,EAAmBe,KAAnB;EAAb,gBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACjB,MAAM,CAACK,YAAR,EAAsBc,sBAAtB;EAAtB,GACKJ,SADL,CADJ,eAKI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACf,MAAM,CAACK,YAAR,EAAsBoB,qBAAtB;EAAtB,GACKX,QADL,CALJ,CADJ;AAWH;AAAA"}
+{"version":3,"names":["React","useEffect","StyleSheet","View","Animated","useAnimatedStyle","useSharedValue","withTiming","styles","create","container","height","width","animatedCard","alignItems","backfaceVisibility","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","animatedFrontCardStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","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,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAGA,MAAMC,MAAM,GAAGN,UAAU,CAACO,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;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,SAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFJ,KALJ;EAOA,MAAMK,WAAW,GAAGpB,cAAc,CAAC,CAAD,CAAlC;EAEA,MAAMqB,sBAAsB,GAAGtB,gBAAgB,CAAC,MAAM;IAClD,OAAO;MACHuB,MAAM,EAAEF,WAAW,CAACG,KAAZ,GAAoBV,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;MAEHW,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEb;MAAf,CADO,EAEP;QAAEc,OAAO,EAAG,GAAEN,WAAW,CAACG,KAAM;MAAhC,CAFO;IAFR,CAAP;EAOH,CAR8C,EAQ5C,CAACH,WAAD,CAR4C,CAA/C;EAUA,MAAMO,qBAAqB,GAAG5B,gBAAgB,CAAC,MAAM;IACjD,OAAO;MACHuB,MAAM,EAAEF,WAAW,CAACG,KAAZ,IAAqBV,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;MAEHW,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEb;MAAf,CADO,EAEP;QAAEc,OAAO,EAAG,GAAGN,WAAW,CAACG,KAAZ,GAAoB,GAAK;MAAxC,CAFO;IAFR,CAAP;EAOH,CAR6C,EAQ3C,CAACH,WAAD,CAR2C,CAA9C;EAUAzB,SAAS,CAAC,MAAM;IACZyB,WAAW,CAACG,KAAZ,GAAoB,CAApB;IACAH,WAAW,CAACG,KAAZ,GAAoBtB,UAAU,CAAC,GAAD,EAAM;MAAE2B,QAAQ,EAAE;IAAZ,CAAN,CAA9B;EACH,CAHQ,EAGN,CAACV,cAAD,CAHM,CAAT;EAKA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAE,CAAChB,MAAM,CAACE,SAAR,EAAmBe,KAAnB;EAAb,gBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACjB,MAAM,CAACK,YAAR,EAAsBc,sBAAtB;EAAtB,GACKJ,SADL,CADJ,eAKI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACf,MAAM,CAACK,YAAR,EAAsBoB,qBAAtB;EAAtB,GACKX,QADL,CALJ,CADJ;AAWH;AAAA"}

package/build/module/hooks/useUnstableCollapsibleAppBar.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","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":["useCallback","useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","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/module/hooks/useUnstableToggleDisplayStyle.js

@@ -12,7 +12,7 @@ export default function useAnimatedDisplayStyle(vectorY) {
   }, [threshold]);
   return useAnimatedStyle(() => ({
     display: display.value
-  }), []);
+  }), [display]);
 }
 ;
 //# sourceMappingURL=useUnstableToggleDisplayStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useAnimatedReaction","useAnimatedStyle","useSharedValue","useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","value","vy"],"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,SAASA,mBAAT,EAA8BC,gBAA9B,EAAgDC,cAAhD,QAAsE,yBAAtE;AAEA,eAAe,SAASC,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAGL,cAAc,CAACI,cAAD,CAA9B;EAEAN,mBAAmB,CACf,MAAMI,OAAO,CAACI,KADC,EAEdC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIJ,SAAV,EAAqB;MACjBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGJ,SAAT,EAAoB;MACvBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH;EACJ,CARc,EASf,CAACH,SAAD,CATe,CAAnB;EAYA,OAAOJ,gBAAgB,CAAC,OAAO;IAC3BM,OAAO,EAAEA,OAAO,CAACC;EADU,CAAP,CAAD,EAEnB,EAFmB,CAAvB;AAGH;AAAA"}
+{"version":3,"names":["useAnimatedReaction","useAnimatedStyle","useSharedValue","useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","value","vy"],"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,SAASA,mBAAT,EAA8BC,gBAA9B,EAAgDC,cAAhD,QAAsE,yBAAtE;AAEA,eAAe,SAASC,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAGL,cAAc,CAACI,cAAD,CAA9B;EAEAN,mBAAmB,CACf,MAAMI,OAAO,CAACI,KADC,EAEdC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIJ,SAAV,EAAqB;MACjBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGJ,SAAT,EAAoB;MACvBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH;EACJ,CARc,EASf,CAACH,SAAD,CATe,CAAnB;EAYA,OAAOJ,gBAAgB,CAAC,OAAO;IAC3BM,OAAO,EAAEA,OAAO,CAACC;EADU,CAAP,CAAD,EAEnB,CAACD,OAAD,CAFmB,CAAvB;AAGH;AAAA"}

package/build/typescript/Carousel/components/ScrollViewGesture.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Animated } from 'react-native';
 import type { AutoplayController, StartPagingAnimation } from '../types';
 export interface ScrollViewGestureProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "3.0.0-alpha.20",
+  "version": "3.0.0-alpha.22",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -28,7 +28,7 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
-    "react-native-gesture-handler": "^2.0.0",
+    "react-native-gesture-handler": "^2.16.0",
     "react-native-pager-view": "^4.0.0",
     "react-native-safe-area-context": "^4.0.0"
   },
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1791de45a37a8f9c9810cfaaa3b84908ba0bda83"
+  "gitHead": "1207f252b9d062d684bd147c2c51764f229ce86f"
 }

package/src/AnimatedY/AnimatedY.tsx

@@ -18,7 +18,7 @@ export default function AnimatedY(props: AnimatedYProps) {
     const animatedY = useSharedValue(translateY);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
-    }), []);
+    }), [animatedY]);
 
     useEffect(() => {
         if (translateY >= 0) {

package/src/BottomSheet/BottomSheetNative.tsx

@@ -18,7 +18,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: BottomSheetProps) {
     const {

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -38,7 +38,7 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     };
 };
 
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 
 export default function BottomSheet(props: BottomSheetProps) {
     const {