@semcore/fullscreen-modal 1.4.2 → 1.5.0
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
CHANGED
|
@@ -31,9 +31,9 @@ var _modal = _interopRequireDefault(require("@semcore/modal"));
|
|
|
31
31
|
|
|
32
32
|
var _flexBox = require("@semcore/flex-box");
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _l = _interopRequireDefault(require("@semcore/icon/Close/l"));
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var _m = _interopRequireDefault(require("@semcore/icon/ArrowLeft/m"));
|
|
37
37
|
|
|
38
38
|
var _typography = require("@semcore/typography");
|
|
39
39
|
|
|
@@ -54,25 +54,25 @@ var style = (
|
|
|
54
54
|
/*__reshadow_css_start__*/
|
|
55
55
|
_core.sstyled.insert(
|
|
56
56
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
57
|
+
".___SFullscreenOverlay_1yjsg_gg_{padding:0}.___SFullscreenModal_1yjsg_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#fff;border-radius:0;padding:0}.___SBack_1yjsg_gg_,.___SClose_1yjsg_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1yjsg_gg_{top:12px;right:20px;padding:12px;color:#a6b0b3}.___SClose_1yjsg_gg_:hover{color:#929b9e}.___SBack_1yjsg_gg_{top:10px;left:32px;display:flex;align-items:center;padding:2px;color:#757575;font-size:var(--fs100_15tbcit);line-height:var(--lh100_15tbcit)}.___SBack_1yjsg_gg_:hover{color:#676767}.___SBack_1yjsg_gg_:hover .___SBackText_1yjsg_gg_{border-bottom-color:currentColor}.___SBackText_1yjsg_gg_{margin-left:4px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SDescription_1yjsg_gg_,.___STitle_1yjsg_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1yjsg_gg_{font-size:25px;line-height:1.12;font-weight:500;color:#333}.___SDescription_1yjsg_gg_{font-size:12px;line-height:1.5;color:#757575}.___SHeader_1yjsg_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:12px;padding-right:77px;padding-top:30px;min-height:72px;box-shadow:inset 0 -1px 1px 0 #ccc}.___SFooter_1yjsg_gg_,.___SHeader_1yjsg_gg_{box-sizing:border-box}.___SFooter_1yjsg_gg_{min-height:56px;box-shadow:inset 0 1px 1px 0 #ccc}.___SBody_1yjsg_gg_{display:flex;height:100%;overflow:auto}.___SSection_1yjsg_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}.___SHeaderDivider_1yjsg_gg_{margin-left:12px;margin-right:12px;height:16px;width:1px;background-color:#ccc}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
59
|
, "15tbcit_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SFullscreenOverlay": "
|
|
63
|
-
"__SFullscreenModal": "
|
|
64
|
-
"__SBack": "
|
|
65
|
-
"__SClose": "
|
|
62
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_1yjsg_gg_",
|
|
63
|
+
"__SFullscreenModal": "___SFullscreenModal_1yjsg_gg_",
|
|
64
|
+
"__SBack": "___SBack_1yjsg_gg_",
|
|
65
|
+
"__SClose": "___SClose_1yjsg_gg_",
|
|
66
66
|
"--fs100": "--fs100_15tbcit",
|
|
67
67
|
"--lh100": "--lh100_15tbcit",
|
|
68
|
-
"__SBackText": "
|
|
69
|
-
"__SDescription": "
|
|
70
|
-
"__STitle": "
|
|
71
|
-
"__SHeader": "
|
|
72
|
-
"__SFooter": "
|
|
73
|
-
"__SBody": "
|
|
74
|
-
"__SSection": "
|
|
75
|
-
"__SHeaderDivider": "
|
|
68
|
+
"__SBackText": "___SBackText_1yjsg_gg_",
|
|
69
|
+
"__SDescription": "___SDescription_1yjsg_gg_",
|
|
70
|
+
"__STitle": "___STitle_1yjsg_gg_",
|
|
71
|
+
"__SHeader": "___SHeader_1yjsg_gg_",
|
|
72
|
+
"__SFooter": "___SFooter_1yjsg_gg_",
|
|
73
|
+
"__SBody": "___SBody_1yjsg_gg_",
|
|
74
|
+
"__SSection": "___SSection_1yjsg_gg_",
|
|
75
|
+
"__SHeaderDivider": "___SHeaderDivider_1yjsg_gg_"
|
|
76
76
|
});
|
|
77
77
|
|
|
78
78
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -193,7 +193,7 @@ function Close(props) {
|
|
|
193
193
|
var _ref6 = this ? this.asProps : arguments[0],
|
|
194
194
|
_ref15;
|
|
195
195
|
|
|
196
|
-
var SClose =
|
|
196
|
+
var SClose = _l["default"];
|
|
197
197
|
return _ref15 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref15.cn("SClose", _objectSpread({}, (0, _core.assignProps)({}, _ref6))));
|
|
198
198
|
}
|
|
199
199
|
|
|
@@ -223,7 +223,7 @@ function Back(props) {
|
|
|
223
223
|
var SBackText = _typography.Text;
|
|
224
224
|
var Children = props.Children,
|
|
225
225
|
styles = props.styles;
|
|
226
|
-
return _ref18 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBack, _ref18.cn("SBack", _objectSpread({}, (0, _core.assignProps)({}, _ref9))), /*#__PURE__*/_react["default"].createElement(
|
|
226
|
+
return _ref18 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBack, _ref18.cn("SBack", _objectSpread({}, (0, _core.assignProps)({}, _ref9))), /*#__PURE__*/_react["default"].createElement(_m["default"], _ref18.cn("ArrowLeft", {})), /*#__PURE__*/_react["default"].createElement(SBackText, _ref18.cn("SBackText", {}), /*#__PURE__*/_react["default"].createElement(Children, _ref18.cn("Children", {}))));
|
|
227
227
|
}
|
|
228
228
|
|
|
229
229
|
var FullscreenModal = (0, _core["default"])(FullscreenModalRoot, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FullscreenModal.js"],"names":["FullscreenModalRoot","trigger","e","onClick","bindHandlerClose","SFullscreenModal","Modal","Window","asProps","styles","hidden","Children","onClose","visibleProps","visible","closable","duration","disablePortal","SFullscreenOverlay","Overlay","logger","warn","undefined","displayName","Component","style","Header","props","SHeader","Box","SHeaderDivider","title","description","Body","SBody","Section","SSection","Footer","SFooter","Close","SClose","
|
|
1
|
+
{"version":3,"sources":["../../src/FullscreenModal.js"],"names":["FullscreenModalRoot","trigger","e","onClick","bindHandlerClose","SFullscreenModal","Modal","Window","asProps","styles","hidden","Children","onClose","visibleProps","visible","closable","duration","disablePortal","SFullscreenOverlay","Overlay","logger","warn","undefined","displayName","Component","style","Header","props","SHeader","Box","SHeaderDivider","title","description","Body","SBody","Section","SSection","Footer","SFooter","Close","SClose","CloseIcon","Title","STitle","Text","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 { 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';\nimport logger from '@semcore/utils/lib/logger';\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 {\n styles,\n hidden,\n Children,\n onClose,\n visible: visibleProps,\n closable,\n duration,\n disablePortal,\n } = this.asProps;\n const SFullscreenOverlay = Modal.Overlay;\n\n logger.warn(\n hidden !== undefined,\n \"The 'hidden' property is deprecated, use 'visible'\",\n this.asProps['data-ui-name'] || FullscreenModalRoot.displayName,\n );\n\n const visible = visibleProps === undefined ? !hidden : visibleProps;\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 SHeaderDivider = 'div';\n const { Children, styles, title, description } = props;\n return sstyled(styles)(\n <SHeader render={Box}>\n {title && <FullscreenModal.Title children={title} />}\n {description && (\n <>\n <SHeaderDivider />\n <FullscreenModal.Description children={description} />\n </>\n )}\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={Box} />);\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"}
|
|
@@ -28,8 +28,8 @@ import React from 'react';
|
|
|
28
28
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
29
29
|
import Modal from '@semcore/modal';
|
|
30
30
|
import { Box } from '@semcore/flex-box';
|
|
31
|
-
import
|
|
32
|
-
import
|
|
31
|
+
import CloseIcon from '@semcore/icon/Close/l';
|
|
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
35
|
import logger from '@semcore/utils/lib/logger';
|
|
@@ -39,25 +39,25 @@ var style = (
|
|
|
39
39
|
/*__reshadow_css_start__*/
|
|
40
40
|
_sstyled.insert(
|
|
41
41
|
/*__inner_css_start__*/
|
|
42
|
-
".
|
|
42
|
+
".___SFullscreenOverlay_1yjsg_gg_{padding:0}.___SFullscreenModal_1yjsg_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#fff;border-radius:0;padding:0}.___SBack_1yjsg_gg_,.___SClose_1yjsg_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1yjsg_gg_{top:12px;right:20px;padding:12px;color:#a6b0b3}.___SClose_1yjsg_gg_:hover{color:#929b9e}.___SBack_1yjsg_gg_{top:10px;left:32px;display:flex;align-items:center;padding:2px;color:#757575;font-size:var(--fs100_15tbcit);line-height:var(--lh100_15tbcit)}.___SBack_1yjsg_gg_:hover{color:#676767}.___SBack_1yjsg_gg_:hover .___SBackText_1yjsg_gg_{border-bottom-color:currentColor}.___SBackText_1yjsg_gg_{margin-left:4px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SDescription_1yjsg_gg_,.___STitle_1yjsg_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1yjsg_gg_{font-size:25px;line-height:1.12;font-weight:500;color:#333}.___SDescription_1yjsg_gg_{font-size:12px;line-height:1.5;color:#757575}.___SHeader_1yjsg_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:12px;padding-right:77px;padding-top:30px;min-height:72px;box-shadow:inset 0 -1px 1px 0 #ccc}.___SFooter_1yjsg_gg_,.___SHeader_1yjsg_gg_{box-sizing:border-box}.___SFooter_1yjsg_gg_{min-height:56px;box-shadow:inset 0 1px 1px 0 #ccc}.___SBody_1yjsg_gg_{display:flex;height:100%;overflow:auto}.___SSection_1yjsg_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}.___SHeaderDivider_1yjsg_gg_{margin-left:12px;margin-right:12px;height:16px;width:1px;background-color:#ccc}"
|
|
43
43
|
/*__inner_css_end__*/
|
|
44
44
|
, "15tbcit_gg_")
|
|
45
45
|
/*__reshadow_css_end__*/
|
|
46
46
|
, {
|
|
47
|
-
"__SFullscreenOverlay": "
|
|
48
|
-
"__SFullscreenModal": "
|
|
49
|
-
"__SBack": "
|
|
50
|
-
"__SClose": "
|
|
47
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_1yjsg_gg_",
|
|
48
|
+
"__SFullscreenModal": "___SFullscreenModal_1yjsg_gg_",
|
|
49
|
+
"__SBack": "___SBack_1yjsg_gg_",
|
|
50
|
+
"__SClose": "___SClose_1yjsg_gg_",
|
|
51
51
|
"--fs100": "--fs100_15tbcit",
|
|
52
52
|
"--lh100": "--lh100_15tbcit",
|
|
53
|
-
"__SBackText": "
|
|
54
|
-
"__SDescription": "
|
|
55
|
-
"__STitle": "
|
|
56
|
-
"__SHeader": "
|
|
57
|
-
"__SFooter": "
|
|
58
|
-
"__SBody": "
|
|
59
|
-
"__SSection": "
|
|
60
|
-
"__SHeaderDivider": "
|
|
53
|
+
"__SBackText": "___SBackText_1yjsg_gg_",
|
|
54
|
+
"__SDescription": "___SDescription_1yjsg_gg_",
|
|
55
|
+
"__STitle": "___STitle_1yjsg_gg_",
|
|
56
|
+
"__SHeader": "___SHeader_1yjsg_gg_",
|
|
57
|
+
"__SFooter": "___SFooter_1yjsg_gg_",
|
|
58
|
+
"__SBody": "___SBody_1yjsg_gg_",
|
|
59
|
+
"__SSection": "___SSection_1yjsg_gg_",
|
|
60
|
+
"__SHeaderDivider": "___SHeaderDivider_1yjsg_gg_"
|
|
61
61
|
});
|
|
62
62
|
|
|
63
63
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -180,7 +180,7 @@ function Close(props) {
|
|
|
180
180
|
var _ref6 = this ? this.asProps : arguments[0],
|
|
181
181
|
_ref15;
|
|
182
182
|
|
|
183
|
-
var SClose =
|
|
183
|
+
var SClose = CloseIcon;
|
|
184
184
|
return _ref15 = sstyled(props.styles), /*#__PURE__*/React.createElement(SClose, _ref15.cn("SClose", _objectSpread({}, _assignProps6({}, _ref6))));
|
|
185
185
|
}
|
|
186
186
|
|
|
@@ -210,7 +210,7 @@ function Back(props) {
|
|
|
210
210
|
var SBackText = Text;
|
|
211
211
|
var Children = props.Children,
|
|
212
212
|
styles = props.styles;
|
|
213
|
-
return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SBack, _ref18.cn("SBack", _objectSpread({}, _assignProps9({}, _ref9))), /*#__PURE__*/React.createElement(
|
|
213
|
+
return _ref18 = sstyled(styles), /*#__PURE__*/React.createElement(SBack, _ref18.cn("SBack", _objectSpread({}, _assignProps9({}, _ref9))), /*#__PURE__*/React.createElement(ArrowLeft, _ref18.cn("ArrowLeft", {})), /*#__PURE__*/React.createElement(SBackText, _ref18.cn("SBackText", {}), /*#__PURE__*/React.createElement(Children, _ref18.cn("Children", {}))));
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
var FullscreenModal = createComponent(FullscreenModalRoot, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FullscreenModal.js"],"names":["React","createComponent","Component","sstyled","Root","Modal","Box","
|
|
1
|
+
{"version":3,"sources":["../../src/FullscreenModal.js"],"names":["React","createComponent","Component","sstyled","Root","Modal","Box","CloseIcon","ArrowLeft","Text","fire","logger","FullscreenModalRoot","trigger","e","onClick","bindHandlerClose","SFullscreenModal","Window","asProps","styles","hidden","Children","onClose","visibleProps","visible","closable","duration","disablePortal","SFullscreenOverlay","Overlay","warn","undefined","displayName","style","Header","props","SHeader","SHeaderDivider","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 { 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';\nimport logger from '@semcore/utils/lib/logger';\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 {\n styles,\n hidden,\n Children,\n onClose,\n visible: visibleProps,\n closable,\n duration,\n disablePortal,\n } = this.asProps;\n const SFullscreenOverlay = Modal.Overlay;\n\n logger.warn(\n hidden !== undefined,\n \"The 'hidden' property is deprecated, use 'visible'\",\n this.asProps['data-ui-name'] || FullscreenModalRoot.displayName,\n );\n\n const visible = visibleProps === undefined ? !hidden : visibleProps;\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 SHeaderDivider = 'div';\n const { Children, styles, title, description } = props;\n return sstyled(styles)(\n <SHeader render={Box}>\n {title && <FullscreenModal.Title children={title} />}\n {description && (\n <>\n <SHeaderDivider />\n <FullscreenModal.Description children={description} />\n </>\n )}\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={Box} />);\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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/fullscreen-modal",
|
|
3
3
|
"description": "SEMRush FullscreenModal Component",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.5.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@semcore/utils": "^3.21",
|
|
17
|
-
"@semcore/icon": "^2",
|
|
17
|
+
"@semcore/icon": "^2.16",
|
|
18
18
|
"@semcore/modal": "^2",
|
|
19
19
|
"@semcore/typography": "^3",
|
|
20
20
|
"@semcore/flex-box": "^4"
|
package/src/FullscreenModal.js
CHANGED
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
3
|
import Modal from '@semcore/modal';
|
|
4
4
|
import { Box } from '@semcore/flex-box';
|
|
5
|
-
import
|
|
6
|
-
import
|
|
5
|
+
import CloseIcon from '@semcore/icon/Close/l';
|
|
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
9
|
import logger from '@semcore/utils/lib/logger';
|
|
@@ -106,7 +106,7 @@ function Footer(props) {
|
|
|
106
106
|
|
|
107
107
|
function Close(props) {
|
|
108
108
|
const SClose = Root;
|
|
109
|
-
return sstyled(props.styles)(<SClose render={
|
|
109
|
+
return sstyled(props.styles)(<SClose render={CloseIcon} />);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
function Title(props) {
|
|
@@ -126,7 +126,7 @@ function Back(props) {
|
|
|
126
126
|
|
|
127
127
|
return sstyled(styles)(
|
|
128
128
|
<SBack render={Box}>
|
|
129
|
-
<
|
|
129
|
+
<ArrowLeft />
|
|
130
130
|
<SBackText>
|
|
131
131
|
<Children />
|
|
132
132
|
</SBackText>
|