@semcore/fullscreen-modal 2.0.8 → 2.0.11
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/CHANGELOG.md +18 -0
- package/README.md +2 -2
- package/lib/cjs/FullscreenModal.js +13 -13
- package/lib/cjs/FullscreenModal.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/fullscreen-modal.shadow.css +1 -0
- package/lib/es6/FullscreenModal.js +13 -13
- package/lib/es6/FullscreenModal.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/fullscreen-modal.shadow.css +1 -0
- package/package.json +1 -1
- package/src/FullscreenModal.jsx +0 -128
- package/src/index.d.ts +0 -41
- package/src/index.js +0 -1
- package/src/style/fullscreen-modal.shadow.css +0 -128
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.0.11] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
|
|
10
|
+
|
|
11
|
+
## [2.0.10] - 2022-07-21
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
16
|
+
|
|
17
|
+
## [2.0.9] - 2022-07-13
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Fixed the font in Title
|
|
22
|
+
|
|
5
23
|
## [2.0.8] - 2022-07-07
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import FullscreenModal from '@semcore/fullscreen-modal';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
53
|
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
@@ -56,22 +56,22 @@ var style = (
|
|
|
56
56
|
/*__reshadow_css_start__*/
|
|
57
57
|
_core.sstyled.insert(
|
|
58
58
|
/*__inner_css_start__*/
|
|
59
|
-
".
|
|
59
|
+
".___SFullscreenOverlay_aa6od_gg_{padding:0}.___SFullscreenModal_aa6od_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_aa6od_gg_,.___SClose_aa6od_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_aa6od_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_aa6od_gg_:hover{color:#8a8e9b}.___SBack_aa6od_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_aa6od_gg_:hover{color:#484a54}.___SBackText_aa6od_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_aa6od_gg_,.___STitle_aa6od_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_aa6od_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_aa6od_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_aa6od_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_aa6od_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_aa6od_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_aa6od_gg_{display:flex;height:100%;overflow:auto}.___SSection_aa6od_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_aa6od_gg_{transition:none}}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "aa6od_gg_")
|
|
62
62
|
/*__reshadow_css_end__*/
|
|
63
63
|
, {
|
|
64
|
-
"__SFullscreenOverlay": "
|
|
65
|
-
"__SFullscreenModal": "
|
|
66
|
-
"__SBack": "
|
|
67
|
-
"__SClose": "
|
|
68
|
-
"__SBackText": "
|
|
69
|
-
"__SDescription": "
|
|
70
|
-
"__STitle": "
|
|
71
|
-
"__SHeader": "
|
|
72
|
-
"__SFooter": "
|
|
73
|
-
"__SBody": "
|
|
74
|
-
"__SSection": "
|
|
64
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_aa6od_gg_",
|
|
65
|
+
"__SFullscreenModal": "___SFullscreenModal_aa6od_gg_",
|
|
66
|
+
"__SBack": "___SBack_aa6od_gg_",
|
|
67
|
+
"__SClose": "___SClose_aa6od_gg_",
|
|
68
|
+
"__SBackText": "___SBackText_aa6od_gg_",
|
|
69
|
+
"__SDescription": "___SDescription_aa6od_gg_",
|
|
70
|
+
"__STitle": "___STitle_aa6od_gg_",
|
|
71
|
+
"__SHeader": "___SHeader_aa6od_gg_",
|
|
72
|
+
"__SFooter": "___SFooter_aa6od_gg_",
|
|
73
|
+
"__SBody": "___SBody_aa6od_gg_",
|
|
74
|
+
"__SSection": "___SSection_aa6od_gg_"
|
|
75
75
|
});
|
|
76
76
|
|
|
77
77
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"FullscreenModal.js","names":["FullscreenModalRoot","trigger","e","fire","onClick","bindHandlerClose","SFullscreenModal","Modal","Window","asProps","styles","Children","onClose","visible","closable","duration","disablePortal","SFullscreenOverlay","Overlay","sstyled","Component","style","Header","props","SHeader","Box","title","description","Body","SBody","Section","SSection","Footer","SFooter","Flex","Close","SClose","CloseIcon","Title","STitle","Text","Description","SDescription","Back","SBack","SBackText","FullscreenModal","createComponent","parent"],"sources":["../../src/FullscreenModal.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Modal from '@semcore/modal';\nimport { Flex, Box } from '@semcore/flex-box';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport { Text } from '@semcore/typography';\nimport fire from '@semcore/utils/lib/fire';\n\nimport style from './style/fullscreen-modal.shadow.css';\n\nclass FullscreenModalRoot extends Component {\n static displayName = 'FullscreenModal';\n static style = style;\n\n bindHandlerClose = (trigger) => (e) => {\n fire(this, 'onClose', trigger, e);\n };\n\n getCloseProps() {\n return {\n onClick: this.bindHandlerClose('onCloseClick'),\n };\n }\n\n getBackProps() {\n return {\n onClick: this.bindHandlerClose('onBackClick'),\n };\n }\n\n render() {\n const SFullscreenModal = Root;\n const { styles, Children, onClose, visible, closable, duration, disablePortal } = this.asProps;\n const SFullscreenOverlay = Modal.Overlay;\n\n return sstyled(styles)(\n <Modal\n closable={false}\n visible={visible}\n onClose={onClose}\n duration={duration}\n disablePortal={disablePortal}\n >\n <SFullscreenOverlay>\n <SFullscreenModal render={Modal.Window}>\n {closable && <FullscreenModal.Close />}\n <Children />\n </SFullscreenModal>\n </SFullscreenOverlay>\n </Modal>,\n );\n }\n}\n\nfunction Header(props) {\n const SHeader = Root;\n const { Children, styles, title, description } = props;\n return sstyled(styles)(\n <SHeader render={Box}>\n {title && <FullscreenModal.Title children={title} />}\n {description && <FullscreenModal.Description children={description} />}\n <Children />\n </SHeader>,\n );\n}\n\nfunction Body(props) {\n const SBody = Root;\n return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Section(props) {\n const SSection = Root;\n return sstyled(props.styles)(<SSection render={Box} />);\n}\n\nfunction Footer(props) {\n const SFooter = Root;\n return sstyled(props.styles)(<SFooter render={Flex} />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n return sstyled(props.styles)(<SClose render={CloseIcon} />);\n}\n\nfunction Title(props) {\n const STitle = Root;\n return sstyled(props.styles)(<STitle render={Text} tag=\"h4\" />);\n}\n\nfunction Description(props) {\n const SDescription = Root;\n return sstyled(props.styles)(<SDescription render={Text} />);\n}\n\nfunction Back(props) {\n const SBack = Root;\n const SBackText = Text;\n const { Children, styles } = props;\n\n return sstyled(styles)(\n <SBack render={Box}>\n <ArrowLeft />\n <SBackText>\n <Children />\n </SBackText>\n </SBack>,\n );\n}\n\nconst FullscreenModal = createComponent(\n FullscreenModalRoot,\n {\n Header,\n Footer,\n Close,\n Back,\n Body,\n Section,\n Title,\n Description,\n },\n { parent: Modal },\n);\n\nexport default FullscreenModal;\n"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './FullscreenModal';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
|
@@ -38,22 +38,22 @@ var style = (
|
|
|
38
38
|
/*__reshadow_css_start__*/
|
|
39
39
|
_sstyled.insert(
|
|
40
40
|
/*__inner_css_start__*/
|
|
41
|
-
".
|
|
41
|
+
".___SFullscreenOverlay_aa6od_gg_{padding:0}.___SFullscreenModal_aa6od_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_aa6od_gg_,.___SClose_aa6od_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_aa6od_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_aa6od_gg_:hover{color:#8a8e9b}.___SBack_aa6od_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_aa6od_gg_:hover{color:#484a54}.___SBackText_aa6od_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_aa6od_gg_,.___STitle_aa6od_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_aa6od_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_aa6od_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_aa6od_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_aa6od_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_aa6od_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_aa6od_gg_{display:flex;height:100%;overflow:auto}.___SSection_aa6od_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_aa6od_gg_{transition:none}}"
|
|
42
42
|
/*__inner_css_end__*/
|
|
43
|
-
, "
|
|
43
|
+
, "aa6od_gg_")
|
|
44
44
|
/*__reshadow_css_end__*/
|
|
45
45
|
, {
|
|
46
|
-
"__SFullscreenOverlay": "
|
|
47
|
-
"__SFullscreenModal": "
|
|
48
|
-
"__SBack": "
|
|
49
|
-
"__SClose": "
|
|
50
|
-
"__SBackText": "
|
|
51
|
-
"__SDescription": "
|
|
52
|
-
"__STitle": "
|
|
53
|
-
"__SHeader": "
|
|
54
|
-
"__SFooter": "
|
|
55
|
-
"__SBody": "
|
|
56
|
-
"__SSection": "
|
|
46
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_aa6od_gg_",
|
|
47
|
+
"__SFullscreenModal": "___SFullscreenModal_aa6od_gg_",
|
|
48
|
+
"__SBack": "___SBack_aa6od_gg_",
|
|
49
|
+
"__SClose": "___SClose_aa6od_gg_",
|
|
50
|
+
"__SBackText": "___SBackText_aa6od_gg_",
|
|
51
|
+
"__SDescription": "___SDescription_aa6od_gg_",
|
|
52
|
+
"__STitle": "___STitle_aa6od_gg_",
|
|
53
|
+
"__SHeader": "___SHeader_aa6od_gg_",
|
|
54
|
+
"__SFooter": "___SFooter_aa6od_gg_",
|
|
55
|
+
"__SBody": "___SBody_aa6od_gg_",
|
|
56
|
+
"__SSection": "___SSection_aa6od_gg_"
|
|
57
57
|
});
|
|
58
58
|
|
|
59
59
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"FullscreenModal.js","names":["React","createComponent","Component","sstyled","Root","Modal","Flex","Box","CloseIcon","ArrowLeft","Text","fire","FullscreenModalRoot","trigger","e","onClick","bindHandlerClose","SFullscreenModal","Window","asProps","styles","Children","onClose","visible","closable","duration","disablePortal","SFullscreenOverlay","Overlay","style","Header","props","SHeader","title","description","Body","SBody","Section","SSection","Footer","SFooter","Close","SClose","Title","STitle","Description","SDescription","Back","SBack","SBackText","FullscreenModal","parent"],"sources":["../../src/FullscreenModal.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Modal from '@semcore/modal';\nimport { Flex, Box } from '@semcore/flex-box';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport ArrowLeft from '@semcore/icon/ArrowLeft/m';\nimport { Text } from '@semcore/typography';\nimport fire from '@semcore/utils/lib/fire';\n\nimport style from './style/fullscreen-modal.shadow.css';\n\nclass FullscreenModalRoot extends Component {\n static displayName = 'FullscreenModal';\n static style = style;\n\n bindHandlerClose = (trigger) => (e) => {\n fire(this, 'onClose', trigger, e);\n };\n\n getCloseProps() {\n return {\n onClick: this.bindHandlerClose('onCloseClick'),\n };\n }\n\n getBackProps() {\n return {\n onClick: this.bindHandlerClose('onBackClick'),\n };\n }\n\n render() {\n const SFullscreenModal = Root;\n const { styles, Children, onClose, visible, closable, duration, disablePortal } = this.asProps;\n const SFullscreenOverlay = Modal.Overlay;\n\n return sstyled(styles)(\n <Modal\n closable={false}\n visible={visible}\n onClose={onClose}\n duration={duration}\n disablePortal={disablePortal}\n >\n <SFullscreenOverlay>\n <SFullscreenModal render={Modal.Window}>\n {closable && <FullscreenModal.Close />}\n <Children />\n </SFullscreenModal>\n </SFullscreenOverlay>\n </Modal>,\n );\n }\n}\n\nfunction Header(props) {\n const SHeader = Root;\n const { Children, styles, title, description } = props;\n return sstyled(styles)(\n <SHeader render={Box}>\n {title && <FullscreenModal.Title children={title} />}\n {description && <FullscreenModal.Description children={description} />}\n <Children />\n </SHeader>,\n );\n}\n\nfunction Body(props) {\n const SBody = Root;\n return sstyled(props.styles)(<SBody render={Box} />);\n}\n\nfunction Section(props) {\n const SSection = Root;\n return sstyled(props.styles)(<SSection render={Box} />);\n}\n\nfunction Footer(props) {\n const SFooter = Root;\n return sstyled(props.styles)(<SFooter render={Flex} />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n return sstyled(props.styles)(<SClose render={CloseIcon} />);\n}\n\nfunction Title(props) {\n const STitle = Root;\n return sstyled(props.styles)(<STitle render={Text} tag=\"h4\" />);\n}\n\nfunction Description(props) {\n const SDescription = Root;\n return sstyled(props.styles)(<SDescription render={Text} />);\n}\n\nfunction Back(props) {\n const SBack = Root;\n const SBackText = Text;\n const { Children, styles } = props;\n\n return sstyled(styles)(\n <SBack render={Box}>\n <ArrowLeft />\n <SBackText>\n <Children />\n </SBackText>\n </SBack>,\n );\n}\n\nconst FullscreenModal = createComponent(\n FullscreenModalRoot,\n {\n Header,\n Footer,\n Close,\n Back,\n Body,\n Section,\n Title,\n Description,\n },\n { parent: Modal },\n);\n\nexport default FullscreenModal;\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './FullscreenModal';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB"}
|
package/package.json
CHANGED
package/src/FullscreenModal.jsx
DELETED
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import Modal from '@semcore/modal';
|
|
4
|
-
import { Flex, Box } from '@semcore/flex-box';
|
|
5
|
-
import CloseIcon from '@semcore/icon/Close/l';
|
|
6
|
-
import ArrowLeft from '@semcore/icon/ArrowLeft/m';
|
|
7
|
-
import { Text } from '@semcore/typography';
|
|
8
|
-
import fire from '@semcore/utils/lib/fire';
|
|
9
|
-
|
|
10
|
-
import style from './style/fullscreen-modal.shadow.css';
|
|
11
|
-
|
|
12
|
-
class FullscreenModalRoot extends Component {
|
|
13
|
-
static displayName = 'FullscreenModal';
|
|
14
|
-
static style = style;
|
|
15
|
-
|
|
16
|
-
bindHandlerClose = (trigger) => (e) => {
|
|
17
|
-
fire(this, 'onClose', trigger, e);
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
getCloseProps() {
|
|
21
|
-
return {
|
|
22
|
-
onClick: this.bindHandlerClose('onCloseClick'),
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
getBackProps() {
|
|
27
|
-
return {
|
|
28
|
-
onClick: this.bindHandlerClose('onBackClick'),
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
render() {
|
|
33
|
-
const SFullscreenModal = Root;
|
|
34
|
-
const { styles, Children, onClose, visible, closable, duration, disablePortal } = this.asProps;
|
|
35
|
-
const SFullscreenOverlay = Modal.Overlay;
|
|
36
|
-
|
|
37
|
-
return sstyled(styles)(
|
|
38
|
-
<Modal
|
|
39
|
-
closable={false}
|
|
40
|
-
visible={visible}
|
|
41
|
-
onClose={onClose}
|
|
42
|
-
duration={duration}
|
|
43
|
-
disablePortal={disablePortal}
|
|
44
|
-
>
|
|
45
|
-
<SFullscreenOverlay>
|
|
46
|
-
<SFullscreenModal render={Modal.Window}>
|
|
47
|
-
{closable && <FullscreenModal.Close />}
|
|
48
|
-
<Children />
|
|
49
|
-
</SFullscreenModal>
|
|
50
|
-
</SFullscreenOverlay>
|
|
51
|
-
</Modal>,
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function Header(props) {
|
|
57
|
-
const SHeader = Root;
|
|
58
|
-
const { Children, styles, title, description } = props;
|
|
59
|
-
return sstyled(styles)(
|
|
60
|
-
<SHeader render={Box}>
|
|
61
|
-
{title && <FullscreenModal.Title children={title} />}
|
|
62
|
-
{description && <FullscreenModal.Description children={description} />}
|
|
63
|
-
<Children />
|
|
64
|
-
</SHeader>,
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function Body(props) {
|
|
69
|
-
const SBody = Root;
|
|
70
|
-
return sstyled(props.styles)(<SBody render={Box} />);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function Section(props) {
|
|
74
|
-
const SSection = Root;
|
|
75
|
-
return sstyled(props.styles)(<SSection render={Box} />);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function Footer(props) {
|
|
79
|
-
const SFooter = Root;
|
|
80
|
-
return sstyled(props.styles)(<SFooter render={Flex} />);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function Close(props) {
|
|
84
|
-
const SClose = Root;
|
|
85
|
-
return sstyled(props.styles)(<SClose render={CloseIcon} />);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
function Title(props) {
|
|
89
|
-
const STitle = Root;
|
|
90
|
-
return sstyled(props.styles)(<STitle render={Text} tag="h4" />);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
function Description(props) {
|
|
94
|
-
const SDescription = Root;
|
|
95
|
-
return sstyled(props.styles)(<SDescription render={Text} />);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function Back(props) {
|
|
99
|
-
const SBack = Root;
|
|
100
|
-
const SBackText = Text;
|
|
101
|
-
const { Children, styles } = props;
|
|
102
|
-
|
|
103
|
-
return sstyled(styles)(
|
|
104
|
-
<SBack render={Box}>
|
|
105
|
-
<ArrowLeft />
|
|
106
|
-
<SBackText>
|
|
107
|
-
<Children />
|
|
108
|
-
</SBackText>
|
|
109
|
-
</SBack>,
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const FullscreenModal = createComponent(
|
|
114
|
-
FullscreenModalRoot,
|
|
115
|
-
{
|
|
116
|
-
Header,
|
|
117
|
-
Footer,
|
|
118
|
-
Close,
|
|
119
|
-
Back,
|
|
120
|
-
Body,
|
|
121
|
-
Section,
|
|
122
|
-
Title,
|
|
123
|
-
Description,
|
|
124
|
-
},
|
|
125
|
-
{ parent: Modal },
|
|
126
|
-
);
|
|
127
|
-
|
|
128
|
-
export default FullscreenModal;
|
package/src/index.d.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { ComponentProps } from 'react';
|
|
2
|
-
import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
|
|
3
|
-
import { IModalProps } from '@semcore/modal';
|
|
4
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
5
|
-
import { IIconProps } from '@semcore/icon';
|
|
6
|
-
import { Text } from '@semcore/typography';
|
|
7
|
-
|
|
8
|
-
export interface IFullscreenModalProps extends IModalProps {
|
|
9
|
-
/** This property is responsible for the visibility of the modal window */
|
|
10
|
-
hidden?: boolean;
|
|
11
|
-
/** Function that is invoked when hiding a component */
|
|
12
|
-
onClose?: (
|
|
13
|
-
trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',
|
|
14
|
-
e?: React.MouseEvent | React.KeyboardEvent,
|
|
15
|
-
) => void;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export interface IFullscreenModalHeaderProps extends IBoxProps {
|
|
19
|
-
title?: React.ReactNode;
|
|
20
|
-
description?: React.ReactNode;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface IFullscreenModalContext {
|
|
24
|
-
getBackProps: PropGetterFn;
|
|
25
|
-
getCloseProps: PropGetterFn;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
declare const FullscreenModal: (<T>(
|
|
29
|
-
props: CProps<IFullscreenModalProps & T, IFullscreenModalContext>,
|
|
30
|
-
) => ReturnEl) & {
|
|
31
|
-
Header: <T>(props: IFullscreenModalHeaderProps & T) => ReturnEl;
|
|
32
|
-
Footer: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
33
|
-
Close: <T>(props: IIconProps & T) => ReturnEl;
|
|
34
|
-
Back: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
35
|
-
Body: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
36
|
-
Section: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
37
|
-
Title: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
|
|
38
|
-
Description: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export default FullscreenModal;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './FullscreenModal';
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SFullscreenOverlay {
|
|
4
|
-
padding: 0;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
SFullscreenModal {
|
|
8
|
-
height: 100%;
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
width: 100%;
|
|
12
|
-
background: var(--white);
|
|
13
|
-
border-radius: 0;
|
|
14
|
-
padding: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
SClose,
|
|
18
|
-
SBack {
|
|
19
|
-
cursor: pointer;
|
|
20
|
-
position: absolute;
|
|
21
|
-
z-index: 1;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
SClose {
|
|
25
|
-
top: 17px;
|
|
26
|
-
right: 23px;
|
|
27
|
-
padding: 12px;
|
|
28
|
-
color: var(--gray-300);
|
|
29
|
-
|
|
30
|
-
&:hover {
|
|
31
|
-
color: var(--gray-400);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
SBack {
|
|
36
|
-
top: 8px;
|
|
37
|
-
left: 32px;
|
|
38
|
-
display: flex;
|
|
39
|
-
align-items: center;
|
|
40
|
-
margin-bottom: 12px;
|
|
41
|
-
color: var(--gray-500);
|
|
42
|
-
font-size: var(--fs-100);
|
|
43
|
-
line-height: var(--lh-100);
|
|
44
|
-
|
|
45
|
-
&:hover {
|
|
46
|
-
color: var(--gray-600);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
SBackText {
|
|
51
|
-
margin-left: 4px;
|
|
52
|
-
font-size: var(--fs-200);
|
|
53
|
-
line-height: var(--lh-200);
|
|
54
|
-
white-space: nowrap;
|
|
55
|
-
overflow: hidden;
|
|
56
|
-
text-overflow: ellipsis;
|
|
57
|
-
}
|
|
58
|
-
STitle,
|
|
59
|
-
SDescription {
|
|
60
|
-
white-space: nowrap;
|
|
61
|
-
overflow: hidden;
|
|
62
|
-
text-overflow: ellipsis;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
STitle {
|
|
66
|
-
font-size: var(--fs-500);
|
|
67
|
-
line-height: var(--lh-500);
|
|
68
|
-
font-weight: 700;
|
|
69
|
-
color: var(--gray-800);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
SDescription {
|
|
73
|
-
display: flex;
|
|
74
|
-
align-items: baseline;
|
|
75
|
-
font-size: var(--fs-100);
|
|
76
|
-
line-height: var(--lh-100);
|
|
77
|
-
color: var(--gray-500);
|
|
78
|
-
|
|
79
|
-
&::before {
|
|
80
|
-
content: '';
|
|
81
|
-
position: relative;
|
|
82
|
-
top: 4px;
|
|
83
|
-
display: block;
|
|
84
|
-
margin-left: 12px;
|
|
85
|
-
margin-right: 12px;
|
|
86
|
-
height: 24px;
|
|
87
|
-
width: 1px;
|
|
88
|
-
background-color: var(--gray-200);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
SHeader {
|
|
93
|
-
display: flex;
|
|
94
|
-
align-items: baseline;
|
|
95
|
-
padding-left: 32px;
|
|
96
|
-
padding-bottom: 8px;
|
|
97
|
-
padding-right: 72px;
|
|
98
|
-
padding-top: 40px;
|
|
99
|
-
min-height: 76px;
|
|
100
|
-
box-shadow: inset 0 -1px 0 var(--gray-200);
|
|
101
|
-
box-sizing: border-box;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
SFooter {
|
|
105
|
-
min-height: 52px;
|
|
106
|
-
box-shadow: inset 0 1px 1px 0 var(--gray-200);
|
|
107
|
-
box-sizing: border-box;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
SBody {
|
|
111
|
-
display: flex;
|
|
112
|
-
height: 100%;
|
|
113
|
-
overflow: auto;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
SSection {
|
|
117
|
-
padding-top: 24px;
|
|
118
|
-
padding-bottom: 24px;
|
|
119
|
-
padding-left: 32px;
|
|
120
|
-
padding-right: 32px;
|
|
121
|
-
flex: 1 1 auto;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
@media (prefers-reduced-motion) {
|
|
125
|
-
SBackText {
|
|
126
|
-
transition: none;
|
|
127
|
-
}
|
|
128
|
-
}
|