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

package/build/commonjs/Modal/ModalProps.js

@@ -1,2 +1,14 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANIMATION_TYPE = void 0;
+let ANIMATION_TYPE;
+exports.ANIMATION_TYPE = ANIMATION_TYPE;
+
+(function (ANIMATION_TYPE) {
+  ANIMATION_TYPE["SLIDE"] = "slide";
+  ANIMATION_TYPE["FADE"] = "fade";
+})(ANIMATION_TYPE || (exports.ANIMATION_TYPE = ANIMATION_TYPE = {}));
 //# sourceMappingURL=ModalProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\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     * The number of milliseconds to enter animation.\n     * @default 300\n     */\n    enterDuration?: number;\n\n    /**\n     * The number of milliseconds to exit animation.\n     * @default 150\n     */\n    exitDuration?: number;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void,\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":""}
+{"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"}

package/build/commonjs/Modal/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ANIMATION_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _ModalProps.ANIMATION_TYPE;
+  }
+});
 Object.defineProperty(exports, "createModalCloseEvent", {
   enumerable: true,
   get: function () {
@@ -18,6 +24,8 @@ Object.defineProperty(exports, "default", {
 
 var _Modal = _interopRequireWildcard(require("./Modal"));
 
+var _ModalProps = require("./ModalProps");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps } from './ModalProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps, AnimationUnit } from './ModalProps';\nexport { ANIMATION_TYPE } from './ModalProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA"}

package/build/module/Accordion/Accordion.js

@@ -8,15 +8,12 @@ import Column from '../Column';
 import Row from '../Row';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
-const CONTENT_Y_START = 10;
-const CONTENT_Y_END = 0;
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
 const ANIMATION_CONFIG = {
-  duration: 300
+  duration: 200
 };
-const INITIAL_EXPANDED_DELAY_MILLIS = 400;
-const CONTENT_TRANSLATEY_DELAY_MILLIS = 300;
+const INITIAL_EXPANDED_DELAY_MILLIS = 100;
 const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles = function () {
@@ -30,7 +27,8 @@ const useStyles = function () {
       backgroundColor: theme.palette.paper.grey,
       paddingHorizontal: theme.spacing(4),
       paddingVertical: theme.spacing(3.5),
-      alignItems: 'center'
+      alignItems: 'center',
+      height: 64
     },
     titleColumn: {
       flexShrink: 1
@@ -68,7 +66,6 @@ export default function Accordion(props) {
   const shouldInitialExpandedRef = useRef(isInitialExpanded);
   const rotate = useSharedValue(ROTATE_HIDE_DEGREE);
   const animatedOpacity = useSharedValue(0);
-  const animatedContentY = useSharedValue(CONTENT_Y_START);
   const animatedHeight = useSharedValue(0);
   const [contentHeight, setContentHeight] = useState(0);
   const animatedChevronDownStyles = useAnimatedStyle(() => ({
@@ -81,9 +78,6 @@ export default function Accordion(props) {
     overflow: 'hidden'
   }), []);
   const animatedContentStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateY: animatedContentY.value
-    }],
     opacity: animatedOpacity.value
   }), []);
 
@@ -105,9 +99,6 @@ export default function Accordion(props) {
     rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
     animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
     animatedOpacity.value = isExpanded ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG)) : withTiming(0, ANIMATION_CONFIG);
-    animatedContentY.value = isExpanded ? withDelay(CONTENT_TRANSLATEY_DELAY_MILLIS, withTiming(CONTENT_Y_END, ANIMATION_CONFIG)) : withDelay(ANIMATION_CONFIG.duration, withTiming(CONTENT_Y_START, {
-      duration: 0
-    }));
   }, [isExpanded, contentHeight]);
   return /*#__PURE__*/React.createElement(Column, {
     style: styles.root
@@ -121,13 +112,16 @@ export default function Accordion(props) {
     variant: 'subtitle2',
     children: title,
     color: 'textPrimary',
-    numberOfLines: 1
+    numberOfLines: 1,
+    disableFontScaling: true
   }), subTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
     size: 0.5
   }), /*#__PURE__*/React.createElement(Typography, {
     style: styles.subtitle,
     color: 'tertiary',
-    children: subTitle
+    children: subTitle,
+    numberOfLines: 1,
+    disableFontScaling: true
   })) : null), /*#__PURE__*/React.createElement(Spacer, {
     flex: 1
   }), /*#__PURE__*/React.createElement(Spacer, {

package/build/module/Accordion/Accordion.js.map

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

package/build/module/Dialog/Dialog.js

@@ -1,17 +1,13 @@
 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, { useEffect } from 'react';
-import { useWindowDimensions, Animated, Easing } from 'react-native';
+import React, { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
-import Modal from '../Modal';
+import Modal, { ANIMATION_TYPE } from '../Modal';
 import Paper from '../Paper';
-import { useAnimatedValue } from '../hooks';
-import { isNotAndroid12 } from '../utils';
 import { useTheme } from '../styles';
 const DIALOG_MAX_WIDTH = 328;
-const fadeDuration = 300;
-const fadeAnimationDelay = 50;
 
 const useStyles = function () {
   const theme = useTheme();
@@ -27,6 +23,7 @@ const useStyles = function () {
       zIndex: theme.zIndex.dialog
     },
     paper: {
+      borderRadius: theme.shape.roundnessExtra,
       margin,
       maxWidth: DIALOG_MAX_WIDTH,
       overflow: 'hidden',
@@ -55,6 +52,7 @@ const useStyles = function () {
 
 export default function Dialog(props) {
   const {
+    animationType = ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
     onClose,
@@ -64,42 +62,74 @@ export default function Dialog(props) {
     ...otherProps
   } = props;
   const styles = useStyles();
-  const theme = useTheme();
-  const animatedOpacity = useAnimatedValue(0);
-  useEffect(() => {
-    if (!fullScreen) {
-      Animated.timing(animatedOpacity, {
-        toValue: visible ? 1 : 0,
-        duration: fadeDuration,
-        delay: visible ? fadeAnimationDelay : 0,
-        easing: Easing.out(Easing.exp),
-        useNativeDriver: isNotAndroid12
-      }).start();
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const closeAnimation = useMemo(() => {
+    if (animationType === ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 0,
+        type: ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: screenHeight,
+        type: ANIMATION_TYPE.SLIDE
+      }, {
+        duration: 150,
+        toValue: 0,
+        type: ANIMATION_TYPE.FADE
+      }];
     }
-  }, [fullScreen, visible]);
+
+    return [{
+      duration: 150,
+      toValue: screenHeight,
+      type: ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen, screenHeight]);
+  const openAnimation = useMemo(() => {
+    if (animationType === ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 1,
+        type: ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: 0,
+        type: ANIMATION_TYPE.SLIDE
+      }, {
+        delay: 50,
+        duration: 150,
+        toValue: 1,
+        type: ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      toValue: 0,
+      type: ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen]);
+  const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
   return /*#__PURE__*/React.createElement(Modal, _extends({
     animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
+    closeAnimation: closeAnimation,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
     onClose: onClose,
-    exitDuration: fullScreen ? 150 : 300,
+    openAnimation: openAnimation,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/React.createElement(Animated.View, {
-    needsOffscreenAlphaCompositing: true,
-    style: {
-      height: fullScreen ? '100%' : 'auto',
-      width: fullScreen ? '100%' : 'auto',
-      opacity: fullScreen ? 1 : animatedOpacity
-    }
-  }, topElement ? /*#__PURE__*/React.createElement(Column, {
+  }, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, topElement ? /*#__PURE__*/React.createElement(Column, {
     style: fullScreen ? undefined : styles.topElementSize
   }, /*#__PURE__*/React.createElement(Column, {
     style: styles.topElementPosition
   }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
     elevation: 6,
     square: fullScreen,
-    style: css([{
-      borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra
-    }, fullScreen ? styles.paperFullScreen : styles.paper, style])
+    style: css([fullScreen ? styles.paperFullScreen : styles.paper, style])
   }, children)));
 }
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useWindowDimensions","Animated","Easing","css","Column","Modal","Paper","useAnimatedValue","isNotAndroid12","useTheme","DIALOG_MAX_WIDTH","fadeDuration","fadeAnimationDelay","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","animatedOpacity","timing","toValue","duration","delay","easing","out","exp","useNativeDriver","start","opacity","undefined","borderRadius","shape","roundnessExtra"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useWindowDimensions, Animated, Easing } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal from '../Modal';\nimport Paper from '../Paper';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst fadeDuration = 300;\nconst fadeAnimationDelay = 50;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        style = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const animatedOpacity = useAnimatedValue(0);\n\n    useEffect(() => {\n        if(!fullScreen){\n            Animated.timing(animatedOpacity, {\n                toValue: visible ? 1 : 0,\n                duration: fadeDuration,\n                delay: visible ? fadeAnimationDelay : 0,\n                easing: Easing.out(Easing.exp),\n                useNativeDriver: isNotAndroid12,\n            }).start();\n        }\n    }, [fullScreen, visible]);\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            exitDuration={fullScreen ? 150 : 300}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Animated.View\n                needsOffscreenAlphaCompositing={true}\n                style={{\n                    height: fullScreen ? '100%' : 'auto',\n                    width:  fullScreen ? '100%' : 'auto',\n                    opacity: fullScreen ? 1 : animatedOpacity,\n                }}\n            >\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column style={styles.topElementPosition}>\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </Animated.View>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["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":";;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,IAAgBC,cAAhB,QAAqD,UAArD;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,QAAT,QAAyB,WAAzB;AAcA,MAAMC,gBAAgB,GAAG,GAAzB;;AAEA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAM;IAAEI;EAAF,IAAYV,mBAAmB,EAArC;EAEA,MAAMW,MAAM,GAAGF,KAAK,CAACG,OAAN,CAAc,CAAd,CAAf;EACA,MAAMC,WAAW,GAAGH,KAAK,GAAGC,MAAM,GAAG,CAArC;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAER,KAAK,CAACQ,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHC,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,cADvB;MAEHX,MAFG;MAGHY,QAAQ,EAAEhB,gBAHP;MAIHiB,QAAQ,EAAE,QAJP;MAKHd,KAAK,EAAEG;IALJ,CANJ;IAaHY,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAbd;IAgBHC,SAAS,EAAE,EAhBR;IAiBHC,mBAAmB,EAAE;MACjBlB,KAAK,EAAE,MADU;MAEjBmB,MAAM,EAAE;IAFS,CAjBlB;IAqBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEpB,MADN;MAEZY,QAAQ,EAAEhB,gBAFE;MAGZG,KAAK,EAAEG;IAHK,CArBb;IA0BHmB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAKzB,KAAK,CAACG,OAAN,CAAc,CAAd,CAFG;MAGhBF,KAAK,EAAE;IAHS;EA1BjB,CAAP;AAgCH,CAxCD;;AA0CA,eAAe,SAASyB,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,aAAa,GAAGjC,cAAc,CAACkC,KAD7B;IAEFC,QAFE;IAGFC,UAAU,GAAG,KAHX;IAIFC,OAJE;IAKFC,KAAK,GAAG,EALN;IAMFC,OANE;IAOFC,UAPE;IAQF,GAAGC;EARD,IASFT,KATJ;EAWA,MAAMU,MAAM,GAAGtC,SAAS,EAAxB;EAEA,MAAM;IAAEqB,MAAM,EAAEkB;EAAV,IAA2B/C,mBAAmB,EAApD;EAEA,MAAMgD,cAAc,GAAGjD,OAAO,CAAkB,MAAM;IAClD,IAAIsC,aAAa,KAAKjC,cAAc,CAAC6C,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJC,OAAO,EAAE,CADL;QAEJC,IAAI,EAAE/C,cAAc,CAAC6C;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAIZ,aAAa,KAAKjC,cAAc,CAACkC,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACIU,OAAO,EAAEH,YADb;QAEII,IAAI,EAAE/C,cAAc,CAACkC;MAFzB,CADG,EAKH;QACIc,QAAQ,EAAE,GADd;QAEIF,OAAO,EAAE,CAFb;QAGIC,IAAI,EAAE/C,cAAc,CAAC6C;MAHzB,CALG,CAAP;IAWH;;IAED,OAAO,CAAC;MACJG,QAAQ,EAAE,GADN;MAEJF,OAAO,EAAEH,YAFL;MAGJI,IAAI,EAAE/C,cAAc,CAACkC;IAHjB,CAAD,CAAP;EAKH,CAzB6B,EAyB3B,CAACD,aAAD,EAAgBG,UAAhB,EAA4BO,YAA5B,CAzB2B,CAA9B;EA2BA,MAAMM,aAAa,GAAGtD,OAAO,CAAkB,MAAM;IACjD,IAAIsC,aAAa,KAAKjC,cAAc,CAAC6C,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJC,OAAO,EAAE,CADL;QAEJC,IAAI,EAAE/C,cAAc,CAAC6C;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAIZ,aAAa,KAAKjC,cAAc,CAACkC,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACIU,OAAO,EAAE,CADb;QAEIC,IAAI,EAAE/C,cAAc,CAACkC;MAFzB,CADG,EAKH;QACIgB,KAAK,EAAE,EADX;QAEIF,QAAQ,EAAE,GAFd;QAGIF,OAAO,EAAE,CAHb;QAIIC,IAAI,EAAE/C,cAAc,CAAC6C;MAJzB,CALG,CAAP;IAYH;;IAED,OAAO,CAAC;MACJC,OAAO,EAAE,CADL;MAEJC,IAAI,EAAE/C,cAAc,CAACkC;IAFjB,CAAD,CAAP;EAIH,CAzB4B,EAyB1B,CAACD,aAAD,EAAgBG,UAAhB,CAzB0B,CAA7B;EA2BA,MAAMe,cAAc,GAAGlB,aAAa,KAAKjC,cAAc,CAACkC,KAAjC,IAA0CE,UAA1C,GAAuD,CAAvD,GAA2DgB,SAAlF;EAEA,MAAMC,iBAAiB,GAAGpB,aAAa,KAAKjC,cAAc,CAAC6C,IAAjC,GAAwC,CAAxC,GAA4CO,SAAtE;EAEA,oBACI,oBAAC,KAAD;IACI,cAAc,EAAEhB,UAAU,GAAGM,MAAM,CAAClB,mBAAV,GAAgCkB,MAAM,CAACnB,SADrE;IAEI,cAAc,EAAEqB,cAFpB;IAGI,cAAc,EAAEO,cAHpB;IAII,iBAAiB,EAAEE,iBAJvB;IAKI,OAAO,EAAEhB,OALb;IAMI,aAAa,EAAEY,aANnB;IAOI,OAAO,EAAEV,OAPb;IAQI,KAAK,EAAEG,MAAM,CAAChC;EARlB,GASQ+B,UATR,gBAWI,oBAAC,KAAD,CAAO,QAAP,QACKD,UAAU,gBACP,oBAAC,MAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGgB,SAAH,GAAeV,MAAM,CAAChB;EAA/C,gBACI,oBAAC,MAAD;IAAQ,KAAK,EAAEgB,MAAM,CAACd;EAAtB,GACKY,UADL,CADJ,CADO,GAMP,IAPR,eASI,oBAAC,KAAD;IACI,SAAS,EAAE,CADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAEvC,GAAG,CAAC,CACPuC,UAAU,GAAGM,MAAM,CAACrB,eAAV,GAA4BqB,MAAM,CAAC3B,KADtC,EAEPuB,KAFO,CAAD;EAHd,GAQKH,QARL,CATJ,CAXJ,CADJ;AAkCH;AAAA"}

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

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

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

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect } from 'react';
+import { Animated, Easing, Platform, useWindowDimensions } from 'react-native';
+import * as R from 'ramda';
+import { useAnimatedValue } from '../../hooks';
+import { isNotAndroid12 } from '../../utils';
+import { ANIMATION_TYPE } from '../ModalProps';
+const DEFAULT_ANIMATION_CONFIG = {
+  duration: 300,
+  useNativeDriver: isNotAndroid12
+};
+export default function AnimatedContainer(props) {
+  const {
+    children,
+    closeAnimation,
+    initialOpacity,
+    initialTranslateY,
+    onEnter,
+    onEntered,
+    onExit,
+    onExited,
+    openAnimation,
+    style,
+    visible
+  } = props;
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const opacity = useAnimatedValue(initialOpacity ?? 0);
+  const translateY = useAnimatedValue(initialTranslateY ?? screenHeight);
+  const convertToCompositeAnimation = useCallback(animationUnit => {
+    const {
+      type,
+      ...others
+    } = animationUnit;
+
+    switch (type) {
+      case ANIMATION_TYPE.FADE:
+        return Animated.timing(opacity, { ...others,
+          useNativeDriver: isNotAndroid12
+        });
+
+      case ANIMATION_TYPE.SLIDE:
+      default:
+        const easing = others.toValue === screenHeight ? Easing.in(Easing.ease) : Platform.OS === 'web' ? Easing.bezier(0.16, 1, 0.3, 1) : Easing.out(Easing.exp);
+        return Animated.timing(translateY, { ...others,
+          easing,
+          useNativeDriver: isNotAndroid12
+        });
+    }
+  }, [screenHeight]);
+  useEffect(() => {
+    if (visible) {
+      onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+
+      if (R.isNil(openAnimation)) {
+        opacity.setValue(1);
+        Animated.timing(translateY, { ...DEFAULT_ANIMATION_CONFIG,
+          easing: Platform.OS === 'web' ? Easing.bezier(0.16, 1, 0.3, 1) : Easing.out(Easing.exp),
+          toValue: 0
+        }).start(_ref => {
+          let {
+            finished
+          } = _ref;
+
+          if (finished) {
+            onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+          }
+        });
+      } else {
+        const convertedAnimation = openAnimation.map(animationUnit => {
+          return convertToCompositeAnimation({ ...DEFAULT_ANIMATION_CONFIG,
+            ...animationUnit
+          });
+        });
+        Animated.parallel(convertedAnimation).start(_ref2 => {
+          let {
+            finished
+          } = _ref2;
+
+          if (finished) {
+            onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+          }
+        });
+      }
+    } else {
+      onExit === null || onExit === void 0 ? void 0 : onExit();
+
+      if (R.isNil(closeAnimation)) {
+        opacity.setValue(1);
+        Animated.timing(translateY, { ...DEFAULT_ANIMATION_CONFIG,
+          easing: Easing.in(Easing.ease),
+          toValue: screenHeight
+        }).start(_ref3 => {
+          let {
+            finished
+          } = _ref3;
+
+          if (finished) {
+            onExited === null || onExited === void 0 ? void 0 : onExited();
+          }
+        });
+      } else {
+        const convertedAnimation = closeAnimation.map(animationUnit => {
+          return convertToCompositeAnimation({ ...DEFAULT_ANIMATION_CONFIG,
+            ...animationUnit
+          });
+        });
+        Animated.parallel(convertedAnimation).start(_ref4 => {
+          let {
+            finished
+          } = _ref4;
+
+          if (finished) {
+            onExited === null || onExited === void 0 ? void 0 : onExited();
+          }
+        });
+      }
+    }
+  }, [convertToCompositeAnimation, visible]);
+  const animatedStyle = {
+    opacity,
+    transform: [{
+      translateY
+    }]
+  };
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    pointerEvents: 'box-none',
+    style: [animatedStyle, style]
+  }, children);
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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            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

@@ -4,10 +4,8 @@ import React from 'react';
 import { View } from 'react-native';
 import { css, StyleSheet } from '../styles';
 import { useElevationStyle } from '../hooks';
-import Slide from '../Slide';
+import AnimatedContainer from './AnimatedContainer';
 import SimpleBackdrop from './SimpleBackdrop';
-const defaultEnterDuration = 300;
-const defaultExitDuration = 150;
 export const createModalCloseEvent = reason => ({
   metadata: {
     reason
@@ -18,11 +16,17 @@ export default function Modal(props) {
     animationStyle,
     backdropOpacity = 0.5,
     children,
+    closeAnimation,
     disableAnimation = false,
-    enterDuration = defaultEnterDuration,
-    exitDuration = defaultExitDuration,
     hideBackdrop = false,
+    initialOpacity,
+    initialTranslateY,
     onClose,
+    onEnter: onEnterProp,
+    onEntered: onEnteredProp,
+    onExit: onExitProp,
+    onExited: onExitedProp,
+    openAnimation,
     style,
     visible,
     ...otherProps
@@ -37,6 +41,24 @@ export default function Modal(props) {
   const [exited, setExited] = React.useState(true);
   const elevationStyle = useElevationStyle(6);
 
+  const onEnter = () => {
+    setExited(false);
+    onEnterProp === null || onEnterProp === void 0 ? void 0 : onEnterProp();
+  };
+
+  const onEntered = () => {
+    onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
+  };
+
+  const onExit = () => {
+    onExitProp === null || onExitProp === void 0 ? void 0 : onExitProp();
+  };
+
+  const onExited = () => {
+    setExited(true);
+    onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
+  };
+
   if (!visible) {
     if (disableAnimation || exited) {
       return null;
@@ -45,17 +67,22 @@ export default function Modal(props) {
 
   return /*#__PURE__*/React.createElement(View, _extends({
     style: css([StyleSheet.absoluteFill, elevationStyle, style])
-  }, otherProps), hideBackdrop || !visible ? null : /*#__PURE__*/React.createElement(SimpleBackdrop, {
+  }, otherProps), !hideBackdrop && visible ? /*#__PURE__*/React.createElement(SimpleBackdrop, {
     onPress: handleBackdropPress,
     opacity: backdropOpacity
-  }), !disableAnimation ? /*#__PURE__*/React.createElement(Slide, {
-    appear: visible,
-    enterDuration: enterDuration,
-    exitDuration: exitDuration,
-    onEnter: () => setExited(false),
-    onExited: () => setExited(true),
-    style: animationStyle
-  }, children) : children);
+  }) : null, !disableAnimation ? /*#__PURE__*/React.createElement(AnimatedContainer, {
+    children: children,
+    closeAnimation: closeAnimation,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
+    onEnter: onEnter,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExited: onExited,
+    openAnimation: openAnimation,
+    style: animationStyle,
+    visible: visible
+  }) : children);
 }
 ;
 //# sourceMappingURL=Modal.js.map