@semcore/fullscreen-modal 1.6.3 → 2.0.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 +20 -0
- package/lib/cjs/FullscreenModal.js +26 -37
- package/lib/cjs/FullscreenModal.js.map +1 -1
- package/lib/cjs/index.d.ts +41 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/fullscreen-modal.shadow.css +39 -36
- package/lib/es6/FullscreenModal.js +27 -35
- package/lib/es6/FullscreenModal.js.map +1 -1
- package/lib/es6/index.d.ts +41 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/fullscreen-modal.shadow.css +39 -36
- package/package.json +4 -1
- package/src/FullscreenModal.jsx +4 -28
- package/src/index.js +0 -1
- 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.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Remove support property `hidden` for `FullscreenModal`.
|
|
10
|
+
- `Footer` now use inside component `Flex`
|
|
11
|
+
- Updated styles according to the library redesign policy.
|
|
12
|
+
|
|
13
|
+
## [1.6.5] - 2022-05-16
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
|
|
17
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
|
|
18
|
+
|
|
19
|
+
## [1.6.4] - 2022-04-28
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
|
|
23
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0]).
|
|
24
|
+
|
|
5
25
|
## [1.6.3] - 2022-03-21
|
|
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) {
|
|
@@ -119,24 +114,19 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
119
114
|
}, {
|
|
120
115
|
key: "render",
|
|
121
116
|
value: function render() {
|
|
122
|
-
var _ref = this
|
|
117
|
+
var _ref = this.asProps,
|
|
123
118
|
_ref10;
|
|
124
119
|
|
|
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,
|
|
@@ -153,24 +143,23 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
153
143
|
(0, _defineProperty2["default"])(FullscreenModalRoot, "style", style);
|
|
154
144
|
|
|
155
145
|
function Header(props) {
|
|
156
|
-
var _ref2 =
|
|
146
|
+
var _ref2 = arguments[0],
|
|
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) {
|
|
173
|
-
var _ref3 =
|
|
162
|
+
var _ref3 = arguments[0],
|
|
174
163
|
_ref12;
|
|
175
164
|
|
|
176
165
|
var SBody = _flexBox.Box;
|
|
@@ -178,7 +167,7 @@ function Body(props) {
|
|
|
178
167
|
}
|
|
179
168
|
|
|
180
169
|
function Section(props) {
|
|
181
|
-
var _ref4 =
|
|
170
|
+
var _ref4 = arguments[0],
|
|
182
171
|
_ref13;
|
|
183
172
|
|
|
184
173
|
var SSection = _flexBox.Box;
|
|
@@ -186,15 +175,15 @@ function Section(props) {
|
|
|
186
175
|
}
|
|
187
176
|
|
|
188
177
|
function Footer(props) {
|
|
189
|
-
var _ref5 =
|
|
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
|
|
|
196
185
|
function Close(props) {
|
|
197
|
-
var _ref6 =
|
|
186
|
+
var _ref6 = arguments[0],
|
|
198
187
|
_ref15;
|
|
199
188
|
|
|
200
189
|
var SClose = _l["default"];
|
|
@@ -202,7 +191,7 @@ function Close(props) {
|
|
|
202
191
|
}
|
|
203
192
|
|
|
204
193
|
function Title(props) {
|
|
205
|
-
var _ref7 =
|
|
194
|
+
var _ref7 = arguments[0],
|
|
206
195
|
_ref16;
|
|
207
196
|
|
|
208
197
|
var STitle = _typography.Text;
|
|
@@ -212,7 +201,7 @@ function Title(props) {
|
|
|
212
201
|
}
|
|
213
202
|
|
|
214
203
|
function Description(props) {
|
|
215
|
-
var _ref8 =
|
|
204
|
+
var _ref8 = arguments[0],
|
|
216
205
|
_ref17;
|
|
217
206
|
|
|
218
207
|
var SDescription = _typography.Text;
|
|
@@ -220,7 +209,7 @@ function Description(props) {
|
|
|
220
209
|
}
|
|
221
210
|
|
|
222
211
|
function Back(props) {
|
|
223
|
-
var _ref9 =
|
|
212
|
+
var _ref9 = arguments[0],
|
|
224
213
|
_ref18;
|
|
225
214
|
|
|
226
215
|
var SBack = _flexBox.Box;
|
|
@@ -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":"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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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
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/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _FullscreenModal =
|
|
17
|
-
|
|
18
|
-
Object.keys(_FullscreenModal).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _FullscreenModal[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _FullscreenModal[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
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); }
|
|
31
|
-
|
|
32
|
-
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; }
|
|
15
|
+
var _FullscreenModal = _interopRequireDefault(require("./FullscreenModal"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './FullscreenModal';\n"],"file":"index.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) {
|
|
@@ -102,22 +98,19 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
102
98
|
}, {
|
|
103
99
|
key: "render",
|
|
104
100
|
value: function render() {
|
|
105
|
-
var _ref = this
|
|
101
|
+
var _ref = this.asProps,
|
|
106
102
|
_ref10;
|
|
107
103
|
|
|
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,
|
|
@@ -136,24 +129,23 @@ _defineProperty(FullscreenModalRoot, "displayName", 'FullscreenModal');
|
|
|
136
129
|
_defineProperty(FullscreenModalRoot, "style", style);
|
|
137
130
|
|
|
138
131
|
function Header(props) {
|
|
139
|
-
var _ref2 =
|
|
132
|
+
var _ref2 = arguments[0],
|
|
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) {
|
|
156
|
-
var _ref3 =
|
|
148
|
+
var _ref3 = arguments[0],
|
|
157
149
|
_ref12;
|
|
158
150
|
|
|
159
151
|
var SBody = Box;
|
|
@@ -161,7 +153,7 @@ function Body(props) {
|
|
|
161
153
|
}
|
|
162
154
|
|
|
163
155
|
function Section(props) {
|
|
164
|
-
var _ref4 =
|
|
156
|
+
var _ref4 = arguments[0],
|
|
165
157
|
_ref13;
|
|
166
158
|
|
|
167
159
|
var SSection = Box;
|
|
@@ -169,15 +161,15 @@ function Section(props) {
|
|
|
169
161
|
}
|
|
170
162
|
|
|
171
163
|
function Footer(props) {
|
|
172
|
-
var _ref5 =
|
|
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
|
|
|
179
171
|
function Close(props) {
|
|
180
|
-
var _ref6 =
|
|
172
|
+
var _ref6 = arguments[0],
|
|
181
173
|
_ref15;
|
|
182
174
|
|
|
183
175
|
var SClose = CloseIcon;
|
|
@@ -185,7 +177,7 @@ function Close(props) {
|
|
|
185
177
|
}
|
|
186
178
|
|
|
187
179
|
function Title(props) {
|
|
188
|
-
var _ref7 =
|
|
180
|
+
var _ref7 = arguments[0],
|
|
189
181
|
_ref16;
|
|
190
182
|
|
|
191
183
|
var STitle = Text;
|
|
@@ -195,7 +187,7 @@ function Title(props) {
|
|
|
195
187
|
}
|
|
196
188
|
|
|
197
189
|
function Description(props) {
|
|
198
|
-
var _ref8 =
|
|
190
|
+
var _ref8 = arguments[0],
|
|
199
191
|
_ref17;
|
|
200
192
|
|
|
201
193
|
var SDescription = Text;
|
|
@@ -203,7 +195,7 @@ function Description(props) {
|
|
|
203
195
|
}
|
|
204
196
|
|
|
205
197
|
function Back(props) {
|
|
206
|
-
var _ref9 =
|
|
198
|
+
var _ref9 = arguments[0],
|
|
207
199
|
_ref18;
|
|
208
200
|
|
|
209
201
|
var SBack = Box;
|
|
@@ -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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
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/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB","sourcesContent":["export { default } from './FullscreenModal';\n"],"file":"index.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.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -30,5 +30,8 @@
|
|
|
30
30
|
"type": "git",
|
|
31
31
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
32
32
|
"directory": "semcore/fullscreen-modal"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
33
36
|
}
|
|
34
37
|
}
|
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) {
|
package/src/index.js
CHANGED
|
@@ -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;
|