@fountain-ui/core 2.0.0-beta.9 → 2.0.0-beta.90

package/build/module/Chip/Chip.js

@@ -5,19 +5,19 @@ import { Text } from 'react-native';
 import { createFontStyle, css, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import ButtonBase from '../ButtonBase';
-const ICON_SIZE = 16;
+const ICON_SIZE = 20;
 
 const useStyles = function () {
   const theme = useTheme();
   return {
     root: {
       alignItems: 'center',
-      borderRadius: 20,
+      borderRadius: theme.shape.roundnessExtra,
       flexDirection: 'row',
       height: 32,
       justifyContent: 'center',
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
     }
   };
 };
@@ -26,6 +26,7 @@ export default function Chip(props) {
   const {
     children,
     endIcon: endIconProp,
+    numberOfLines,
     onPress,
     startIcon: startIconProp,
     style: styleProp,
@@ -38,21 +39,21 @@ export default function Chip(props) {
   const variantStyleMap = {
     outlined: {
       backgroundColor: theme.palette.paper.default,
-      borderColor: theme.palette.border,
-      borderWidth: 2
+      borderColor: theme.palette.border.default,
+      borderWidth: 1
     },
     filled: {
       backgroundColor: theme.palette.paper.grey
     },
     bold: {
-      backgroundColor: theme.palette.paper.grey,
+      backgroundColor: theme.palette.paper.default,
       borderColor: theme.palette.primary.main,
-      borderWidth: 2
+      borderWidth: 1.5
     }
   };
   const chipStyle = css([styles.root, variantStyleMap[variant], styleProp]);
   const fontStyle = createFontStyle(theme, {
-    selector: typo => typo.subtitle2,
+    selector: typo => variant === 'bold' ? typo.subtitle2 : typo.body2,
     color: fontColor
   });
   const textMarginSize = theme.spacing(1);
@@ -76,6 +77,7 @@ export default function Chip(props) {
     style: chipStyle
   }, otherProps), startIcon, /*#__PURE__*/React.createElement(Text, {
     children: children,
+    numberOfLines: numberOfLines,
     style: textStyle
   }), endIcon);
 }

package/build/module/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","shape","roundnessExtra","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","body2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: theme.shape.roundnessExtra,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(3),\n            paddingRight: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        numberOfLines,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border.default,\n            borderWidth: 1,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 1.5,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'bold'\n            ? typo.subtitle2\n            : typo.body2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        fill: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"],"mappings":"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"}

package/build/module/Chip/ChipProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'outlined'\n     */\n    variant?: ChipVariant;\n}> {}"],"mappings":""}
+{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'outlined'\n     */\n    variant?: ChipVariant;\n}> {}"],"mappings":""}

package/build/module/CircularProgress/CircularProgress.js

@@ -1,7 +1,10 @@
-import React from 'react';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
-import { css } from '../styles';
+import { useAnimatedValue } from '../hooks';
+import { isNotAndroid12 } from '../utils';
+const MIN_ROTATE_DEGREE = 0;
+const MAX_ROTATE_DEGREE = 360;
 
 const useStyles = function () {
   return {
@@ -14,31 +17,30 @@ const useStyles = function () {
 
 export default function CircularProgress(props) {
   const {
-    style
+    style: styleProp
   } = props;
   const styles = useStyles();
-  const rootStyle = css([styles.root, style]);
-  const sharedSpin = useSharedValue(0);
-  const spinStyle = useAnimatedStyle(() => {
-    const interpolatedSpin = Animated.interpolateNode(sharedSpin.value, {
-      inputRange: [0, 1],
-      outputRange: [0, 360]
-    });
-    return {
-      transform: [{
-        rotate: `${interpolatedSpin}deg`
-      }]
-    };
-  });
-  React.useEffect(() => {
-    sharedSpin.value = withRepeat(withTiming(1, {
+  const rotate = useAnimatedValue(MIN_ROTATE_DEGREE);
+  const animatedStyle = {
+    transform: [{
+      rotate: rotate.interpolate({
+        inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],
+        outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`]
+      })
+    }]
+  };
+  useEffect(() => {
+    Animated.loop(Animated.timing(rotate, {
+      toValue: MAX_ROTATE_DEGREE,
       duration: 900,
-      easing: Easing.linear
-    }), -1, false);
+      easing: Easing.linear,
+      useNativeDriver: isNotAndroid12
+    })).start();
   }, []);
   return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [spinStyle, rootStyle]
-  }, /*#__PURE__*/React.createElement(CircularProgressIcon, null));
+    children: /*#__PURE__*/React.createElement(CircularProgressIcon, null),
+    style: [animatedStyle, styles.root, styleProp]
+  });
 }
 ;
 //# sourceMappingURL=CircularProgress.js.map

package/build/module/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","css","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","sharedSpin","spinStyle","interpolatedSpin","interpolateNode","value","inputRange","outputRange","transform","rotate","useEffect","duration","easing","linear"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = useSharedValue(0);\n\n    const spinStyle = useAnimatedStyle(() => {\n        const interpolatedSpin = Animated.interpolateNode(sharedSpin.value, {\n            inputRange: [0, 1],\n            outputRange: [0, 360],\n        });\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = withRepeat(\n            withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,cAA7C,EAA6DC,UAA7D,EAAyEC,UAAzE,QAA2F,yBAA3F;AACA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASN,gBAAT,CAA0BO,KAA1B,EAAuE;EAClF,MAAM;IAAEC;EAAF,IAAYD,KAAlB;EAEA,MAAME,MAAM,GAAGN,SAAS,EAAxB;EAEA,MAAMO,SAAS,GAAGR,GAAG,CAAC,CAClBO,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;EAKA,MAAMG,UAAU,GAAGd,cAAc,CAAC,CAAD,CAAjC;EAEA,MAAMe,SAAS,GAAGhB,gBAAgB,CAAC,MAAM;IACrC,MAAMiB,gBAAgB,GAAGnB,QAAQ,CAACoB,eAAT,CAAyBH,UAAU,CAACI,KAApC,EAA2C;MAChEC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADoD;MAEhEC,WAAW,EAAE,CAAC,CAAD,EAAI,GAAJ;IAFmD,CAA3C,CAAzB;IAKA,OAAO;MACHC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAG,GAAEN,gBAAiB;MAA9B,CAAD;IADR,CAAP;EAGH,CATiC,CAAlC;EAWApB,KAAK,CAAC2B,SAAN,CAAgB,MAAM;IAClBT,UAAU,CAACI,KAAX,GAAmBjB,UAAU,CACzBC,UAAU,CAAC,CAAD,EAAI;MAAEsB,QAAQ,EAAE,GAAZ;MAAiBC,MAAM,EAAE3B,MAAM,CAAC4B;IAAhC,CAAJ,CADe,EAEzB,CAAC,CAFwB,EAGzB,KAHyB,CAA7B;EAKH,CAND,EAMG,EANH;EAQA,oBACI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACX,SAAD,EAAYF,SAAZ;EAAtB,gBACI,oBAAC,oBAAD,OADJ,CADJ;AAKH;AAAA"}
+{"version":3,"names":["React","useEffect","Animated","Easing","CircularProgress","CircularProgressIcon","useAnimatedValue","isNotAndroid12","MIN_ROTATE_DEGREE","MAX_ROTATE_DEGREE","useStyles","root","alignItems","justifyContent","props","style","styleProp","styles","rotate","animatedStyle","transform","interpolate","inputRange","outputRange","loop","timing","toValue","duration","easing","linear","useNativeDriver","start"],"sources":["CircularProgress.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport type { OverridableComponentProps } from '../types';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst MIN_ROTATE_DEGREE = 0;\nconst MAX_ROTATE_DEGREE = 360;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style: styleProp } = props;\n\n    const styles = useStyles();\n\n    const rotate = useAnimatedValue(MIN_ROTATE_DEGREE);\n\n    const animatedStyle = {\n        transform: [{\n            rotate: rotate.interpolate({\n                inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],\n                outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`],\n            }),\n        }],\n    };\n\n    useEffect(() => {\n        Animated.loop(\n            Animated.timing(\n                rotate,\n                {\n                    toValue: MAX_ROTATE_DEGREE,\n                    duration: 900,\n                    easing: Easing.linear,\n                    useNativeDriver: isNotAndroid12,\n                },\n            ),\n        ).start();\n    }, []);\n\n    return (\n        <Animated.View\n            children={<CircularProgressIcon/>}\n            style={[\n                animatedStyle,\n                styles.root,\n                styleProp,\n            ]}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,SAASC,QAAT,EAAmBC,MAAnB,QAAiC,cAAjC;AAEA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AAEA,SAASC,gBAAT,QAAiC,UAAjC;AACA,SAASC,cAAT,QAA+B,UAA/B;AAIA,MAAMC,iBAAiB,GAAG,CAA1B;AACA,MAAMC,iBAAiB,GAAG,GAA1B;;AAEA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE;IAFd;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAAST,gBAAT,CAA0BU,KAA1B,EAAuE;EAClF,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAuBF,KAA7B;EAEA,MAAMG,MAAM,GAAGP,SAAS,EAAxB;EAEA,MAAMQ,MAAM,GAAGZ,gBAAgB,CAACE,iBAAD,CAA/B;EAEA,MAAMW,aAAa,GAAG;IAClBC,SAAS,EAAE,CAAC;MACRF,MAAM,EAAEA,MAAM,CAACG,WAAP,CAAmB;QACvBC,UAAU,EAAE,CAACd,iBAAD,EAAoBC,iBAApB,CADW;QAEvBc,WAAW,EAAE,CAAE,GAAEf,iBAAkB,KAAtB,EAA6B,GAAEC,iBAAkB,KAAjD;MAFU,CAAnB;IADA,CAAD;EADO,CAAtB;EASAR,SAAS,CAAC,MAAM;IACZC,QAAQ,CAACsB,IAAT,CACItB,QAAQ,CAACuB,MAAT,CACIP,MADJ,EAEI;MACIQ,OAAO,EAAEjB,iBADb;MAEIkB,QAAQ,EAAE,GAFd;MAGIC,MAAM,EAAEzB,MAAM,CAAC0B,MAHnB;MAIIC,eAAe,EAAEvB;IAJrB,CAFJ,CADJ,EAUEwB,KAVF;EAWH,CAZQ,EAYN,EAZM,CAAT;EAcA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,eAAE,oBAAC,oBAAD,OADd;IAEI,KAAK,EAAE,CACHZ,aADG,EAEHF,MAAM,CAACN,IAFJ,EAGHK,SAHG;EAFX,EADJ;AAUH;AAAA"}

package/build/module/Dialog/Dialog.js

@@ -1,10 +1,14 @@
 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 from 'react';
+import React, { useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
-import Modal from '../Modal';
+import { css } from '@fountain-ui/styles';
+import Column from '../Column';
+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();
@@ -12,6 +16,7 @@ const useStyles = function () {
     width
   } = useWindowDimensions();
   const margin = theme.spacing(4);
+  const dialogWidth = width - margin * 2;
   return {
     root: {
       alignItems: 'center',
@@ -19,10 +24,11 @@ const useStyles = function () {
       zIndex: theme.zIndex.dialog
     },
     paper: {
+      borderRadius: theme.shape.roundnessExtra,
       margin,
-      maxWidth: 328,
+      maxWidth: DIALOG_MAX_WIDTH,
       overflow: 'hidden',
-      width: width - margin * 2
+      width: dialogWidth
     },
     paperFullScreen: {
       flexGrow: 1
@@ -31,29 +37,124 @@ const useStyles = function () {
     animationFullScreen: {
       width: '100%',
       height: '100%'
+    },
+    topElementSize: {
+      marginHorizontal: margin,
+      maxWidth: DIALOG_MAX_WIDTH,
+      width: dialogWidth
+    },
+    topElementPosition: {
+      position: 'absolute',
+      bottom: -1 * theme.spacing(4),
+      width: '100%'
     }
   };
 };
 
 export default function Dialog(props) {
   const {
+    animationType = ANIMATION_TYPE.SLIDE,
     children,
     fullScreen = false,
+    hideBackdrop,
     onClose,
+    style = {},
     visible,
+    topElement,
     ...otherProps
   } = props;
   const styles = useStyles();
+  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 [{
+        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
+      }];
+    }
+
+    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,
+    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(Paper, {
-    elevation: 24,
+  }, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, topElement ? /*#__PURE__*/React.createElement(Column, {
+    style: fullScreen ? undefined : styles.topElementSize
+  }, /*#__PURE__*/React.createElement(Column, {
+    style: styles.topElementPosition,
+    onLayout: handleTopElementLayout
+  }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 6,
     square: fullScreen,
-    style: fullScreen ? styles.paperFullScreen : styles.paper
-  }, children));
+    style: css([fullScreen ? styles.paperFullScreen : styles.paper, style])
+  }, children)));
 }
 ;
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useWindowDimensions","Modal","Paper","useTheme","useStyles","theme","width","margin","spacing","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","Dialog","props","children","fullScreen","onClose","visible","otherProps","styles"],"sources":["Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Modal 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\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            margin,\n            maxWidth: 328,\n            overflow: 'hidden',\n            width: width - margin * 2,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n    };\n};\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        children,\n        fullScreen = false,\n        onClose,\n        visible,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            onClose={onClose}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <Paper\n                elevation={24}\n                square={fullScreen}\n                style={fullScreen ? styles.paperFullScreen : styles.paper}\n            >\n                {children}\n            </Paper>\n        </Modal>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,QAAT,QAAyB,WAAzB;;AAYA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAM;IAAEG;EAAF,IAAYN,mBAAmB,EAArC;EAEA,MAAMO,MAAM,GAAGF,KAAK,CAACG,OAAN,CAAc,CAAd,CAAf;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAEP,KAAK,CAACO,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHP,MADG;MAEHQ,QAAQ,EAAE,GAFP;MAGHC,QAAQ,EAAE,QAHP;MAIHV,KAAK,EAAEA,KAAK,GAAGC,MAAM,GAAG;IAJrB,CANJ;IAYHU,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBd,KAAK,EAAE,MADU;MAEjBe,MAAM,EAAE;IAFS;EAhBlB,CAAP;AAqBH,CA5BD;;AA8BA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,OAJE;IAKF,GAAGC;EALD,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGzB,SAAS,EAAxB;EAEA,oBACI,oBAAC,KAAD;IACI,cAAc,EAAEqB,UAAU,GAAGI,MAAM,CAACT,mBAAV,GAAgCS,MAAM,CAACV,SADrE;IAEI,OAAO,EAAEO,OAFb;IAGI,OAAO,EAAEC,OAHb;IAII,KAAK,EAAEE,MAAM,CAACpB;EAJlB,GAKQmB,UALR,gBAOI,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,MAAM,EAAEH,UAFZ;IAGI,KAAK,EAAEA,UAAU,GAAGI,MAAM,CAACZ,eAAV,GAA4BY,MAAM,CAACf;EAHxD,GAKKU,QALL,CAPJ,CADJ;AAiBH;AAAA"}
+{"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":";;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,QAAzB,QAAyC,OAAzC;AACA,SAA4BC,mBAA5B,QAAuD,cAAvD;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,kBAAkB,GAAG,EAA3B;;AAEA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAM;IAAEK;EAAF,IAAYX,mBAAmB,EAArC;EAEA,MAAMY,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,EAAEjB,gBAHP;MAIHkB,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,EAAEjB,gBAFE;MAGZI,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,GAAGlC,cAAc,CAACmC,KAD7B;IAEFC,QAFE;IAGFC,UAAU,GAAG,KAHX;IAIFC,YAJE;IAKFC,OALE;IAMFC,KAAK,GAAG,EANN;IAOFC,OAPE;IAQFC,UARE;IASF,GAAGC;EATD,IAUFV,KAVJ;EAYA,MAAMW,MAAM,GAAGvC,SAAS,EAAxB;EAEA,MAAM;IAAEqB,MAAM,EAAEmB;EAAV,IAA2BjD,mBAAmB,EAApD;EAEA,MAAM,CAACkD,gBAAD,EAAmBC,mBAAnB,IAA0CpD,QAAQ,CAAC,CAAD,CAAxD;;EACA,MAAMqD,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEvB;IAAF,IAAauB,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAJ,mBAAmB,CAACrB,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAM0B,eAAe,GAAG1D,OAAO,CAAkB,MAAM;IACnD,IAAIoD,gBAAgB,KAAK,CAAzB,EAA4B;MACxB,OAAO,EAAP;IACH;;IAED,OAAO,CAAC;MACJO,OAAO,EAAE,CAACP,gBAAgB,GAAG1C,kBAApB,IAA0C,CAD/C;MAEJkD,IAAI,EAAEtD,cAAc,CAACmC;IAFjB,CAAD,CAAP;EAIH,CAT8B,EAS5B,CAACW,gBAAD,CAT4B,CAA/B;EAWA,MAAMS,cAAc,GAAG7D,OAAO,CAAkB,MAAM;IAClD,IAAIwC,aAAa,KAAKlC,cAAc,CAACwD,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJH,OAAO,EAAE,CADL;QAEJC,IAAI,EAAEtD,cAAc,CAACwD;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAItB,aAAa,KAAKlC,cAAc,CAACmC,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACIgB,OAAO,EAAER,YADb;QAEIS,IAAI,EAAEtD,cAAc,CAACmC;MAFzB,CADG,EAKH;QACIsB,QAAQ,EAAE,GADd;QAEIJ,OAAO,EAAE,CAFb;QAGIC,IAAI,EAAEtD,cAAc,CAACwD;MAHzB,CALG,CAAP;IAWH;;IAED,OAAO,CAAC;MACJC,QAAQ,EAAE,GADN;MAEJJ,OAAO,EAAER,YAFL;MAGJS,IAAI,EAAEtD,cAAc,CAACmC;IAHjB,CAAD,CAAP;EAKH,CAzB6B,EAyB3B,CAACD,aAAD,EAAgBG,UAAhB,EAA4BQ,YAA5B,CAzB2B,CAA9B;EA2BA,MAAMa,aAAa,GAAGhE,OAAO,CAAkB,MAAM;IACjD,IAAIwC,aAAa,KAAKlC,cAAc,CAACwD,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJH,OAAO,EAAE,CADL;QAEJC,IAAI,EAAEtD,cAAc,CAACwD;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAItB,aAAa,KAAKlC,cAAc,CAACmC,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACIgB,OAAO,EAAE,CADb;QAEIC,IAAI,EAAEtD,cAAc,CAACmC;MAFzB,CADG,EAKH;QACIwB,KAAK,EAAE,EADX;QAEIF,QAAQ,EAAE,GAFd;QAGIJ,OAAO,EAAE,CAHb;QAIIC,IAAI,EAAEtD,cAAc,CAACwD;MAJzB,CALG,CAAP;IAYH;;IAED,OAAO,CAAC;MACJH,OAAO,EAAE,CADL;MAEJC,IAAI,EAAEtD,cAAc,CAACmC;IAFjB,CAAD,CAAP;EAIH,CAzB4B,EAyB1B,CAACD,aAAD,EAAgBG,UAAhB,CAzB0B,CAA7B;EA2BA,MAAMuB,cAAc,GAAG1B,aAAa,KAAKlC,cAAc,CAACmC,KAAjC,IAA0CE,UAA1C,GAAuD,CAAvD,GAA2DwB,SAAlF;EAEA,MAAMC,iBAAiB,GAAG5B,aAAa,KAAKlC,cAAc,CAACwD,IAAjC,GAAwC,CAAxC,GAA4CK,SAAtE;EAEA,oBACI,oBAAC,KAAD;IACI,cAAc,EAAExB,UAAU,GAAGO,MAAM,CAACnB,mBAAV,GAAgCmB,MAAM,CAACpB,SADrE;IAEI,cAAc,EAAE+B,cAFpB;IAGI,YAAY,EAAEjB,YAAY,IAAIJ,aAAa,KAAKlC,cAAc,CAACwD,IAHnE;IAII,cAAc,EAAEI,cAJpB;IAKI,iBAAiB,EAAEE,iBALvB;IAMI,OAAO,EAAEvB,OANb;IAOI,aAAa,EAAEmB,aAPnB;IAQI,eAAe,EAAEN,eARrB;IASI,OAAO,EAAEX,OATb;IAUI,KAAK,EAAEG,MAAM,CAACjC;EAVlB,GAWQgC,UAXR,gBAaI,oBAAC,KAAD,CAAO,QAAP,QACKD,UAAU,gBACP,oBAAC,MAAD;IAAQ,KAAK,EAAEL,UAAU,GAAGwB,SAAH,GAAejB,MAAM,CAACjB;EAA/C,gBACI,oBAAC,MAAD;IACI,KAAK,EAAEiB,MAAM,CAACf,kBADlB;IAEI,QAAQ,EAAEmB;EAFd,GAIKN,UAJL,CADJ,CADO,GASP,IAVR,eAYI,oBAAC,KAAD;IACI,SAAS,EAAE,CADf;IAEI,MAAM,EAAEL,UAFZ;IAGI,KAAK,EAAExC,GAAG,CAAC,CACPwC,UAAU,GAAGO,MAAM,CAACtB,eAAV,GAA4BsB,MAAM,CAAC5B,KADtC,EAEPwB,KAFO,CAAD;EAHd,GAQKJ,QARL,CAZJ,CAbJ,CADJ;AAuCH;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"],"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/Divider/Divider.js

@@ -16,25 +16,23 @@ const styles = StyleSheet.create({
   },
   divider: {
     flexGrow: 1
-  },
-  borderBottom: {
-    borderBottomWidth: 1
-  },
-  borderRight: {
-    borderRightWidth: 1
   }
 });
 export default function Divider(props) {
   const {
+    borderWidth = 1,
     children: childrenProp,
+    color = 'divider',
+    elementAlign = 'center',
     inset = 0,
-    vertical = false,
+    marginBetweenChildren = 2,
     style,
+    vertical = false,
     ...otherProps
   } = props;
   const theme = useTheme();
   const fontColor = theme.palette.text.secondary;
-  const borderColor = theme.palette.divider;
+  const borderColor = color === 'divider' ? theme.palette.divider : color === 'border' ? theme.palette.border.default : theme.palette[color].main;
   const marginSize = theme.spacing(1);
   const insetSize = theme.spacing(inset);
   const marginLeft = marginSize;
@@ -58,19 +56,29 @@ export default function Divider(props) {
   const borderColorStyle = {
     borderColor
   };
-  const borderWidthStyle = vertical ? styles.borderRight : styles.borderBottom;
+  const borderWidthStyle = vertical ? {
+    borderRightWidth: borderWidth
+  } : {
+    borderBottomWidth: borderWidth
+  };
   const containerStyle = css([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
   const dividerStyle = css([borderColorStyle, borderWidthStyle, styles.divider]);
-  const dividerMarginSize = theme.spacing(2);
-  const startDividerStyle = vertical ? {
-    marginBottom: dividerMarginSize
-  } : {
-    marginRight: dividerMarginSize
+  const dividerMarginSize = theme.spacing(marginBetweenChildren);
+  const startDividerStyle = {
+    display: elementAlign !== 'start' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginBottom: dividerMarginSize
+    } : {
+      marginRight: dividerMarginSize
+    })
   };
-  const endDividerStyle = vertical ? {
-    marginTop: dividerMarginSize
-  } : {
-    marginLeft: dividerMarginSize
+  const endDividerStyle = {
+    display: elementAlign !== 'end' ? 'flex' : 'none',
+    ...(vertical ? {
+      marginTop: dividerMarginSize
+    } : {
+      marginLeft: dividerMarginSize
+    })
   };
   const fontStyle = createFontStyle(theme, {
     selector: typo => typo.caption2,

package/build/module/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","borderBottom","borderBottomWidth","borderRight","borderRightWidth","Divider","props","children","childrenProp","inset","vertical","style","otherProps","theme","fontColor","palette","text","secondary","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","selector","typo","caption2","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n    borderBottom: {\n        borderBottomWidth: 1,\n    },\n    borderRight: {\n        borderRightWidth: 1,\n    },\n});\n\nexport default function Divider(props: DividerProps) {\n    const {\n        children: childrenProp,\n        inset = 0,\n        vertical = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontColor = theme.palette.text.secondary;\n    const borderColor = theme.palette.divider;\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? styles.borderRight : styles.borderBottom);\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(2);\n    const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n    const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAGA,MAAMC,MAAM,GAAGF,UAAU,CAACG,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,SAAS,EAAE,SADJ;IAEPC,UAAU,EAAE;EAFL,CADkB;EAK7BC,GAAG,EAAE;IACDC,aAAa,EAAE;EADd,CALwB;EAQ7BC,MAAM,EAAE;IACJD,aAAa,EAAE;EADX,CARqB;EAW7BE,OAAO,EAAE;IACLC,QAAQ,EAAE;EADL,CAXoB;EAc7BC,YAAY,EAAE;IACVC,iBAAiB,EAAE;EADT,CAde;EAiB7BC,WAAW,EAAE;IACTC,gBAAgB,EAAE;EADT;AAjBgB,CAAlB,CAAf;AAsBA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QAAQ,EAAEC,YADR;IAEFC,KAAK,GAAG,CAFN;IAGFC,QAAQ,GAAG,KAHT;IAIFC,KAJE;IAKF,GAAGC;EALD,IAMFN,KANJ;EAQA,MAAMO,KAAK,GAAGvB,QAAQ,EAAtB;EAEA,MAAMwB,SAAS,GAAGD,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBC,SAArC;EACA,MAAMC,WAAW,GAAGL,KAAK,CAACE,OAAN,CAAchB,OAAlC;EACA,MAAMoB,UAAU,GAAGN,KAAK,CAACO,OAAN,CAAc,CAAd,CAAnB;EACA,MAAMC,SAAS,GAAGR,KAAK,CAACO,OAAN,CAAcX,KAAd,CAAlB;EAEA,MAAMa,UAAU,GAAGH,UAAnB;EACA,MAAMI,WAAW,GAAGJ,UAApB;EACA,MAAMK,SAAS,GAAGL,UAAlB;EACA,MAAMM,YAAY,GAAGN,UAArB;EAEA,MAAMO,WAAW,GAAGhB,QAAQ,GACtB;IAAEY,UAAF;IAAcC;EAAd,CADsB,GAEtB;IAAEC,SAAF;IAAaC;EAAb,CAFN;EAIA,MAAME,UAAU,GAAGjB,QAAQ,GACrB;IAAEc,SAAS,EAAEH,SAAb;IAAwBI,YAAY,EAAEJ;EAAtC,CADqB,GAErB;IAAEC,UAAU,EAAED,SAAd;IAAyBE,WAAW,EAAEF;EAAtC,CAFN;EAIA,MAAMO,gBAAgB,GAAG;IAAEV;EAAF,CAAzB;EACA,MAAMW,gBAAgB,GAAInB,QAAQ,GAAGnB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACU,YAAjE;EAEA,MAAM6B,cAAc,GAAG1C,GAAG,CAAC,CACvBuC,UADuB,EAEvBD,WAFuB,EAGvBnC,MAAM,CAACE,SAHgB,EAIvBiB,QAAQ,GAAGnB,MAAM,CAACO,MAAV,GAAmBP,MAAM,CAACK,GAJX,EAKvBY,YAAY,GAAGuB,SAAH,GAAeH,gBALJ,EAMvBpB,YAAY,GAAGuB,SAAH,GAAeF,gBANJ,EAOvBlB,KAPuB,CAAD,CAA1B;EAUA,MAAMqB,YAAY,GAAG5C,GAAG,CAAC,CACrBwC,gBADqB,EAErBC,gBAFqB,EAGrBtC,MAAM,CAACQ,OAHc,CAAD,CAAxB;EAMA,MAAMkC,iBAAiB,GAAGpB,KAAK,CAACO,OAAN,CAAc,CAAd,CAA1B;EACA,MAAMc,iBAAiB,GAAGxB,QAAQ,GAAG;IAAEe,YAAY,EAAEQ;EAAhB,CAAH,GAAyC;IAAEV,WAAW,EAAEU;EAAf,CAA3E;EACA,MAAME,eAAe,GAAGzB,QAAQ,GAAG;IAAEc,SAAS,EAAES;EAAb,CAAH,GAAsC;IAAEX,UAAU,EAAEW;EAAd,CAAtE;EAEA,MAAMG,SAAS,GAAGjD,eAAe,CAAC0B,KAAD,EAAQ;IACrCwB,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErCC,KAAK,EAAE1B;EAF8B,CAAR,CAAjC;EAKA,MAAM2B,OAAO,GAAG,OAAOjC,YAAP,KAAwB,QAAxB,gBACV,oBAAC,IAAD;IAAM,KAAK,EAAEpB,GAAG,CAACgD,SAAD;EAAhB,GAA8B5B,YAA9B,CADU,GAEVA,YAFN;EAIA,MAAMD,QAAQ,GAAGC,YAAY,gBACzB,uDACI,oBAAC,IAAD;IAAM,KAAK,EAAEpB,GAAG,CAAC,CAAC4C,YAAD,EAAeE,iBAAf,CAAD;EAAhB,EADJ,EAEKO,OAFL,eAGI,oBAAC,IAAD;IAAM,KAAK,EAAErD,GAAG,CAAC,CAAC4C,YAAD,EAAeG,eAAf,CAAD;EAAhB,EAHJ,CADyB,GAMzB,IANJ;EAQA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEL;EADX,GAEQlB,UAFR,GAIKL,QAJL,CADJ;AAQH;AAAA"}
+{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","elementAlign","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","border","default","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth = 1,\n        children: childrenProp,\n        color = 'divider',\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontColor = theme.palette.text.secondary;\n    const borderColor = color === 'divider'\n        ? theme.palette.divider\n        : color === 'border'\n            ? theme.palette.border.default\n            : theme.palette[color].main;\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/Divider/DividerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | 'border' | CommonComponentColor;\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The color of divider. It supports default divider color and those theme colors that make sense for this component.\n     * @default 'divider'\n     */\n    color?: DividerColor;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default 1\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: 'start' | 'center' | 'end';\n}> {}\n"],"mappings":""}