@fountain-ui/core 2.0.0-beta.81 → 2.0.0-beta.83

package/build/commonjs/Accordion/Accordion.js

@@ -31,26 +31,27 @@ 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; }
 
-const CONTENT_Y_START = 30;
-const CONTENT_Y_END = 0;
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
-  duration: 300
+  duration: 200
 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 100;
+const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(3)
     },
     title: {
       borderRadius: theme.spacing(4),
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(3.5),
-      alignItems: 'center'
+      alignItems: 'center',
+      height: 64
     },
     titleColumn: {
       flexShrink: 1
@@ -67,7 +68,7 @@ const useStyles = function () {
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(6),
-      marginTop: theme.spacing(2)
+      marginTop: theme.spacing(1)
     }
   };
 };
@@ -88,7 +89,6 @@ function Accordion(props) {
   const shouldInitialExpandedRef = (0, _react.useRef)(isInitialExpanded);
   const rotate = (0, _reactNativeReanimated.useSharedValue)(ROTATE_HIDE_DEGREE);
   const animatedOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
-  const animatedContentY = (0, _reactNativeReanimated.useSharedValue)(CONTENT_Y_START);
   const animatedHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   const [contentHeight, setContentHeight] = (0, _react.useState)(0);
   const animatedChevronDownStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
@@ -98,13 +98,9 @@ function Accordion(props) {
   }), []);
   const animatedContentBackgroundStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     height: animatedHeight.value,
-    opacity: animatedOpacity.value,
     overflow: 'hidden'
   }), []);
   const animatedContentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      translateY: animatedContentY.value
-    }],
     opacity: animatedOpacity.value
   }), []);
 
@@ -118,17 +114,14 @@ function Accordion(props) {
 
     if (shouldInitialExpandedRef.current) {
       shouldInitialExpandedRef.current = false;
-      setIsExpanded(true);
+      setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
     }
   };
 
   (0, _react.useEffect)(() => {
     rotate.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
     animatedHeight.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-    animatedOpacity.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? 1 : 0, ANIMATION_CONFIG);
-    animatedContentY.value = isExpanded ? (0, _reactNativeReanimated.withTiming)(CONTENT_Y_END, ANIMATION_CONFIG) : (0, _reactNativeReanimated.withDelay)(ANIMATION_CONFIG.duration, (0, _reactNativeReanimated.withTiming)(CONTENT_Y_START, {
-      duration: 0
-    }));
+    animatedOpacity.value = isExpanded ? (0, _reactNativeReanimated.withDelay)(CONTENT_OPACITY_DELAY_MILLIS, (0, _reactNativeReanimated.withTiming)(1, ANIMATION_CONFIG)) : (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
   }, [isExpanded, contentHeight]);
   return /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.root
@@ -142,13 +135,16 @@ function Accordion(props) {
     variant: 'subtitle2',
     children: title,
     color: 'textPrimary',
-    numberOfLines: 1
+    numberOfLines: 1,
+    disableFontScaling: true
   }), subTitle ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 0.5
   }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     style: styles.subtitle,
     color: 'tertiary',
-    children: subTitle
+    children: subTitle,
+    numberOfLines: 1,
+    disableFontScaling: true
   })) : null), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     flex: 1
   }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {

package/build/commonjs/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["CONTENT_Y_START","CONTENT_Y_END","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","useStyles","theme","useTheme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","rotate","useSharedValue","animatedOpacity","animatedContentY","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","height","opacity","overflow","animatedContentStyle","translateY","onPress","prev","onLayout","event","nativeEvent","layout","current","useEffect","withTiming","withDelay"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<\n    'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'\n>;\n\nconst CONTENT_Y_START = 30;\nconst CONTENT_Y_END = 0;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(2) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n    const animatedContentY = useSharedValue(CONTENT_Y_START);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        opacity: animatedOpacity.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: animatedContentY.value }],\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setIsExpanded(true);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n        animatedOpacity.value = withTiming(isExpanded ? 1 : 0, ANIMATION_CONFIG);\n\n        animatedContentY.value = isExpanded\n            ? withTiming(CONTENT_Y_END, ANIMATION_CONFIG)\n            : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","height","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<\n    'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'\n>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n            height: 64,\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(1),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                            disableFontScaling={true}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                    numberOfLines={1}\n                                    disableFontScaling={true}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Dialog/Dialog.js

@@ -13,14 +13,10 @@ var _styles = require("@fountain-ui/styles");
 
 var _Column = _interopRequireDefault(require("../Column"));
 
-var _Modal = _interopRequireDefault(require("../Modal"));
+var _Modal = _interopRequireWildcard(require("../Modal"));
 
 var _Paper = _interopRequireDefault(require("../Paper"));
 
-var _hooks = require("../hooks");
-
-var _utils = require("../utils");
-
 var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,8 +28,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 DIALOG_MAX_WIDTH = 328;
-const fadeDuration = 300;
-const fadeAnimationDelay = 50;
 
 const useStyles = function () {
   const theme = (0, _styles2.useTheme)();
@@ -49,6 +43,7 @@ const useStyles = function () {
       zIndex: theme.zIndex.dialog
     },
     paper: {
+      borderRadius: theme.shape.roundnessExtra,
       margin,
       maxWidth: DIALOG_MAX_WIDTH,
       overflow: 'hidden',
@@ -77,6 +72,7 @@ const useStyles = function () {
 
 function Dialog(props) {
   const {
+    animationType = _Modal.ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
     onClose,
@@ -86,42 +82,74 @@ function Dialog(props) {
     ...otherProps
   } = props;
   const styles = useStyles();
-  const theme = (0, _styles2.useTheme)();
-  const animatedOpacity = (0, _hooks.useAnimatedValue)(0);
-  (0, _react.useEffect)(() => {
-    if (!fullScreen) {
-      _reactNative.Animated.timing(animatedOpacity, {
-        toValue: visible ? 1 : 0,
-        duration: fadeDuration,
-        delay: visible ? fadeAnimationDelay : 0,
-        easing: _reactNative.Easing.out(_reactNative.Easing.exp),
-        useNativeDriver: _utils.isNotAndroid12
-      }).start();
+  const {
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const closeAnimation = (0, _react.useMemo)(() => {
+    if (animationType === _Modal.ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: screenHeight,
+        type: _Modal.ANIMATION_TYPE.SLIDE
+      }, {
+        duration: 150,
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
     }
-  }, [fullScreen, visible]);
+
+    return [{
+      duration: 150,
+      toValue: screenHeight,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen, screenHeight]);
+  const openAnimation = (0, _react.useMemo)(() => {
+    if (animationType === _Modal.ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 1,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.SLIDE
+      }, {
+        delay: 50,
+        duration: 150,
+        toValue: 1,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      toValue: 0,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen]);
+  const initialOpacity = animationType === _Modal.ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  const initialTranslateY = animationType === _Modal.ANIMATION_TYPE.FADE ? 0 : undefined;
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
+    closeAnimation: closeAnimation,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
     onClose: onClose,
-    exitDuration: fullScreen ? 150 : 300,
+    openAnimation: openAnimation,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
-    needsOffscreenAlphaCompositing: true,
-    style: {
-      height: fullScreen ? '100%' : 'auto',
-      width: fullScreen ? '100%' : 'auto',
-      opacity: fullScreen ? 1 : animatedOpacity
-    }
-  }, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: fullScreen ? undefined : styles.topElementSize
   }, /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.topElementPosition
   }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
     elevation: 6,
     square: fullScreen,
-    style: (0, _styles.css)([{
-      borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra
-    }, fullScreen ? styles.paperFullScreen : styles.paper, style])
+    style: (0, _styles.css)([fullScreen ? styles.paperFullScreen : styles.paper, style])
   }, children)));
 }
 

package/build/commonjs/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","useAnimatedValue","useEffect","Animated","timing","toValue","duration","delay","easing","Easing","out","exp","useNativeDriver","isNotAndroid12","start","opacity","undefined","css","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: fadeDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                easing: Easing.out(Easing.exp),\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{\n                    height: fullScreen ? '100%' : 'auto',\n                    width:  fullScreen ? '100%' : 'auto',\n                    opacity: fullScreen ? 1 : animatedOpacity,\n                }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DIALOG_MAX_WIDTH","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","screenHeight","closeAnimation","useMemo","FADE","toValue","type","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            borderRadius: theme.shape.roundnessExtra,\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            closeAnimation={closeAnimation}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Dialog/DialogProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the dialog is full-screen.\n     * @default false\n     */\n    fullScreen?: boolean;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     * @default 'slide'\n     */\n    animationType?: ANIMATION_TYPE;\n\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the dialog is full-screen.\n     * @default false\n     */\n    fullScreen?: boolean;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":""}

package/build/commonjs/Modal/AnimatedContainer/index.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AnimatedContainer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var R = _interopRequireWildcard(require("ramda"));
+
+var _hooks = require("../../hooks");
+
+var _utils = require("../../utils");
+
+var _ModalProps = require("../ModalProps");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DEFAULT_ANIMATION_CONFIG = {
+  duration: 300,
+  useNativeDriver: _utils.isNotAndroid12
+};
+
+function AnimatedContainer(props) {
+  const {
+    children,
+    closeAnimation,
+    initialOpacity,
+    initialTranslateY,
+    onEnter,
+    onEntered,
+    onExit,
+    onExited,
+    openAnimation,
+    style,
+    visible
+  } = props;
+  const {
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const opacity = (0, _hooks.useAnimatedValue)(initialOpacity ?? 0);
+  const translateY = (0, _hooks.useAnimatedValue)(initialTranslateY ?? screenHeight);
+  const convertToCompositeAnimation = (0, _react.useCallback)(animationUnit => {
+    const {
+      type,
+      ...others
+    } = animationUnit;
+
+    switch (type) {
+      case _ModalProps.ANIMATION_TYPE.FADE:
+        return _reactNative.Animated.timing(opacity, { ...others,
+          useNativeDriver: _utils.isNotAndroid12
+        });
+
+      case _ModalProps.ANIMATION_TYPE.SLIDE:
+      default:
+        const easing = others.toValue === screenHeight ? _reactNative.Easing.in(_reactNative.Easing.ease) : _reactNative.Platform.OS === 'web' ? _reactNative.Easing.bezier(0.16, 1, 0.3, 1) : _reactNative.Easing.out(_reactNative.Easing.exp);
+        return _reactNative.Animated.timing(translateY, { ...others,
+          easing,
+          useNativeDriver: _utils.isNotAndroid12
+        });
+    }
+  }, [screenHeight]);
+  (0, _react.useEffect)(() => {
+    if (visible) {
+      onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+
+      if (R.isNil(openAnimation)) {
+        opacity.setValue(1);
+
+        _reactNative.Animated.timing(translateY, { ...DEFAULT_ANIMATION_CONFIG,
+          easing: _reactNative.Platform.OS === 'web' ? _reactNative.Easing.bezier(0.16, 1, 0.3, 1) : _reactNative.Easing.out(_reactNative.Easing.exp),
+          toValue: 0
+        }).start(_ref => {
+          let {
+            finished
+          } = _ref;
+
+          if (finished) {
+            onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+          }
+        });
+      } else {
+        const convertedAnimation = openAnimation.map(animationUnit => {
+          return convertToCompositeAnimation({ ...DEFAULT_ANIMATION_CONFIG,
+            ...animationUnit
+          });
+        });
+
+        _reactNative.Animated.parallel(convertedAnimation).start(_ref2 => {
+          let {
+            finished
+          } = _ref2;
+
+          if (finished) {
+            onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+          }
+        });
+      }
+    } else {
+      onExit === null || onExit === void 0 ? void 0 : onExit();
+
+      if (R.isNil(closeAnimation)) {
+        opacity.setValue(1);
+
+        _reactNative.Animated.timing(translateY, { ...DEFAULT_ANIMATION_CONFIG,
+          easing: _reactNative.Easing.in(_reactNative.Easing.ease),
+          toValue: screenHeight
+        }).start(_ref3 => {
+          let {
+            finished
+          } = _ref3;
+
+          if (finished) {
+            onExited === null || onExited === void 0 ? void 0 : onExited();
+          }
+        });
+      } else {
+        const convertedAnimation = closeAnimation.map(animationUnit => {
+          return convertToCompositeAnimation({ ...DEFAULT_ANIMATION_CONFIG,
+            ...animationUnit
+          });
+        });
+
+        _reactNative.Animated.parallel(convertedAnimation).start(_ref4 => {
+          let {
+            finished
+          } = _ref4;
+
+          if (finished) {
+            onExited === null || onExited === void 0 ? void 0 : onExited();
+          }
+        });
+      }
+    }
+  }, [convertToCompositeAnimation, visible]);
+  const animatedStyle = {
+    opacity,
+    transform: [{
+      translateY
+    }]
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    pointerEvents: 'box-none',
+    style: [animatedStyle, style]
+  }, children);
+}
+//# sourceMappingURL=index.js.map

package/build/commonjs/Modal/AnimatedContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_ANIMATION_CONFIG","duration","useNativeDriver","isNotAndroid12","AnimatedContainer","props","children","closeAnimation","initialOpacity","initialTranslateY","onEnter","onEntered","onExit","onExited","openAnimation","style","visible","height","screenHeight","useWindowDimensions","opacity","useAnimatedValue","translateY","convertToCompositeAnimation","useCallback","animationUnit","type","others","ANIMATION_TYPE","FADE","Animated","timing","SLIDE","easing","toValue","Easing","in","ease","Platform","OS","bezier","out","exp","useEffect","R","isNil","setValue","start","finished","convertedAnimation","map","parallel","animatedStyle","transform"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { Animated, Easing, Platform, useWindowDimensions } from 'react-native';\nimport * as R from 'ramda';\nimport { useAnimatedValue } from '../../hooks';\nimport { isNotAndroid12 } from '../../utils';\nimport type ModalProps from '../ModalProps';\nimport { ANIMATION_TYPE, AnimationUnit } from '../ModalProps';\n\ntype AnimatedContainerProps = Pick<ModalProps,\n    | 'children'\n    | 'closeAnimation'\n    | 'initialOpacity'\n    | 'initialTranslateY'\n    | 'onEnter'\n    | 'onEntered'\n    | 'onExit'\n    | 'onExited'\n    | 'openAnimation'\n    | 'style'\n    | 'visible'>\n\nconst DEFAULT_ANIMATION_CONFIG = {\n    duration: 300,\n    useNativeDriver: isNotAndroid12,\n};\n\nexport default function AnimatedContainer(props: AnimatedContainerProps) {\n    const {\n        children,\n        closeAnimation,\n        initialOpacity,\n        initialTranslateY,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        openAnimation,\n        style,\n        visible,\n    } = props;\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const opacity = useAnimatedValue(initialOpacity ?? 0);\n\n    const translateY = useAnimatedValue(initialTranslateY ?? screenHeight);\n\n    const convertToCompositeAnimation = useCallback((animationUnit: AnimationUnit) => {\n        const {\n            type,\n            ...others\n        } = animationUnit;\n\n        switch (type) {\n            case ANIMATION_TYPE.FADE:\n                return Animated.timing(opacity, {\n                    ...others,\n                    useNativeDriver: isNotAndroid12,\n                });\n            case ANIMATION_TYPE.SLIDE:\n            default:\n                const easing = others.toValue === screenHeight\n                    ? Easing.in(Easing.ease)\n                    : Platform.OS === 'web'\n                        ? Easing.bezier(0.16, 1, 0.3, 1)\n                        : Easing.out(Easing.exp);\n\n                return Animated.timing(translateY, {\n                    ...others,\n                    easing,\n                    useNativeDriver: isNotAndroid12,\n                });\n        }\n    }, [screenHeight]);\n\n    useEffect(() => {\n        if (visible) {\n            onEnter?.();\n\n            if (R.isNil(openAnimation)) {\n                opacity.setValue(1);\n\n                Animated.timing(translateY, {\n                    ...DEFAULT_ANIMATION_CONFIG,\n                    easing: Platform.OS === 'web'\n                        ? Easing.bezier(0.16, 1, 0.3, 1)\n                        : Easing.out(Easing.exp),\n                    toValue: 0,\n                }).start(({ finished }) => {\n                    if (finished) {\n                        onEntered?.();\n                    }\n                });\n            } else {\n                const convertedAnimation = openAnimation.map((animationUnit) => {\n                    return convertToCompositeAnimation({\n                        ...DEFAULT_ANIMATION_CONFIG,\n                        ...animationUnit,\n                    });\n                });\n\n                Animated.parallel(convertedAnimation).start(({ finished }) => {\n                    if (finished) {\n                        onEntered?.();\n                    }\n                });\n            }\n        } else {\n            onExit?.();\n\n            if (R.isNil(closeAnimation)) {\n                opacity.setValue(1);\n\n                Animated.timing(translateY, {\n                    ...DEFAULT_ANIMATION_CONFIG,\n                    easing: Easing.in(Easing.ease),\n                    toValue: screenHeight,\n                }).start(({ finished }) => {\n                    if (finished) {\n                        onExited?.();\n                    }\n                });\n            } else {\n                const convertedAnimation = closeAnimation.map((animationUnit) => {\n                    return convertToCompositeAnimation({\n                        ...DEFAULT_ANIMATION_CONFIG,\n                        ...animationUnit,\n                    });\n                });\n\n                Animated.parallel(convertedAnimation).start(({ finished }) => {\n                    if (finished) {\n                        onExited?.();\n                    }\n                });\n            }\n        }\n    }, [convertToCompositeAnimation, visible]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ translateY }],\n    };\n\n    return (\n        <Animated.View\n            pointerEvents={'box-none'}\n            style={[\n                animatedStyle,\n                style,\n            ]}\n        >\n            {children}\n        </Animated.View>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Modal/Modal.js

@@ -14,7 +14,7 @@ var _styles = require("../styles");
 
 var _hooks = require("../hooks");
 
-var _Slide = _interopRequireDefault(require("../Slide"));
+var _AnimatedContainer = _interopRequireDefault(require("./AnimatedContainer"));
 
 var _SimpleBackdrop = _interopRequireDefault(require("./SimpleBackdrop"));
 
@@ -22,9 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 defaultEnterDuration = 300;
-const defaultExitDuration = 150;
-
 const createModalCloseEvent = reason => ({
   metadata: {
     reason
@@ -38,11 +35,17 @@ function Modal(props) {
     animationStyle,
     backdropOpacity = 0.5,
     children,
+    closeAnimation,
     disableAnimation = false,
-    enterDuration = defaultEnterDuration,
-    exitDuration = defaultExitDuration,
     hideBackdrop = false,
+    initialOpacity,
+    initialTranslateY,
     onClose,
+    onEnter: onEnterProp,
+    onEntered: onEnteredProp,
+    onExit: onExitProp,
+    onExited: onExitedProp,
+    openAnimation,
     style,
     visible,
     ...otherProps
@@ -58,6 +61,24 @@ function Modal(props) {
 
   const elevationStyle = (0, _hooks.useElevationStyle)(6);
 
+  const onEnter = () => {
+    setExited(false);
+    onEnterProp === null || onEnterProp === void 0 ? void 0 : onEnterProp();
+  };
+
+  const onEntered = () => {
+    onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
+  };
+
+  const onExit = () => {
+    onExitProp === null || onExitProp === void 0 ? void 0 : onExitProp();
+  };
+
+  const onExited = () => {
+    setExited(true);
+    onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
+  };
+
   if (!visible) {
     if (disableAnimation || exited) {
       return null;
@@ -66,17 +87,22 @@ function Modal(props) {
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: (0, _styles.css)([_styles.StyleSheet.absoluteFill, elevationStyle, style])
-  }, otherProps), hideBackdrop || !visible ? null : /*#__PURE__*/_react.default.createElement(_SimpleBackdrop.default, {
+  }, otherProps), !hideBackdrop && visible ? /*#__PURE__*/_react.default.createElement(_SimpleBackdrop.default, {
     onPress: handleBackdropPress,
     opacity: backdropOpacity
-  }), !disableAnimation ? /*#__PURE__*/_react.default.createElement(_Slide.default, {
-    appear: visible,
-    enterDuration: enterDuration,
-    exitDuration: exitDuration,
-    onEnter: () => setExited(false),
-    onExited: () => setExited(true),
-    style: animationStyle
-  }, children) : children);
+  }) : null, !disableAnimation ? /*#__PURE__*/_react.default.createElement(_AnimatedContainer.default, {
+    children: children,
+    closeAnimation: closeAnimation,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
+    onEnter: onEnter,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited,
+    openAnimation: openAnimation,
+    style: animationStyle,
+    visible: visible
+  }) : children);
 }
 
 ;