@fountain-ui/core 2.0.0-beta.88 → 2.0.0-beta.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -76,6 +76,7 @@ function Dialog(props) {
|
|
|
76
76
|
animationType = _Modal.ANIMATION_TYPE.SLIDE,
|
|
77
77
|
children,
|
|
78
78
|
fullScreen = false,
|
|
79
|
+
hideBackdrop,
|
|
79
80
|
onClose,
|
|
80
81
|
style = {},
|
|
81
82
|
visible,
|
|
@@ -156,6 +157,7 @@ function Dialog(props) {
|
|
|
156
157
|
return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
|
|
157
158
|
animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
|
|
158
159
|
closeAnimation: closeAnimation,
|
|
160
|
+
hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
|
|
159
161
|
initialOpacity: initialOpacity,
|
|
160
162
|
initialTranslateY: initialTranslateY,
|
|
161
163
|
onClose: onClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n | 'root'\n | 'paper'\n | 'paperFullScreen'\n | 'animation'\n | 'animationFullScreen'\n | 'topElementSize'\n | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n const theme = useTheme();\n\n const { width } = useWindowDimensions();\n\n const margin = theme.spacing(4);\n const dialogWidth = width - margin * 2;\n\n return {\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: theme.zIndex.dialog,\n },\n paper: {\n borderRadius: theme.shape.roundnessExtra,\n margin,\n maxWidth: DIALOG_MAX_WIDTH,\n overflow: 'hidden',\n width: dialogWidth,\n },\n paperFullScreen: {\n flexGrow: 1,\n },\n animation: {},\n animationFullScreen: {\n width: '100%',\n height: '100%',\n },\n topElementSize: {\n marginHorizontal: margin,\n maxWidth: DIALOG_MAX_WIDTH,\n width: dialogWidth,\n },\n topElementPosition: {\n position: 'absolute',\n bottom: -1 * theme.spacing(4),\n width: '100%',\n },\n };\n};\n\nexport default function Dialog(props: DialogProps) {\n const {\n animationType = ANIMATION_TYPE.SLIDE,\n children,\n fullScreen = false,\n 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 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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,MAAMA,gBAAgB,GAAG,GAAzB;AAEA,MAAMC,kBAAkB,GAAG,EAA3B;;AAEA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAM;IAAEC;EAAF,IAAY,IAAAC,gCAAA,GAAlB;EAEA,MAAMC,MAAM,GAAGJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAAf;EACA,MAAMC,WAAW,GAAGJ,KAAK,GAAGE,MAAM,GAAG,CAArC;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,cAAc,EAAE,QAFd;MAGFC,MAAM,EAAEV,KAAK,CAACU,MAAN,CAAaC;IAHnB,CADH;IAMHC,KAAK,EAAE;MACHC,YAAY,EAAEb,KAAK,CAACc,KAAN,CAAYC,cADvB;MAEHX,MAFG;MAGHY,QAAQ,EAAEnB,gBAHP;MAIHoB,QAAQ,EAAE,QAJP;MAKHf,KAAK,EAAEI;IALJ,CANJ;IAaHY,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAbd;IAgBHC,SAAS,EAAE,EAhBR;IAiBHC,mBAAmB,EAAE;MACjBnB,KAAK,EAAE,MADU;MAEjBoB,MAAM,EAAE;IAFS,CAjBlB;IAqBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEpB,MADN;MAEZY,QAAQ,EAAEnB,gBAFE;MAGZK,KAAK,EAAEI;IAHK,CArBb;IA0BHmB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAK3B,KAAK,CAACK,OAAN,CAAc,CAAd,CAFG;MAGhBH,KAAK,EAAE;IAHS;EA1BjB,CAAP;AAgCH,CAxCD;;AA0Ce,SAAS0B,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,aAAa,GAAGC,qBAAA,CAAeC,KAD7B;IAEFC,QAFE;IAGFC,UAAU,GAAG,KAHX;IAIFC,OAJE;IAKFC,KAAK,GAAG,EALN;IAMFC,OANE;IAOFC,UAPE;IAQF,GAAGC;EARD,IASFV,KATJ;EAWA,MAAMW,MAAM,GAAGzC,SAAS,EAAxB;EAEA,MAAM;IAAEuB,MAAM,EAAEmB;EAAV,IAA2B,IAAAtC,gCAAA,GAAjC;EAEA,MAAM,CAACuC,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,CAAT,CAAhD;;EACA,MAAMC,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAExB;IAAF,IAAawB,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAL,mBAAmB,CAACrB,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAM2B,eAAe,GAAG,IAAAC,cAAA,EAAyB,MAAM;IACnD,IAAIR,gBAAgB,KAAK,CAAzB,EAA4B;MACxB,OAAO,EAAP;IACH;;IAED,OAAO,CAAC;MACJS,OAAO,EAAE,CAACT,gBAAgB,GAAG5C,kBAApB,IAA0C,CAD/C;MAEJsD,IAAI,EAAErB,qBAAA,CAAeC;IAFjB,CAAD,CAAP;EAIH,CATuB,EASrB,CAACU,gBAAD,CATqB,CAAxB;EAWA,MAAMW,cAAc,GAAG,IAAAH,cAAA,EAAyB,MAAM;IAClD,IAAIpB,aAAa,KAAKC,qBAAA,CAAeuB,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJH,OAAO,EAAE,CADL;QAEJC,IAAI,EAAErB,qBAAA,CAAeuB;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAIxB,aAAa,KAAKC,qBAAA,CAAeC,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACIiB,OAAO,EAAEV,YADb;QAEIW,IAAI,EAAErB,qBAAA,CAAeC;MAFzB,CADG,EAKH;QACIuB,QAAQ,EAAE,GADd;QAEIJ,OAAO,EAAE,CAFb;QAGIC,IAAI,EAAErB,qBAAA,CAAeuB;MAHzB,CALG,CAAP;IAWH;;IAED,OAAO,CAAC;MACJC,QAAQ,EAAE,GADN;MAEJJ,OAAO,EAAEV,YAFL;MAGJW,IAAI,EAAErB,qBAAA,CAAeC;IAHjB,CAAD,CAAP;EAKH,CAzBsB,EAyBpB,CAACF,aAAD,EAAgBI,UAAhB,EAA4BO,YAA5B,CAzBoB,CAAvB;EA2BA,MAAMe,aAAa,GAAG,IAAAN,cAAA,EAAyB,MAAM;IACjD,IAAIpB,aAAa,KAAKC,qBAAA,CAAeuB,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJH,OAAO,EAAE,CADL;QAEJC,IAAI,EAAErB,qBAAA,CAAeuB;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAIxB,aAAa,KAAKC,qBAAA,CAAeC,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACIiB,OAAO,EAAE,CADb;QAEIC,IAAI,EAAErB,qBAAA,CAAeC;MAFzB,CADG,EAKH;QACIyB,KAAK,EAAE,EADX;QAEIF,QAAQ,EAAE,GAFd;QAGIJ,OAAO,EAAE,CAHb;QAIIC,IAAI,EAAErB,qBAAA,CAAeuB;MAJzB,CALG,CAAP;IAYH;;IAED,OAAO,CAAC;MACJH,OAAO,EAAE,CADL;MAEJC,IAAI,EAAErB,qBAAA,CAAeC;IAFjB,CAAD,CAAP;EAIH,CAzBqB,EAyBnB,CAACF,aAAD,EAAgBI,UAAhB,CAzBmB,CAAtB;EA2BA,MAAMwB,cAAc,GAAG5B,aAAa,KAAKC,qBAAA,CAAeC,KAAjC,IAA0CE,UAA1C,GAAuD,CAAvD,GAA2DyB,SAAlF;EAEA,MAAMC,iBAAiB,GAAG9B,aAAa,KAAKC,qBAAA,CAAeuB,IAAjC,GAAwC,CAAxC,GAA4CK,SAAtE;EAEA,oBACI,6BAAC,cAAD;IACI,cAAc,EAAEzB,UAAU,GAAGM,MAAM,CAACnB,mBAAV,GAAgCmB,MAAM,CAACpB,SADrE;IAEI,cAAc,EAAEiC,cAFpB;IAGI,cAAc,EAAEK,cAHpB;IAII,iBAAiB,EAAEE,iBAJvB;IAKI,OAAO,EAAEzB,OALb;IAMI,aAAa,EAAEqB,aANnB;IAOI,eAAe,EAAEP,eAPrB;IAQI,OAAO,EAAEZ,OARb;IASI,KAAK,EAAEG,MAAM,CAACjC;EATlB,GAUQgC,UAVR,gBAYI,6BAAC,cAAD,CAAO,QAAP,QACKD,UAAU,gBACP,6BAAC,eAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGyB,SAAH,GAAenB,MAAM,CAACjB;EAA/C,gBACI,6BAAC,eAAD;IACI,KAAK,EAAEiB,MAAM,CAACf,kBADlB;IAEI,QAAQ,EAAEoB;EAFd,GAIKP,UAJL,CADJ,CADO,GASP,IAVR,eAYI,6BAAC,cAAD;IACI,SAAS,EAAE,CADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAE,IAAA2B,WAAA,EAAI,CACP3B,UAAU,GAAGM,MAAM,CAACtB,eAAV,GAA4BsB,MAAM,CAAC5B,KADtC,EAEPwB,KAFO,CAAJ;EAHX,GAQKH,QARL,CAZJ,CAZJ,CADJ;AAsCH;;AAAA"}
|
|
1
|
+
{"version":3,"names":["DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","hideBackdrop","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n | 'root'\n | 'paper'\n | 'paperFullScreen'\n | 'animation'\n | 'animationFullScreen'\n | 'topElementSize'\n | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n const theme = useTheme();\n\n const { width } = useWindowDimensions();\n\n const margin = theme.spacing(4);\n const dialogWidth = width - margin * 2;\n\n return {\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: theme.zIndex.dialog,\n },\n paper: {\n borderRadius: theme.shape.roundnessExtra,\n margin,\n maxWidth: DIALOG_MAX_WIDTH,\n overflow: 'hidden',\n width: dialogWidth,\n },\n paperFullScreen: {\n flexGrow: 1,\n },\n animation: {},\n animationFullScreen: {\n width: '100%',\n height: '100%',\n },\n topElementSize: {\n marginHorizontal: margin,\n maxWidth: DIALOG_MAX_WIDTH,\n width: dialogWidth,\n },\n topElementPosition: {\n position: 'absolute',\n bottom: -1 * theme.spacing(4),\n width: '100%',\n },\n };\n};\n\nexport default function Dialog(props: DialogProps) {\n const {\n animationType = ANIMATION_TYPE.SLIDE,\n children,\n fullScreen = false,\n hideBackdrop,\n onClose,\n style = {},\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const { height: screenHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n if (topElementHeight === 0) {\n return [];\n }\n\n return [{\n toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n type: ANIMATION_TYPE.SLIDE,\n }]\n }, [topElementHeight]);\n\n const closeAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n return [\n {\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n duration: 150,\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n duration: 150,\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType, fullScreen, screenHeight]);\n\n const openAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n return [\n {\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n delay: 50,\n duration: 150,\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType, fullScreen]);\n\n const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n return (\n <Modal\n animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n closeAnimation={closeAnimation}\n hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onClose={onClose}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <React.Fragment>\n {topElement ? (\n <Column style={fullScreen ? undefined : styles.topElementSize}>\n <Column\n style={styles.topElementPosition}\n onLayout={handleTopElementLayout}\n >\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <Paper\n elevation={6}\n square={fullScreen}\n style={css([\n fullScreen ? styles.paperFullScreen : styles.paper,\n style,\n ])}\n >\n {children}\n </Paper>\n </React.Fragment>\n </Modal>\n );\n};\n"],"mappings":"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"}
|
|
@@ -56,6 +56,7 @@ export default function Dialog(props) {
|
|
|
56
56
|
animationType = ANIMATION_TYPE.SLIDE,
|
|
57
57
|
children,
|
|
58
58
|
fullScreen = false,
|
|
59
|
+
hideBackdrop,
|
|
59
60
|
onClose,
|
|
60
61
|
style = {},
|
|
61
62
|
visible,
|
|
@@ -136,6 +137,7 @@ export default function Dialog(props) {
|
|
|
136
137
|
return /*#__PURE__*/React.createElement(Modal, _extends({
|
|
137
138
|
animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
|
|
138
139
|
closeAnimation: closeAnimation,
|
|
140
|
+
hideBackdrop: hideBackdrop || animationType === ANIMATION_TYPE.FADE,
|
|
139
141
|
initialOpacity: initialOpacity,
|
|
140
142
|
initialTranslateY: initialTranslateY,
|
|
141
143
|
onClose: onClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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","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 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 initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onClose={onClose}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <React.Fragment>\n {topElement ? (\n <Column style={fullScreen ? undefined : styles.topElementSize}>\n <Column\n style={styles.topElementPosition}\n onLayout={handleTopElementLayout}\n >\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <Paper\n elevation={6}\n square={fullScreen}\n style={css([\n fullScreen ? styles.paperFullScreen : styles.paper,\n style,\n ])}\n >\n {children}\n </Paper>\n </React.Fragment>\n </Modal>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.89",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "82a44cbca9c292a9a90db0fd4307d970c82d542c"
|
|
71
71
|
}
|
package/src/Dialog/Dialog.tsx
CHANGED
|
@@ -69,6 +69,7 @@ export default function Dialog(props: DialogProps) {
|
|
|
69
69
|
animationType = ANIMATION_TYPE.SLIDE,
|
|
70
70
|
children,
|
|
71
71
|
fullScreen = false,
|
|
72
|
+
hideBackdrop,
|
|
72
73
|
onClose,
|
|
73
74
|
style = {},
|
|
74
75
|
visible,
|
|
@@ -159,6 +160,7 @@ export default function Dialog(props: DialogProps) {
|
|
|
159
160
|
<Modal
|
|
160
161
|
animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
|
|
161
162
|
closeAnimation={closeAnimation}
|
|
163
|
+
hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
|
|
162
164
|
initialOpacity={initialOpacity}
|
|
163
165
|
initialTranslateY={initialTranslateY}
|
|
164
166
|
onClose={onClose}
|