@fountain-ui/core 2.0.0-beta.87 → 2.0.0-beta.89

package/build/commonjs/Dialog/Dialog.js

@@ -28,6 +28,7 @@ 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 TOP_ELEMENT_OFFSET = 20;
 
 const useStyles = function () {
   const theme = (0, _styles2.useTheme)();
@@ -75,6 +76,7 @@ function Dialog(props) {
     animationType = _Modal.ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
+    hideBackdrop,
     onClose,
     style = {},
     visible,
@@ -85,6 +87,25 @@ function Dialog(props) {
   const {
     height: screenHeight
   } = (0, _reactNative.useWindowDimensions)();
+  const [topElementHeight, setTopElementHeight] = (0, _react.useState)(0);
+
+  const handleTopElementLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTopElementHeight(height);
+  };
+
+  const offsetAnimation = (0, _react.useMemo)(() => {
+    if (topElementHeight === 0) {
+      return [];
+    }
+
+    return [{
+      toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [topElementHeight]);
   const closeAnimation = (0, _react.useMemo)(() => {
     if (animationType === _Modal.ANIMATION_TYPE.FADE) {
       return [{
@@ -136,16 +157,19 @@ function Dialog(props) {
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
     closeAnimation: closeAnimation,
+    hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
     initialOpacity: initialOpacity,
     initialTranslateY: initialTranslateY,
     onClose: onClose,
     openAnimation: openAnimation,
+    offsetAnimation: offsetAnimation,
     visible: visible,
     style: styles.root
   }, 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
+    style: styles.topElementPosition,
+    onLayout: handleTopElementLayout
   }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
     elevation: 6,
     square: fullScreen,

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"names":["DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","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","hideBackdrop","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, 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 TOP_ELEMENT_OFFSET = 20;\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        hideBackdrop,\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 [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }]\n    }, [topElementHeight]);\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            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column\n                            style={styles.topElementPosition}\n                            onLayout={handleTopElementLayout}\n                        >\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/Modal/AnimatedContainer/index.js

@@ -37,6 +37,7 @@ function AnimatedContainer(props) {
     onExit,
     onExited,
     openAnimation,
+    offsetAnimation,
     style,
     visible
   } = props;
@@ -139,6 +140,18 @@ function AnimatedContainer(props) {
       }
     }
   }, [convertToCompositeAnimation, visible]);
+  (0, _react.useEffect)(() => {
+    if (visible && offsetAnimation && offsetAnimation.length > 0) {
+      opacity.setValue(1);
+      const convertedAnimation = offsetAnimation.map(animationUnit => {
+        return convertToCompositeAnimation({ ...DEFAULT_ANIMATION_CONFIG,
+          ...animationUnit
+        });
+      });
+
+      _reactNative.Animated.parallel(convertedAnimation).start();
+    }
+  }, [visible, offsetAnimation, convertToCompositeAnimation]);
   const animatedStyle = {
     opacity,
     transform: [{

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

@@ -1 +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            needsOffscreenAlphaCompositing={true}\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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"}
+{"version":3,"names":["DEFAULT_ANIMATION_CONFIG","duration","useNativeDriver","isNotAndroid12","AnimatedContainer","props","children","closeAnimation","initialOpacity","initialTranslateY","onEnter","onEntered","onExit","onExited","openAnimation","offsetAnimation","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","length","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    | 'offsetAnimation'\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        offsetAnimation,\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    useEffect(() => {\n        if (visible && offsetAnimation && offsetAnimation.length > 0) {\n            opacity.setValue(1);\n            const convertedAnimation = offsetAnimation.map((animationUnit) => {\n                return convertToCompositeAnimation({\n                    ...DEFAULT_ANIMATION_CONFIG,\n                    ...animationUnit\n                });\n            });\n            Animated.parallel(convertedAnimation).start();\n        }\n    }, [visible, offsetAnimation, convertToCompositeAnimation]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ translateY }],\n    };\n\n    return (\n        <Animated.View\n            needsOffscreenAlphaCompositing={true}\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

@@ -46,6 +46,7 @@ function Modal(props) {
     onExit: onExitProp,
     onExited: onExitedProp,
     openAnimation,
+    offsetAnimation,
     style,
     visible,
     ...otherProps
@@ -100,6 +101,7 @@ function Modal(props) {
     onExit: onExit,
     onExited: onExited,
     openAnimation: openAnimation,
+    offsetAnimation: offsetAnimation,
     style: animationStyle,
     visible: visible
   }) : children);

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

@@ -1 +1 @@
-{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAUO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,KAfE;IAgBFC,OAhBE;IAiBF,GAAGC;EAjBD,IAkBFrB,KAlBJ;;EAoBA,MAAMsB,mBAAmB,GAAG,MAAM;IAC9B,IAAIb,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC2B,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,MAAMlB,OAAO,GAAG,MAAM;IAClBc,SAAS,CAAC,KAAD,CAAT;IACAb,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBQ,SAAS,CAAC,IAAD,CAAT;IACAP,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACG,OAAL,EAAc;IACV,IAAIf,gBAAgB,IAAIkB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQM,CAACf,YAAD,IAAiBc,OAAlB,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEpB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,6BAAC,0BAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,KAAK,EAAEjB,cAVX;IAWI,OAAO,EAAEmB;EAXb,EADH,GAcGjB,QA7BR,CADJ;AAiCH;;AAAA"}
+{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        offsetAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    offsetAnimation={offsetAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAUO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,eAfE;IAgBFC,KAhBE;IAiBFC,OAjBE;IAkBF,GAAGC;EAlBD,IAmBFtB,KAnBJ;;EAqBA,MAAMuB,mBAAmB,GAAG,MAAM;IAC9B,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC4B,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,MAAMnB,OAAO,GAAG,MAAM;IAClBe,SAAS,CAAC,KAAD,CAAT;IACAd,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBS,SAAS,CAAC,IAAD,CAAT;IACAR,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACI,OAAL,EAAc;IACV,IAAIhB,gBAAgB,IAAImB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAM,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPJ,cAFO,EAGPR,KAHO,CAAJ;EADX,GAMQE,UANR,GAQM,CAAChB,YAAD,IAAiBe,OAAlB,gBACG,6BAAC,uBAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAErB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,6BAAC,0BAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,eAAe,EAAEC,eAVrB;IAWI,KAAK,EAAElB,cAXX;IAYI,OAAO,EAAEoB;EAZb,EADH,GAeGlB,QA9BR,CADJ;AAkCH;;AAAA"}

package/build/commonjs/Modal/ModalProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}
+{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * Additional offset animation applied when the modal opens.\n     */\n    offsetAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}

package/build/module/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
@@ -8,6 +8,7 @@ import Modal, { ANIMATION_TYPE } from '../Modal';
 import Paper from '../Paper';
 import { useTheme } from '../styles';
 const DIALOG_MAX_WIDTH = 328;
+const TOP_ELEMENT_OFFSET = 20;
 
 const useStyles = function () {
   const theme = useTheme();
@@ -55,6 +56,7 @@ export default function Dialog(props) {
     animationType = ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
+    hideBackdrop,
     onClose,
     style = {},
     visible,
@@ -65,6 +67,25 @@ export default function Dialog(props) {
   const {
     height: screenHeight
   } = useWindowDimensions();
+  const [topElementHeight, setTopElementHeight] = useState(0);
+
+  const handleTopElementLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTopElementHeight(height);
+  };
+
+  const offsetAnimation = useMemo(() => {
+    if (topElementHeight === 0) {
+      return [];
+    }
+
+    return [{
+      toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+      type: ANIMATION_TYPE.SLIDE
+    }];
+  }, [topElementHeight]);
   const closeAnimation = useMemo(() => {
     if (animationType === ANIMATION_TYPE.FADE) {
       return [{
@@ -116,16 +137,19 @@ export default function Dialog(props) {
   return /*#__PURE__*/React.createElement(Modal, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
     closeAnimation: closeAnimation,
+    hideBackdrop: hideBackdrop || animationType === ANIMATION_TYPE.FADE,
     initialOpacity: initialOpacity,
     initialTranslateY: initialTranslateY,
     onClose: onClose,
     openAnimation: openAnimation,
+    offsetAnimation: offsetAnimation,
     visible: visible,
     style: styles.root
   }, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, topElement ? /*#__PURE__*/React.createElement(Column, {
     style: fullScreen ? undefined : styles.topElementSize
   }, /*#__PURE__*/React.createElement(Column, {
-    style: styles.topElementPosition
+    style: styles.topElementPosition,
+    onLayout: handleTopElementLayout
   }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
     elevation: 6,
     square: fullScreen,

package/build/module/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","Paper","useTheme","DIALOG_MAX_WIDTH","useStyles","theme","width","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","SLIDE","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","screenHeight","closeAnimation","FADE","toValue","type","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY"],"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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"}
+{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","Paper","useTheme","DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","useStyles","theme","width","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","SLIDE","children","fullScreen","hideBackdrop","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, 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 TOP_ELEMENT_OFFSET = 20;\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        hideBackdrop,\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 [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }]\n    }, [topElementHeight]);\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            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column\n                            style={styles.topElementPosition}\n                            onLayout={handleTopElementLayout}\n                        >\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/module/Modal/AnimatedContainer/index.js

@@ -19,6 +19,7 @@ export default function AnimatedContainer(props) {
     onExit,
     onExited,
     openAnimation,
+    offsetAnimation,
     style,
     visible
   } = props;
@@ -117,6 +118,17 @@ export default function AnimatedContainer(props) {
       }
     }
   }, [convertToCompositeAnimation, visible]);
+  useEffect(() => {
+    if (visible && offsetAnimation && offsetAnimation.length > 0) {
+      opacity.setValue(1);
+      const convertedAnimation = offsetAnimation.map(animationUnit => {
+        return convertToCompositeAnimation({ ...DEFAULT_ANIMATION_CONFIG,
+          ...animationUnit
+        });
+      });
+      Animated.parallel(convertedAnimation).start();
+    }
+  }, [visible, offsetAnimation, convertToCompositeAnimation]);
   const animatedStyle = {
     opacity,
     transform: [{

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","Animated","Easing","Platform","useWindowDimensions","R","useAnimatedValue","isNotAndroid12","ANIMATION_TYPE","DEFAULT_ANIMATION_CONFIG","duration","useNativeDriver","AnimatedContainer","props","children","closeAnimation","initialOpacity","initialTranslateY","onEnter","onEntered","onExit","onExited","openAnimation","style","visible","height","screenHeight","opacity","translateY","convertToCompositeAnimation","animationUnit","type","others","FADE","timing","SLIDE","easing","toValue","in","ease","OS","bezier","out","exp","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            needsOffscreenAlphaCompositing={true}\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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"}
+{"version":3,"names":["React","useCallback","useEffect","Animated","Easing","Platform","useWindowDimensions","R","useAnimatedValue","isNotAndroid12","ANIMATION_TYPE","DEFAULT_ANIMATION_CONFIG","duration","useNativeDriver","AnimatedContainer","props","children","closeAnimation","initialOpacity","initialTranslateY","onEnter","onEntered","onExit","onExited","openAnimation","offsetAnimation","style","visible","height","screenHeight","opacity","translateY","convertToCompositeAnimation","animationUnit","type","others","FADE","timing","SLIDE","easing","toValue","in","ease","OS","bezier","out","exp","isNil","setValue","start","finished","convertedAnimation","map","parallel","length","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    | 'offsetAnimation'\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        offsetAnimation,\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    useEffect(() => {\n        if (visible && offsetAnimation && offsetAnimation.length > 0) {\n            opacity.setValue(1);\n            const convertedAnimation = offsetAnimation.map((animationUnit) => {\n                return convertToCompositeAnimation({\n                    ...DEFAULT_ANIMATION_CONFIG,\n                    ...animationUnit\n                });\n            });\n            Animated.parallel(convertedAnimation).start();\n        }\n    }, [visible, offsetAnimation, convertToCompositeAnimation]);\n\n    const animatedStyle = {\n        opacity,\n        transform: [{ translateY }],\n    };\n\n    return (\n        <Animated.View\n            needsOffscreenAlphaCompositing={true}\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/module/Modal/Modal.js

@@ -27,6 +27,7 @@ export default function Modal(props) {
     onExit: onExitProp,
     onExited: onExitedProp,
     openAnimation,
+    offsetAnimation,
     style,
     visible,
     ...otherProps
@@ -80,6 +81,7 @@ export default function Modal(props) {
     onExit: onExit,
     onExited: onExited,
     openAnimation: openAnimation,
+    offsetAnimation: offsetAnimation,
     style: animationStyle,
     visible: visible
   }) : children);

package/build/module/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","css","StyleSheet","useElevationStyle","AnimatedContainer","SimpleBackdrop","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","useState","elevationStyle","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAUA,OAAO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;AAMP,eAAe,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,KAfE;IAgBFC,OAhBE;IAiBF,GAAGC;EAjBD,IAkBFrB,KAlBJ;;EAoBA,MAAMsB,mBAAmB,GAAG,MAAM;IAC9B,IAAIb,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC2B,MAAD,EAASC,SAAT,IAAsBnC,KAAK,CAACoC,QAAN,CAAe,IAAf,CAA5B;EAEA,MAAMC,cAAc,GAAGjC,iBAAiB,CAAC,CAAD,CAAxC;;EAEA,MAAMiB,OAAO,GAAG,MAAM;IAClBc,SAAS,CAAC,KAAD,CAAT;IACAb,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBQ,SAAS,CAAC,IAAD,CAAT;IACAP,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACG,OAAL,EAAc;IACV,IAAIf,gBAAgB,IAAIkB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEhC,GAAG,CAAC,CACPC,UAAU,CAACmC,YADJ,EAEPD,cAFO,EAGPP,KAHO,CAAD;EADd,GAMQE,UANR,GAQM,CAACf,YAAD,IAAiBc,OAAlB,gBACG,oBAAC,cAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEpB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,oBAAC,iBAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,KAAK,EAAEjB,cAVX;IAWI,OAAO,EAAEmB;EAXb,EADH,GAcGjB,QA7BR,CADJ;AAiCH;AAAA"}
+{"version":3,"names":["React","View","css","StyleSheet","useElevationStyle","AnimatedContainer","SimpleBackdrop","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","useState","elevationStyle","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        offsetAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    offsetAnimation={offsetAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAUA,OAAO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;AAMP,eAAe,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,eAfE;IAgBFC,KAhBE;IAiBFC,OAjBE;IAkBF,GAAGC;EAlBD,IAmBFtB,KAnBJ;;EAqBA,MAAMuB,mBAAmB,GAAG,MAAM;IAC9B,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC4B,MAAD,EAASC,SAAT,IAAsBpC,KAAK,CAACqC,QAAN,CAAe,IAAf,CAA5B;EAEA,MAAMC,cAAc,GAAGlC,iBAAiB,CAAC,CAAD,CAAxC;;EAEA,MAAMiB,OAAO,GAAG,MAAM;IAClBe,SAAS,CAAC,KAAD,CAAT;IACAd,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBS,SAAS,CAAC,IAAD,CAAT;IACAR,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACI,OAAL,EAAc;IACV,IAAIhB,gBAAgB,IAAImB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEjC,GAAG,CAAC,CACPC,UAAU,CAACoC,YADJ,EAEPD,cAFO,EAGPP,KAHO,CAAD;EADd,GAMQE,UANR,GAQM,CAAChB,YAAD,IAAiBe,OAAlB,gBACG,oBAAC,cAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAErB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,oBAAC,iBAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,eAAe,EAAEC,eAVrB;IAWI,KAAK,EAAElB,cAXX;IAYI,OAAO,EAAEoB;EAZb,EADH,GAeGlB,QA9BR,CADJ;AAkCH;AAAA"}

package/build/module/Modal/ModalProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":"AAMA,WAAkBA,cAAlB;;WAAkBA,c;EAAAA,c;EAAAA,c;GAAAA,c,KAAAA,c"}
+{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * Additional offset animation applied when the modal opens.\n     */\n    offsetAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":"AAMA,WAAkBA,cAAlB;;WAAkBA,c;EAAAA,c;EAAAA,c;GAAAA,c,KAAAA,c"}

package/build/typescript/Modal/AnimatedContainer/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type ModalProps from '../ModalProps';
-declare type AnimatedContainerProps = Pick<ModalProps, 'children' | 'closeAnimation' | 'initialOpacity' | 'initialTranslateY' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'openAnimation' | 'style' | 'visible'>;
+declare type AnimatedContainerProps = Pick<ModalProps, 'children' | 'closeAnimation' | 'initialOpacity' | 'initialTranslateY' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'openAnimation' | 'offsetAnimation' | 'style' | 'visible'>;
 export default function AnimatedContainer(props: AnimatedContainerProps): JSX.Element;
 export {};

package/build/typescript/Modal/ModalProps.d.ts

@@ -73,6 +73,10 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      * Animation used when the modal opens.
      */
     openAnimation?: AnimationUnit[] | undefined;
+    /**
+     * Additional offset animation applied when the modal opens.
+     */
+    offsetAnimation?: AnimationUnit[] | undefined;
     /**
      * If `true`, the modal is visible.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.87",
+  "version": "2.0.0-beta.89",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dfa417385224924740cfd4438d32a3fbff88cb9c"
+  "gitHead": "82a44cbca9c292a9a90db0fd4307d970c82d542c"
 }

package/src/Dialog/Dialog.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
 import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
@@ -20,6 +20,8 @@ type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
 const DIALOG_MAX_WIDTH = 328;
 
+const TOP_ELEMENT_OFFSET = 20;
+
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
     const theme = useTheme();
 
@@ -67,6 +69,7 @@ export default function Dialog(props: DialogProps) {
         animationType = ANIMATION_TYPE.SLIDE,
         children,
         fullScreen = false,
+        hideBackdrop,
         onClose,
         style = {},
         visible,
@@ -78,6 +81,23 @@ export default function Dialog(props: DialogProps) {
 
     const { height: screenHeight } = useWindowDimensions();
 
+    const [topElementHeight, setTopElementHeight] = useState(0);
+    const handleTopElementLayout = (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setTopElementHeight(height);
+    };
+
+    const offsetAnimation = useMemo<AnimationUnit[]>(() => {
+        if (topElementHeight === 0) {
+            return [];
+        }
+
+        return [{
+            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+            type: ANIMATION_TYPE.SLIDE,
+        }]
+    }, [topElementHeight]);
+
     const closeAnimation = useMemo<AnimationUnit[]>(() => {
         if (animationType === ANIMATION_TYPE.FADE) {
             return [{
@@ -140,10 +160,12 @@ export default function Dialog(props: DialogProps) {
         <Modal
             animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
             closeAnimation={closeAnimation}
+            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
             initialOpacity={initialOpacity}
             initialTranslateY={initialTranslateY}
             onClose={onClose}
             openAnimation={openAnimation}
+            offsetAnimation={offsetAnimation}
             visible={visible}
             style={styles.root}
             {...otherProps}
@@ -151,7 +173,10 @@ export default function Dialog(props: DialogProps) {
             <React.Fragment>
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementSize}>
-                        <Column style={styles.topElementPosition}>
+                        <Column
+                            style={styles.topElementPosition}
+                            onLayout={handleTopElementLayout}
+                        >
                             {topElement}
                         </Column>
                     </Column>

package/src/Modal/AnimatedContainer/index.tsx

@@ -16,6 +16,7 @@ type AnimatedContainerProps = Pick<ModalProps,
     | 'onExit'
     | 'onExited'
     | 'openAnimation'
+    | 'offsetAnimation'
     | 'style'
     | 'visible'>
 
@@ -35,6 +36,7 @@ export default function AnimatedContainer(props: AnimatedContainerProps) {
         onExit,
         onExited,
         openAnimation,
+        offsetAnimation,
         style,
         visible,
     } = props;
@@ -137,6 +139,19 @@ export default function AnimatedContainer(props: AnimatedContainerProps) {
         }
     }, [convertToCompositeAnimation, visible]);
 
+    useEffect(() => {
+        if (visible && offsetAnimation && offsetAnimation.length > 0) {
+            opacity.setValue(1);
+            const convertedAnimation = offsetAnimation.map((animationUnit) => {
+                return convertToCompositeAnimation({
+                    ...DEFAULT_ANIMATION_CONFIG,
+                    ...animationUnit
+                });
+            });
+            Animated.parallel(convertedAnimation).start();
+        }
+    }, [visible, offsetAnimation, convertToCompositeAnimation]);
+
     const animatedStyle = {
         opacity,
         transform: [{ translateY }],

package/src/Modal/Modal.tsx

@@ -36,6 +36,7 @@ export default function Modal(props: ModalProps) {
         onExit: onExitProp,
         onExited: onExitedProp,
         openAnimation,
+        offsetAnimation,
         style,
         visible,
         ...otherProps
@@ -102,6 +103,7 @@ export default function Modal(props: ModalProps) {
                     onExit={onExit}
                     onExited={onExited}
                     openAnimation={openAnimation}
+                    offsetAnimation={offsetAnimation}
                     style={animationStyle}
                     visible={visible}
                 />

package/src/Modal/ModalProps.ts

@@ -90,6 +90,11 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     openAnimation?: AnimationUnit[] | undefined;
 
+    /**
+     * Additional offset animation applied when the modal opens.
+     */
+    offsetAnimation?: AnimationUnit[] | undefined;
+
     /**
      * If `true`, the modal is visible.
      */