@semcore/spin-container 4.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/lib/cjs/SpinContainer.js +49 -63
- package/lib/cjs/SpinContainer.js.map +1 -1
- package/lib/cjs/index.js +5 -1
- package/lib/es6/SpinContainer.js +44 -61
- package/lib/es6/SpinContainer.js.map +1 -1
- package/lib/types/index.d.ts +1 -0
- package/package.json +9 -3
- package/src/SpinContainer.js +39 -46
- package/src/index.d.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [5.0.1] - 2022-02-24
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Added repository field to package.json file.
|
|
10
|
+
|
|
11
|
+
## [5.0.0] - 2022-02-22
|
|
12
|
+
|
|
13
|
+
### BREAK
|
|
14
|
+
|
|
15
|
+
- Add new children component `SpinContainer.Content` when using advanced mode along with `SpinContainer.Overlay`.
|
|
16
|
+
|
|
17
|
+
## [4.0.1] - 2021-8-26
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Add 'sideEffect=false' for more optimal build via webpack
|
|
22
|
+
|
|
5
23
|
## [4.0.0] - 2021-07-05
|
|
6
24
|
|
|
7
25
|
### BREAK
|
package/lib/cjs/SpinContainer.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
12
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
15
13
|
|
|
16
14
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
@@ -25,7 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
25
23
|
|
|
26
24
|
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
27
25
|
|
|
28
|
-
var _react =
|
|
26
|
+
var _react = _interopRequireDefault(require("react"));
|
|
29
27
|
|
|
30
28
|
var _animation = require("@semcore/animation");
|
|
31
29
|
|
|
@@ -35,11 +33,15 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
35
33
|
|
|
36
34
|
var _color = _interopRequireDefault(require("@semcore/utils/lib/color"));
|
|
37
35
|
|
|
38
|
-
var
|
|
36
|
+
var _findComponent = require("@semcore/utils/lib/findComponent");
|
|
37
|
+
|
|
38
|
+
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); }
|
|
39
39
|
|
|
40
|
-
function
|
|
40
|
+
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; }
|
|
41
41
|
|
|
42
|
-
function
|
|
42
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
43
|
+
|
|
44
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
43
45
|
|
|
44
46
|
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); }; }
|
|
45
47
|
|
|
@@ -50,15 +52,15 @@ var style = (
|
|
|
50
52
|
/*__reshadow_css_start__*/
|
|
51
53
|
_core.sstyled.insert(
|
|
52
54
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
55
|
+
".___SSpinContainer_1fs6p_gg_{z-index:0;position:relative;display:block}.___SContent_1fs6p_gg_{z-index:0;position:relative}.___SOverlay_1fs6p_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.85)}.___SOverlay_1fs6p_gg_.__background_1fs6p_gg_{background:var(--background_18krv29)}"
|
|
54
56
|
/*__inner_css_end__*/
|
|
55
57
|
, "18krv29_gg_")
|
|
56
58
|
/*__reshadow_css_end__*/
|
|
57
59
|
, {
|
|
58
|
-
"__SSpinContainer": "
|
|
59
|
-
"__SContent": "
|
|
60
|
-
"__SOverlay": "
|
|
61
|
-
"_background": "
|
|
60
|
+
"__SSpinContainer": "___SSpinContainer_1fs6p_gg_",
|
|
61
|
+
"__SContent": "___SContent_1fs6p_gg_",
|
|
62
|
+
"__SOverlay": "___SOverlay_1fs6p_gg_",
|
|
63
|
+
"_background": "__background_1fs6p_gg_",
|
|
62
64
|
"--background": "--background_18krv29"
|
|
63
65
|
});
|
|
64
66
|
|
|
@@ -76,11 +78,17 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
76
78
|
key: "getOverlayProps",
|
|
77
79
|
value: function getOverlayProps() {
|
|
78
80
|
var _this$asProps = this.asProps,
|
|
81
|
+
loading = _this$asProps.loading,
|
|
79
82
|
background = _this$asProps.background,
|
|
83
|
+
duration = _this$asProps.duration,
|
|
80
84
|
size = _this$asProps.size,
|
|
81
85
|
theme = _this$asProps.theme;
|
|
82
86
|
return {
|
|
83
87
|
background: background,
|
|
88
|
+
// for Animated
|
|
89
|
+
loading: loading,
|
|
90
|
+
duration: duration,
|
|
91
|
+
// for Spin
|
|
84
92
|
size: size,
|
|
85
93
|
theme: theme
|
|
86
94
|
};
|
|
@@ -89,25 +97,14 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
89
97
|
key: "render",
|
|
90
98
|
value: function render() {
|
|
91
99
|
var _ref = this ? this.asProps : arguments[0],
|
|
92
|
-
|
|
100
|
+
_ref4;
|
|
93
101
|
|
|
94
102
|
var SSpinContainer = _flexBox.Box;
|
|
95
|
-
var SContent = _flexBox.Box;
|
|
96
103
|
var _this$asProps2 = this.asProps,
|
|
97
104
|
styles = _this$asProps2.styles,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
var _overlayChildren = overlayChildren(ChildrenRoot, SpinContainer.Overlay),
|
|
103
|
-
_overlayChildren2 = (0, _slicedToArray2["default"])(_overlayChildren, 2),
|
|
104
|
-
Children = _overlayChildren2[0],
|
|
105
|
-
Overlay = _overlayChildren2[1];
|
|
106
|
-
|
|
107
|
-
return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSpinContainer, _ref3.cn("SSpinContainer", _objectSpread({}, (0, _core.assignProps)({}, _ref))), /*#__PURE__*/_react["default"].createElement(SContent, _ref3.cn("SContent", {}), Children), /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, _ref3.cn("FadeInOut", {
|
|
108
|
-
"visible": loading,
|
|
109
|
-
"duration": duration
|
|
110
|
-
}), Overlay || /*#__PURE__*/_react["default"].createElement(SpinContainer.Overlay, null)));
|
|
105
|
+
Children = _this$asProps2.Children;
|
|
106
|
+
var advanceMode = (0, _findComponent.isAdvanceMode)(Children, [SpinContainer.Content.displayName, SpinContainer.Overlay.displayName]);
|
|
107
|
+
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSpinContainer, _ref4.cn("SSpinContainer", _objectSpread({}, (0, _core.assignProps)({}, _ref))), advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SpinContainer.Content, null, /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(SpinContainer.Overlay, null)));
|
|
111
108
|
}
|
|
112
109
|
}]);
|
|
113
110
|
return SpinContainerRoot;
|
|
@@ -121,33 +118,6 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
121
118
|
duration: 200
|
|
122
119
|
});
|
|
123
120
|
|
|
124
|
-
function overlayChildren(Children, Overlay) {
|
|
125
|
-
var children = (0, _getOriginChildren["default"])(Children);
|
|
126
|
-
|
|
127
|
-
if (typeof children === 'function') {
|
|
128
|
-
return [/*#__PURE__*/_react["default"].createElement(Children, null), null];
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
var OverlayChildren = null;
|
|
132
|
-
return [_react["default"].Children.toArray(children).map(function (element) {
|
|
133
|
-
if (! /*#__PURE__*/_react["default"].isValidElement(element)) return element;
|
|
134
|
-
if (element.type === _react["default"].Fragment) return element;
|
|
135
|
-
|
|
136
|
-
if (element.type[_core.CHILDREN_COMPONENT]) {
|
|
137
|
-
return overlayChildren(element.type, Overlay);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
var inheritedNames = element.type[_core.INHERITED_NAME] || [element.type.displayName];
|
|
141
|
-
|
|
142
|
-
if (inheritedNames.includes(Overlay.displayName)) {
|
|
143
|
-
OverlayChildren = element;
|
|
144
|
-
return null;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
return element;
|
|
148
|
-
}), OverlayChildren];
|
|
149
|
-
}
|
|
150
|
-
|
|
151
121
|
var Overlay = /*#__PURE__*/function (_Component2) {
|
|
152
122
|
(0, _inherits2["default"])(Overlay, _Component2);
|
|
153
123
|
|
|
@@ -162,23 +132,28 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
162
132
|
key: "render",
|
|
163
133
|
value: function render() {
|
|
164
134
|
var _ref2 = this ? this.asProps : arguments[0],
|
|
165
|
-
|
|
135
|
+
_ref5;
|
|
166
136
|
|
|
167
137
|
var SOverlay = _flexBox.Box;
|
|
168
138
|
var _this$asProps3 = this.asProps,
|
|
139
|
+
styles = _this$asProps3.styles,
|
|
169
140
|
background = _this$asProps3.background,
|
|
170
|
-
|
|
171
|
-
|
|
141
|
+
loading = _this$asProps3.loading,
|
|
142
|
+
duration = _this$asProps3.duration;
|
|
143
|
+
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, _ref5.cn("FadeInOut", {
|
|
144
|
+
"visible": loading,
|
|
145
|
+
"duration": duration
|
|
146
|
+
}), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, (0, _core.assignProps)({
|
|
172
147
|
"use:background": (0, _color["default"])(background)
|
|
173
|
-
}, _ref2))));
|
|
148
|
+
}, _ref2)))));
|
|
174
149
|
}
|
|
175
150
|
}]);
|
|
176
151
|
return Overlay;
|
|
177
152
|
}(_core.Component);
|
|
178
153
|
|
|
179
|
-
(0, _defineProperty2["default"])(Overlay, "defaultProps", function (
|
|
180
|
-
var size =
|
|
181
|
-
theme =
|
|
154
|
+
(0, _defineProperty2["default"])(Overlay, "defaultProps", function (_ref7) {
|
|
155
|
+
var size = _ref7.size,
|
|
156
|
+
theme = _ref7.theme;
|
|
182
157
|
return {
|
|
183
158
|
children: /*#__PURE__*/_react["default"].createElement(_spin["default"], {
|
|
184
159
|
size: size,
|
|
@@ -186,8 +161,19 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
186
161
|
})
|
|
187
162
|
};
|
|
188
163
|
});
|
|
164
|
+
|
|
165
|
+
function Content(props) {
|
|
166
|
+
var _ref3 = this ? this.asProps : arguments[0],
|
|
167
|
+
_ref6;
|
|
168
|
+
|
|
169
|
+
var SContent = _flexBox.Box;
|
|
170
|
+
var styles = props.styles;
|
|
171
|
+
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContent, _ref6.cn("SContent", _objectSpread({}, (0, _core.assignProps)({}, _ref3))));
|
|
172
|
+
}
|
|
173
|
+
|
|
189
174
|
var SpinContainer = (0, _core["default"])(SpinContainerRoot, {
|
|
190
|
-
Overlay: Overlay
|
|
175
|
+
Overlay: Overlay,
|
|
176
|
+
Content: Content
|
|
191
177
|
});
|
|
192
178
|
var _default = SpinContainer;
|
|
193
179
|
exports["default"] = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SpinContainer.js"],"names":["SpinContainerRoot","asProps","background","size","theme","SSpinContainer","Box","
|
|
1
|
+
{"version":3,"sources":["../../src/SpinContainer.js"],"names":["SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","Box","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","Component","style","SOverlay","children","props","SContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,iB;;;;;;;;;;;;WASJ,2BAAkB;AAChB,0BAAuD,KAAKC,OAA5D;AAAA,UAAQC,OAAR,iBAAQA,OAAR;AAAA,UAAiBC,UAAjB,iBAAiBA,UAAjB;AAAA,UAA6BC,QAA7B,iBAA6BA,QAA7B;AAAA,UAAuCC,IAAvC,iBAAuCA,IAAvC;AAAA,UAA6CC,KAA7C,iBAA6CA,KAA7C;AACA,aAAO;AACLH,QAAAA,UAAU,EAAVA,UADK;AAEL;AACAD,QAAAA,OAAO,EAAPA,OAHK;AAILE,QAAAA,QAAQ,EAARA,QAJK;AAKL;AACAC,QAAAA,IAAI,EAAJA,IANK;AAOLC,QAAAA,KAAK,EAALA;AAPK,OAAP;AASD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,cAAc,GASMC,YAT1B;AACA,2BAA6B,KAAKP,OAAlC;AAAA,UAAQQ,MAAR,kBAAQA,MAAR;AAAA,UAAgBC,QAAhB,kBAAgBA,QAAhB;AAEA,UAAMC,WAAW,GAAG,kCAAcD,QAAd,EAAwB,CAC1CE,aAAa,CAACC,OAAd,CAAsBC,WADoB,EAE1CF,aAAa,CAACG,OAAd,CAAsBD,WAFoB,CAAxB,CAApB;AAKA,qBAAO,mBAAQL,MAAR,CAAP,eACE,gCAAC,cAAD,mFACGE,WAAW,gBACV,gCAAC,QAAD,2BADU,gBAGV,+EACE,gCAAC,aAAD,CAAe,OAAf,qBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,aAAD,CAAe,OAAf,OAJF,CAJJ,CADF;AAcD;;;EA7C6BK,e;;iCAA1BhB,iB,iBACiB,e;iCADjBA,iB,WAEWiB,K;iCAFXjB,iB,kBAGkB;AACpBK,EAAAA,IAAI,EAAE,KADc;AAEpBC,EAAAA,KAAK,EAAE,MAFa;AAGpBF,EAAAA,QAAQ,EAAE;AAHU,C;;IA6ClBW,O;;;;;;;;;;;;WAKJ,kBAAS;AAAA;AAAA;;AACP,UAAMG,QAAQ,GAKQV,YALtB;AACA,2BAAkD,KAAKP,OAAvD;AAAA,UAAQQ,MAAR,kBAAQA,MAAR;AAAA,UAAgBN,UAAhB,kBAAgBA,UAAhB;AAAA,UAA4BD,OAA5B,kBAA4BA,OAA5B;AAAA,UAAqCE,QAArC,kBAAqCA,QAArC;AAEA,qBAAO,mBAAQK,MAAR,CAAP,eACE,gCAAC,oBAAD;AAAA,mBAAoBP,OAApB;AAAA,oBAAuCE;AAAvC,uBACE,gCAAC,QAAD;AAAA,0BAAuC,uBAAaD,UAAb;AAAvC,kBADF,CADF;AAKD;;;EAdmBa,e;;iCAAhBD,O,kBACkB;AAAA,MAAGV,IAAH,SAAGA,IAAH;AAAA,MAASC,KAAT,SAASA,KAAT;AAAA,SAAsB;AAC1Ca,IAAAA,QAAQ,eAAE,gCAAC,gBAAD;AAAM,MAAA,IAAI,EAAEd,IAAZ;AAAkB,MAAA,KAAK,EAAEC;AAAzB;AADgC,GAAtB;AAAA,C;;AAgBxB,SAASO,OAAT,CAAiBO,KAAjB,EAAwB;AAAA;AAAA;;AACtB,MAAMC,QAAQ,GAE2Bb,YAFzC;AACA,MAAQC,MAAR,GAAmBW,KAAnB,CAAQX,MAAR;AACA,iBAAO,mBAAQA,MAAR,CAAP,eAAuB,gCAAC,QAAD,6EAAvB;AACD;;AAED,IAAMG,aAAa,GAAG,sBAAgBZ,iBAAhB,EAAmC;AACvDe,EAAAA,OAAO,EAAPA,OADuD;AAEvDF,EAAAA,OAAO,EAAPA;AAFuD,CAAnC,CAAtB;eAKeD,a","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n static displayName = 'SpinContainer';\n static style = style;\n static defaultProps = {\n size: 'xxl',\n theme: 'dark',\n duration: 200,\n };\n\n getOverlayProps() {\n const { loading, background, duration, size, theme } = this.asProps;\n return {\n background,\n // for Animated\n loading,\n duration,\n // for Spin\n size,\n theme,\n };\n }\n\n render() {\n const SSpinContainer = Root;\n const { styles, Children } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [\n SpinContainer.Content.displayName,\n SpinContainer.Overlay.displayName,\n ]);\n\n return sstyled(styles)(\n <SSpinContainer render={Box}>\n {advanceMode ? (\n <Children />\n ) : (\n <>\n <SpinContainer.Content>\n <Children />\n </SpinContainer.Content>\n <SpinContainer.Overlay />\n </>\n )}\n </SSpinContainer>,\n );\n }\n}\n\nclass Overlay extends Component {\n static defaultProps = ({ size, theme }) => ({\n children: <Spin size={size} theme={theme} />,\n });\n\n render() {\n const SOverlay = Root;\n const { styles, background, loading, duration } = this.asProps;\n\n return sstyled(styles)(\n <FadeInOut visible={loading} duration={duration}>\n <SOverlay render={Box} use:background={resolveColor(background)} />\n </FadeInOut>,\n );\n }\n}\n\nfunction Content(props) {\n const SContent = Root;\n const { styles } = props;\n return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n Overlay,\n Content,\n});\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -26,4 +26,8 @@ Object.keys(_SpinContainer).forEach(function (key) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
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; }
|
|
29
33
|
//# sourceMappingURL=index.js.map
|
package/lib/es6/SpinContainer.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
3
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
@@ -6,39 +5,40 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
|
|
|
6
5
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
7
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
|
+
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
9
9
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
10
10
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
11
11
|
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
13
|
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
15
|
|
|
16
16
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
17
17
|
|
|
18
18
|
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; } }
|
|
19
19
|
|
|
20
|
-
import React
|
|
21
|
-
import createComponent, {
|
|
20
|
+
import React from 'react';
|
|
21
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
22
22
|
import { FadeInOut } from '@semcore/animation';
|
|
23
23
|
import Spin from '@semcore/spin';
|
|
24
24
|
import { Box } from '@semcore/flex-box';
|
|
25
25
|
import resolveColor from '@semcore/utils/lib/color';
|
|
26
|
-
import
|
|
26
|
+
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
27
27
|
|
|
28
28
|
/*__reshadow-styles__:"./style/spin-container.shadow.css"*/
|
|
29
29
|
var style = (
|
|
30
30
|
/*__reshadow_css_start__*/
|
|
31
31
|
_sstyled.insert(
|
|
32
32
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
33
|
+
".___SSpinContainer_1fs6p_gg_{z-index:0;position:relative;display:block}.___SContent_1fs6p_gg_{z-index:0;position:relative}.___SOverlay_1fs6p_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.85)}.___SOverlay_1fs6p_gg_.__background_1fs6p_gg_{background:var(--background_18krv29)}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
35
|
, "18krv29_gg_")
|
|
36
36
|
/*__reshadow_css_end__*/
|
|
37
37
|
, {
|
|
38
|
-
"__SSpinContainer": "
|
|
39
|
-
"__SContent": "
|
|
40
|
-
"__SOverlay": "
|
|
41
|
-
"_background": "
|
|
38
|
+
"__SSpinContainer": "___SSpinContainer_1fs6p_gg_",
|
|
39
|
+
"__SContent": "___SContent_1fs6p_gg_",
|
|
40
|
+
"__SOverlay": "___SOverlay_1fs6p_gg_",
|
|
41
|
+
"_background": "__background_1fs6p_gg_",
|
|
42
42
|
"--background": "--background_18krv29"
|
|
43
43
|
});
|
|
44
44
|
|
|
@@ -57,11 +57,17 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
57
57
|
key: "getOverlayProps",
|
|
58
58
|
value: function getOverlayProps() {
|
|
59
59
|
var _this$asProps = this.asProps,
|
|
60
|
+
loading = _this$asProps.loading,
|
|
60
61
|
background = _this$asProps.background,
|
|
62
|
+
duration = _this$asProps.duration,
|
|
61
63
|
size = _this$asProps.size,
|
|
62
64
|
theme = _this$asProps.theme;
|
|
63
65
|
return {
|
|
64
66
|
background: background,
|
|
67
|
+
// for Animated
|
|
68
|
+
loading: loading,
|
|
69
|
+
duration: duration,
|
|
70
|
+
// for Spin
|
|
65
71
|
size: size,
|
|
66
72
|
theme: theme
|
|
67
73
|
};
|
|
@@ -70,25 +76,14 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
70
76
|
key: "render",
|
|
71
77
|
value: function render() {
|
|
72
78
|
var _ref = this ? this.asProps : arguments[0],
|
|
73
|
-
|
|
79
|
+
_ref4;
|
|
74
80
|
|
|
75
81
|
var SSpinContainer = Box;
|
|
76
|
-
var SContent = Box;
|
|
77
82
|
var _this$asProps2 = this.asProps,
|
|
78
83
|
styles = _this$asProps2.styles,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
var _overlayChildren = overlayChildren(ChildrenRoot, SpinContainer.Overlay),
|
|
84
|
-
_overlayChildren2 = _slicedToArray(_overlayChildren, 2),
|
|
85
|
-
Children = _overlayChildren2[0],
|
|
86
|
-
Overlay = _overlayChildren2[1];
|
|
87
|
-
|
|
88
|
-
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SSpinContainer, _ref3.cn("SSpinContainer", _objectSpread({}, _assignProps({}, _ref))), /*#__PURE__*/React.createElement(SContent, _ref3.cn("SContent", {}), Children), /*#__PURE__*/React.createElement(FadeInOut, _ref3.cn("FadeInOut", {
|
|
89
|
-
"visible": loading,
|
|
90
|
-
"duration": duration
|
|
91
|
-
}), Overlay || /*#__PURE__*/React.createElement(SpinContainer.Overlay, null)));
|
|
84
|
+
Children = _this$asProps2.Children;
|
|
85
|
+
var advanceMode = isAdvanceMode(Children, [SpinContainer.Content.displayName, SpinContainer.Overlay.displayName]);
|
|
86
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SSpinContainer, _ref4.cn("SSpinContainer", _objectSpread({}, _assignProps({}, _ref))), advanceMode ? /*#__PURE__*/React.createElement(Children, _ref4.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinContainer.Content, null, /*#__PURE__*/React.createElement(Children, _ref4.cn("Children", {}))), /*#__PURE__*/React.createElement(SpinContainer.Overlay, null)));
|
|
92
87
|
}
|
|
93
88
|
}]);
|
|
94
89
|
|
|
@@ -105,33 +100,6 @@ _defineProperty(SpinContainerRoot, "defaultProps", {
|
|
|
105
100
|
duration: 200
|
|
106
101
|
});
|
|
107
102
|
|
|
108
|
-
function overlayChildren(Children, Overlay) {
|
|
109
|
-
var children = getOriginChildren(Children);
|
|
110
|
-
|
|
111
|
-
if (typeof children === 'function') {
|
|
112
|
-
return [/*#__PURE__*/React.createElement(Children, null), null];
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
var OverlayChildren = null;
|
|
116
|
-
return [React.Children.toArray(children).map(function (element) {
|
|
117
|
-
if (! /*#__PURE__*/React.isValidElement(element)) return element;
|
|
118
|
-
if (element.type === React.Fragment) return element;
|
|
119
|
-
|
|
120
|
-
if (element.type[CHILDREN_COMPONENT]) {
|
|
121
|
-
return overlayChildren(element.type, Overlay);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
var inheritedNames = element.type[INHERITED_NAME] || [element.type.displayName];
|
|
125
|
-
|
|
126
|
-
if (inheritedNames.includes(Overlay.displayName)) {
|
|
127
|
-
OverlayChildren = element;
|
|
128
|
-
return null;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return element;
|
|
132
|
-
}), OverlayChildren];
|
|
133
|
-
}
|
|
134
|
-
|
|
135
103
|
var Overlay = /*#__PURE__*/function (_Component2) {
|
|
136
104
|
_inherits(Overlay, _Component2);
|
|
137
105
|
|
|
@@ -147,24 +115,29 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
147
115
|
key: "render",
|
|
148
116
|
value: function render() {
|
|
149
117
|
var _ref2 = this ? this.asProps : arguments[0],
|
|
150
|
-
|
|
118
|
+
_ref5;
|
|
151
119
|
|
|
152
120
|
var SOverlay = Box;
|
|
153
121
|
var _this$asProps3 = this.asProps,
|
|
122
|
+
styles = _this$asProps3.styles,
|
|
154
123
|
background = _this$asProps3.background,
|
|
155
|
-
|
|
156
|
-
|
|
124
|
+
loading = _this$asProps3.loading,
|
|
125
|
+
duration = _this$asProps3.duration;
|
|
126
|
+
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(FadeInOut, _ref5.cn("FadeInOut", {
|
|
127
|
+
"visible": loading,
|
|
128
|
+
"duration": duration
|
|
129
|
+
}), /*#__PURE__*/React.createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, _assignProps2({
|
|
157
130
|
"use:background": resolveColor(background)
|
|
158
|
-
}, _ref2))));
|
|
131
|
+
}, _ref2)))));
|
|
159
132
|
}
|
|
160
133
|
}]);
|
|
161
134
|
|
|
162
135
|
return Overlay;
|
|
163
136
|
}(Component);
|
|
164
137
|
|
|
165
|
-
_defineProperty(Overlay, "defaultProps", function (
|
|
166
|
-
var size =
|
|
167
|
-
theme =
|
|
138
|
+
_defineProperty(Overlay, "defaultProps", function (_ref7) {
|
|
139
|
+
var size = _ref7.size,
|
|
140
|
+
theme = _ref7.theme;
|
|
168
141
|
return {
|
|
169
142
|
children: /*#__PURE__*/React.createElement(Spin, {
|
|
170
143
|
size: size,
|
|
@@ -173,8 +146,18 @@ _defineProperty(Overlay, "defaultProps", function (_ref5) {
|
|
|
173
146
|
};
|
|
174
147
|
});
|
|
175
148
|
|
|
149
|
+
function Content(props) {
|
|
150
|
+
var _ref3 = this ? this.asProps : arguments[0],
|
|
151
|
+
_ref6;
|
|
152
|
+
|
|
153
|
+
var SContent = Box;
|
|
154
|
+
var styles = props.styles;
|
|
155
|
+
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, _assignProps3({}, _ref3))));
|
|
156
|
+
}
|
|
157
|
+
|
|
176
158
|
var SpinContainer = createComponent(SpinContainerRoot, {
|
|
177
|
-
Overlay: Overlay
|
|
159
|
+
Overlay: Overlay,
|
|
160
|
+
Content: Content
|
|
178
161
|
});
|
|
179
162
|
export default SpinContainer;
|
|
180
163
|
//# sourceMappingURL=SpinContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SpinContainer.js"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["../../src/SpinContainer.js"],"names":["React","createComponent","Component","sstyled","Root","FadeInOut","Spin","Box","resolveColor","isAdvanceMode","SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","style","SOverlay","children","props","SContent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { FadeInOut } from '@semcore/animation';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nimport style from './style/spin-container.shadow.css';\n\nclass SpinContainerRoot extends Component {\n static displayName = 'SpinContainer';\n static style = style;\n static defaultProps = {\n size: 'xxl',\n theme: 'dark',\n duration: 200,\n };\n\n getOverlayProps() {\n const { loading, background, duration, size, theme } = this.asProps;\n return {\n background,\n // for Animated\n loading,\n duration,\n // for Spin\n size,\n theme,\n };\n }\n\n render() {\n const SSpinContainer = Root;\n const { styles, Children } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [\n SpinContainer.Content.displayName,\n SpinContainer.Overlay.displayName,\n ]);\n\n return sstyled(styles)(\n <SSpinContainer render={Box}>\n {advanceMode ? (\n <Children />\n ) : (\n <>\n <SpinContainer.Content>\n <Children />\n </SpinContainer.Content>\n <SpinContainer.Overlay />\n </>\n )}\n </SSpinContainer>,\n );\n }\n}\n\nclass Overlay extends Component {\n static defaultProps = ({ size, theme }) => ({\n children: <Spin size={size} theme={theme} />,\n });\n\n render() {\n const SOverlay = Root;\n const { styles, background, loading, duration } = this.asProps;\n\n return sstyled(styles)(\n <FadeInOut visible={loading} duration={duration}>\n <SOverlay render={Box} use:background={resolveColor(background)} />\n </FadeInOut>,\n );\n }\n}\n\nfunction Content(props) {\n const SContent = Root;\n const { styles } = props;\n return sstyled(styles)(<SContent render={Box} />);\n}\n\nconst SpinContainer = createComponent(SpinContainerRoot, {\n Overlay,\n Content,\n});\n\nexport default SpinContainer;\n"],"file":"SpinContainer.js"}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export interface ISpinContainerOverlayProps extends IBoxProps {
|
|
|
31
31
|
declare const SpinContainer: (<T>(
|
|
32
32
|
props: CProps<ISpinContainerProps & T, ISpinContainerContext>,
|
|
33
33
|
) => ReturnEl) & {
|
|
34
|
+
Content: typeof Box;
|
|
34
35
|
Overlay: <T>(props: ISpinContainerOverlayProps & T) => ReturnEl;
|
|
35
36
|
};
|
|
36
37
|
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/spin-container",
|
|
3
3
|
"description": "SEMRush SpinContainer Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "5.0.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"types": "lib/types/index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
8
9
|
"author": "Roman Lysov <r.lysov@semrush.com>",
|
|
9
10
|
"license": "MIT",
|
|
10
11
|
"scripts": {
|
|
@@ -12,7 +13,7 @@
|
|
|
12
13
|
"test": "jest"
|
|
13
14
|
},
|
|
14
15
|
"dependencies": {
|
|
15
|
-
"@semcore/utils": "^3.
|
|
16
|
+
"@semcore/utils": "^3.31",
|
|
16
17
|
"@semcore/spin": "^3",
|
|
17
18
|
"@semcore/flex-box": "^4",
|
|
18
19
|
"@semcore/animation": "^1"
|
|
@@ -22,6 +23,11 @@
|
|
|
22
23
|
"react": "16.8 - 17"
|
|
23
24
|
},
|
|
24
25
|
"jest": {
|
|
25
|
-
"preset": "jest-preset-ui"
|
|
26
|
+
"preset": "@semcore/jest-preset-ui"
|
|
27
|
+
},
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "https://github.com/semrush/intergalactic.git",
|
|
31
|
+
"directory": "semcore/spin-container"
|
|
26
32
|
}
|
|
27
33
|
}
|
package/src/SpinContainer.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import createComponent, {
|
|
3
|
-
CHILDREN_COMPONENT,
|
|
4
|
-
Component,
|
|
5
|
-
INHERITED_NAME,
|
|
6
|
-
sstyled,
|
|
7
|
-
Root,
|
|
8
|
-
} from '@semcore/core';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
9
3
|
import { FadeInOut } from '@semcore/animation';
|
|
10
4
|
import Spin from '@semcore/spin';
|
|
11
5
|
import { Box } from '@semcore/flex-box';
|
|
12
6
|
import resolveColor from '@semcore/utils/lib/color';
|
|
13
|
-
import
|
|
7
|
+
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
14
8
|
|
|
15
9
|
import style from './style/spin-container.shadow.css';
|
|
16
10
|
|
|
@@ -24,9 +18,13 @@ class SpinContainerRoot extends Component {
|
|
|
24
18
|
};
|
|
25
19
|
|
|
26
20
|
getOverlayProps() {
|
|
27
|
-
const { background, size, theme } = this.asProps;
|
|
21
|
+
const { loading, background, duration, size, theme } = this.asProps;
|
|
28
22
|
return {
|
|
29
23
|
background,
|
|
24
|
+
// for Animated
|
|
25
|
+
loading,
|
|
26
|
+
duration,
|
|
27
|
+
// for Spin
|
|
30
28
|
size,
|
|
31
29
|
theme,
|
|
32
30
|
};
|
|
@@ -34,48 +32,30 @@ class SpinContainerRoot extends Component {
|
|
|
34
32
|
|
|
35
33
|
render() {
|
|
36
34
|
const SSpinContainer = Root;
|
|
37
|
-
const
|
|
38
|
-
const { styles, Children: ChildrenRoot, loading, duration } = this.asProps;
|
|
35
|
+
const { styles, Children } = this.asProps;
|
|
39
36
|
|
|
40
|
-
const
|
|
37
|
+
const advanceMode = isAdvanceMode(Children, [
|
|
38
|
+
SpinContainer.Content.displayName,
|
|
39
|
+
SpinContainer.Overlay.displayName,
|
|
40
|
+
]);
|
|
41
41
|
|
|
42
42
|
return sstyled(styles)(
|
|
43
43
|
<SSpinContainer render={Box}>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
{advanceMode ? (
|
|
45
|
+
<Children />
|
|
46
|
+
) : (
|
|
47
|
+
<>
|
|
48
|
+
<SpinContainer.Content>
|
|
49
|
+
<Children />
|
|
50
|
+
</SpinContainer.Content>
|
|
51
|
+
<SpinContainer.Overlay />
|
|
52
|
+
</>
|
|
53
|
+
)}
|
|
48
54
|
</SSpinContainer>,
|
|
49
55
|
);
|
|
50
56
|
}
|
|
51
57
|
}
|
|
52
58
|
|
|
53
|
-
function overlayChildren(Children, Overlay) {
|
|
54
|
-
const children = getOriginChildren(Children);
|
|
55
|
-
if (typeof children === 'function') {
|
|
56
|
-
return [<Children />, null];
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
let OverlayChildren = null;
|
|
60
|
-
return [
|
|
61
|
-
React.Children.toArray(children).map((element) => {
|
|
62
|
-
if (!React.isValidElement(element)) return element;
|
|
63
|
-
if (element.type === React.Fragment) return element;
|
|
64
|
-
if (element.type[CHILDREN_COMPONENT]) {
|
|
65
|
-
return overlayChildren(element.type, Overlay);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const inheritedNames = element.type[INHERITED_NAME] || [element.type.displayName];
|
|
69
|
-
if (inheritedNames.includes(Overlay.displayName)) {
|
|
70
|
-
OverlayChildren = element;
|
|
71
|
-
return null;
|
|
72
|
-
}
|
|
73
|
-
return element;
|
|
74
|
-
}),
|
|
75
|
-
OverlayChildren,
|
|
76
|
-
];
|
|
77
|
-
}
|
|
78
|
-
|
|
79
59
|
class Overlay extends Component {
|
|
80
60
|
static defaultProps = ({ size, theme }) => ({
|
|
81
61
|
children: <Spin size={size} theme={theme} />,
|
|
@@ -83,12 +63,25 @@ class Overlay extends Component {
|
|
|
83
63
|
|
|
84
64
|
render() {
|
|
85
65
|
const SOverlay = Root;
|
|
86
|
-
const { background,
|
|
66
|
+
const { styles, background, loading, duration } = this.asProps;
|
|
87
67
|
|
|
88
|
-
return sstyled(styles)(
|
|
68
|
+
return sstyled(styles)(
|
|
69
|
+
<FadeInOut visible={loading} duration={duration}>
|
|
70
|
+
<SOverlay render={Box} use:background={resolveColor(background)} />
|
|
71
|
+
</FadeInOut>,
|
|
72
|
+
);
|
|
89
73
|
}
|
|
90
74
|
}
|
|
91
75
|
|
|
92
|
-
|
|
76
|
+
function Content(props) {
|
|
77
|
+
const SContent = Root;
|
|
78
|
+
const { styles } = props;
|
|
79
|
+
return sstyled(styles)(<SContent render={Box} />);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const SpinContainer = createComponent(SpinContainerRoot, {
|
|
83
|
+
Overlay,
|
|
84
|
+
Content,
|
|
85
|
+
});
|
|
93
86
|
|
|
94
87
|
export default SpinContainer;
|
package/src/index.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export interface ISpinContainerOverlayProps extends IBoxProps {
|
|
|
31
31
|
declare const SpinContainer: (<T>(
|
|
32
32
|
props: CProps<ISpinContainerProps & T, ISpinContainerContext>,
|
|
33
33
|
) => ReturnEl) & {
|
|
34
|
+
Content: typeof Box;
|
|
34
35
|
Overlay: <T>(props: ISpinContainerOverlayProps & T) => ReturnEl;
|
|
35
36
|
};
|
|
36
37
|
|