@fountain-ui/lab 2.0.0-beta.4 → 2.0.0-beta.40

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 {
@@ -21,24 +24,17 @@ function AnimatedY(props) {
     translateY,
     style
   } = props;
-
-  const animatedY = _reactNativeReanimated.default.useSharedValue(translateY);
-
-  const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => ({
+  const animatedY = (0, _reactNativeReanimated.useSharedValue)(translateY);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     transform: [{
       translateY: animatedY.value
     }]
-  }));
-
-  _react.default.useEffect(() => {
+  }), []);
+  (0, _react.useEffect)(() => {
     if (translateY >= 0) {
-      animatedY.value = _reactNativeReanimated.default.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,"sources":["AnimatedY.tsx"],"names":["AnimatedY","props","children","translateY","style","animatedY","Animated","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","React","useEffect","withTiming","duration","easing","Easing","out","exp"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAGe,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,UAFE;AAGFC,IAAAA;AAHE,MAIFH,KAJJ;;AAMA,QAAMI,SAAS,GAAGC,+BAASC,cAAT,CAAwBJ,UAAxB,CAAlB;;AACA,QAAMK,aAAa,GAAGF,+BAASG,gBAAT,CAA0B,OAAO;AACnDC,IAAAA,SAAS,EAAE,CAAC;AAAEP,MAAAA,UAAU,EAAEE,SAAS,CAACM;AAAxB,KAAD;AADwC,GAAP,CAA1B,CAAtB;;AAIAC,iBAAMC,SAAN,CAAgB,MAAM;AAClB,QAAIV,UAAU,IAAI,CAAlB,EAAqB;AACjBE,MAAAA,SAAS,CAACM,KAAV,GAAkBL,+BAASQ,UAAT,CAAoBX,UAApB,EAAgC;AAC9CY,QAAAA,QAAQ,EAAE,GADoC;AAE9CC,QAAAA,MAAM,EAAEC,8BAAOC,GAAP,CAAWD,8BAAOE,GAAlB;AAFsC,OAAhC,CAAlB;AAIH;AACJ,GAPD,EAOG,CAAChB,UAAD,CAPH;;AASA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAE,CACHM,aADG,EAEHJ,KAFG;AAFX,IADJ;AASH;;AAAA","sourcesContent":["import React from 'react';\nimport Animated, { Easing } 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 = Animated.useSharedValue(translateY);\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedY.value }],\n    }));\n\n    React.useEffect(() => {\n        if (translateY >= 0) {\n            animatedY.value = Animated.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"]}
+{"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/AnimatedY/AnimatedYProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["AnimatedYProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface AnimatedYProps extends ComponentProps<{\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The translate y value of the component.\n     */\n    translateY: number;\n}> {}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './AnimatedY';\nexport type { default as AnimatedYProps } from './AnimatedYProps';\n"]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './AnimatedY';\nexport type { default as AnimatedYProps } from './AnimatedYProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/BottomSheet/BottomSheet.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BottomSheet;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _core = require("@fountain-ui/core");
+
+var _useDynamicSnapPoints = _interopRequireDefault(require("./useDynamicSnapPoints"));
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const useStyles = function () {
+  const theme = (0, _core.useTheme)();
+  return {
+    root: {
+      justifyContent: 'flex-end',
+      zIndex: theme.zIndex.dialog
+    },
+    animated: {
+      alignSelf: 'center',
+      maxWidth: 720,
+      width: '100%'
+    },
+    paper: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      flexGrow: 1,
+      overflow: 'hidden'
+    },
+    scrollView: {
+      flexGrow: 1
+    }
+  };
+};
+
+function BottomSheet(props) {
+  const {
+    backdropOpacity,
+    children,
+    header,
+    index,
+    onChange,
+    snapPoints: initialSnapPoints
+  } = props;
+  const styles = useStyles();
+  const contentLayout = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const currentScrollY = (0, _react.useRef)(0);
+  const {
+    snapPoints,
+    handleContentLayout
+  } = (0, _useDynamicSnapPoints.default)({
+    index,
+    initialSnapPoints
+  });
+  const height = snapPoints[snapPoints.length - 1] ?? 0;
+  const translateY = height - (snapPoints[index] ?? 0);
+  const animatedY = (0, _core.useAnimatedValue)(translateY);
+
+  const isInsideScrollView = (locationX, locationY) => {
+    const {
+      current: {
+        x,
+        y,
+        width,
+        height
+      }
+    } = contentLayout;
+    return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;
+  };
+
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: (event, gestureState) => {
+      const {
+        nativeEvent: {
+          locationX,
+          locationY
+        }
+      } = event;
+
+      if (isInsideScrollView(locationX, locationY)) {
+        return gestureState.dy > 0 && currentScrollY.current === 0;
+      }
+
+      return true;
+    },
+    onPanResponderMove: (_, gestureState) => {
+      if (gestureState.dy > 0) {
+        animatedY.setValue(translateY + gestureState.dy);
+      }
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      if (gestureState.dy > 0 && gestureState.vy > 0.5) {
+        handleClose();
+      } else {
+        _reactNative.Animated.timing(animatedY, {
+          toValue: translateY,
+          useNativeDriver: false,
+          duration: 300
+        }).start();
+      }
+    }
+  }), [translateY]);
+  (0, _react.useEffect)(() => {
+    if (translateY >= 0) {
+      _reactNative.Animated.timing(animatedY, {
+        toValue: translateY,
+        useNativeDriver: false,
+        duration: 300
+      }).start();
+    }
+  }, [translateY]);
+
+  const handleClose = () => {
+    if (onChange) {
+      onChange(-1);
+    }
+  };
+
+  const handleScrollViewLayout = event => {
+    contentLayout.current = event.nativeEvent.layout;
+  };
+
+  const handleScroll = event => {
+    currentScrollY.current = event.nativeEvent.contentOffset.y;
+  };
+
+  const animatedStyles = [styles.animated, {
+    transform: [{
+      translateY: animatedY
+    }]
+  }];
+  const paperStyles = [styles.paper, { ...(height !== 0 ? {
+      height
+    } : {})
+  }];
+  const contentStyle = { ...(snapPoints[index] !== 0 ? {
+      height: snapPoints[index]
+    } : {})
+  };
+  return /*#__PURE__*/_react.default.createElement(_core.Modal, {
+    backdropOpacity: backdropOpacity,
+    onClose: handleClose,
+    visible: index >= 0,
+    style: (0, _core.css)([_core.StyleSheet.absoluteFill, styles.root])
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
+    style: animatedStyles
+  }, panResponder.panHandlers), /*#__PURE__*/_react.default.createElement(_core.Paper, {
+    elevation: 12,
+    style: paperStyles
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: contentStyle,
+    onLayout: handleContentLayout
+  }, header, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    onLayout: handleScrollViewLayout,
+    onScroll: handleScroll,
+    scrollEventThrottle: 300,
+    style: styles.scrollView
+  }, children)))));
+}
+//# sourceMappingURL=BottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","scrollView","BottomSheet","props","backdropOpacity","children","header","index","onChange","snapPoints","initialSnapPoints","styles","contentLayout","useRef","x","y","height","currentScrollY","handleContentLayout","useDynamicSnapPoints","length","translateY","animatedY","useAnimatedValue","isInsideScrollView","locationX","locationY","current","panResponder","useMemo","PanResponder","create","onMoveShouldSetPanResponder","event","gestureState","nativeEvent","dy","onPanResponderMove","_","setValue","onPanResponderRelease","vy","handleClose","Animated","timing","toValue","useNativeDriver","duration","start","useEffect","handleScrollViewLayout","layout","handleScroll","contentOffset","animatedStyles","transform","paperStyles","contentStyle","css","StyleSheet","absoluteFill","panHandlers"],"sources":["BottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport {\n    Animated,\n    LayoutChangeEvent,\n    LayoutRectangle,\n    NativeScrollEvent,\n    NativeSyntheticEvent,\n    PanResponder,\n    ScrollView,\n    View,\n} from 'react-native';\nimport { css, Modal, Paper, StyleSheet, useAnimatedValue, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport BottomSheetProps from './BottomSheetProps';\nimport useDynamicSnapPoints from './useDynamicSnapPoints';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper' | 'scrollView'>;\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        scrollView: {\n            flexGrow: 1,\n        },\n    };\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity,\n        children,\n        header,\n        index,\n        onChange,\n        snapPoints: initialSnapPoints,\n    } = props;\n\n    const styles = useStyles();\n\n    const contentLayout = useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 });\n    const currentScrollY = useRef<number>(0);\n\n    const {\n        snapPoints,\n        handleContentLayout,\n    } = useDynamicSnapPoints({\n        index,\n        initialSnapPoints,\n    });\n\n    const height = snapPoints[snapPoints.length - 1] ?? 0;\n    const translateY = height - (snapPoints[index] ?? 0);\n\n    const animatedY = useAnimatedValue(translateY);\n\n    const isInsideScrollView = (locationX: number, locationY: number): boolean => {\n        const {\n            current: { x, y, width, height },\n        } = contentLayout;\n\n        return locationX >= x && locationX <= x + width && locationY >= y && locationY <= y + height;\n    };\n\n    const panResponder = useMemo(() => (\n        PanResponder.create({\n            onMoveShouldSetPanResponder: (event, gestureState) => {\n                const {\n                    nativeEvent: { locationX, locationY },\n                } = event;\n\n                if (isInsideScrollView(locationX, locationY)) {\n                    return gestureState.dy > 0 && currentScrollY.current === 0;\n                }\n\n                return true;\n            },\n            onPanResponderMove: (_, gestureState) => {\n                if (gestureState.dy > 0) {\n                    animatedY.setValue(translateY + gestureState.dy);\n                }\n            },\n            onPanResponderRelease: (_, gestureState) => {\n                if (gestureState.dy > 0 && gestureState.vy > 0.5) {\n                    handleClose();\n                } else {\n                    Animated.timing(animatedY, {\n                        toValue: translateY,\n                        useNativeDriver: false,\n                        duration: 300,\n                    }).start();\n                }\n            },\n        })\n    ), [translateY]);\n\n    useEffect(() => {\n        if (translateY >= 0) {\n            Animated.timing(animatedY, {\n                toValue: translateY,\n                useNativeDriver: false,\n                duration: 300,\n            }).start();\n        }\n    }, [translateY]);\n\n    const handleClose = () => {\n        if (onChange) {\n            onChange(-1);\n        }\n    };\n\n    const handleScrollViewLayout = (event: LayoutChangeEvent) => {\n        contentLayout.current = event.nativeEvent.layout;\n    };\n\n    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        currentScrollY.current = event.nativeEvent.contentOffset.y;\n    };\n\n    const animatedStyles = [\n        styles.animated,\n        { transform: [{ translateY: animatedY }] },\n    ];\n\n    const paperStyles = [\n        styles.paper,\n        { ...(height !== 0 ? { height } : {}) },\n    ];\n\n    const contentStyle = {\n        ...(snapPoints[index] !== 0 ? { height: snapPoints[index] } : {}),\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            <Animated.View\n                style={animatedStyles}\n                {...panResponder.panHandlers}\n            >\n                <Paper\n                    elevation={12}\n                    style={paperStyles}\n                >\n                    <View\n                        style={contentStyle}\n                        onLayout={handleContentLayout}\n                    >\n                        {header}\n\n                        <ScrollView\n                            onLayout={handleScrollViewLayout}\n                            onScroll={handleScroll}\n                            scrollEventThrottle={300}\n                            style={styles.scrollView}\n                        >\n                            {children}\n                        </ScrollView>\n                    </View>\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -17,7 +17,7 @@ var _TransparentBackdrop = _interopRequireDefault(require("./TransparentBackdrop
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const NoHandle = () => null;
 
@@ -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,"sources":["BottomSheetNative.tsx"],"names":["NoHandle","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","indexRef","React","useRef","bottomSheetRef","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","shadow","modalStyle","backgroundColor","Platform","select","android","elevation","ios","web","boxShadow","backgroundStyle","palette","paper","default","isBackdropTransparent","OpacityAwareBackdrop","TransparentBackdrop"],"mappings":"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","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"]}
+{"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,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"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     * Area to be fixed on the top of the bottom sheet.\n     */\n    header?: 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,15 +36,22 @@ const useStyles = function () {
   };
 };
 
-const calculateHeight = points => {
-  var _points;
+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 (_points = points[points.length - 1]) !== null && _points !== void 0 ? _points : 0;
+  return 0;
 };
 
 function BottomSheet(props) {
-  var _snapPoints$index;
-
   const {
     backdropOpacity,
     children,
@@ -51,6 +60,9 @@ function BottomSheet(props) {
     snapPoints
   } = props;
   const styles = useStyles();
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
 
   const handleClose = () => {
     if (onChange) {
@@ -58,8 +70,8 @@ function BottomSheet(props) {
     }
   };
 
-  const height = calculateHeight(snapPoints);
-  const translateY = height - ((_snapPoints$index = snapPoints[index]) !== null && _snapPoints$index !== void 0 ? _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,"sources":["BottomSheetWeb.tsx"],"names":["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","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAKA,MAAMA,SAAuC,GAAG,YAA+B;AAC3E,QAAMC,KAAK,GAAG,qBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,cAAc,EAAE,UADd;AAEFC,MAAAA,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;AAFnB,KADH;AAKHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,SAAS,EAAE,QADL;AAENC,MAAAA,QAAQ,EAAE,GAFJ;AAGNC,MAAAA,KAAK,EAAE;AAHD,KALP;AAUHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,sBAAsB,EAAE,CADrB;AAEHC,MAAAA,uBAAuB,EAAE,CAFtB;AAGHC,MAAAA,QAAQ,EAAE,CAHP;AAIHC,MAAAA,QAAQ,EAAE;AAJP;AAVJ,GAAP;AAiBH,CApBD;;AAsBA,MAAMC,eAAe,GAAIC,MAAD,IAAoD;AAAA;;AACxE,oBAAOA,MAAM,CAACA,MAAM,CAACC,MAAP,GAAgB,CAAjB,CAAb,6CAAoC,CAApC;AACH,CAFD;;AAIe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAAA;;AACzD,QAAM;AACFC,IAAAA,eADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,KAHE;AAIFC,IAAAA,QAJE;AAKFC,IAAAA;AALE,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGzB,SAAS,EAAxB;;AAEA,QAAM0B,WAAW,GAAG,MAAM;AACtB,QAAIH,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAAC,CAAC,CAAF,CAAR;AACH;AACJ,GAJD;;AAMA,QAAMI,MAAM,GAAGZ,eAAe,CAACS,UAAD,CAA9B;AACA,QAAMI,UAAU,GAAGD,MAAM,yBAAIH,UAAU,CAACF,KAAD,CAAd,iEAAyB,CAAzB,CAAzB;AAEA,sBACI,6BAAC,WAAD;AACI,IAAA,eAAe,EAAEF,eADrB;AAEI,IAAA,OAAO,EAAEM,WAFb;AAGI,IAAA,OAAO,EAAEJ,KAAK,IAAI,CAHtB;AAII,IAAA,KAAK,EAAE,eAAI,CAACO,iBAAWC,YAAZ,EAA0BL,MAAM,CAACvB,IAAjC,CAAJ;AAJX,kBAMI,6BAAC,kBAAD;AACI,IAAA,KAAK,EAAEuB,MAAM,CAACnB,QADlB;AAEI,IAAA,UAAU,EAAEsB;AAFhB,kBAII,6BAAC,WAAD;AACI,IAAA,SAAS,EAAE,EADf;AAEI,IAAA,KAAK,EAAE,CACHH,MAAM,CAACf,KADJ,EAEH;AAAEiB,MAAAA;AAAF,KAFG;AAFX,KAOKN,QAPL,CAJJ,CANJ,CADJ;AAuBH;;AAAA","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"]}
+{"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/commonjs/BottomSheet/TransparentBackdrop.js

@@ -13,7 +13,7 @@ var _styles = require("@fountain-ui/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function TransparentBackdrop(props) {
   // The reason that it did not use the opacity prop is that the close event is ignored in Android. (opacity < 0.1)

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

@@ -1 +1 @@
-{"version":3,"sources":["TransparentBackdrop.tsx"],"names":["TransparentBackdrop","props","backdropStyle","backgroundColor","bottom","left","position","right","top"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAEe,SAASA,mBAAT,CAA6BC,KAA7B,EAA8D;AACzE;AACA,QAAMC,aAAa,GAAG,iBAAI,CACtB;AACIC,IAAAA,eAAe,EAAE,WADrB;AAEIC,IAAAA,MAAM,EAAE,CAFZ;AAGIC,IAAAA,IAAI,EAAE,CAHV;AAIIC,IAAAA,QAAQ,EAAE,UAJd;AAKIC,IAAAA,KAAK,EAAE,CALX;AAMIC,IAAAA,GAAG,EAAE;AANT,GADsB,CAAJ,CAAtB;AAWA,sBACI,6BAAC,gCAAD,eACQP,KADR;AAEI,IAAA,cAAc,EAAE,CAFpB;AAGI,IAAA,iBAAiB,EAAE,CAAC,CAHxB;AAII,IAAA,KAAK,EAAEC;AAJX,KADJ;AAQH;;AAAA","sourcesContent":["import React from 'react';\nimport { BottomSheetBackdrop, BottomSheetBackdropProps } from '@gorhom/bottom-sheet';\nimport { css } from '@fountain-ui/styles';\n\nexport default function TransparentBackdrop(props: BottomSheetBackdropProps) {\n    // The reason that it did not use the opacity prop is that the close event is ignored in Android. (opacity < 0.1)\n    const backdropStyle = css([\n        {\n            backgroundColor: '#ffffff00',\n            bottom: 0,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n        },\n    ]);\n\n    return (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            style={backdropStyle}\n        />\n    );\n};"]}
+{"version":3,"names":["TransparentBackdrop","props","backdropStyle","css","backgroundColor","bottom","left","position","right","top"],"sources":["TransparentBackdrop.tsx"],"sourcesContent":["import React from 'react';\nimport { BottomSheetBackdrop, BottomSheetBackdropProps } from '@gorhom/bottom-sheet';\nimport { css } from '@fountain-ui/styles';\n\nexport default function TransparentBackdrop(props: BottomSheetBackdropProps) {\n    // The reason that it did not use the opacity prop is that the close event is ignored in Android. (opacity < 0.1)\n    const backdropStyle = css([\n        {\n            backgroundColor: '#ffffff00',\n            bottom: 0,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n        },\n    ]);\n\n    return (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            style={backdropStyle}\n        />\n    );\n};"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAEe,SAASA,mBAAT,CAA6BC,KAA7B,EAA8D;EACzE;EACA,MAAMC,aAAa,GAAG,IAAAC,WAAA,EAAI,CACtB;IACIC,eAAe,EAAE,WADrB;IAEIC,MAAM,EAAE,CAFZ;IAGIC,IAAI,EAAE,CAHV;IAIIC,QAAQ,EAAE,UAJd;IAKIC,KAAK,EAAE,CALX;IAMIC,GAAG,EAAE;EANT,CADsB,CAAJ,CAAtB;EAWA,oBACI,6BAAC,gCAAD,eACQR,KADR;IAEI,cAAc,EAAE,CAFpB;IAGI,iBAAiB,EAAE,CAAC,CAHxB;IAII,KAAK,EAAEC;EAJX,GADJ;AAQH;;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './BottomSheetWeb';\nexport type { default as BottomSheetProps } from './BottomSheetProps';\n"]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './BottomSheetWeb';\nexport type { default as BottomSheetProps } from './BottomSheetProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/BottomSheet/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.native.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './BottomSheetNative';\n"]}
+{"version":3,"names":[],"sources":["index.native.ts"],"sourcesContent":["export { default } from './BottomSheetNative';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/BottomSheet/useDynamicSnapPoints.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDynamicSnapPoints;
+
+var _react = require("react");
+
+var _reactNative = require("react-native");
+
+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 useDynamicSnapPoints(props) {
+  const {
+    index: currentIndex,
+    initialSnapPoints
+  } = props;
+  const {
+    height: WINDOW_HEIGHT
+  } = (0, _reactNative.useWindowDimensions)();
+  const [snapPoints, setSnapPoints] = (0, _react.useState)(initialSnapPoints.map(snapPoint => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));
+  const handleContentLayout = (0, _react.useCallback)(event => {
+    if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {
+      const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);
+      setSnapPoints(prevState => prevState.map((snapPoint, index) => {
+        return currentIndex === index ? contentHeight : snapPoint;
+      }));
+    }
+  }, [currentIndex, initialSnapPoints]);
+  return {
+    handleContentLayout,
+    snapPoints
+  };
+}
+//# sourceMappingURL=useDynamicSnapPoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","useDynamicSnapPoints","props","index","currentIndex","initialSnapPoints","height","WINDOW_HEIGHT","useWindowDimensions","snapPoints","setSnapPoints","useState","map","snapPoint","handleContentLayout","useCallback","event","contentHeight","min","nativeEvent","layout","prevState"],"sources":["useDynamicSnapPoints.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\n\ninterface UseDynamicSnapPointsParams {\n    index: number;\n    initialSnapPoints: (number | string)[];\n}\n\ninterface UseDynamicSnapPointsReturns {\n    handleContentLayout: (e: LayoutChangeEvent) => void;\n    snapPoints: number[];\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 useDynamicSnapPoints(props: UseDynamicSnapPointsParams): UseDynamicSnapPointsReturns {\n    const {\n        index: currentIndex,\n        initialSnapPoints,\n    } = props;\n\n    const { height: WINDOW_HEIGHT } = useWindowDimensions();\n\n    const [snapPoints, setSnapPoints] = useState(initialSnapPoints.map((snapPoint) => convertHeightAsPixel(WINDOW_HEIGHT, snapPoint)));\n\n    const handleContentLayout = useCallback((event: LayoutChangeEvent) => {\n        if (initialSnapPoints[currentIndex] === 'CONTENT_HEIGHT') {\n            const contentHeight = Math.min(Math.round(WINDOW_HEIGHT * 0.9), event.nativeEvent.layout.height);\n            \n            setSnapPoints(prevState => prevState.map((snapPoint, index) => {\n                return currentIndex === index ? contentHeight : snapPoint;\n            }));\n        }\n    }, [currentIndex, initialSnapPoints]);\n\n    return {\n        handleContentLayout,\n        snapPoints,\n    };\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAYA,MAAMA,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,oBAAT,CAA8BC,KAA9B,EAA8F;EACzG,MAAM;IACFC,KAAK,EAAEC,YADL;IAEFC;EAFE,IAGFH,KAHJ;EAKA,MAAM;IAAEI,MAAM,EAAEC;EAAV,IAA4B,IAAAC,gCAAA,GAAlC;EAEA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAASN,iBAAiB,CAACO,GAAlB,CAAuBC,SAAD,IAAevB,oBAAoB,CAACiB,aAAD,EAAgBM,SAAhB,CAAzD,CAAT,CAApC;EAEA,MAAMC,mBAAmB,GAAG,IAAAC,kBAAA,EAAaC,KAAD,IAA8B;IAClE,IAAIX,iBAAiB,CAACD,YAAD,CAAjB,KAAoC,gBAAxC,EAA0D;MACtD,MAAMa,aAAa,GAAGlB,IAAI,CAACmB,GAAL,CAASnB,IAAI,CAACC,KAAL,CAAWO,aAAa,GAAG,GAA3B,CAAT,EAA0CS,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBd,MAAnE,CAAtB;MAEAI,aAAa,CAACW,SAAS,IAAIA,SAAS,CAACT,GAAV,CAAc,CAACC,SAAD,EAAYV,KAAZ,KAAsB;QAC3D,OAAOC,YAAY,KAAKD,KAAjB,GAAyBc,aAAzB,GAAyCJ,SAAhD;MACH,CAF0B,CAAd,CAAb;IAGH;EACJ,CAR2B,EAQzB,CAACT,YAAD,EAAeC,iBAAf,CARyB,CAA5B;EAUA,OAAO;IACHS,mBADG;IAEHL;EAFG,CAAP;AAIH"}