@fountain-ui/lab 2.0.0-beta.25 → 2.0.0-beta.27

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -85,7 +85,8 @@ function BottomSheet(props) {
   const OpacityAwareBackdrop = props => /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetBackdrop, _extends({}, props, {
     appearsOnIndex: 0,
     disappearsOnIndex: -1,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    pressBehavior: onChange ? 'close' : 'none'
   }));
 
   return /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModalProvider, null, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetModal, {
@@ -98,7 +99,8 @@ function BottomSheet(props) {
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
     snapPoints: snapPoints,
-    style: modalStyle
+    style: modalStyle,
+    enablePanDownToClose: Boolean(onChange)
   }, 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","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","Boolean"],"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            pressBehavior={onChange ? 'close' : 'none'}\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                enablePanDownToClose={Boolean(onChange)}\n            >\n                {children}\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     * 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     * Only number type or string type(~% format) can be used.\n     */\n    snapPoints: Array<number | string>;\n}> {}\n"],"mappings":""}

package/build/commonjs/BottomSheet/BottomSheetWeb.js

@@ -7,6 +7,8 @@ exports.default = BottomSheet;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactNative = require("react-native");
+
 var _core = require("@fountain-ui/core");
 
 var _AnimatedY = _interopRequireDefault(require("../AnimatedY"));
@@ -34,8 +36,19 @@ const useStyles = function () {
   };
 };
 
-const calculateHeight = points => {
-  return points[points.length - 1] ?? 0;
+const convertHeightAsPixel = (windowHeight, value) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  const percentageRegex = new RegExp(/^[0-9]+%$/);
+
+  if (percentageRegex.test(value)) {
+    const percentage = parseFloat(value) / 100;
+    return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+  }
+
+  return 0;
 };
 
 function BottomSheet(props) {
@@ -47,6 +60,9 @@ function BottomSheet(props) {
     snapPoints
   } = props;
   const styles = useStyles();
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
 
   const handleClose = () => {
     if (onChange) {
@@ -54,8 +70,8 @@ function BottomSheet(props) {
     }
   };
 
-  const height = calculateHeight(snapPoints);
-  const translateY = height - (snapPoints[index] ?? 0);
+  const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
+  const translateY = height - convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0);
   return /*#__PURE__*/_react.default.createElement(_core.Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,

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","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","height","useWindowDimensions","handleClose","length","translateY","css","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\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 convertHeightAsPixel = (windowHeight: number, value: number | string): number => {\n    if (typeof value === 'number') {\n        return value;\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(value)) {\n        const percentage = parseFloat(value) / 100;\n        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);\n    }\n\n    return 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 { height: windowHeight } = useWindowDimensions();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);\n    const translateY = height - (convertHeightAsPixel(windowHeight, 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;;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,oBAAoB,GAAG,CAACC,YAAD,EAAuBC,KAAvB,KAA0D;EACnF,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;IAC3B,OAAOA,KAAP;EACH;;EAED,MAAMC,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBH,KAArB,CAAJ,EAAiC;IAC7B,MAAMI,UAAU,GAAGC,UAAU,CAACL,KAAD,CAAV,GAAoB,GAAvC;IACA,OAAOM,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBG,IAAI,CAACC,KAAL,CAAWT,YAAY,GAAGK,UAA1B,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAce,SAASK,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGlC,SAAS,EAAxB;EAEA,MAAM;IAAEmC,MAAM,EAAElB;EAAV,IAA2B,IAAAmB,gCAAA,GAAjC;;EAEA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMG,MAAM,GAAGnB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACA,UAAU,CAACK,MAAX,GAAoB,CAArB,CAAV,IAAqC,CAApD,CAAnC;EACA,MAAMC,UAAU,GAAGJ,MAAM,GAAInB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACF,KAAD,CAAV,IAAqB,CAApC,CAAjD;EAEA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEQ,WAFb;IAGI,OAAO,EAAEN,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAS,SAAA,EAAI,CAACC,gBAAA,CAAWC,YAAZ,EAA0BR,MAAM,CAAC/B,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IACI,KAAK,EAAE+B,MAAM,CAAC3B,QADlB;IAEI,UAAU,EAAEgC;EAFhB,gBAII,6BAAC,WAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHL,MAAM,CAACvB,KADJ,EAEH;MAAEwB;IAAF,CAFG;EAFX,GAOKL,QAPL,CAJJ,CANJ,CADJ;AAuBH;;AAAA"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -66,7 +66,8 @@ export default function BottomSheet(props) {
   const OpacityAwareBackdrop = props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
     appearsOnIndex: 0,
     disappearsOnIndex: -1,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    pressBehavior: onChange ? 'close' : 'none'
   }));
 
   return /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, /*#__PURE__*/React.createElement(BottomSheetModal, {
@@ -79,7 +80,8 @@ export default function BottomSheet(props) {
     onDismiss: handleDismiss,
     ref: bottomSheetRef,
     snapPoints: snapPoints,
-    style: modalStyle
+    style: modalStyle,
+    enablePanDownToClose: Boolean(onChange)
   }, children));
 }
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop"],"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":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,QAAT,QAAyB,qBAAzB;AACA,SACIC,mBADJ,EAGIC,gBAHJ,EAIIC,wBAJJ,QAKO,sBALP;AAOA,OAAOC,mBAAP,MAAgC,uBAAhC;;AAEA,MAAMC,QAAQ,GAAG,MAAM,IAAvB;;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eAAe,GAAG,GADhB;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,QAAQ,GAAGf,KAAK,CAACgB,MAAN,CAAqB,CAAC,CAAtB,CAAjB;EACA,MAAMC,cAAc,GAAGjB,KAAK,CAACgB,MAAN,CAAsC,IAAtC,CAAvB;EAEA,MAAME,YAAY,GAAGlB,KAAK,CAACmB,WAAN,CAAmBC,QAAD,IAAsB;IACzDL,QAAQ,CAACM,OAAT,GAAmBD,QAAnB;;IAEA,IAAIP,QAAJ,EAAc;MACVA,QAAQ,CAACO,QAAD,CAAR;IACH;EACJ,CANoB,EAMlB,CAACP,QAAD,CANkB,CAArB;EAQA,MAAMS,aAAa,GAAGtB,KAAK,CAACmB,WAAN,CAAkB,MAAM;IAC1CD,YAAY,CAAC,CAAC,CAAF,CAAZ;EACH,CAFqB,EAEnB,CAACA,YAAD,CAFmB,CAAtB;EAIAlB,KAAK,CAACuB,SAAN,CAAgB,MAAM;IAClB,IAAIX,KAAK,KAAKG,QAAQ,CAACM,OAAvB,EAAgC;MAC5B;IACH;;IAED,IAAIN,QAAQ,CAACM,OAAT,GAAmB,CAAnB,IAAwBT,KAAK,IAAI,CAArC,EAAwC;MAAA;;MACpC,yBAAAK,cAAc,CAACI,OAAf,gFAAwBG,OAAxB;IACH,CAFD,MAEO,IAAIT,QAAQ,CAACM,OAAT,IAAoB,CAApB,IAAyBT,KAAK,GAAG,CAArC,EAAwC;MAAA;;MAC3C,0BAAAK,cAAc,CAACI,OAAf,kFAAwBI,OAAxB;IACH,CAFM,MAEA;MAAA;;MACH;MACA,0BAAAR,cAAc,CAACI,OAAf,kFAAwBK,WAAxB,CAAoCd,KAApC;IACH;EACJ,CAbD,EAaG,CAACA,KAAD,CAbH;EAeA,MAAMe,KAAK,GAAGzB,QAAQ,EAAtB;EACA,MAAM0B,MAAM,GAAGD,KAAK,CAACC,MAAN,CAAa,EAAb,CAAf;EACA,MAAMC,UAAU,GAAG;IACfC,eAAe,EAAE,WADF;IAEf,GAAG7B,QAAQ,CAAC8B,MAAT,CAAwB;MACvBC,OAAO,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEK,SADM;MAEvBC,GAAG,EAAEN,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFU;MAGvBO,GAAG,EAAEP,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEQ;IAHU,CAAxB;EAFY,CAAnB;EAQA,MAAMC,eAAe,GAAG;IACpBP,eAAe,EAAEH,KAAK,CAACW,OAAN,CAAcC,KAAd,CAAoBC;EADjB,CAAxB;EAIA,MAAMC,qBAAqB,GAAG/B,eAAe,IAAI,CAAjD;;EAEA,MAAMgC,oBAAoB,GAAIjC,KAAD,iBACzB,oBAAC,mBAAD,eACQA,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,OAAO,EAAEC;EAJb,GADJ;;EASA,oBACI,oBAAC,wBAAD,qBACI,oBAAC,gBAAD;IACI,iBAAiB,EAAE+B,qBAAqB,GAAGnC,mBAAH,GAAyBoC,oBADrE,CAEI;IAFJ;IAGI,eAAe,EAAEL,eAHrB;IAII,KAAK,EAAEzB,KAJX;IAKI,eAAe,EAAEL,QALrB;IAMI,QAAQ,EAAEW,YANd;IAOI,SAAS,EAAEI,aAPf;IAQI,GAAG,EAAEL,cART;IASI,UAAU,EAAEH,UAThB;IAUI,KAAK,EAAEe;EAVX,GAYKlB,QAZL,CADJ,CADJ;AAkBH;AAAA"}
+{"version":3,"names":["React","Platform","useTheme","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","TransparentBackdrop","NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop","Boolean"],"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            pressBehavior={onChange ? 'close' : 'none'}\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                enablePanDownToClose={Boolean(onChange)}\n            >\n                {children}\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,QAAT,QAAyB,qBAAzB;AACA,SACIC,mBADJ,EAGIC,gBAHJ,EAIIC,wBAJJ,QAKO,sBALP;AAOA,OAAOC,mBAAP,MAAgC,uBAAhC;;AAEA,MAAMC,QAAQ,GAAG,MAAM,IAAvB;;AAEA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eAAe,GAAG,GADhB;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,QAAQ,GAAGf,KAAK,CAACgB,MAAN,CAAqB,CAAC,CAAtB,CAAjB;EACA,MAAMC,cAAc,GAAGjB,KAAK,CAACgB,MAAN,CAAsC,IAAtC,CAAvB;EAEA,MAAME,YAAY,GAAGlB,KAAK,CAACmB,WAAN,CAAmBC,QAAD,IAAsB;IACzDL,QAAQ,CAACM,OAAT,GAAmBD,QAAnB;;IAEA,IAAIP,QAAJ,EAAc;MACVA,QAAQ,CAACO,QAAD,CAAR;IACH;EACJ,CANoB,EAMlB,CAACP,QAAD,CANkB,CAArB;EAQA,MAAMS,aAAa,GAAGtB,KAAK,CAACmB,WAAN,CAAkB,MAAM;IAC1CD,YAAY,CAAC,CAAC,CAAF,CAAZ;EACH,CAFqB,EAEnB,CAACA,YAAD,CAFmB,CAAtB;EAIAlB,KAAK,CAACuB,SAAN,CAAgB,MAAM;IAClB,IAAIX,KAAK,KAAKG,QAAQ,CAACM,OAAvB,EAAgC;MAC5B;IACH;;IAED,IAAIN,QAAQ,CAACM,OAAT,GAAmB,CAAnB,IAAwBT,KAAK,IAAI,CAArC,EAAwC;MAAA;;MACpC,yBAAAK,cAAc,CAACI,OAAf,gFAAwBG,OAAxB;IACH,CAFD,MAEO,IAAIT,QAAQ,CAACM,OAAT,IAAoB,CAApB,IAAyBT,KAAK,GAAG,CAArC,EAAwC;MAAA;;MAC3C,0BAAAK,cAAc,CAACI,OAAf,kFAAwBI,OAAxB;IACH,CAFM,MAEA;MAAA;;MACH;MACA,0BAAAR,cAAc,CAACI,OAAf,kFAAwBK,WAAxB,CAAoCd,KAApC;IACH;EACJ,CAbD,EAaG,CAACA,KAAD,CAbH;EAeA,MAAMe,KAAK,GAAGzB,QAAQ,EAAtB;EACA,MAAM0B,MAAM,GAAGD,KAAK,CAACC,MAAN,CAAa,EAAb,CAAf;EACA,MAAMC,UAAU,GAAG;IACfC,eAAe,EAAE,WADF;IAEf,GAAG7B,QAAQ,CAAC8B,MAAT,CAAwB;MACvBC,OAAO,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEK,SADM;MAEvBC,GAAG,EAAEN,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFU;MAGvBO,GAAG,EAAEP,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEQ;IAHU,CAAxB;EAFY,CAAnB;EAQA,MAAMC,eAAe,GAAG;IACpBP,eAAe,EAAEH,KAAK,CAACW,OAAN,CAAcC,KAAd,CAAoBC;EADjB,CAAxB;EAIA,MAAMC,qBAAqB,GAAG/B,eAAe,IAAI,CAAjD;;EAEA,MAAMgC,oBAAoB,GAAIjC,KAAD,iBACzB,oBAAC,mBAAD,eACQA,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,OAAO,EAAEC,eAJb;IAKI,aAAa,EAAEG,QAAQ,GAAG,OAAH,GAAa;EALxC,GADJ;;EAUA,oBACI,oBAAC,wBAAD,qBACI,oBAAC,gBAAD;IACI,iBAAiB,EAAE4B,qBAAqB,GAAGnC,mBAAH,GAAyBoC,oBADrE,CAEI;IAFJ;IAGI,eAAe,EAAEL,eAHrB;IAII,KAAK,EAAEzB,KAJX;IAKI,eAAe,EAAEL,QALrB;IAMI,QAAQ,EAAEW,YANd;IAOI,SAAS,EAAEI,aAPf;IAQI,GAAG,EAAEL,cART;IASI,UAAU,EAAEH,UAThB;IAUI,KAAK,EAAEe,UAVX;IAWI,oBAAoB,EAAEc,OAAO,CAAC9B,QAAD;EAXjC,GAaKF,QAbL,CADJ,CADJ;AAmBH;AAAA"}

package/build/module/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     * 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     * Only number type or string type(~% format) can be used.\n     */\n    snapPoints: Array<number | string>;\n}> {}\n"],"mappings":""}

package/build/module/BottomSheet/BottomSheetWeb.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import AnimatedY from '../AnimatedY';
 
@@ -23,8 +24,19 @@ const useStyles = function () {
   };
 };
 
-const calculateHeight = points => {
-  return points[points.length - 1] ?? 0;
+const convertHeightAsPixel = (windowHeight, value) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  const percentageRegex = new RegExp(/^[0-9]+%$/);
+
+  if (percentageRegex.test(value)) {
+    const percentage = parseFloat(value) / 100;
+    return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+  }
+
+  return 0;
 };
 
 export default function BottomSheet(props) {
@@ -36,6 +48,9 @@ export default function BottomSheet(props) {
     snapPoints
   } = props;
   const styles = useStyles();
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
 
   const handleClose = () => {
     if (onChange) {
@@ -43,8 +58,8 @@ export default function BottomSheet(props) {
     }
   };
 
-  const height = calculateHeight(snapPoints);
-  const translateY = height - (snapPoints[index] ?? 0);
+  const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
+  const translateY = height - convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0);
   return /*#__PURE__*/React.createElement(Modal, {
     backdropOpacity: backdropOpacity,
     onClose: handleClose,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","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","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,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,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;;AAIA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGzB,SAAS,EAAxB;;EAEA,MAAM0B,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,oBAAC,KAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEM,WAFb;IAGI,OAAO,EAAEJ,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEzB,GAAG,CAAC,CAACD,UAAU,CAACiC,YAAZ,EAA0BJ,MAAM,CAACvB,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAEuB,MAAM,CAACnB,QADlB;IAEI,UAAU,EAAEsB;EAFhB,gBAII,oBAAC,KAAD;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":["React","useWindowDimensions","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","height","handleClose","length","translateY","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\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 convertHeightAsPixel = (windowHeight: number, value: number | string): number => {\n    if (typeof value === 'number') {\n        return value;\n    }\n\n    const percentageRegex = new RegExp(/^[0-9]+%$/);\n    if (percentageRegex.test(value)) {\n        const percentage = parseFloat(value) / 100;\n        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);\n    }\n\n    return 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 { height: windowHeight } = useWindowDimensions();\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);\n    const translateY = height - (convertHeightAsPixel(windowHeight, 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,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAuBC,KAAvB,KAA0D;EACnF,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;IAC3B,OAAOA,KAAP;EACH;;EAED,MAAMC,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBH,KAArB,CAAJ,EAAiC;IAC7B,MAAMI,UAAU,GAAGC,UAAU,CAACL,KAAD,CAAV,GAAoB,GAAvC;IACA,OAAOM,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBG,IAAI,CAACC,KAAL,CAAWT,YAAY,GAAGK,UAA1B,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASK,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGjC,SAAS,EAAxB;EAEA,MAAM;IAAEkC,MAAM,EAAElB;EAAV,IAA2BvB,mBAAmB,EAApD;;EAEA,MAAM0C,WAAW,GAAG,MAAM;IACtB,IAAIJ,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMG,MAAM,GAAGnB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACA,UAAU,CAACI,MAAX,GAAoB,CAArB,CAAV,IAAqC,CAApD,CAAnC;EACA,MAAMC,UAAU,GAAGH,MAAM,GAAInB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACF,KAAD,CAAV,IAAqB,CAApC,CAAjD;EAEA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEO,WAFb;IAGI,OAAO,EAAEL,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEjC,GAAG,CAAC,CAACD,UAAU,CAAC0C,YAAZ,EAA0BL,MAAM,CAAC/B,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAE+B,MAAM,CAAC3B,QADlB;IAEI,UAAU,EAAE+B;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHJ,MAAM,CAACvB,KADJ,EAEH;MAAEwB;IAAF,CAFG;EAFX,GAOKL,QAPL,CAJJ,CANJ,CADJ;AAuBH;AAAA"}

package/build/typescript/BottomSheet/BottomSheetProps.d.ts

@@ -22,7 +22,8 @@ export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
+     * Only number type or string type(~% format) can be used.
      */
-    snapPoints: Array<number>;
+    snapPoints: Array<number | string>;
 }> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.25",
+  "version": "2.0.0-beta.27",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "440a7ba0e2448df424c7f0ed92ab35ab0fd26e94"
+  "gitHead": "b95359524cf4e246be3dce3580f3d587502429e6"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -73,6 +73,7 @@ export default function BottomSheet(props: BottomSheetProps) {
             appearsOnIndex={0}
             disappearsOnIndex={-1}
             opacity={backdropOpacity}
+            pressBehavior={onChange ? 'close' : 'none'}
         />
     );
 
@@ -89,6 +90,7 @@ export default function BottomSheet(props: BottomSheetProps) {
                 ref={bottomSheetRef}
                 snapPoints={snapPoints}
                 style={modalStyle}
+                enablePanDownToClose={Boolean(onChange)}
             >
                 {children}
             </BottomSheetModal>

package/src/BottomSheet/BottomSheetProps.ts

@@ -27,6 +27,7 @@ export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
+     * Only number type or string type(~% format) can be used.
      */
-    snapPoints: Array<number>;
+    snapPoints: Array<number | string>;
 }> {}

package/src/BottomSheet/BottomSheetWeb.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useWindowDimensions } from 'react-native';
 import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import AnimatedY from '../AnimatedY';
@@ -12,7 +13,7 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     return {
         root: {
             justifyContent: 'flex-end',
-            zIndex: theme.zIndex.dialog
+            zIndex: theme.zIndex.dialog,
         },
         animated: {
             alignSelf: 'center',
@@ -28,8 +29,18 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
     };
 };
 
-const calculateHeight = (points: BottomSheetProps['snapPoints']): number => {
-    return points[points.length - 1] ?? 0;
+const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
+    if (typeof value === 'number') {
+        return value;
+    }
+
+    const percentageRegex = new RegExp(/^[0-9]+%$/);
+    if (percentageRegex.test(value)) {
+        const percentage = parseFloat(value) / 100;
+        return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
+    }
+
+    return 0;
 };
 
 export default function BottomSheet(props: BottomSheetProps) {
@@ -43,14 +54,16 @@ export default function BottomSheet(props: BottomSheetProps) {
 
     const styles = useStyles();
 
+    const { height: windowHeight } = useWindowDimensions();
+
     const handleClose = () => {
         if (onChange) {
             onChange(-1);
         }
     };
 
-    const height = calculateHeight(snapPoints);
-    const translateY = height - (snapPoints[index] ?? 0);
+    const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
+    const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));
 
     return (
         <Modal