@fountain-ui/lab 3.0.0-alpha.21 → 3.0.0-alpha.23

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -33,11 +33,11 @@ const NoHandle = () => null;
 
 const DEFAULT_PADDING_BOTTOM = 24;
 const DEFAULT_PADDING_TOP = 22;
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 
 function BottomSheet(props) {
   const {
-    backdropOpacity = 0.5,
+    backdropOpacity = 0.75,
     backgroundStyle: backgroundStyleProp,
     borderRadius: borderRadiusProp,
     children,

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

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

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -50,11 +50,11 @@ const useStyles = function () {
   };
 };
 
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 
 function BottomSheet(props) {
   const {
-    backdropOpacity,
+    backdropOpacity = 0.75,
     borderRadius,
     children,
     enableDynamicSizing = true,

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","filteredSnapPoints","filter","point","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","length","contentStyles","css","maxHeight","StyleSheet","absoluteFill","top"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            width: '100%',\n        },\n    };\n};\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 16;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        borderRadius,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeightWithoutOffset;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const filteredSnapPoints = snapPoints.filter(point => point !== 'CONTENT_HEIGHT');\n\n    const {\n        convertedSnapPoints,\n        handleLayout,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxDynamicContentSize,\n        snapPoints: filteredSnapPoints,\n    });\n\n    const translateY = convertedSnapPoints.length > 0\n        ? highestSnapPoint - (convertedSnapPoints[index] ?? 0)\n        : 0;\n\n    const contentStyles = css([\n        styles.paper,\n        {\n            ...(borderRadius ? { borderTopLeftRadius: borderRadius, borderTopRightRadius: borderRadius } : {}),\n            ...(!enableDynamicSizing && highestSnapPoint !== maxDynamicContentSize ? { height: highestSnapPoint } : {}),\n            maxHeight: maxDynamicContentSize,\n        },\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            backdropOpacity={backdropOpacity}\n            onClose={handleClose}\n            visible={index >= 0}\n            style={css([StyleSheet.absoluteFill, styles.root])}\n        >\n            <AnimatedY translateY={translateY}>\n                {topElement ? (\n                    <Column\n                        onLayout={handleTopElementLayout}\n                        style={[styles.topElementLocation, { top: -topElementHeight }]}\n                    >\n                        {topElement}\n                    </Column>\n                ) : null}\n\n                <View\n                    onLayout={handleLayout}\n                    style={contentStyles}\n                >\n                    {children}\n                </View>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","backgroundColor","palette","surface","base","borderTopLeftRadius","shape","radius","xxl","borderTopRightRadius","flexGrow","minHeight","overflow","paddingBottom","spacing","paddingTop","topElementLocation","position","TOP_ELEMENT_HIDDEN_OFFSET","BottomSheet","props","backdropOpacity","borderRadius","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","styles","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","topElementHeightWithoutOffset","Math","max","maxDynamicContentSize","round","handleTopElementLayout","event","nativeEvent","layout","handleClose","filteredSnapPoints","filter","point","convertedSnapPoints","handleLayout","highestSnapPoint","useDynamicSnapPoints","translateY","length","contentStyles","css","maxHeight","StyleSheet","absoluteFill","top"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';\nimport { Column, css, Modal, StyleSheet, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'topElementLocation'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            justifyContent: 'flex-end',\n            zIndex: theme.zIndex.dialog,\n        },\n        animated: {\n            alignSelf: 'center',\n            maxWidth: 720,\n            width: '100%',\n        },\n        paper: {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: theme.shape.radius.xxl,\n            borderTopRightRadius: theme.shape.radius.xxl,\n            flexGrow: 1,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        topElementLocation: {\n            position: 'absolute',\n            width: '100%',\n        },\n    };\n};\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.75,\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;;AACA;;AACA;;AAEA;;AAEA;;;;;;;;AAIA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEJ,KAAK,CAACI,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,EAAEX,KAAK,CAACY,OAAN,CAAcC,OAAd,CAAsBC,IADpC;MAEHC,mBAAmB,EAAEf,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,GAFrC;MAGHC,oBAAoB,EAAEnB,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,GAHtC;MAIHE,QAAQ,EAAE,CAJP;MAKHC,SAAS,EAAE,GALR;MAMHC,QAAQ,EAAE,QANP;MAOHC,aAAa,EAAEvB,KAAK,CAACwB,OAAN,CAAc,CAAd,CAPZ;MAQHC,UAAU,EAAEzB,KAAK,CAACwB,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;;AAEe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eAAe,GAAG,IADhB;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,GAAG3C,SAAS,EAAxB;EAEA,MAAM;IAAE4C,MAAM,EAAEC;EAAV,IAA2B,IAAAC,gCAAA,GAAjC;EAEA,MAAM,CAACC,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,CAAT,CAAhD;EAEA,MAAMC,6BAA6B,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYL,gBAAgB,GAAGlB,yBAA/B,CAAtC;EACA,MAAMwB,qBAAqB,GAAGF,IAAI,CAACG,KAAL,CAAWT,YAAY,GAAGP,wBAA1B,IAAsDY,6BAApF;;EAEA,MAAMK,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEZ;IAAF,IAAaY,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAV,mBAAmB,CAACJ,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMe,WAAW,GAAG,MAAM;IACtB,IAAIpB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMqB,kBAAkB,GAAGpB,UAAU,CAACqB,MAAX,CAAkBC,KAAK,IAAIA,KAAK,KAAK,gBAArC,CAA3B;EAEA,MAAM;IACFC,mBADE;IAEFC,YAFE;IAGFC;EAHE,IAIF,IAAAC,6BAAA,EAAqB;IACrB/B,mBADqB;IAErBkB,qBAFqB;IAGrBb,UAAU,EAAEoB;EAHS,CAArB,CAJJ;EAUA,MAAMO,UAAU,GAAGJ,mBAAmB,CAACK,MAApB,GAA6B,CAA7B,GACbH,gBAAgB,IAAIF,mBAAmB,CAAC1B,KAAD,CAAnB,IAA8B,CAAlC,CADH,GAEb,CAFN;EAIA,MAAMgC,aAAa,GAAG,IAAAC,SAAA,EAAI,CACtB3B,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,IAAwB8B,gBAAgB,KAAKZ,qBAA7C,GAAqE;MAAET,MAAM,EAAEqB;IAAV,CAArE,GAAoG,EAAxG,CAFJ;IAGIM,SAAS,EAAElB;EAHf,CAFsB,EAOtBX,SAPsB,CAAJ,CAAtB;EAUA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEV,eADrB;IAEI,OAAO,EAAE2B,WAFb;IAGI,OAAO,EAAEtB,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAiC,SAAA,EAAI,CAACE,gBAAA,CAAWC,YAAZ,EAA0B9B,MAAM,CAACxC,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IAAW,UAAU,EAAEgE;EAAvB,GACK/B,UAAU,gBACP,6BAAC,YAAD;IACI,QAAQ,EAAEmB,sBADd;IAEI,KAAK,EAAE,CAACZ,MAAM,CAAChB,kBAAR,EAA4B;MAAE+C,GAAG,EAAE,CAAC3B;IAAR,CAA5B;EAFX,GAIKX,UAJL,CADO,GAOP,IARR,eAUI,6BAAC,iBAAD;IACI,QAAQ,EAAE4B,YADd;IAEI,KAAK,EAAEK;EAFX,GAIKnC,QAJL,CAVJ,CANJ,CADJ;AA0BH;;AAAA"}

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

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

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

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

package/build/module/BottomSheet/BottomSheetNative.js

@@ -13,10 +13,10 @@ const NoHandle = () => null;
 
 const DEFAULT_PADDING_BOTTOM = 24;
 const DEFAULT_PADDING_TOP = 22;
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 export default function BottomSheet(props) {
   const {
-    backdropOpacity = 0.5,
+    backdropOpacity = 0.75,
     backgroundStyle: backgroundStyleProp,
     borderRadius: borderRadiusProp,
     children,

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

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -33,10 +33,10 @@ const useStyles = function () {
   };
 };
 
-const TOP_ELEMENT_HIDDEN_OFFSET = 16;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 export default function BottomSheet(props) {
   const {
-    backdropOpacity,
+    backdropOpacity = 0.75,
     borderRadius,
     children,
     enableDynamicSizing = true,

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":"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"}
+{"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 = 0.75,\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/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.21",
+  "version": "3.0.0-alpha.23",
   "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": "a14becb14e77ed3a206bd22a0e0c1a5026878e6f"
+  "gitHead": "7fbf959cedc5772feab5c9f6ba8ad649a8b160f6"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -18,11 +18,11 @@ 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 {
-        backdropOpacity = 0.5,
+        backdropOpacity = 0.75,
         backgroundStyle: backgroundStyleProp,
         borderRadius: borderRadiusProp,
         children,

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -38,11 +38,11 @@ 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 {
-        backdropOpacity,
+        backdropOpacity = 0.75,
         borderRadius,
         children,
         enableDynamicSizing = true,

package/src/Carousel/components/ScrollViewGesture.tsx

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