@fountain-ui/core 2.0.0-beta.71 → 2.0.0-beta.72
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.
|
@@ -52,10 +52,15 @@ const useStyles = function () {
|
|
|
52
52
|
width: '100%',
|
|
53
53
|
height: '100%'
|
|
54
54
|
},
|
|
55
|
-
|
|
55
|
+
topElementSize: {
|
|
56
56
|
marginHorizontal: margin,
|
|
57
57
|
maxWidth: DIALOG_MAX_WIDTH,
|
|
58
58
|
width: dialogWidth
|
|
59
|
+
},
|
|
60
|
+
topElementPosition: {
|
|
61
|
+
position: 'absolute',
|
|
62
|
+
bottom: -1 * theme.spacing(4),
|
|
63
|
+
width: '100%'
|
|
59
64
|
}
|
|
60
65
|
};
|
|
61
66
|
};
|
|
@@ -76,9 +81,11 @@ function Dialog(props) {
|
|
|
76
81
|
onClose: onClose,
|
|
77
82
|
visible: visible,
|
|
78
83
|
style: styles.root
|
|
79
|
-
}, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
80
|
-
style: fullScreen ? undefined : styles.
|
|
81
|
-
},
|
|
84
|
+
}, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
85
|
+
style: fullScreen ? undefined : styles.topElementSize
|
|
86
|
+
}, /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
87
|
+
style: styles.topElementPosition
|
|
88
|
+
}, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
|
|
82
89
|
elevation: 24,
|
|
83
90
|
square: fullScreen,
|
|
84
91
|
style: (0, _styles.css)([fullScreen ? styles.paperFullScreen : styles.paper, style])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DIALOG_MAX_WIDTH","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","
|
|
1
|
+
{"version":3,"names":["DIALOG_MAX_WIDTH","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","children","fullScreen","onClose","style","visible","topElement","otherProps","styles","undefined","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\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 | '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 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\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 <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={24}\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,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;MACHR,MADG;MAEHS,QAAQ,EAAEf,gBAFP;MAGHgB,QAAQ,EAAE,QAHP;MAIHZ,KAAK,EAAEI;IAJJ,CANJ;IAYHS,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBhB,KAAK,EAAE,MADU;MAEjBiB,MAAM,EAAE;IAFS,CAhBlB;IAoBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEjB,MADN;MAEZS,QAAQ,EAAEf,gBAFE;MAGZI,KAAK,EAAEI;IAHK,CApBb;IAyBHgB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAKxB,KAAK,CAACK,OAAN,CAAc,CAAd,CAFG;MAGhBH,KAAK,EAAE;IAHS;EAzBjB,CAAP;AA+BH,CAvCD;;AAyCe,SAASuB,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,KAAK,GAAG,EAJN;IAKFC,OALE;IAMFC,UANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGnC,SAAS,EAAxB;EAEA,oBACI,6BAAC,cAAD;IACI,cAAc,EAAE6B,UAAU,GAAGM,MAAM,CAAChB,mBAAV,GAAgCgB,MAAM,CAACjB,SADrE;IAEI,OAAO,EAAEY,OAFb;IAGI,OAAO,EAAEE,OAHb;IAII,KAAK,EAAEG,MAAM,CAAC3B;EAJlB,GAKQ0B,UALR,gBAOI,6BAAC,cAAD,CAAO,QAAP,QACKD,UAAU,gBACP,6BAAC,eAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGO,SAAH,GAAeD,MAAM,CAACd;EAA/C,gBACI,6BAAC,eAAD;IAAQ,KAAK,EAAEc,MAAM,CAACZ;EAAtB,GACKU,UADL,CADJ,CADO,GAMP,IAPR,eASI,6BAAC,cAAD;IACI,SAAS,EAAE,EADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAE,IAAAQ,WAAA,EAAI,CACPR,UAAU,GAAGM,MAAM,CAACnB,eAAV,GAA4BmB,MAAM,CAACtB,KADtC,EAEPkB,KAFO,CAAJ;EAHX,GAQKH,QARL,CATJ,CAPJ,CADJ;AA8BH;;AAAA"}
|
|
@@ -36,10 +36,15 @@ const useStyles = function () {
|
|
|
36
36
|
width: '100%',
|
|
37
37
|
height: '100%'
|
|
38
38
|
},
|
|
39
|
-
|
|
39
|
+
topElementSize: {
|
|
40
40
|
marginHorizontal: margin,
|
|
41
41
|
maxWidth: DIALOG_MAX_WIDTH,
|
|
42
42
|
width: dialogWidth
|
|
43
|
+
},
|
|
44
|
+
topElementPosition: {
|
|
45
|
+
position: 'absolute',
|
|
46
|
+
bottom: -1 * theme.spacing(4),
|
|
47
|
+
width: '100%'
|
|
43
48
|
}
|
|
44
49
|
};
|
|
45
50
|
};
|
|
@@ -60,9 +65,11 @@ export default function Dialog(props) {
|
|
|
60
65
|
onClose: onClose,
|
|
61
66
|
visible: visible,
|
|
62
67
|
style: styles.root
|
|
63
|
-
}, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Column, {
|
|
64
|
-
style: fullScreen ? undefined : styles.
|
|
65
|
-
},
|
|
68
|
+
}, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, topElement ? /*#__PURE__*/React.createElement(Column, {
|
|
69
|
+
style: fullScreen ? undefined : styles.topElementSize
|
|
70
|
+
}, /*#__PURE__*/React.createElement(Column, {
|
|
71
|
+
style: styles.topElementPosition
|
|
72
|
+
}, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
|
|
66
73
|
elevation: 24,
|
|
67
74
|
square: fullScreen,
|
|
68
75
|
style: css([fullScreen ? styles.paperFullScreen : styles.paper, style])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useWindowDimensions","css","Column","Modal","Paper","useTheme","DIALOG_MAX_WIDTH","useStyles","theme","width","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","
|
|
1
|
+
{"version":3,"names":["React","useWindowDimensions","css","Column","Modal","Paper","useTheme","DIALOG_MAX_WIDTH","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","undefined"],"sources":["Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\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 | '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 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\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 <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={24}\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,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,MAAkB,UAAlB;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,IAAYT,mBAAmB,EAArC;EAEA,MAAMU,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;MACHR,MADG;MAEHS,QAAQ,EAAEb,gBAFP;MAGHc,QAAQ,EAAE,QAHP;MAIHX,KAAK,EAAEG;IAJJ,CANJ;IAYHS,eAAe,EAAE;MACbC,QAAQ,EAAE;IADG,CAZd;IAeHC,SAAS,EAAE,EAfR;IAgBHC,mBAAmB,EAAE;MACjBf,KAAK,EAAE,MADU;MAEjBgB,MAAM,EAAE;IAFS,CAhBlB;IAoBHC,cAAc,EAAE;MACZC,gBAAgB,EAAEjB,MADN;MAEZS,QAAQ,EAAEb,gBAFE;MAGZG,KAAK,EAAEG;IAHK,CApBb;IAyBHgB,kBAAkB,EAAE;MAChBC,QAAQ,EAAE,UADM;MAEhBC,MAAM,EAAE,CAAC,CAAD,GAAKtB,KAAK,CAACG,OAAN,CAAc,CAAd,CAFG;MAGhBF,KAAK,EAAE;IAHS;EAzBjB,CAAP;AA+BH,CAvCD;;AAyCA,eAAe,SAASsB,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,UAAU,GAAG,KAFX;IAGFC,OAHE;IAIFC,KAAK,GAAG,EAJN;IAKFC,OALE;IAMFC,UANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGjC,SAAS,EAAxB;EAEA,oBACI,oBAAC,KAAD;IACI,cAAc,EAAE2B,UAAU,GAAGM,MAAM,CAAChB,mBAAV,GAAgCgB,MAAM,CAACjB,SADrE;IAEI,OAAO,EAAEY,OAFb;IAGI,OAAO,EAAEE,OAHb;IAII,KAAK,EAAEG,MAAM,CAAC3B;EAJlB,GAKQ0B,UALR,gBAOI,oBAAC,KAAD,CAAO,QAAP,QACKD,UAAU,gBACP,oBAAC,MAAD;IAAQ,KAAK,EAAEJ,UAAU,GAAGO,SAAH,GAAeD,MAAM,CAACd;EAA/C,gBACI,oBAAC,MAAD;IAAQ,KAAK,EAAEc,MAAM,CAACZ;EAAtB,GACKU,UADL,CADJ,CADO,GAMP,IAPR,eASI,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,MAAM,EAAEJ,UAFZ;IAGI,KAAK,EAAEjC,GAAG,CAAC,CACPiC,UAAU,GAAGM,MAAM,CAACnB,eAAV,GAA4BmB,MAAM,CAACtB,KADtC,EAEPkB,KAFO,CAAD;EAHd,GAQKH,QARL,CATJ,CAPJ,CADJ;AA8BH;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.72",
|
|
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": "138b80d039c465fcc98608cb2256230cdfe90007"
|
|
71
71
|
}
|
package/src/Dialog/Dialog.tsx
CHANGED
|
@@ -13,7 +13,8 @@ type DialogStyleKeys =
|
|
|
13
13
|
| 'paperFullScreen'
|
|
14
14
|
| 'animation'
|
|
15
15
|
| 'animationFullScreen'
|
|
16
|
-
| '
|
|
16
|
+
| 'topElementSize'
|
|
17
|
+
| 'topElementPosition';
|
|
17
18
|
|
|
18
19
|
type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
|
|
19
20
|
|
|
@@ -47,11 +48,16 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
|
|
|
47
48
|
width: '100%',
|
|
48
49
|
height: '100%',
|
|
49
50
|
},
|
|
50
|
-
|
|
51
|
+
topElementSize: {
|
|
51
52
|
marginHorizontal: margin,
|
|
52
53
|
maxWidth: DIALOG_MAX_WIDTH,
|
|
53
54
|
width: dialogWidth,
|
|
54
55
|
},
|
|
56
|
+
topElementPosition: {
|
|
57
|
+
position: 'absolute',
|
|
58
|
+
bottom: -1 * theme.spacing(4),
|
|
59
|
+
width: '100%',
|
|
60
|
+
},
|
|
55
61
|
};
|
|
56
62
|
};
|
|
57
63
|
|
|
@@ -77,9 +83,13 @@ export default function Dialog(props: DialogProps) {
|
|
|
77
83
|
{...otherProps}
|
|
78
84
|
>
|
|
79
85
|
<React.Fragment>
|
|
80
|
-
|
|
81
|
-
{
|
|
82
|
-
|
|
86
|
+
{topElement ? (
|
|
87
|
+
<Column style={fullScreen ? undefined : styles.topElementSize}>
|
|
88
|
+
<Column style={styles.topElementPosition}>
|
|
89
|
+
{topElement}
|
|
90
|
+
</Column>
|
|
91
|
+
</Column>
|
|
92
|
+
) : null}
|
|
83
93
|
|
|
84
94
|
<Paper
|
|
85
95
|
elevation={24}
|