@semcore/fullscreen-modal 1.6.4 → 2.0.1
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 +20 -0
- package/lib/cjs/FullscreenModal.js +17 -28
- package/lib/cjs/FullscreenModal.js.map +1 -1
- package/lib/cjs/style/fullscreen-modal.shadow.css +39 -36
- package/lib/es6/FullscreenModal.js +18 -26
- package/lib/es6/FullscreenModal.js.map +1 -1
- package/lib/es6/style/fullscreen-modal.shadow.css +39 -36
- package/package.json +3 -3
- package/src/FullscreenModal.jsx +4 -28
- package/src/style/fullscreen-modal.shadow.css +39 -36
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.0.1] - 2022-05-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0]).
|
|
10
|
+
|
|
11
|
+
## [2.0.0] - 2022-05-17
|
|
12
|
+
|
|
13
|
+
### BREAK
|
|
14
|
+
|
|
15
|
+
- Remove support property `hidden` for `FullscreenModal`.
|
|
16
|
+
- `Footer` now use inside component `Flex`
|
|
17
|
+
- Updated styles according to the library redesign policy.
|
|
18
|
+
|
|
19
|
+
## [1.6.5] - 2022-05-16
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
|
|
23
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
|
|
24
|
+
|
|
5
25
|
## [1.6.4] - 2022-04-28
|
|
6
26
|
|
|
7
27
|
### Changed
|
|
@@ -39,8 +39,6 @@ var _typography = require("@semcore/typography");
|
|
|
39
39
|
|
|
40
40
|
var _fire = _interopRequireDefault(require("@semcore/utils/lib/fire"));
|
|
41
41
|
|
|
42
|
-
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
43
|
-
|
|
44
42
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
45
43
|
|
|
46
44
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -58,25 +56,22 @@ var style = (
|
|
|
58
56
|
/*__reshadow_css_start__*/
|
|
59
57
|
_core.sstyled.insert(
|
|
60
58
|
/*__inner_css_start__*/
|
|
61
|
-
".
|
|
59
|
+
".___SFullscreenOverlay_tysu9_gg_{padding:0}.___SFullscreenModal_tysu9_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_tysu9_gg_,.___SClose_tysu9_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_tysu9_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_tysu9_gg_:hover{color:#8a8e9b}.___SBack_tysu9_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_tysu9_gg_:hover{color:#484a54}.___SBackText_tysu9_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_tysu9_gg_,.___STitle_tysu9_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_tysu9_gg_{font-size:24px;line-height:1.17;font-weight:700;color:#191b23}.___SDescription_tysu9_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_tysu9_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_tysu9_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_tysu9_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_tysu9_gg_{display:flex;height:100%;overflow:auto}.___SSection_tysu9_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_tysu9_gg_{transition:none}}"
|
|
62
60
|
/*__inner_css_end__*/
|
|
63
|
-
, "
|
|
61
|
+
, "cdmogf_gg_")
|
|
64
62
|
/*__reshadow_css_end__*/
|
|
65
63
|
, {
|
|
66
|
-
"__SFullscreenOverlay": "
|
|
67
|
-
"__SFullscreenModal": "
|
|
68
|
-
"__SBack": "
|
|
69
|
-
"__SClose": "
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"__SBody": "___SBody_1hvvo_gg_",
|
|
78
|
-
"__SSection": "___SSection_1hvvo_gg_",
|
|
79
|
-
"__SHeaderDivider": "___SHeaderDivider_1hvvo_gg_"
|
|
64
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_tysu9_gg_",
|
|
65
|
+
"__SFullscreenModal": "___SFullscreenModal_tysu9_gg_",
|
|
66
|
+
"__SBack": "___SBack_tysu9_gg_",
|
|
67
|
+
"__SClose": "___SClose_tysu9_gg_",
|
|
68
|
+
"__SBackText": "___SBackText_tysu9_gg_",
|
|
69
|
+
"__SDescription": "___SDescription_tysu9_gg_",
|
|
70
|
+
"__STitle": "___STitle_tysu9_gg_",
|
|
71
|
+
"__SHeader": "___SHeader_tysu9_gg_",
|
|
72
|
+
"__SFooter": "___SFooter_tysu9_gg_",
|
|
73
|
+
"__SBody": "___SBody_tysu9_gg_",
|
|
74
|
+
"__SSection": "___SSection_tysu9_gg_"
|
|
80
75
|
});
|
|
81
76
|
|
|
82
77
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -125,18 +120,13 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
125
120
|
var SFullscreenModal = _modal["default"].Window;
|
|
126
121
|
var _this$asProps = this.asProps,
|
|
127
122
|
styles = _this$asProps.styles,
|
|
128
|
-
hidden = _this$asProps.hidden,
|
|
129
123
|
Children = _this$asProps.Children,
|
|
130
124
|
onClose = _this$asProps.onClose,
|
|
131
|
-
|
|
125
|
+
visible = _this$asProps.visible,
|
|
132
126
|
closable = _this$asProps.closable,
|
|
133
127
|
duration = _this$asProps.duration,
|
|
134
128
|
disablePortal = _this$asProps.disablePortal;
|
|
135
129
|
var SFullscreenOverlay = _modal["default"].Overlay;
|
|
136
|
-
|
|
137
|
-
_logger["default"].warn(hidden !== undefined, "The 'hidden' property is deprecated, use 'visible'", this.asProps['data-ui-name'] || FullscreenModalRoot.displayName);
|
|
138
|
-
|
|
139
|
-
var visible = visibleProps === undefined ? !hidden : visibleProps;
|
|
140
130
|
return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_modal["default"], _ref10.cn("Modal", {
|
|
141
131
|
"closable": false,
|
|
142
132
|
"visible": visible,
|
|
@@ -157,16 +147,15 @@ function Header(props) {
|
|
|
157
147
|
_ref11;
|
|
158
148
|
|
|
159
149
|
var SHeader = _flexBox.Box;
|
|
160
|
-
var SHeaderDivider = 'div';
|
|
161
150
|
var Children = props.Children,
|
|
162
151
|
styles = props.styles,
|
|
163
152
|
title = props.title,
|
|
164
153
|
description = props.description;
|
|
165
154
|
return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref11.cn("SHeader", _objectSpread({}, (0, _core.assignProps)({}, _ref2))), title && /*#__PURE__*/_react["default"].createElement(FullscreenModal.Title, {
|
|
166
155
|
children: title
|
|
167
|
-
}), description && /*#__PURE__*/_react["default"].createElement(
|
|
156
|
+
}), description && /*#__PURE__*/_react["default"].createElement(FullscreenModal.Description, {
|
|
168
157
|
children: description
|
|
169
|
-
})
|
|
158
|
+
}), /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})));
|
|
170
159
|
}
|
|
171
160
|
|
|
172
161
|
function Body(props) {
|
|
@@ -189,7 +178,7 @@ function Footer(props) {
|
|
|
189
178
|
var _ref5 = arguments[0],
|
|
190
179
|
_ref14;
|
|
191
180
|
|
|
192
|
-
var SFooter = _flexBox.
|
|
181
|
+
var SFooter = _flexBox.Flex;
|
|
193
182
|
return _ref14 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SFooter, _ref14.cn("SFooter", _objectSpread({}, (0, _core.assignProps)({}, _ref5))));
|
|
194
183
|
}
|
|
195
184
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FullscreenModal.jsx"],"names":["FullscreenModalRoot","trigger","e","onClick","bindHandlerClose","SFullscreenModal","Modal","Window","asProps","styles","
|
|
1
|
+
{"version":3,"sources":["../../src/FullscreenModal.jsx"],"names":["FullscreenModalRoot","trigger","e","onClick","bindHandlerClose","SFullscreenModal","Modal","Window","asProps","styles","Children","onClose","visible","closable","duration","disablePortal","SFullscreenOverlay","Overlay","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","parent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,mB;;;;;;;;;;;;;;;yGAIe,UAACC,OAAD;AAAA,aAAa,UAACC,CAAD,EAAO;AACrC,8EAAW,SAAX,EAAsBD,OAAtB,EAA+BC,CAA/B;AACD,OAFkB;AAAA,K;;;;;;WAInB,yBAAgB;AACd,aAAO;AACLC,QAAAA,OAAO,EAAE,KAAKC,gBAAL,CAAsB,cAAtB;AADJ,OAAP;AAGD;;;WAED,wBAAe;AACb,aAAO;AACLD,QAAAA,OAAO,EAAE,KAAKC,gBAAL,CAAsB,aAAtB;AADJ,OAAP;AAGD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,gBAAgB,GAaUC,kBAAMC,MAbtC;AACA,0BAAkF,KAAKC,OAAvF;AAAA,UAAQC,MAAR,iBAAQA,MAAR;AAAA,UAAgBC,QAAhB,iBAAgBA,QAAhB;AAAA,UAA0BC,OAA1B,iBAA0BA,OAA1B;AAAA,UAAmCC,OAAnC,iBAAmCA,OAAnC;AAAA,UAA4CC,QAA5C,iBAA4CA,QAA5C;AAAA,UAAsDC,QAAtD,iBAAsDA,QAAtD;AAAA,UAAgEC,aAAhE,iBAAgEA,aAAhE;AACA,UAAMC,kBAAkB,GAAGV,kBAAMW,OAAjC;AAEA,sBAAO,mBAAQR,MAAR,CAAP,eACE,gCAAC,iBAAD;AAAA,oBACY,KADZ;AAAA,mBAEWG,OAFX;AAAA,mBAGWD,OAHX;AAAA,oBAIYG,QAJZ;AAAA,yBAKiBC;AALjB,uBAOE,gCAAC,kBAAD,oDACE,gCAAC,gBAAD,sFACGF,QAAQ,iBAAI,gCAAC,eAAD,CAAiB,KAAjB,OADf,eAEE,gCAAC,QAAD,4BAFF,CADF,CAPF,CADF;AAgBD;;;EAzC+BK,e;;iCAA5BlB,mB,iBACiB,iB;iCADjBA,mB,WAEWmB,K;;AA0CjB,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAAA;AAAA;;AACrB,MAAMC,OAAO,GAGMC,YAHnB;AACA,MAAQb,QAAR,GAAiDW,KAAjD,CAAQX,QAAR;AAAA,MAAkBD,MAAlB,GAAiDY,KAAjD,CAAkBZ,MAAlB;AAAA,MAA0Be,KAA1B,GAAiDH,KAAjD,CAA0BG,KAA1B;AAAA,MAAiCC,WAAjC,GAAiDJ,KAAjD,CAAiCI,WAAjC;AACA,kBAAO,mBAAQhB,MAAR,CAAP,eACE,gCAAC,OAAD,8EACGe,KAAK,iBAAI,gCAAC,eAAD,CAAiB,KAAjB;AAAuB,IAAA,QAAQ,EAAEA;AAAjC,IADZ,EAEGC,WAAW,iBAAI,gCAAC,eAAD,CAAiB,WAAjB;AAA6B,IAAA,QAAQ,EAAEA;AAAvC,IAFlB,eAGE,gCAAC,QAAD,4BAHF,CADF;AAOD;;AAED,SAASC,IAAT,CAAcL,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMM,KAAK,GACiCJ,YAD5C;AACA,kBAAO,mBAAQF,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,KAAD,2EAA7B;AACD;;AAED,SAASmB,OAAT,CAAiBP,KAAjB,EAAwB;AAAA;AAAA;;AACtB,MAAMQ,QAAQ,GACiCN,YAD/C;AACA,kBAAO,mBAAQF,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,QAAD,8EAA7B;AACD;;AAED,SAASqB,MAAT,CAAgBT,KAAhB,EAAuB;AAAA;AAAA;;AACrB,MAAMU,OAAO,GACiCC,aAD9C;AACA,kBAAO,mBAAQX,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,OAAD,6EAA7B;AACD;;AAED,SAASwB,KAAT,CAAeZ,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMa,MAAM,GACiCC,aAD7C;AACA,kBAAO,mBAAQd,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,MAAD,4EAA7B;AACD;;AAED,SAAS2B,KAAT,CAAef,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMgB,MAAM,GACiCC,gBAD7C;AACA,kBAAO,mBAAQjB,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,MAAD;AAAA,WAA0B;AAA1B,cAA7B;AACD;;AAED,SAAS8B,WAAT,CAAqBlB,KAArB,EAA4B;AAAA;AAAA;;AAC1B,MAAMmB,YAAY,GACiCF,gBADnD;AACA,kBAAO,mBAAQjB,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,YAAD,kFAA7B;AACD;;AAED,SAASgC,IAAT,CAAcpB,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMqB,KAAK,GAKMnB,YALjB;AACA,MAAMoB,SAAS,GAAGL,gBAAlB;AACA,MAAQ5B,QAAR,GAA6BW,KAA7B,CAAQX,QAAR;AAAA,MAAkBD,MAAlB,GAA6BY,KAA7B,CAAkBZ,MAAlB;AAEA,kBAAO,mBAAQA,MAAR,CAAP,eACE,gCAAC,KAAD,yFACE,gCAAC,aAAD,6BADF,eAEE,gCAAC,SAAD,2CACE,gCAAC,QAAD,4BADF,CAFF,CADF;AAQD;;AAED,IAAMmC,eAAe,GAAG,sBACtB5C,mBADsB,EAEtB;AACEoB,EAAAA,MAAM,EAANA,MADF;AAEEU,EAAAA,MAAM,EAANA,MAFF;AAGEG,EAAAA,KAAK,EAALA,KAHF;AAIEQ,EAAAA,IAAI,EAAJA,IAJF;AAKEf,EAAAA,IAAI,EAAJA,IALF;AAMEE,EAAAA,OAAO,EAAPA,OANF;AAOEQ,EAAAA,KAAK,EAALA,KAPF;AAQEG,EAAAA,WAAW,EAAXA;AARF,CAFsB,EAYtB;AAAEM,EAAAA,MAAM,EAAEvC;AAAV,CAZsB,CAAxB;eAeesC,e","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"],"file":"FullscreenModal.js"}
|
|
@@ -22,41 +22,38 @@ SBack {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
SClose {
|
|
25
|
-
top:
|
|
26
|
-
right:
|
|
25
|
+
top: 17px;
|
|
26
|
+
right: 23px;
|
|
27
27
|
padding: 12px;
|
|
28
|
-
color: var(--
|
|
28
|
+
color: var(--gray-300);
|
|
29
29
|
|
|
30
30
|
&:hover {
|
|
31
|
-
color:
|
|
31
|
+
color: var(--gray-400);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
SBack {
|
|
36
|
-
top:
|
|
36
|
+
top: 8px;
|
|
37
37
|
left: 32px;
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
|
-
|
|
41
|
-
color: var(--
|
|
42
|
-
font-size: var(--
|
|
43
|
-
line-height: var(--
|
|
40
|
+
margin-bottom: 12px;
|
|
41
|
+
color: var(--gray-500);
|
|
42
|
+
font-size: var(--fs-100);
|
|
43
|
+
line-height: var(--lh-100);
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
color:
|
|
47
|
-
|
|
48
|
-
& SBackText {
|
|
49
|
-
border-bottom-color: currentColor;
|
|
50
|
-
}
|
|
46
|
+
color: var(--gray-600);
|
|
51
47
|
}
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
SBackText {
|
|
55
51
|
margin-left: 4px;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
font-size: var(--fs-200);
|
|
53
|
+
line-height: var(--lh-200);
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
60
57
|
}
|
|
61
58
|
STitle,
|
|
62
59
|
SDescription {
|
|
@@ -68,31 +65,45 @@ SDescription {
|
|
|
68
65
|
STitle {
|
|
69
66
|
font-size: var(--fs-500);
|
|
70
67
|
line-height: var(--lh-500);
|
|
71
|
-
font-weight:
|
|
72
|
-
color: var(--
|
|
68
|
+
font-weight: 700;
|
|
69
|
+
color: var(--gray-800);
|
|
73
70
|
}
|
|
74
71
|
|
|
75
72
|
SDescription {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: baseline;
|
|
76
75
|
font-size: var(--fs-100);
|
|
77
76
|
line-height: var(--lh-100);
|
|
78
|
-
color: var(--
|
|
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
|
+
}
|
|
79
90
|
}
|
|
80
91
|
|
|
81
92
|
SHeader {
|
|
82
93
|
display: flex;
|
|
83
94
|
align-items: baseline;
|
|
84
95
|
padding-left: 32px;
|
|
85
|
-
padding-bottom:
|
|
86
|
-
padding-right:
|
|
87
|
-
padding-top:
|
|
88
|
-
min-height:
|
|
89
|
-
box-shadow: inset 0 -1px
|
|
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);
|
|
90
101
|
box-sizing: border-box;
|
|
91
102
|
}
|
|
92
103
|
|
|
93
104
|
SFooter {
|
|
94
|
-
min-height:
|
|
95
|
-
box-shadow: inset 0 1px 1px 0 var(--
|
|
105
|
+
min-height: 52px;
|
|
106
|
+
box-shadow: inset 0 1px 1px 0 var(--gray-200);
|
|
96
107
|
box-sizing: border-box;
|
|
97
108
|
}
|
|
98
109
|
|
|
@@ -110,14 +121,6 @@ SSection {
|
|
|
110
121
|
flex: 1 1 auto;
|
|
111
122
|
}
|
|
112
123
|
|
|
113
|
-
SHeaderDivider {
|
|
114
|
-
margin-left: 12px;
|
|
115
|
-
margin-right: 12px;
|
|
116
|
-
height: 16px;
|
|
117
|
-
width: 1px;
|
|
118
|
-
background-color: var(--gray80);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
124
|
@media (prefers-reduced-motion) {
|
|
122
125
|
SBackText {
|
|
123
126
|
transition: none;
|
|
@@ -27,37 +27,33 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
27
27
|
import React from 'react';
|
|
28
28
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
29
29
|
import Modal from '@semcore/modal';
|
|
30
|
-
import { Box } from '@semcore/flex-box';
|
|
30
|
+
import { Flex, Box } from '@semcore/flex-box';
|
|
31
31
|
import CloseIcon from '@semcore/icon/Close/l';
|
|
32
32
|
import ArrowLeft from '@semcore/icon/ArrowLeft/m';
|
|
33
33
|
import { Text } from '@semcore/typography';
|
|
34
34
|
import fire from '@semcore/utils/lib/fire';
|
|
35
|
-
import logger from '@semcore/utils/lib/logger';
|
|
36
35
|
|
|
37
36
|
/*__reshadow-styles__:"./style/fullscreen-modal.shadow.css"*/
|
|
38
37
|
var style = (
|
|
39
38
|
/*__reshadow_css_start__*/
|
|
40
39
|
_sstyled.insert(
|
|
41
40
|
/*__inner_css_start__*/
|
|
42
|
-
".
|
|
41
|
+
".___SFullscreenOverlay_tysu9_gg_{padding:0}.___SFullscreenModal_tysu9_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_tysu9_gg_,.___SClose_tysu9_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_tysu9_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_tysu9_gg_:hover{color:#8a8e9b}.___SBack_tysu9_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_tysu9_gg_:hover{color:#484a54}.___SBackText_tysu9_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_tysu9_gg_,.___STitle_tysu9_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_tysu9_gg_{font-size:24px;line-height:1.17;font-weight:700;color:#191b23}.___SDescription_tysu9_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_tysu9_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_tysu9_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_tysu9_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_tysu9_gg_{display:flex;height:100%;overflow:auto}.___SSection_tysu9_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_tysu9_gg_{transition:none}}"
|
|
43
42
|
/*__inner_css_end__*/
|
|
44
|
-
, "
|
|
43
|
+
, "cdmogf_gg_")
|
|
45
44
|
/*__reshadow_css_end__*/
|
|
46
45
|
, {
|
|
47
|
-
"__SFullscreenOverlay": "
|
|
48
|
-
"__SFullscreenModal": "
|
|
49
|
-
"__SBack": "
|
|
50
|
-
"__SClose": "
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"__SBody": "___SBody_1hvvo_gg_",
|
|
59
|
-
"__SSection": "___SSection_1hvvo_gg_",
|
|
60
|
-
"__SHeaderDivider": "___SHeaderDivider_1hvvo_gg_"
|
|
46
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_tysu9_gg_",
|
|
47
|
+
"__SFullscreenModal": "___SFullscreenModal_tysu9_gg_",
|
|
48
|
+
"__SBack": "___SBack_tysu9_gg_",
|
|
49
|
+
"__SClose": "___SClose_tysu9_gg_",
|
|
50
|
+
"__SBackText": "___SBackText_tysu9_gg_",
|
|
51
|
+
"__SDescription": "___SDescription_tysu9_gg_",
|
|
52
|
+
"__STitle": "___STitle_tysu9_gg_",
|
|
53
|
+
"__SHeader": "___SHeader_tysu9_gg_",
|
|
54
|
+
"__SFooter": "___SFooter_tysu9_gg_",
|
|
55
|
+
"__SBody": "___SBody_tysu9_gg_",
|
|
56
|
+
"__SSection": "___SSection_tysu9_gg_"
|
|
61
57
|
});
|
|
62
58
|
|
|
63
59
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -108,16 +104,13 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
108
104
|
var SFullscreenModal = Modal.Window;
|
|
109
105
|
var _this$asProps = this.asProps,
|
|
110
106
|
styles = _this$asProps.styles,
|
|
111
|
-
hidden = _this$asProps.hidden,
|
|
112
107
|
Children = _this$asProps.Children,
|
|
113
108
|
onClose = _this$asProps.onClose,
|
|
114
|
-
|
|
109
|
+
visible = _this$asProps.visible,
|
|
115
110
|
closable = _this$asProps.closable,
|
|
116
111
|
duration = _this$asProps.duration,
|
|
117
112
|
disablePortal = _this$asProps.disablePortal;
|
|
118
113
|
var SFullscreenOverlay = Modal.Overlay;
|
|
119
|
-
logger.warn(hidden !== undefined, "The 'hidden' property is deprecated, use 'visible'", this.asProps['data-ui-name'] || FullscreenModalRoot.displayName);
|
|
120
|
-
var visible = visibleProps === undefined ? !hidden : visibleProps;
|
|
121
114
|
return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(Modal, _ref10.cn("Modal", {
|
|
122
115
|
"closable": false,
|
|
123
116
|
"visible": visible,
|
|
@@ -140,16 +133,15 @@ function Header(props) {
|
|
|
140
133
|
_ref11;
|
|
141
134
|
|
|
142
135
|
var SHeader = Box;
|
|
143
|
-
var SHeaderDivider = 'div';
|
|
144
136
|
var Children = props.Children,
|
|
145
137
|
styles = props.styles,
|
|
146
138
|
title = props.title,
|
|
147
139
|
description = props.description;
|
|
148
140
|
return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SHeader, _ref11.cn("SHeader", _objectSpread({}, _assignProps2({}, _ref2))), title && /*#__PURE__*/React.createElement(FullscreenModal.Title, {
|
|
149
141
|
children: title
|
|
150
|
-
}), description && /*#__PURE__*/React.createElement(
|
|
142
|
+
}), description && /*#__PURE__*/React.createElement(FullscreenModal.Description, {
|
|
151
143
|
children: description
|
|
152
|
-
})
|
|
144
|
+
}), /*#__PURE__*/React.createElement(Children, _ref11.cn("Children", {})));
|
|
153
145
|
}
|
|
154
146
|
|
|
155
147
|
function Body(props) {
|
|
@@ -172,7 +164,7 @@ function Footer(props) {
|
|
|
172
164
|
var _ref5 = arguments[0],
|
|
173
165
|
_ref14;
|
|
174
166
|
|
|
175
|
-
var SFooter =
|
|
167
|
+
var SFooter = Flex;
|
|
176
168
|
return _ref14 = sstyled(props.styles), /*#__PURE__*/React.createElement(SFooter, _ref14.cn("SFooter", _objectSpread({}, _assignProps5({}, _ref5))));
|
|
177
169
|
}
|
|
178
170
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FullscreenModal.jsx"],"names":["React","createComponent","Component","sstyled","Root","Modal","Box","CloseIcon","ArrowLeft","Text","fire","
|
|
1
|
+
{"version":3,"sources":["../../src/FullscreenModal.jsx"],"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"],"mappings":"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","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"],"file":"FullscreenModal.js"}
|
|
@@ -22,41 +22,38 @@ SBack {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
SClose {
|
|
25
|
-
top:
|
|
26
|
-
right:
|
|
25
|
+
top: 17px;
|
|
26
|
+
right: 23px;
|
|
27
27
|
padding: 12px;
|
|
28
|
-
color: var(--
|
|
28
|
+
color: var(--gray-300);
|
|
29
29
|
|
|
30
30
|
&:hover {
|
|
31
|
-
color:
|
|
31
|
+
color: var(--gray-400);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
SBack {
|
|
36
|
-
top:
|
|
36
|
+
top: 8px;
|
|
37
37
|
left: 32px;
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
|
-
|
|
41
|
-
color: var(--
|
|
42
|
-
font-size: var(--
|
|
43
|
-
line-height: var(--
|
|
40
|
+
margin-bottom: 12px;
|
|
41
|
+
color: var(--gray-500);
|
|
42
|
+
font-size: var(--fs-100);
|
|
43
|
+
line-height: var(--lh-100);
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
color:
|
|
47
|
-
|
|
48
|
-
& SBackText {
|
|
49
|
-
border-bottom-color: currentColor;
|
|
50
|
-
}
|
|
46
|
+
color: var(--gray-600);
|
|
51
47
|
}
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
SBackText {
|
|
55
51
|
margin-left: 4px;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
font-size: var(--fs-200);
|
|
53
|
+
line-height: var(--lh-200);
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
60
57
|
}
|
|
61
58
|
STitle,
|
|
62
59
|
SDescription {
|
|
@@ -68,31 +65,45 @@ SDescription {
|
|
|
68
65
|
STitle {
|
|
69
66
|
font-size: var(--fs-500);
|
|
70
67
|
line-height: var(--lh-500);
|
|
71
|
-
font-weight:
|
|
72
|
-
color: var(--
|
|
68
|
+
font-weight: 700;
|
|
69
|
+
color: var(--gray-800);
|
|
73
70
|
}
|
|
74
71
|
|
|
75
72
|
SDescription {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: baseline;
|
|
76
75
|
font-size: var(--fs-100);
|
|
77
76
|
line-height: var(--lh-100);
|
|
78
|
-
color: var(--
|
|
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
|
+
}
|
|
79
90
|
}
|
|
80
91
|
|
|
81
92
|
SHeader {
|
|
82
93
|
display: flex;
|
|
83
94
|
align-items: baseline;
|
|
84
95
|
padding-left: 32px;
|
|
85
|
-
padding-bottom:
|
|
86
|
-
padding-right:
|
|
87
|
-
padding-top:
|
|
88
|
-
min-height:
|
|
89
|
-
box-shadow: inset 0 -1px
|
|
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);
|
|
90
101
|
box-sizing: border-box;
|
|
91
102
|
}
|
|
92
103
|
|
|
93
104
|
SFooter {
|
|
94
|
-
min-height:
|
|
95
|
-
box-shadow: inset 0 1px 1px 0 var(--
|
|
105
|
+
min-height: 52px;
|
|
106
|
+
box-shadow: inset 0 1px 1px 0 var(--gray-200);
|
|
96
107
|
box-sizing: border-box;
|
|
97
108
|
}
|
|
98
109
|
|
|
@@ -110,14 +121,6 @@ SSection {
|
|
|
110
121
|
flex: 1 1 auto;
|
|
111
122
|
}
|
|
112
123
|
|
|
113
|
-
SHeaderDivider {
|
|
114
|
-
margin-left: 12px;
|
|
115
|
-
margin-right: 12px;
|
|
116
|
-
height: 16px;
|
|
117
|
-
width: 1px;
|
|
118
|
-
background-color: var(--gray80);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
124
|
@media (prefers-reduced-motion) {
|
|
122
125
|
SBackText {
|
|
123
126
|
transition: none;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/fullscreen-modal",
|
|
3
3
|
"description": "SEMRush FullscreenModal Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "2.0.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@semcore/utils": "^3.21",
|
|
17
17
|
"@semcore/icon": "^2.16",
|
|
18
|
-
"@semcore/modal": "^
|
|
19
|
-
"@semcore/typography": "^
|
|
18
|
+
"@semcore/modal": "^3.0.1",
|
|
19
|
+
"@semcore/typography": "^4.0.1",
|
|
20
20
|
"@semcore/flex-box": "^4"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
package/src/FullscreenModal.jsx
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
3
|
import Modal from '@semcore/modal';
|
|
4
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
+
import { Flex, Box } from '@semcore/flex-box';
|
|
5
5
|
import CloseIcon from '@semcore/icon/Close/l';
|
|
6
6
|
import ArrowLeft from '@semcore/icon/ArrowLeft/m';
|
|
7
7
|
import { Text } from '@semcore/typography';
|
|
8
8
|
import fire from '@semcore/utils/lib/fire';
|
|
9
|
-
import logger from '@semcore/utils/lib/logger';
|
|
10
9
|
|
|
11
10
|
import style from './style/fullscreen-modal.shadow.css';
|
|
12
11
|
|
|
@@ -32,26 +31,9 @@ class FullscreenModalRoot extends Component {
|
|
|
32
31
|
|
|
33
32
|
render() {
|
|
34
33
|
const SFullscreenModal = Root;
|
|
35
|
-
const {
|
|
36
|
-
styles,
|
|
37
|
-
hidden,
|
|
38
|
-
Children,
|
|
39
|
-
onClose,
|
|
40
|
-
visible: visibleProps,
|
|
41
|
-
closable,
|
|
42
|
-
duration,
|
|
43
|
-
disablePortal,
|
|
44
|
-
} = this.asProps;
|
|
34
|
+
const { styles, Children, onClose, visible, closable, duration, disablePortal } = this.asProps;
|
|
45
35
|
const SFullscreenOverlay = Modal.Overlay;
|
|
46
36
|
|
|
47
|
-
logger.warn(
|
|
48
|
-
hidden !== undefined,
|
|
49
|
-
"The 'hidden' property is deprecated, use 'visible'",
|
|
50
|
-
this.asProps['data-ui-name'] || FullscreenModalRoot.displayName,
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
const visible = visibleProps === undefined ? !hidden : visibleProps;
|
|
54
|
-
|
|
55
37
|
return sstyled(styles)(
|
|
56
38
|
<Modal
|
|
57
39
|
closable={false}
|
|
@@ -73,17 +55,11 @@ class FullscreenModalRoot extends Component {
|
|
|
73
55
|
|
|
74
56
|
function Header(props) {
|
|
75
57
|
const SHeader = Root;
|
|
76
|
-
const SHeaderDivider = 'div';
|
|
77
58
|
const { Children, styles, title, description } = props;
|
|
78
59
|
return sstyled(styles)(
|
|
79
60
|
<SHeader render={Box}>
|
|
80
61
|
{title && <FullscreenModal.Title children={title} />}
|
|
81
|
-
{description &&
|
|
82
|
-
<>
|
|
83
|
-
<SHeaderDivider />
|
|
84
|
-
<FullscreenModal.Description children={description} />
|
|
85
|
-
</>
|
|
86
|
-
)}
|
|
62
|
+
{description && <FullscreenModal.Description children={description} />}
|
|
87
63
|
<Children />
|
|
88
64
|
</SHeader>,
|
|
89
65
|
);
|
|
@@ -101,7 +77,7 @@ function Section(props) {
|
|
|
101
77
|
|
|
102
78
|
function Footer(props) {
|
|
103
79
|
const SFooter = Root;
|
|
104
|
-
return sstyled(props.styles)(<SFooter render={
|
|
80
|
+
return sstyled(props.styles)(<SFooter render={Flex} />);
|
|
105
81
|
}
|
|
106
82
|
|
|
107
83
|
function Close(props) {
|
|
@@ -22,41 +22,38 @@ SBack {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
SClose {
|
|
25
|
-
top:
|
|
26
|
-
right:
|
|
25
|
+
top: 17px;
|
|
26
|
+
right: 23px;
|
|
27
27
|
padding: 12px;
|
|
28
|
-
color: var(--
|
|
28
|
+
color: var(--gray-300);
|
|
29
29
|
|
|
30
30
|
&:hover {
|
|
31
|
-
color:
|
|
31
|
+
color: var(--gray-400);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
SBack {
|
|
36
|
-
top:
|
|
36
|
+
top: 8px;
|
|
37
37
|
left: 32px;
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
|
-
|
|
41
|
-
color: var(--
|
|
42
|
-
font-size: var(--
|
|
43
|
-
line-height: var(--
|
|
40
|
+
margin-bottom: 12px;
|
|
41
|
+
color: var(--gray-500);
|
|
42
|
+
font-size: var(--fs-100);
|
|
43
|
+
line-height: var(--lh-100);
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
color:
|
|
47
|
-
|
|
48
|
-
& SBackText {
|
|
49
|
-
border-bottom-color: currentColor;
|
|
50
|
-
}
|
|
46
|
+
color: var(--gray-600);
|
|
51
47
|
}
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
SBackText {
|
|
55
51
|
margin-left: 4px;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
font-size: var(--fs-200);
|
|
53
|
+
line-height: var(--lh-200);
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
60
57
|
}
|
|
61
58
|
STitle,
|
|
62
59
|
SDescription {
|
|
@@ -68,31 +65,45 @@ SDescription {
|
|
|
68
65
|
STitle {
|
|
69
66
|
font-size: var(--fs-500);
|
|
70
67
|
line-height: var(--lh-500);
|
|
71
|
-
font-weight:
|
|
72
|
-
color: var(--
|
|
68
|
+
font-weight: 700;
|
|
69
|
+
color: var(--gray-800);
|
|
73
70
|
}
|
|
74
71
|
|
|
75
72
|
SDescription {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: baseline;
|
|
76
75
|
font-size: var(--fs-100);
|
|
77
76
|
line-height: var(--lh-100);
|
|
78
|
-
color: var(--
|
|
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
|
+
}
|
|
79
90
|
}
|
|
80
91
|
|
|
81
92
|
SHeader {
|
|
82
93
|
display: flex;
|
|
83
94
|
align-items: baseline;
|
|
84
95
|
padding-left: 32px;
|
|
85
|
-
padding-bottom:
|
|
86
|
-
padding-right:
|
|
87
|
-
padding-top:
|
|
88
|
-
min-height:
|
|
89
|
-
box-shadow: inset 0 -1px
|
|
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);
|
|
90
101
|
box-sizing: border-box;
|
|
91
102
|
}
|
|
92
103
|
|
|
93
104
|
SFooter {
|
|
94
|
-
min-height:
|
|
95
|
-
box-shadow: inset 0 1px 1px 0 var(--
|
|
105
|
+
min-height: 52px;
|
|
106
|
+
box-shadow: inset 0 1px 1px 0 var(--gray-200);
|
|
96
107
|
box-sizing: border-box;
|
|
97
108
|
}
|
|
98
109
|
|
|
@@ -110,14 +121,6 @@ SSection {
|
|
|
110
121
|
flex: 1 1 auto;
|
|
111
122
|
}
|
|
112
123
|
|
|
113
|
-
SHeaderDivider {
|
|
114
|
-
margin-left: 12px;
|
|
115
|
-
margin-right: 12px;
|
|
116
|
-
height: 16px;
|
|
117
|
-
width: 1px;
|
|
118
|
-
background-color: var(--gray80);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
124
|
@media (prefers-reduced-motion) {
|
|
122
125
|
SBackText {
|
|
123
126
|
transition: none;
|