@fountain-ui/lab 2.0.0-beta.8 → 2.0.0-beta.80

package/build/commonjs/AnimatedY/AnimatedY.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = AnimatedY;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
@@ -13,7 +13,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ANIMATION_CONFIG = {
+  duration: 150,
+  easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
+};
 
 function AnimatedY(props) {
   const {
@@ -26,17 +29,12 @@ function AnimatedY(props) {
     transform: [{
       translateY: animatedY.value
     }]
-  }));
-
-  _react.default.useEffect(() => {
+  }), []);
+  (0, _react.useEffect)(() => {
     if (translateY >= 0) {
-      animatedY.value = (0, _reactNativeReanimated.withTiming)(translateY, {
-        duration: 150,
-        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
-      });
+      animatedY.value = (0, _reactNativeReanimated.withTiming)(translateY, ANIMATION_CONFIG);
     }
   }, [translateY]);
-
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     children: children,
     style: [animatedStyle, style]

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

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

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _core = require("@fountain-ui/core");
+
 var _styles = require("@fountain-ui/styles");
 
 var _bottomSheet = require("@gorhom/bottom-sheet");
@@ -25,15 +27,26 @@ function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
     children,
+    enableDynamicSizing = true,
+    header,
+    topElement,
     index,
+    maxHeightNormalizedRatio = 0.9,
     onChange,
-    snapPoints
+    snapPoints = [],
+    disableDefaultBackgroundColor = false,
+    disableDefaultShadow = false
   } = props;
 
   const indexRef = _react.default.useRef(-1);
 
   const bottomSheetRef = _react.default.useRef(null);
 
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+
   const handleChange = _react.default.useCallback(newIndex => {
     indexRef.current = newIndex;
 
@@ -71,23 +84,54 @@ function BottomSheet(props) {
   const shadow = theme.shadow[12];
   const modalStyle = {
     backgroundColor: '#ffffff00',
-    ..._reactNative.Platform.select({
+    borderTopLeftRadius: theme.shape.roundnessExtra,
+    borderTopRightRadius: theme.shape.roundnessExtra,
+    ...(disableDefaultShadow ? {} : _reactNative.Platform.select({
       android: shadow === null || shadow === void 0 ? void 0 : shadow.elevation,
       ios: shadow === null || shadow === void 0 ? void 0 : shadow.shadow,
       web: shadow === null || shadow === void 0 ? void 0 : shadow.boxShadow
-    })
+    }))
   };
   const backgroundStyle = {
-    backgroundColor: theme.palette.paper.default
+    backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,
+    borderTopLeftRadius: theme.shape.roundnessExtra,
+    borderTopRightRadius: theme.shape.roundnessExtra
+  };
+  const contentWrapperStyle = {
+    flex: 1,
+    borderTopLeftRadius: theme.shape.roundnessExtra,
+    borderTopRightRadius: theme.shape.roundnessExtra,
+    overflow: 'hidden'
   };
   const isBackdropTransparent = backdropOpacity <= 0;
 
   const OpacityAwareBackdrop = props => /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetBackdrop, _extends({}, props, {
     appearsOnIndex: 0,
     disappearsOnIndex: -1,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    pressBehavior: onChange ? 'close' : 'none'
   }));
 
+  const topElementOpacity = (0, _core.useAnimatedValue)(0);
+  const topElementAnimationStyle = {
+    opacity: topElementOpacity
+  };
+  const topElementLocationStyle = {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0
+  };
+
+  const onAnimate = (fromIndex, toIndex) => {
+    const isVisible = toIndex > -1;
+
+    _reactNative.Animated.timing(topElementOpacity, {
+      toValue: isVisible ? 1 : 0,
+      duration: 0,
+      useNativeDriver: _core.isNotAndroid12
+    }).start();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
     backdropComponent: isBackdropTransparent ? _TransparentBackdrop.default : OpacityAwareBackdrop // @ts-ignore
     ,
@@ -98,8 +142,22 @@ function BottomSheet(props) {
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
     snapPoints: snapPoints,
-    style: modalStyle
-  }, children));
+    style: modalStyle,
+    enablePanDownToClose: Boolean(onChange),
+    enableDynamicSizing: enableDynamicSizing,
+    maxDynamicContentSize: maxDynamicContentSize,
+    detached: Boolean(topElement),
+    onAnimate: topElement ? onAnimate : undefined
+  }, topElement ? /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: topElementAnimationStyle
+  }, /*#__PURE__*/_react.default.createElement(_core.Column, {
+    style: topElementLocationStyle
+  }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: contentWrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetScrollView, {
+    bounces: false,
+    stickyHeaderIndices: header ? [0] : undefined
+  }, header, children))));
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","React","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shadow","modalStyle","backgroundColor","Platform","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop","TransparentBackdrop"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform } from 'react-native';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n} from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        children,\n        index,\n        onChange,\n        snapPoints,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.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    const shadow = theme.shadow[12];\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        ...Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        }),\n    };\n    const backgroundStyle = {\n        backgroundColor: theme.palette.paper.default,\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        />\n    );\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n            >\n                {children}\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","indexRef","React","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","maxDynamicContentSize","Math","round","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shadow","modalStyle","backgroundColor","borderTopLeftRadius","shape","roundnessExtra","borderTopRightRadius","Platform","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","contentWrapperStyle","flex","overflow","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, Platform, useWindowDimensions, View } from 'react-native';\nimport { Column, useAnimatedValue, ExtendedStyle, isNotAndroid12 } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        children,\n        enableDynamicSizing = true,\n        header,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        disableDefaultBackgroundColor = false,\n        disableDefaultShadow = false,\n    } = props;\n\n    const indexRef = React.useRef<number>(-1);\n    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n    const handleChange = React.useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = React.useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    React.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    const shadow = theme.shadow[12];\n    const modalStyle = {\n        backgroundColor: '#ffffff00',\n        borderTopLeftRadius: theme.shape.roundnessExtra,\n        borderTopRightRadius: theme.shape.roundnessExtra,\n        ...(disableDefaultShadow ? {} : Platform.select<object>({\n            android: shadow?.elevation,\n            ios: shadow?.shadow,\n            web: shadow?.boxShadow,\n        })),\n    };\n    const backgroundStyle = {\n        backgroundColor: disableDefaultBackgroundColor ? '#ffffff00' : theme.palette.paper.default,\n        borderTopLeftRadius: theme.shape.roundnessExtra,\n        borderTopRightRadius: theme.shape.roundnessExtra,\n    };\n    const contentWrapperStyle = {\n        flex: 1,\n        borderTopLeftRadius: theme.shape.roundnessExtra,\n        borderTopRightRadius: theme.shape.roundnessExtra,\n        overflow: 'hidden',\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    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                snapPoints={snapPoints}\n                style={modalStyle}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column style={topElementLocationStyle}>\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                {/* @ts-ignore */}\n                <View style={contentWrapperStyle}>\n                    <BottomSheetScrollView\n                        bounces={false}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </BottomSheetScrollView>\n                </View>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     */\n    snapPoints: Array<number>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n    /**\n     * Opacity for BackdropComponent\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * BottomSheet children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Enable dynamic sizing for content size.\n     * @default true\n     */\n    enableDynamicSizing?: boolean;\n\n    /**\n     * Area to be fixed on the top of the bottom sheet.\n     */\n    header?: React.ReactNode;\n\n    /**\n     * Top element for displaying additional information on the bottom sheet.\n     */\n    topElement?: React.ReactNode;\n\n    /**\n     * Snap index. You could also provide -1 to bottom sheet in closed state.\n     */\n    index: number;\n\n    /**\n     * Maximum height(normalized value) of dialog\n     * ex. 30% => 0.3 / 90% => 0.9\n     * @default 0.9\n     */\n    maxHeightNormalizedRatio?: number;\n\n    /**\n     * Callback fired when the index is changed.\n     * Important! Use memoized value.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n     * Important! Use memoized value.\n     * Only number type or string type(~% format) can be used.\n     * @default []\n     */\n    snapPoints?: Array<number | string>;\n\n    /**\n     * Disable default backgroundColor.\n     * @default false\n     */\n    disableDefaultBackgroundColor?: boolean;\n\n    /**\n     * Disable default shadow.\n     * @default false\n     */\n    disableDefaultShadow?: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -7,10 +7,14 @@ exports.default = BottomSheet;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactNative = require("react-native");
+
 var _core = require("@fountain-ui/core");
 
 var _AnimatedY = _interopRequireDefault(require("../AnimatedY"));
 
+var _useDynamicSnapPoints = _interopRequireDefault(require("./useDynamicSnapPoints"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const useStyles = function () {
@@ -26,25 +30,34 @@ const useStyles = function () {
       width: '100%'
     },
     paper: {
+      borderTopLeftRadius: theme.shape.roundnessExtra,
+      borderTopRightRadius: theme.shape.roundnessExtra,
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0,
       flexGrow: 1,
       overflow: 'hidden'
+    },
+    topElementLocation: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%'
     }
   };
 };
 
-const calculateHeight = points => {
-  return points[points.length - 1] ?? 0;
-};
-
 function BottomSheet(props) {
   const {
     backdropOpacity,
     children,
+    enableDynamicSizing = true,
+    header,
+    topElement,
     index,
+    maxHeightNormalizedRatio = 0.9,
     onChange,
-    snapPoints
+    snapPoints = [],
+    disableDefaultBackgroundColor = false,
+    disableDefaultShadow = false
   } = props;
   const styles = useStyles();
 
@@ -54,8 +67,19 @@ function BottomSheet(props) {
     }
   };
 
-  const height = calculateHeight(snapPoints);
-  const translateY = height - (snapPoints[index] ?? 0);
+  const {
+    convertedSnapPoints,
+    handleContentSizeChange,
+    highestSnapPoint
+  } = (0, _useDynamicSnapPoints.default)({
+    enableDynamicSizing,
+    maxHeightNormalizedRatio,
+    snapPoints
+  });
+  const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);
+  const paperStyles = [styles.paper, {
+    height: highestSnapPoint
+  }];
   return /*#__PURE__*/_react.default.createElement(_core.Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,
@@ -64,12 +88,16 @@ function BottomSheet(props) {
   }, /*#__PURE__*/_react.default.createElement(_AnimatedY.default, {
     style: styles.animated,
     translateY: translateY
-  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
-    elevation: 12,
-    style: [styles.paper, {
-      height
-    }]
-  }, children)));
+  }, topElement ? /*#__PURE__*/_react.default.createElement(_core.Column, null, /*#__PURE__*/_react.default.createElement(_core.Column, {
+    style: styles.topElementLocation
+  }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_core.Paper, {
+    elevation: disableDefaultShadow ? 0 : 12,
+    style: paperStyles,
+    colorValue: disableDefaultBackgroundColor ? '#ffffff00' : undefined
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    onContentSizeChange: handleContentSizeChange,
+    stickyHeaderIndices: header ? [0] : undefined
+  }, header, children))));
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","calculateHeight","points","length","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","handleClose","height","translateY","css","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;\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            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n    };\n};\n\nconst calculateHeight = (points: BottomSheetProps['snapPoints']): number => {\n    return points[points.length - 1] ?? 0;\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        index,\n        onChange,\n        snapPoints,\n    } = props;\n\n    const styles = useStyles();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const height = calculateHeight(snapPoints);\n    const translateY = height - (snapPoints[index] ?? 0);\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\n                style={styles.animated}\n                translateY={translateY}\n            >\n                <Paper\n                    elevation={12}\n                    style={[\n                        styles.paper,\n                        { height },\n                    ]}\n                >\n                    {children}\n                </Paper>\n            </AnimatedY>\n        </Modal>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAKA,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,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,MAAMC,eAAe,GAAIC,MAAD,IAAoD;EACxE,OAAOA,MAAM,CAACA,MAAM,CAACC,MAAP,GAAgB,CAAjB,CAAN,IAA6B,CAApC;AACH,CAFD;;AAIe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAG1B,SAAS,EAAxB;;EAEA,MAAM2B,WAAW,GAAG,MAAM;IACtB,IAAIH,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMI,MAAM,GAAGZ,eAAe,CAACS,UAAD,CAA9B;EACA,MAAMI,UAAU,GAAGD,MAAM,IAAIH,UAAU,CAACF,KAAD,CAAV,IAAqB,CAAzB,CAAzB;EAEA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEM,WAFb;IAGI,OAAO,EAAEJ,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAO,SAAA,EAAI,CAACC,gBAAA,CAAWC,YAAZ,EAA0BN,MAAM,CAACvB,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IACI,KAAK,EAAEuB,MAAM,CAACnB,QADlB;IAEI,UAAU,EAAEsB;EAFhB,gBAII,6BAAC,WAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHH,MAAM,CAACf,KADJ,EAEH;MAAEiB;IAAF,CAFG;EAFX,GAOKN,QAPL,CAJJ,CANJ,CADJ;AAuBH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderTopLeftRadius","shape","roundnessExtra","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","topElementLocation","position","bottom","BottomSheet","props","backdropOpacity","children","enableDynamicSizing","header","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","disableDefaultBackgroundColor","disableDefaultShadow","styles","handleClose","convertedSnapPoints","handleContentSizeChange","highestSnapPoint","useDynamicSnapPoints","translateY","paperStyles","height","css","StyleSheet","absoluteFill","undefined"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Column, Modal, Paper, StyleSheet, css, 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            borderTopLeftRadius: theme.shape.roundnessExtra,\n            borderTopRightRadius: theme.shape.roundnessExtra,\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n            flexGrow: 1,\n            overflow: 'hidden',\n        },\n        topElementLocation: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        enableDynamicSizing = true,\n        header,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.9,\n        onChange,\n        snapPoints = [],\n        disableDefaultBackgroundColor = false,\n        disableDefaultShadow = false,\n    } = props;\n\n    const styles = useStyles();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    } = useDynamicSnapPoints({\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    });\n\n    const translateY = highestSnapPoint - (convertedSnapPoints[index] ?? 0);\n\n    const paperStyles = [\n        styles.paper,\n        { height: highestSnapPoint },\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\n                style={styles.animated}\n                translateY={translateY}\n            >\n                {topElement ? (\n                    <Column>\n                        <Column style={styles.topElementLocation}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={disableDefaultShadow ? 0 : 12}\n                    style={paperStyles}\n                    colorValue={disableDefaultBackgroundColor ? '#ffffff00' : undefined}\n                >\n                    <ScrollView\n                        onContentSizeChange={handleContentSizeChange}\n                        stickyHeaderIndices={header ? [0] : undefined}\n                    >\n                        {header}\n\n                        {children}\n                    </ScrollView>\n                </Paper>\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,mBAAmB,EAAEX,KAAK,CAACY,KAAN,CAAYC,cAD9B;MAEHC,oBAAoB,EAAEd,KAAK,CAACY,KAAN,CAAYC,cAF/B;MAGHE,sBAAsB,EAAE,CAHrB;MAIHC,uBAAuB,EAAE,CAJtB;MAKHC,QAAQ,EAAE,CALP;MAMHC,QAAQ,EAAE;IANP,CAVJ;IAkBHC,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAFQ;MAGhBZ,KAAK,EAAE;IAHS;EAlBjB,CAAP;AAwBH,CA3BD;;AA6Be,SAASa,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,mBAAmB,GAAG,IAHpB;IAIFC,MAJE;IAKFC,UALE;IAMFC,KANE;IAOFC,wBAAwB,GAAG,GAPzB;IAQFC,QARE;IASFC,UAAU,GAAG,EATX;IAUFC,6BAA6B,GAAG,KAV9B;IAWFC,oBAAoB,GAAG;EAXrB,IAYFX,KAZJ;EAcA,MAAMY,MAAM,GAAGpC,SAAS,EAAxB;;EAEA,MAAMqC,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAM;IACFM,mBADE;IAEFC,uBAFE;IAGFC;EAHE,IAIF,IAAAC,6BAAA,EAAqB;IACrBd,mBADqB;IAErBI,wBAFqB;IAGrBE;EAHqB,CAArB,CAJJ;EAUA,MAAMS,UAAU,GAAGF,gBAAgB,IAAIF,mBAAmB,CAACR,KAAD,CAAnB,IAA8B,CAAlC,CAAnC;EAEA,MAAMa,WAAW,GAAG,CAChBP,MAAM,CAACzB,KADS,EAEhB;IAAEiC,MAAM,EAAEJ;EAAV,CAFgB,CAApB;EAKA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEf,eADrB;IAEI,OAAO,EAAEY,WAFb;IAGI,OAAO,EAAEP,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAe,SAAA,EAAI,CAACC,gBAAA,CAAWC,YAAZ,EAA0BX,MAAM,CAACjC,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IACI,KAAK,EAAEiC,MAAM,CAAC7B,QADlB;IAEI,UAAU,EAAEmC;EAFhB,GAIKb,UAAU,gBACP,6BAAC,YAAD,qBACI,6BAAC,YAAD;IAAQ,KAAK,EAAEO,MAAM,CAAChB;EAAtB,GACKS,UADL,CADJ,CADO,GAMP,IAVR,eAYI,6BAAC,WAAD;IACI,SAAS,EAAEM,oBAAoB,GAAG,CAAH,GAAO,EAD1C;IAEI,KAAK,EAAEQ,WAFX;IAGI,UAAU,EAAET,6BAA6B,GAAG,WAAH,GAAiBc;EAH9D,gBAKI,6BAAC,uBAAD;IACI,mBAAmB,EAAET,uBADzB;IAEI,mBAAmB,EAAEX,MAAM,GAAG,CAAC,CAAD,CAAH,GAASoB;EAFxC,GAIKpB,MAJL,EAMKF,QANL,CALJ,CAZJ,CANJ,CADJ;AAoCH;;AAAA"}

package/build/commonjs/BottomSheet/useDynamicSnapPoints.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDynamicSnapPoints;
+
+var R = _interopRequireWildcard(require("ramda"));
+
+var _react = require("react");
+
+var _reactNative = require("react-native");
+
+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; }
+
+const convertSnapPoint = (snapPoint, windowHeight, maxDynamicContentSize) => {
+  if (typeof snapPoint === 'number') {
+    return Math.min(maxDynamicContentSize, snapPoint);
+  }
+
+  const percentageRegex = new RegExp(/^[0-9]+%$/);
+
+  if (percentageRegex.test(snapPoint)) {
+    const percentage = parseFloat(snapPoint) / 100;
+    return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));
+  }
+
+  return 0;
+};
+
+function useDynamicSnapPoints(params) {
+  const {
+    enableDynamicSizing,
+    maxHeightNormalizedRatio,
+    snapPoints
+  } = params;
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const [contentHeight, setContentHeight] = (0, _react.useState)(0);
+  const convertedSnapPoints = (0, _react.useMemo)(() => {
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);
+    const convertedSnapPoints = snapPoints.map(snapPoint => {
+      return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);
+    });
+
+    if (enableDynamicSizing && contentHeight !== 0) {
+      convertedSnapPoints.push(convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize));
+    }
+
+    return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);
+  }, [contentHeight, snapPoints, windowHeight]);
+  const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;
+  const handleContentSizeChange = (0, _react.useCallback)((_, height) => {
+    setContentHeight(height);
+  }, []);
+  return {
+    convertedSnapPoints,
+    handleContentSizeChange,
+    highestSnapPoint
+  };
+}
+//# sourceMappingURL=useDynamicSnapPoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["convertSnapPoint","snapPoint","windowHeight","maxDynamicContentSize","Math","min","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","round","useDynamicSnapPoints","params","enableDynamicSizing","maxHeightNormalizedRatio","snapPoints","height","useWindowDimensions","contentHeight","setContentHeight","useState","convertedSnapPoints","useMemo","map","push","Array","from","Set","sort","a","b","highestSnapPoint","R","last","handleContentSizeChange","useCallback","_"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import * as R from 'ramda';\nimport { useCallback, useMemo, useState } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    enableDynamicSizing: boolean;\n    maxHeightNormalizedRatio: number;\n    snapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    convertedSnapPoints: number[];\n    handleContentSizeChange: (w: number, h: number) => void;\n    highestSnapPoint: number;\n}\n\nconst convertSnapPoint = (snapPoint: number | string, windowHeight: number, maxDynamicContentSize: number): number => {\n    if (typeof snapPoint === 'number') {\n        return Math.min(maxDynamicContentSize, snapPoint);\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(snapPoint)) {\n        const percentage = parseFloat(snapPoint) / 100;\n        return isNaN(percentage) ? 0 : Math.min(maxDynamicContentSize, Math.round(windowHeight * percentage));\n    }\n\n    return 0;\n};\n\nexport default function useDynamicSnapPoints(params: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        enableDynamicSizing,\n        maxHeightNormalizedRatio,\n        snapPoints,\n    } = params;\n\n    const { height: windowHeight } = useWindowDimensions();\n\n    const [contentHeight, setContentHeight] = useState<number>(0);\n\n    const convertedSnapPoints = useMemo(() => {\n        const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio);\n\n        const convertedSnapPoints = snapPoints.map((snapPoint) => {\n            return convertSnapPoint(snapPoint, windowHeight, maxDynamicContentSize);\n        });\n\n        if (enableDynamicSizing && contentHeight !== 0) {\n            convertedSnapPoints.push(\n                convertSnapPoint(contentHeight, windowHeight, maxDynamicContentSize),\n            );\n        }\n\n        return Array.from(new Set(convertedSnapPoints)).sort((a, b) => a - b);\n    }, [\n        contentHeight,\n        snapPoints,\n        windowHeight,\n    ]);\n\n    const highestSnapPoint = R.last(convertedSnapPoints) ?? 0;\n\n    const handleContentSizeChange = useCallback((_: number, height: number) => {\n        setContentHeight(height);\n    }, []);\n\n    return {\n        convertedSnapPoints,\n        handleContentSizeChange,\n        highestSnapPoint,\n    };\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAcA,MAAMA,gBAAgB,GAAG,CAACC,SAAD,EAA6BC,YAA7B,EAAmDC,qBAAnD,KAA6F;EAClH,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOG,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCF,SAAhC,CAAP;EACH;;EAED,MAAMK,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBP,SAArB,CAAJ,EAAqC;IACjC,MAAMQ,UAAU,GAAGC,UAAU,CAACT,SAAD,CAAV,GAAwB,GAA3C;IACA,OAAOU,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBL,IAAI,CAACC,GAAL,CAASF,qBAAT,EAAgCC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGO,UAA1B,CAAhC,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAce,SAASI,oBAAT,CAA8BC,MAA9B,EAA+F;EAC1G,MAAM;IACFC,mBADE;IAEFC,wBAFE;IAGFC;EAHE,IAIFH,MAJJ;EAMA,MAAM;IAAEI,MAAM,EAAEhB;EAAV,IAA2B,IAAAiB,gCAAA,GAAjC;EAEA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAiB,CAAjB,CAA1C;EAEA,MAAMC,mBAAmB,GAAG,IAAAC,cAAA,EAAQ,MAAM;IACtC,MAAMrB,qBAAqB,GAAGC,IAAI,CAACQ,KAAL,CAAWV,YAAY,GAAGc,wBAA1B,CAA9B;IAEA,MAAMO,mBAAmB,GAAGN,UAAU,CAACQ,GAAX,CAAgBxB,SAAD,IAAe;MACtD,OAAOD,gBAAgB,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,qBAA1B,CAAvB;IACH,CAF2B,CAA5B;;IAIA,IAAIY,mBAAmB,IAAIK,aAAa,KAAK,CAA7C,EAAgD;MAC5CG,mBAAmB,CAACG,IAApB,CACI1B,gBAAgB,CAACoB,aAAD,EAAgBlB,YAAhB,EAA8BC,qBAA9B,CADpB;IAGH;;IAED,OAAOwB,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQN,mBAAR,CAAX,EAAyCO,IAAzC,CAA8C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA5D,CAAP;EACH,CAd2B,EAczB,CACCZ,aADD,EAECH,UAFD,EAGCf,YAHD,CAdyB,CAA5B;EAoBA,MAAM+B,gBAAgB,GAAGC,CAAC,CAACC,IAAF,CAAOZ,mBAAP,KAA+B,CAAxD;EAEA,MAAMa,uBAAuB,GAAG,IAAAC,kBAAA,EAAY,CAACC,CAAD,EAAYpB,MAAZ,KAA+B;IACvEG,gBAAgB,CAACH,MAAD,CAAhB;EACH,CAF+B,EAE7B,EAF6B,CAAhC;EAIA,OAAO;IACHK,mBADG;IAEHa,uBAFG;IAGHH;EAHG,CAAP;AAKH"}

package/build/commonjs/Carousel/Carousel.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ViewabilityTrackerView = _interopRequireDefault(require("../ViewabilityTrackerView"));
+
+var _hooks = require("./hooks");
+
+var _animation = require("./animation");
+
+var _components = require("./components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, ref) {
+  const {
+    autoplay = false,
+    autoplayInterval = 3000,
+    createItemStyle = _animation.createDefaultItemStyle,
+    createScrollAnimation = _animation.createDefaultScrollAnimation,
+    data: originalData,
+    disableSmartAutoplay = false,
+    initialIndex = 0,
+    itemHeight,
+    itemWidth,
+    loop = false,
+    onIndexChange,
+    renderItem,
+    scrollEnabled = true,
+    style,
+    windowSize = 5
+  } = props;
+  const data = (0, _hooks.useLoopedData)(originalData, loop);
+  const [itemVisibilityStore, onPositionChange] = (0, _hooks.useItemVisibilityStore)({
+    initialIndex,
+    numberOfData: data.length,
+    windowSize
+  });
+  const indexController = (0, _hooks.useIndexController)({
+    initialIndex,
+    itemWidth,
+    numberOfData: data.length,
+    numberOfOriginalData: originalData.length,
+    onIndexChange,
+    onPositionChange
+  });
+  const {
+    getCurrentIndex
+  } = indexController;
+  const {
+    gestureTranslationX,
+    globalInterpolation,
+    interruptAnimation,
+    startPagingAnimation
+  } = (0, _hooks.usePagingAnimator)({
+    createScrollAnimation,
+    itemWidth,
+    indexController,
+    initialIndex,
+    loop,
+    numberOfData: data.length
+  });
+  const autoplayController = (0, _hooks.useAutoplayController)({
+    enabled: autoplay,
+    intervalMillis: autoplayInterval,
+    startPagingAnimation
+  });
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getCurrentIndex,
+    next: () => startPagingAnimation('directional', {
+      direction: 'next'
+    }),
+    prev: () => startPagingAnimation('directional', {
+      direction: 'prev'
+    }),
+    scrollTo: option => startPagingAnimation('index', option)
+  }), [startPagingAnimation, getCurrentIndex]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    createItemStyle,
+    data,
+    globalInterpolation,
+    itemHeight,
+    itemWidth,
+    itemVisibilityStore,
+    loop
+  }), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop]);
+  return /*#__PURE__*/_react.default.createElement(_components.InternalContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_ViewabilityTrackerView.default, {
+    enabled: autoplay && !disableSmartAutoplay,
+    measurementIntervalMillis: Math.max(3000, autoplayInterval),
+    onViewabilityChange: _ref => {
+      let {
+        visible
+      } = _ref;
+
+      if (visible) {
+        autoplayController.resume();
+      } else {
+        autoplayController.pause();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_components.ScrollViewGesture, {
+    autoplayController: autoplayController,
+    gestureTranslationX: gestureTranslationX,
+    interruptAnimation: interruptAnimation,
+    scrollEnabled: scrollEnabled,
+    startPagingAnimation: startPagingAnimation
+  }, /*#__PURE__*/_react.default.createElement(_components.RootView, {
+    data: data,
+    itemHeight: itemHeight,
+    originalData: originalData,
+    renderItem: renderItem,
+    style: style
+  }))));
+});
+
+var _default = /*#__PURE__*/(0, _react.memo)(Carousel);
+
+exports.default = _default;
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","itemVisibilityStore","onPositionChange","useItemVisibilityStore","numberOfData","length","indexController","useIndexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","usePagingAnimator","autoplayController","useAutoplayController","enabled","intervalMillis","useImperativeHandle","next","direction","prev","scrollTo","option","contextValue","useMemo","Math","max","visible","resume","pause","memo"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n    useAutoplayController,\n    useIndexController,\n    useItemVisibilityStore,\n    useLoopedData,\n    usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n    const {\n        autoplay = false,\n        autoplayInterval = 3000,\n        createItemStyle = createDefaultItemStyle,\n        createScrollAnimation = createDefaultScrollAnimation,\n        data: originalData,\n        disableSmartAutoplay = false,\n        initialIndex = 0,\n        itemHeight,\n        itemWidth,\n        loop = false,\n        onIndexChange,\n        renderItem,\n        scrollEnabled = true,\n        style,\n        windowSize = 5,\n    } = props;\n\n    const data = useLoopedData(originalData, loop);\n\n    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n        initialIndex,\n        numberOfData: data.length,\n        windowSize,\n    });\n\n    const indexController = useIndexController({\n        initialIndex,\n        itemWidth,\n        numberOfData: data.length,\n        numberOfOriginalData: originalData.length,\n        onIndexChange,\n        onPositionChange,\n    });\n\n    const { getCurrentIndex } = indexController;\n\n    const {\n        gestureTranslationX,\n        globalInterpolation,\n        interruptAnimation,\n        startPagingAnimation,\n    } = usePagingAnimator({\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        initialIndex,\n        loop,\n        numberOfData: data.length,\n    });\n\n    const autoplayController = useAutoplayController({\n        enabled: autoplay,\n        intervalMillis: autoplayInterval,\n        startPagingAnimation,\n    });\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            next: () => startPagingAnimation('directional', { direction: 'next' }),\n            prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n            scrollTo: (option) => startPagingAnimation('index', option),\n        }),\n        [startPagingAnimation, getCurrentIndex],\n    );\n\n    const contextValue = useMemo(() => ({\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n    }), [\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n    ]);\n\n    return (\n        <InternalContext.Provider value={contextValue}>\n            <ViewabilityTrackerView\n                enabled={autoplay && !disableSmartAutoplay}\n                measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n                onViewabilityChange={({ visible }) => {\n                    if (visible) {\n                        autoplayController.resume();\n                    } else {\n                        autoplayController.pause();\n                    }\n                }}\n            >\n                <ScrollViewGesture\n                    autoplayController={autoplayController}\n                    gestureTranslationX={gestureTranslationX}\n                    interruptAnimation={interruptAnimation}\n                    scrollEnabled={scrollEnabled}\n                    startPagingAnimation={startPagingAnimation}\n                >\n                    <RootView\n                        data={data}\n                        itemHeight={itemHeight}\n                        originalData={originalData}\n                        renderItem={renderItem}\n                        style={style}\n                    />\n                </ScrollViewGesture>\n            </ViewabilityTrackerView>\n        </InternalContext.Provider>\n    );\n});\n\nexport default memo(Carousel);\n"],"mappings":"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"}

package/build/commonjs/Carousel/CarouselProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import React, { RefObject } from 'react';\nimport type { ListRenderItemInfo } from 'react-native';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n    /**\n     * If `true`, enable autoplay.\n     * @default false\n     */\n    autoplay?: boolean;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     * @default 3000\n     */\n    autoplayInterval?: number;\n\n    /**\n     * Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.\n     */\n    centerSlidePadding?: number;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     */\n    data: ReadonlyArray<ItemT>;\n\n    /**\n     * Value of the opacity effect applied to inactive slides.\n     * @default 0.7\n     */\n    inactiveSlideOpacity?: number;\n\n    /**\n     * Value of the 'scale' transform applied to inactive slides.\n     * @default 0.9\n     */\n    inactiveSlideScale?: number;\n\n    /**\n     * Web only. Value of the 'scale' transform applied to a active slide.\n     * @default 0.990\n     */\n    activeSlideScale?: number;\n\n    /**\n     * A number representing the index of the active slide.\n     */\n    index: number;\n\n    /**\n     * Enable infinite loop mode.\n     * @default false\n     */\n    infinite?: boolean;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * Takes an item from data and renders it into the list.\n     */\n    renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;\n\n    /**\n     * Web only. Number of slides to scroll at once.\n     * @default 1\n     */\n    slidesToScroll?: number;\n\n    /**\n     * Web only. Number of slides to display.\n     * @default 1\n     */\n    slidesToShow?: number;\n\n    /**\n     * Web only. Enable items to display at the center.\n     * @default true\n     */\n    centerMode?: boolean;\n\n    /**\n     * Web only. Enable arrows to display.\n     * @default true\n     */\n    arrows?: boolean;\n\n    /**\n     * Web only. Style of arrows\n     * @default true\n     */\n    arrowsStyle?: object;\n\n    /**\n     * Web only. Style of track\n     * @default object\n     */\n    trackStyle?: object;\n\n    /**\n     * Only web. Refer slick object\n     */\n    ref?: RefObject<any>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {\n    CarouselInstance,\n    CreateItemStyle,\n    CreateScrollAnimation,\n    ItemHeight,\n    OnIndexChange,\n    RenderItem,\n} from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n    ref?: RefObject<CarouselInstance>;\n\n    /**\n     * If `true`, enable autoplay.\n     * @default false\n     */\n    autoplay?: boolean;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     * @default 3000\n     */\n    autoplayInterval?: number;\n\n    /**\n     * The item style creator function.\n     * @default createDefaultItemStyle\n     */\n    createItemStyle?: CreateItemStyle;\n\n    /**\n     * The scroll animation creator function.\n     * @default createDefaultScrollAnimation\n     */\n    createScrollAnimation?: CreateScrollAnimation;\n\n    /**\n     * Data for render items.\n     */\n    data: ReadonlyArray<ItemT>;\n\n    /**\n     * If `true`, carousel will detect its own viewability and control autoplay automatically.\n     * @default false\n     */\n    disableSmartAutoplay?: boolean;\n\n    /**\n     * Index of initial item that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * The item height.\n     * For a performance reason, always consider to provide a number value.\n     */\n    itemHeight: ItemHeight;\n\n    /**\n     * The item width.\n     */\n    itemWidth: number;\n\n    /**\n     * Enable infinite loop mode.\n     * @default false\n     */\n    loop?: boolean;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onIndexChange?: OnIndexChange;\n\n    /**\n     * Takes an item from data and renders it into the list.\n     */\n    renderItem: RenderItem<ItemT>;\n\n    /**\n     * Whether to enable scroll gesture.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * The maximum number of items that can respond to pan gesture events.\n     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n     * 0 means all items will respond to pan gesture events.\n     * @default 5\n     */\n    windowSize?: number;\n}> {}\n"],"mappings":""}

package/build/commonjs/Carousel/animation/animationUtils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.itemInterpolationInputRange = void 0;
+const itemInterpolationInputRange = [-1, 0, 1];
+exports.itemInterpolationInputRange = itemInterpolationInputRange;
+//# sourceMappingURL=animationUtils.js.map

package/build/commonjs/Carousel/animation/animationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["itemInterpolationInputRange"],"sources":["animationUtils.ts"],"sourcesContent":["export const itemInterpolationInputRange = [-1, 0, 1];\n"],"mappings":";;;;;;AAAO,MAAMA,2BAA2B,GAAG,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAApC"}

package/build/commonjs/Carousel/animation/createDefaultItemStyle.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _normalItemStyleFactory = _interopRequireDefault(require("./normalItemStyleFactory"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (0, _normalItemStyleFactory.default)();
+
+exports.default = _default;
+//# sourceMappingURL=createDefaultItemStyle.js.map