@mirai/ui 1.0.39 → 1.0.41
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.
- package/build/components/Modal/Modal.js +5 -2
- package/build/components/Modal/Modal.js.map +1 -1
- package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +6 -0
- package/build/primitives/Layer/helpers/getLayerPosition.js +1 -1
- package/build/primitives/Layer/helpers/getLayerPosition.js.map +1 -1
- package/package.json +1 -1
|
@@ -47,6 +47,7 @@ var Modal = function Modal(_ref) {
|
|
|
47
47
|
var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
|
|
48
48
|
return jsx;
|
|
49
49
|
} : _reactDom.default.createPortal;
|
|
50
|
+
var testId = others['data-testid'];
|
|
50
51
|
return renderer( /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
51
52
|
row: true,
|
|
52
53
|
className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
|
|
@@ -57,7 +58,8 @@ var Modal = function Modal(_ref) {
|
|
|
57
58
|
row: true,
|
|
58
59
|
className: _ModalModule.default.header
|
|
59
60
|
}, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
60
|
-
onPress: onBack
|
|
61
|
+
onPress: onBack,
|
|
62
|
+
"data-testid": testId ? "".concat(testId, "-button-back") : undefined
|
|
61
63
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
62
64
|
name: "Left",
|
|
63
65
|
className: _ModalModule.default.icon
|
|
@@ -65,7 +67,8 @@ var Modal = function Modal(_ref) {
|
|
|
65
67
|
headline: true,
|
|
66
68
|
className: (0, _helpers.styles)(_ModalModule.default.title, !onBack && _ModalModule.default.left, !onClose && _ModalModule.default.right)
|
|
67
69
|
}, title), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
68
|
-
onPress: onClose
|
|
70
|
+
onPress: onClose,
|
|
71
|
+
"data-testid": testId ? "".concat(testId, "-button-close") : undefined
|
|
69
72
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
70
73
|
name: isDesktop || title !== undefined ? 'Close' : 'CloseArrow',
|
|
71
74
|
className: _ModalModule.default.icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["Modal","children","overflow","portal","title","visible","onBack","onClose","others","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","style","container","modal","className","header","icon","left","right","
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["Modal","children","overflow","portal","title","visible","onBack","onClose","others","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","style","container","modal","className","header","undefined","icon","left","right","document","body","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, overflow = true, portal = false, title, visible, onBack, onClose, ...others }) => {\n const { isDesktop } = useDevice();\n\n const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n const { ['data-testid']: testId } = others;\n\n return renderer(\n <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n {(title || onBack || onClose) && (\n <View row className={style.header}>\n {onBack && (\n <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n <Icon name=\"Left\" className={style.icon} />\n </Pressable>\n )}\n {title && (\n <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n {title}\n </Text>\n )}\n {onClose && (\n <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n <Icon name={isDesktop || title !== undefined ? 'Close' : 'CloseArrow'} className={style.icon} />\n </Pressable>\n )}\n </View>\n )}\n {children}\n </View>\n </View>,\n document.body,\n );\n};\n\nModal.propTypes = {\n children: PropTypes.node,\n portal: PropTypes.bool,\n overflow: PropTypes.bool,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onBack: PropTypes.func,\n onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+F;EAAA,IAA5FC,QAA4F,QAA5FA,QAA4F;EAAA,yBAAlFC,QAAkF;EAAA,IAAlFA,QAAkF,8BAAvE,IAAuE;EAAA,uBAAjEC,MAAiE;EAAA,IAAjEA,MAAiE,4BAAxD,KAAwD;EAAA,IAAjDC,KAAiD,QAAjDA,KAAiD;EAAA,IAA1CC,OAA0C,QAA1CA,OAA0C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3G,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,IAAMC,QAAQ,GAAGC,oBAAW,CAACR,MAAZ,GAAqB,UAACS,GAAD;IAAA,OAASA,GAAT;EAAA,CAArB,GAAoCC,kBAASC,YAA9D;EAEA,IAAyBC,MAAzB,GAAoCP,MAApC,CAAS,aAAT;EAEA,OAAOE,QAAQ,eACb,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOM,qBAAMC,SAAb,EAAwBf,QAAQ,IAAIc,qBAAMd,QAA1C,EAAoDG,OAAO,IAAIW,qBAAMX,OAArE;EAArB,gBACE,6BAAC,gBAAD,eAAUG,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOQ,qBAAME,KAAb,EAAoBb,OAAO,IAAIW,qBAAMX,OAArC,EAA8CG,MAAM,CAACW,SAArD;EAAjC,IACG,CAACf,KAAK,IAAIE,MAAT,IAAmBC,OAApB,kBACC,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAES,qBAAMI;EAA3B,GACGd,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA,MAApB;IAA4B,eAAaS,MAAM,aAAMA,MAAN,oBAA6BM;EAA5E,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,MAAX;IAAkB,SAAS,EAAEL,qBAAMM;EAAnC,EADF,CAFJ,EAMGlB,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAE,qBAAOY,qBAAMZ,KAAb,EAAoB,CAACE,MAAD,IAAWU,qBAAMO,IAArC,EAA2C,CAAChB,OAAD,IAAYS,qBAAMQ,KAA7D;EAA1B,GACGpB,KADH,CAPJ,EAWGG,OAAO,iBACN,6BAAC,qBAAD;IAAW,OAAO,EAAEA,OAApB;IAA6B,eAAaQ,MAAM,aAAMA,MAAN,qBAA8BM;EAA9E,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEZ,SAAS,IAAIL,KAAK,KAAKiB,SAAvB,GAAmC,OAAnC,GAA6C,YAAzD;IAAuE,SAAS,EAAEL,qBAAMM;EAAxF,EADF,CAZJ,CAFJ,EAoBGrB,QApBH,CADF,CADa,EAyBbwB,QAAQ,CAACC,IAzBI,CAAf;AA2BD,CAlCD;;;AAoCA1B,KAAK,CAAC2B,SAAN,GAAkB;EAChB1B,QAAQ,EAAE2B,mBAAUC,IADJ;EAEhB1B,MAAM,EAAEyB,mBAAUE,IAFF;EAGhB5B,QAAQ,EAAE0B,mBAAUE,IAHJ;EAIhB1B,KAAK,EAAEwB,mBAAUG,MAJD;EAKhB1B,OAAO,EAAEuB,mBAAUE,IALH;EAMhBxB,MAAM,EAAEsB,mBAAUI,IANF;EAOhBzB,OAAO,EAAEqB,mBAAUI;AAPH,CAAlB"}
|
|
@@ -7,12 +7,14 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
|
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
9
|
class="view fit modal visible"
|
|
10
|
+
data-testid="mirai-onClose"
|
|
10
11
|
>
|
|
11
12
|
<div
|
|
12
13
|
class="view row header"
|
|
13
14
|
>
|
|
14
15
|
<button
|
|
15
16
|
class="pressable"
|
|
17
|
+
data-testid="mirai-onClose-button-close"
|
|
16
18
|
>
|
|
17
19
|
<span
|
|
18
20
|
class="icon icon"
|
|
@@ -87,12 +89,14 @@ exports[`component:<Modal> prop:onBack 1`] = `
|
|
|
87
89
|
>
|
|
88
90
|
<div
|
|
89
91
|
class="view fit modal visible"
|
|
92
|
+
data-testid="mirai-onBack"
|
|
90
93
|
>
|
|
91
94
|
<div
|
|
92
95
|
class="view row header"
|
|
93
96
|
>
|
|
94
97
|
<button
|
|
95
98
|
class="pressable"
|
|
99
|
+
data-testid="mirai-onBack-button-back"
|
|
96
100
|
>
|
|
97
101
|
<span
|
|
98
102
|
class="icon icon"
|
|
@@ -133,12 +137,14 @@ exports[`component:<Modal> prop:onClose 1`] = `
|
|
|
133
137
|
>
|
|
134
138
|
<div
|
|
135
139
|
class="view fit modal visible"
|
|
140
|
+
data-testid="mirai-onClose"
|
|
136
141
|
>
|
|
137
142
|
<div
|
|
138
143
|
class="view row header"
|
|
139
144
|
>
|
|
140
145
|
<button
|
|
141
146
|
class="pressable"
|
|
147
|
+
data-testid="mirai-onClose-button-close"
|
|
142
148
|
>
|
|
143
149
|
<span
|
|
144
150
|
class="icon icon"
|
|
@@ -36,7 +36,7 @@ var getLayerPosition = function getLayerPosition() {
|
|
|
36
36
|
var top = componentTop + componentHeight;
|
|
37
37
|
var gapTop = componentTop;
|
|
38
38
|
var gapBottom = height - top;
|
|
39
|
-
if (
|
|
39
|
+
if (contentHeight > gapBottom && gapTop > gapBottom && !forceBottom || forceTop) top = componentTop - contentHeight;
|
|
40
40
|
var left = componentLeft;
|
|
41
41
|
var gapLeft = componentLeft + componentWidth;
|
|
42
42
|
var gapRight = width - componentLeft;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","top","componentTop","width","componentWidth","height","componentHeight","contentWidth","contentHeight","gapTop","gapBottom","gapLeft","gapRight","gapCenter","space"],"sources":["../../../../src/primitives/Layer/helpers/getLayerPosition.js"],"sourcesContent":["export const getLayerPosition = (\n componentLayout = {},\n contentLayout = {},\n device = {},\n { centered, forceBottom, forceLeft, forceRight, forceTop } = {},\n) => {\n const {\n left: componentLeft = 0,\n top: componentTop = 0,\n width: componentWidth = 0,\n height: componentHeight = 0,\n } = componentLayout;\n const { width: contentWidth = 0, height: contentHeight = 0 } = contentLayout;\n const { height = 0, width = 0 } = device;\n\n let top = componentTop + componentHeight;\n const gapTop = componentTop;\n const gapBottom = height - top;\n if ((
|
|
1
|
+
{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","top","componentTop","width","componentWidth","height","componentHeight","contentWidth","contentHeight","gapTop","gapBottom","gapLeft","gapRight","gapCenter","space"],"sources":["../../../../src/primitives/Layer/helpers/getLayerPosition.js"],"sourcesContent":["export const getLayerPosition = (\n componentLayout = {},\n contentLayout = {},\n device = {},\n { centered, forceBottom, forceLeft, forceRight, forceTop } = {},\n) => {\n const {\n left: componentLeft = 0,\n top: componentTop = 0,\n width: componentWidth = 0,\n height: componentHeight = 0,\n } = componentLayout;\n const { width: contentWidth = 0, height: contentHeight = 0 } = contentLayout;\n const { height = 0, width = 0 } = device;\n\n let top = componentTop + componentHeight;\n const gapTop = componentTop;\n const gapBottom = height - top;\n if ((contentHeight > gapBottom && gapTop > gapBottom && !forceBottom) || forceTop) top = componentTop - contentHeight;\n\n let left = componentLeft;\n const gapLeft = componentLeft + componentWidth;\n const gapRight = width - componentLeft;\n\n if ((contentWidth > gapRight && gapLeft > gapRight && !forceLeft) || forceRight)\n left = componentLeft - contentWidth + componentWidth;\n\n if (centered) {\n const gapCenter = (componentWidth + contentWidth) / 2;\n const space = (contentWidth - componentWidth) / 2;\n if (gapLeft > gapRight) left = componentLeft - contentWidth + componentWidth;\n if (gapLeft > gapCenter && gapRight > gapCenter) left += space * (gapLeft > gapRight ? 1 : -1);\n }\n\n return { left, top };\n};\n"],"mappings":";;;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAK3B;EAAA,IAJHC,eAIG,uEAJe,EAIf;EAAA,IAHHC,aAGG,uEAHa,EAGb;EAAA,IAFHC,MAEG,uEAFM,EAEN;;EAAA,+EAD0D,EAC1D;EAAA,IADDC,QACC,QADDA,QACC;EAAA,IADSC,WACT,QADSA,WACT;EAAA,IADsBC,SACtB,QADsBA,SACtB;EAAA,IADiCC,UACjC,QADiCA,UACjC;EAAA,IAD6CC,QAC7C,QAD6CA,QAC7C;;EACH,4BAKIP,eALJ,CACEQ,IADF;EAAA,IACQC,aADR,sCACwB,CADxB;EAAA,2BAKIT,eALJ,CAEEU,GAFF;EAAA,IAEOC,YAFP,qCAEsB,CAFtB;EAAA,4BAKIX,eALJ,CAGEY,KAHF;EAAA,IAGSC,cAHT,sCAG0B,CAH1B;EAAA,4BAKIb,eALJ,CAIEc,MAJF;EAAA,IAIUC,eAJV,sCAI4B,CAJ5B;EAMA,2BAA+Dd,aAA/D,CAAQW,KAAR;EAAA,IAAeI,YAAf,qCAA8B,CAA9B;EAAA,4BAA+Df,aAA/D,CAAiCa,MAAjC;EAAA,IAAyCG,aAAzC,sCAAyD,CAAzD;EACA,qBAAkCf,MAAlC,CAAQY,MAAR;EAAA,IAAQA,MAAR,+BAAiB,CAAjB;EAAA,oBAAkCZ,MAAlC,CAAoBU,KAApB;EAAA,IAAoBA,KAApB,8BAA4B,CAA5B;EAEA,IAAIF,GAAG,GAAGC,YAAY,GAAGI,eAAzB;EACA,IAAMG,MAAM,GAAGP,YAAf;EACA,IAAMQ,SAAS,GAAGL,MAAM,GAAGJ,GAA3B;EACA,IAAKO,aAAa,GAAGE,SAAhB,IAA6BD,MAAM,GAAGC,SAAtC,IAAmD,CAACf,WAArD,IAAqEG,QAAzE,EAAmFG,GAAG,GAAGC,YAAY,GAAGM,aAArB;EAEnF,IAAIT,IAAI,GAAGC,aAAX;EACA,IAAMW,OAAO,GAAGX,aAAa,GAAGI,cAAhC;EACA,IAAMQ,QAAQ,GAAGT,KAAK,GAAGH,aAAzB;EAEA,IAAKO,YAAY,GAAGK,QAAf,IAA2BD,OAAO,GAAGC,QAArC,IAAiD,CAAChB,SAAnD,IAAiEC,UAArE,EACEE,IAAI,GAAGC,aAAa,GAAGO,YAAhB,GAA+BH,cAAtC;;EAEF,IAAIV,QAAJ,EAAc;IACZ,IAAMmB,SAAS,GAAG,CAACT,cAAc,GAAGG,YAAlB,IAAkC,CAApD;IACA,IAAMO,KAAK,GAAG,CAACP,YAAY,GAAGH,cAAhB,IAAkC,CAAhD;IACA,IAAIO,OAAO,GAAGC,QAAd,EAAwBb,IAAI,GAAGC,aAAa,GAAGO,YAAhB,GAA+BH,cAAtC;IACxB,IAAIO,OAAO,GAAGE,SAAV,IAAuBD,QAAQ,GAAGC,SAAtC,EAAiDd,IAAI,IAAIe,KAAK,IAAIH,OAAO,GAAGC,QAAV,GAAqB,CAArB,GAAyB,CAAC,CAA9B,CAAb;EAClD;;EAED,OAAO;IAAEb,IAAI,EAAJA,IAAF;IAAQE,GAAG,EAAHA;EAAR,CAAP;AACD,CAnCM"}
|