@semcore/fullscreen-modal 1.3.0 → 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 +27 -0
- package/lib/cjs/FullscreenModal.js +85 -122
- package/lib/cjs/FullscreenModal.js.map +1 -1
- package/lib/cjs/index.js +1 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/fullscreen-modal.shadow.css +18 -18
- package/lib/es6/FullscreenModal.js +95 -122
- package/lib/es6/FullscreenModal.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/fullscreen-modal.shadow.css +18 -18
- package/lib/types/index.d.ts +41 -2
- package/package.json +5 -4
- package/src/FullscreenModal.js +152 -0
- package/src/index.d.ts +41 -0
- package/src/{index.tsx → index.js} +0 -0
- package/src/style/fullscreen-modal.shadow.css +18 -18
- package/lib/types/FullscreenModal.d.ts +0 -29
- package/src/FullscreenModal.tsx +0 -183
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [1.5.0] - 2022-01-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Up version icons and use new icon.
|
|
10
|
+
|
|
11
|
+
## [1.4.2] - 2021-8-26
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Add 'sideEffect=false' for more optimal build via webpack
|
|
16
|
+
|
|
17
|
+
## [1.4.1] - 2021-06-29
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Rewrite code from TS to JS.
|
|
22
|
+
|
|
23
|
+
## [1.4.0] - 2021-04-26
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- Version of dependence `@semcore/core` has been changed to `1.11`.
|
|
28
|
+
- Improved performance. Removed one component wrapper.
|
|
29
|
+
- The style processing system has been changed.
|
|
30
|
+
- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
|
|
31
|
+
|
|
5
32
|
## [1.3.0] - 2020-12-17
|
|
6
33
|
|
|
7
34
|
### Added
|
|
@@ -23,19 +23,17 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
|
|
|
23
23
|
|
|
24
24
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
27
27
|
|
|
28
28
|
var _react = _interopRequireDefault(require("react"));
|
|
29
29
|
|
|
30
|
-
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
31
|
-
|
|
32
30
|
var _modal = _interopRequireDefault(require("@semcore/modal"));
|
|
33
31
|
|
|
34
32
|
var _flexBox = require("@semcore/flex-box");
|
|
35
33
|
|
|
36
|
-
var
|
|
34
|
+
var _l = _interopRequireDefault(require("@semcore/icon/Close/l"));
|
|
37
35
|
|
|
38
|
-
var
|
|
36
|
+
var _m = _interopRequireDefault(require("@semcore/icon/ArrowLeft/m"));
|
|
39
37
|
|
|
40
38
|
var _typography = require("@semcore/typography");
|
|
41
39
|
|
|
@@ -43,47 +41,39 @@ var _fire = _interopRequireDefault(require("@semcore/utils/lib/fire"));
|
|
|
43
41
|
|
|
44
42
|
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
45
43
|
|
|
44
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
45
|
+
|
|
46
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
47
|
+
|
|
46
48
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
47
49
|
|
|
48
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
50
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
49
51
|
|
|
50
52
|
/*__reshadow-styles__:"./style/fullscreen-modal.shadow.css"*/
|
|
51
|
-
var
|
|
53
|
+
var style = (
|
|
52
54
|
/*__reshadow_css_start__*/
|
|
53
|
-
|
|
55
|
+
_core.sstyled.insert(
|
|
54
56
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
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}"
|
|
56
58
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
59
|
+
, "15tbcit_gg_")
|
|
58
60
|
/*__reshadow_css_end__*/
|
|
59
61
|
, {
|
|
60
|
-
"__SFullscreenOverlay": "
|
|
61
|
-
"__SFullscreenModal": "
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
if (false) {
|
|
76
|
-
/*__reshadow_css_start__*/
|
|
77
|
-
(0, _core.__css__)(
|
|
78
|
-
/*__inner_css_start__*/
|
|
79
|
-
"@media (max-width: 768px) {\n\n.___SClose_nexg5_gg_ {\n top: 15.6px;\n right: 26px;\n padding: 15.6px\n}\n\n.___SBack_nexg5_gg_ {\n top: 13px;\n left: 41.6px;\n padding: 2.6px\n}\n\n.___SBackText_nexg5_gg_ {\n margin-left: 5.2px;\n}\n\n.___STitle_nexg5_gg_ {\n font-size: 32.5px;\n}\n\n.___SDescription_nexg5_gg_ {\n font-size: 15.6px;\n}\n\n.___SHeader_nexg5_gg_ {\n padding-left: 41.6px;\n padding-bottom: 15.6px;\n padding-right: 100.1px;\n padding-top: 39px;\n}\n\n.___SSection_nexg5_gg_ {\n padding-top: 31.2px;\n padding-bottom: 31.2px;\n padding-left: 41.6px;\n padding-right: 41.6px;\n}\n\n.___SHeaderDivider_nexg5_gg_ {\n margin-left: 15.6px;\n margin-right: 15.6px;\n height: 20.8px;\n}}"
|
|
80
|
-
/*__inner_css_end__*/
|
|
81
|
-
, "1abbcr3_gg_")
|
|
82
|
-
/*__reshadow_css_end__*/
|
|
83
|
-
;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
var styled_c8 = (0, _core.create)([]);
|
|
62
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_1yjsg_gg_",
|
|
63
|
+
"__SFullscreenModal": "___SFullscreenModal_1yjsg_gg_",
|
|
64
|
+
"__SBack": "___SBack_1yjsg_gg_",
|
|
65
|
+
"__SClose": "___SClose_1yjsg_gg_",
|
|
66
|
+
"--fs100": "--fs100_15tbcit",
|
|
67
|
+
"--lh100": "--lh100_15tbcit",
|
|
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
|
+
});
|
|
87
77
|
|
|
88
78
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
89
79
|
(0, _inherits2["default"])(FullscreenModalRoot, _Component);
|
|
@@ -125,7 +115,10 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
125
115
|
}, {
|
|
126
116
|
key: "render",
|
|
127
117
|
value: function render() {
|
|
128
|
-
var
|
|
118
|
+
var _ref = this ? this.asProps : arguments[0],
|
|
119
|
+
_ref10;
|
|
120
|
+
|
|
121
|
+
var SFullscreenModal = _modal["default"].Window;
|
|
129
122
|
var _this$asProps = this.asProps,
|
|
130
123
|
styles = _this$asProps.styles,
|
|
131
124
|
hidden = _this$asProps.hidden,
|
|
@@ -137,24 +130,16 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
137
130
|
disablePortal = _this$asProps.disablePortal;
|
|
138
131
|
var SFullscreenOverlay = _modal["default"].Overlay;
|
|
139
132
|
|
|
140
|
-
_logger["default"].warn(hidden !== undefined, "
|
|
133
|
+
_logger["default"].warn(hidden !== undefined, "The 'hidden' property is deprecated, use 'visible'", this.asProps['data-ui-name'] || FullscreenModalRoot.displayName);
|
|
141
134
|
|
|
142
135
|
var visible = visibleProps === undefined ? !hidden : visibleProps;
|
|
143
|
-
return /*#__PURE__*/_react["default"].createElement(_modal["default"], {
|
|
144
|
-
closable: false,
|
|
145
|
-
visible: visible,
|
|
146
|
-
onClose: onClose,
|
|
147
|
-
duration: duration,
|
|
148
|
-
disablePortal: disablePortal
|
|
149
|
-
}, (
|
|
150
|
-
className: _core.styled.styles["__SFullscreenOverlay"]
|
|
151
|
-
}, /*#__PURE__*/_react["default"].createElement(SFullscreenModal, (0, _core.map)("SFullscreenModal", {
|
|
152
|
-
render: _modal["default"].Window
|
|
153
|
-
}), closable && /*#__PURE__*/_react["default"].createElement(FullscreenModal.Close, {
|
|
154
|
-
className: _core.styled.styles["__FullscreenModal.Close"]
|
|
155
|
-
}), /*#__PURE__*/_react["default"].createElement(Children, {
|
|
156
|
-
className: _core.styled.styles["__Children"]
|
|
157
|
-
}))))));
|
|
136
|
+
return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_modal["default"], _ref10.cn("Modal", {
|
|
137
|
+
"closable": false,
|
|
138
|
+
"visible": visible,
|
|
139
|
+
"onClose": onClose,
|
|
140
|
+
"duration": duration,
|
|
141
|
+
"disablePortal": disablePortal
|
|
142
|
+
}), /*#__PURE__*/_react["default"].createElement(SFullscreenOverlay, _ref10.cn("SFullscreenOverlay", {}), /*#__PURE__*/_react["default"].createElement(SFullscreenModal, _ref10.cn("SFullscreenModal", _objectSpread({}, (0, _core.assignProps)({}, _ref))), closable && /*#__PURE__*/_react["default"].createElement(FullscreenModal.Close, null), /*#__PURE__*/_react["default"].createElement(Children, _ref10.cn("Children", {})))));
|
|
158
143
|
}
|
|
159
144
|
}]);
|
|
160
145
|
return FullscreenModalRoot;
|
|
@@ -162,105 +147,83 @@ var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
162
147
|
|
|
163
148
|
(0, _defineProperty2["default"])(FullscreenModalRoot, "displayName", 'FullscreenModal');
|
|
164
149
|
(0, _defineProperty2["default"])(FullscreenModalRoot, "style", style);
|
|
165
|
-
var styled_12c = (0, _core.create)([]);
|
|
166
150
|
|
|
167
151
|
function Header(props) {
|
|
152
|
+
var _ref2 = this ? this.asProps : arguments[0],
|
|
153
|
+
_ref11;
|
|
154
|
+
|
|
155
|
+
var SHeader = _flexBox.Box;
|
|
168
156
|
var SHeaderDivider = 'div';
|
|
169
|
-
var
|
|
170
|
-
Children = props.Children,
|
|
157
|
+
var Children = props.Children,
|
|
171
158
|
styles = props.styles,
|
|
172
159
|
title = props.title,
|
|
173
160
|
description = props.description;
|
|
174
|
-
return
|
|
175
|
-
render: _flexBox.Box
|
|
176
|
-
}), title && /*#__PURE__*/_react["default"].createElement(FullscreenModal.Title, (0, _core.map)("FullscreenModal.Title", {
|
|
161
|
+
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, {
|
|
177
162
|
children: title
|
|
178
|
-
})
|
|
179
|
-
className: _core.styled.styles["__SHeaderDivider"]
|
|
180
|
-
}), /*#__PURE__*/_react["default"].createElement(FullscreenModal.Description, (0, _core.map)("FullscreenModal.Description", {
|
|
163
|
+
}), description && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SHeaderDivider, _ref11.cn("SHeaderDivider", {})), /*#__PURE__*/_react["default"].createElement(FullscreenModal.Description, {
|
|
181
164
|
children: description
|
|
182
|
-
}))
|
|
183
|
-
className: _core.styled.styles["__Children"]
|
|
184
|
-
}))));
|
|
165
|
+
})), /*#__PURE__*/_react["default"].createElement(Children, _ref11.cn("Children", {})));
|
|
185
166
|
}
|
|
186
167
|
|
|
187
|
-
var styled_190 = (0, _core.create)([]);
|
|
188
|
-
|
|
189
168
|
function Body(props) {
|
|
190
|
-
var
|
|
191
|
-
|
|
192
|
-
return (0, _core.styled)(((0, _core.set)([styled_190, styles]), /*#__PURE__*/_react["default"].createElement(SBody, (0, _core.map)("SBody", {
|
|
193
|
-
render: _flexBox.Box
|
|
194
|
-
}))));
|
|
195
|
-
}
|
|
169
|
+
var _ref3 = this ? this.asProps : arguments[0],
|
|
170
|
+
_ref12;
|
|
196
171
|
|
|
197
|
-
var
|
|
172
|
+
var SBody = _flexBox.Box;
|
|
173
|
+
return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SBody, _ref12.cn("SBody", _objectSpread({}, (0, _core.assignProps)({}, _ref3))));
|
|
174
|
+
}
|
|
198
175
|
|
|
199
176
|
function Section(props) {
|
|
200
|
-
var
|
|
201
|
-
|
|
202
|
-
return (0, _core.styled)(((0, _core.set)([styled_1f4, styles]), /*#__PURE__*/_react["default"].createElement(SSection, (0, _core.map)("SSection", {
|
|
203
|
-
render: _flexBox.Box
|
|
204
|
-
}))));
|
|
205
|
-
}
|
|
177
|
+
var _ref4 = this ? this.asProps : arguments[0],
|
|
178
|
+
_ref13;
|
|
206
179
|
|
|
207
|
-
var
|
|
180
|
+
var SSection = _flexBox.Box;
|
|
181
|
+
return _ref13 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SSection, _ref13.cn("SSection", _objectSpread({}, (0, _core.assignProps)({}, _ref4))));
|
|
182
|
+
}
|
|
208
183
|
|
|
209
184
|
function Footer(props) {
|
|
210
|
-
var
|
|
211
|
-
|
|
212
|
-
return (0, _core.styled)(((0, _core.set)([styled_258, styles]), /*#__PURE__*/_react["default"].createElement(SFooter, (0, _core.map)("SFooter", {
|
|
213
|
-
render: _flexBox.Box
|
|
214
|
-
}))));
|
|
215
|
-
}
|
|
185
|
+
var _ref5 = this ? this.asProps : arguments[0],
|
|
186
|
+
_ref14;
|
|
216
187
|
|
|
217
|
-
var
|
|
188
|
+
var SFooter = _flexBox.Box;
|
|
189
|
+
return _ref14 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SFooter, _ref14.cn("SFooter", _objectSpread({}, (0, _core.assignProps)({}, _ref5))));
|
|
190
|
+
}
|
|
218
191
|
|
|
219
192
|
function Close(props) {
|
|
220
|
-
var
|
|
221
|
-
|
|
222
|
-
return (0, _core.styled)(((0, _core.set)([styled_2bc, styles]), /*#__PURE__*/_react["default"].createElement(SClose, (0, _core.map)("SClose", {
|
|
223
|
-
render: _m["default"]
|
|
224
|
-
}))));
|
|
225
|
-
}
|
|
193
|
+
var _ref6 = this ? this.asProps : arguments[0],
|
|
194
|
+
_ref15;
|
|
226
195
|
|
|
227
|
-
var
|
|
196
|
+
var SClose = _l["default"];
|
|
197
|
+
return _ref15 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref15.cn("SClose", _objectSpread({}, (0, _core.assignProps)({}, _ref6))));
|
|
198
|
+
}
|
|
228
199
|
|
|
229
200
|
function Title(props) {
|
|
230
|
-
var
|
|
231
|
-
|
|
232
|
-
return (0, _core.styled)(((0, _core.set)([styled_320, styles]), /*#__PURE__*/_react["default"].createElement(STitle, (0, _core.map)("STitle", {
|
|
233
|
-
render: _typography.Text,
|
|
234
|
-
tag: "h4"
|
|
235
|
-
}))));
|
|
236
|
-
}
|
|
201
|
+
var _ref7 = this ? this.asProps : arguments[0],
|
|
202
|
+
_ref16;
|
|
237
203
|
|
|
238
|
-
var
|
|
204
|
+
var STitle = _typography.Text;
|
|
205
|
+
return _ref16 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(STitle, _ref16.cn("STitle", _objectSpread({}, (0, _core.assignProps)({
|
|
206
|
+
"tag": "h4"
|
|
207
|
+
}, _ref7))));
|
|
208
|
+
}
|
|
239
209
|
|
|
240
210
|
function Description(props) {
|
|
241
|
-
var
|
|
242
|
-
|
|
243
|
-
return (0, _core.styled)(((0, _core.set)([styled_384, styles]), /*#__PURE__*/_react["default"].createElement(SDescription, (0, _core.map)("SDescription", {
|
|
244
|
-
render: _typography.Text
|
|
245
|
-
}))));
|
|
246
|
-
}
|
|
211
|
+
var _ref8 = this ? this.asProps : arguments[0],
|
|
212
|
+
_ref17;
|
|
247
213
|
|
|
248
|
-
var
|
|
214
|
+
var SDescription = _typography.Text;
|
|
215
|
+
return _ref17 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDescription, _ref17.cn("SDescription", _objectSpread({}, (0, _core.assignProps)({}, _ref8))));
|
|
216
|
+
}
|
|
249
217
|
|
|
250
218
|
function Back(props) {
|
|
219
|
+
var _ref9 = this ? this.asProps : arguments[0],
|
|
220
|
+
_ref18;
|
|
221
|
+
|
|
222
|
+
var SBack = _flexBox.Box;
|
|
251
223
|
var SBackText = _typography.Text;
|
|
252
|
-
var
|
|
253
|
-
Children = props.Children,
|
|
224
|
+
var Children = props.Children,
|
|
254
225
|
styles = props.styles;
|
|
255
|
-
return (0, _core.
|
|
256
|
-
render: _flexBox.Box
|
|
257
|
-
}), /*#__PURE__*/_react["default"].createElement(_s["default"], {
|
|
258
|
-
className: _core.styled.styles["__ArrowLeftS"]
|
|
259
|
-
}), /*#__PURE__*/_react["default"].createElement(SBackText, {
|
|
260
|
-
className: _core.styled.styles["__SBackText"]
|
|
261
|
-
}, /*#__PURE__*/_react["default"].createElement(Children, {
|
|
262
|
-
className: _core.styled.styles["__Children"]
|
|
263
|
-
})))));
|
|
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", {}))));
|
|
264
227
|
}
|
|
265
228
|
|
|
266
229
|
var FullscreenModal = (0, _core["default"])(FullscreenModalRoot, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FullscreenModal.
|
|
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"}
|
package/lib/cjs/index.js
CHANGED
|
@@ -18,6 +18,7 @@ var _FullscreenModal = _interopRequireWildcard(require("./FullscreenModal"));
|
|
|
18
18
|
Object.keys(_FullscreenModal).forEach(function (key) {
|
|
19
19
|
if (key === "default" || key === "__esModule") return;
|
|
20
20
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
+
if (key in exports && exports[key] === _FullscreenModal[key]) return;
|
|
21
22
|
Object.defineProperty(exports, key, {
|
|
22
23
|
enumerable: true,
|
|
23
24
|
get: function get() {
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './FullscreenModal';\nexport * from './FullscreenModal';\n"],"file":"index.js"}
|
|
@@ -22,9 +22,9 @@ SBack {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
SClose {
|
|
25
|
-
top:
|
|
26
|
-
right:
|
|
27
|
-
padding:
|
|
25
|
+
top: 12px;
|
|
26
|
+
right: 20px;
|
|
27
|
+
padding: 12px;
|
|
28
28
|
color: var(--stone);
|
|
29
29
|
|
|
30
30
|
&:hover {
|
|
@@ -33,11 +33,11 @@ SClose {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
SBack {
|
|
36
|
-
top:
|
|
37
|
-
left:
|
|
36
|
+
top: 10px;
|
|
37
|
+
left: 32px;
|
|
38
38
|
display: flex;
|
|
39
39
|
align-items: center;
|
|
40
|
-
padding:
|
|
40
|
+
padding: 2px;
|
|
41
41
|
color: var(--gray60);
|
|
42
42
|
font-size: var(--fs100);
|
|
43
43
|
line-height: var(--lh100);
|
|
@@ -52,7 +52,7 @@ SBack {
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
SBackText {
|
|
55
|
-
margin-left:
|
|
55
|
+
margin-left: 4px;
|
|
56
56
|
border-bottom-width: 1px;
|
|
57
57
|
border-bottom-style: solid;
|
|
58
58
|
border-bottom-color: transparent;
|
|
@@ -81,10 +81,10 @@ SDescription {
|
|
|
81
81
|
SHeader {
|
|
82
82
|
display: flex;
|
|
83
83
|
align-items: baseline;
|
|
84
|
-
padding-left:
|
|
85
|
-
padding-bottom:
|
|
86
|
-
padding-right:
|
|
87
|
-
padding-top:
|
|
84
|
+
padding-left: 32px;
|
|
85
|
+
padding-bottom: 12px;
|
|
86
|
+
padding-right: 77px;
|
|
87
|
+
padding-top: 30px;
|
|
88
88
|
min-height: 72px;
|
|
89
89
|
box-shadow: inset 0 -1px 1px 0 var(--gray80);
|
|
90
90
|
box-sizing: border-box;
|
|
@@ -103,17 +103,17 @@ SBody {
|
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
SSection {
|
|
106
|
-
padding-top:
|
|
107
|
-
padding-bottom:
|
|
108
|
-
padding-left:
|
|
109
|
-
padding-right:
|
|
106
|
+
padding-top: 24px;
|
|
107
|
+
padding-bottom: 24px;
|
|
108
|
+
padding-left: 32px;
|
|
109
|
+
padding-right: 32px;
|
|
110
110
|
flex: 1 1 auto;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
SHeaderDivider {
|
|
114
|
-
margin-left:
|
|
115
|
-
margin-right:
|
|
116
|
-
height:
|
|
114
|
+
margin-left: 12px;
|
|
115
|
+
margin-right: 12px;
|
|
116
|
+
height: 16px;
|
|
117
117
|
width: 1px;
|
|
118
118
|
background-color: var(--gray80);
|
|
119
119
|
}
|