@semcore/spin-container 7.9.2 → 7.10.0-prerelease.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 +7 -1
- package/lib/cjs/SpinContainer.js +17 -13
- package/lib/cjs/SpinContainer.js.map +1 -1
- package/lib/es6/SpinContainer.js +16 -12
- package/lib/es6/SpinContainer.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [7.
|
|
5
|
+
## [7.10.0-prerelease.1] - 2023-10-26
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Design tokens resolving for `theme` prop.
|
|
10
|
+
|
|
11
|
+
## [7.9.2] - 2023-10-24
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
8
14
|
|
package/lib/cjs/SpinContainer.js
CHANGED
|
@@ -17,17 +17,17 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
17
17
|
var _animation = require("@semcore/animation");
|
|
18
18
|
var _spin = _interopRequireDefault(require("@semcore/spin"));
|
|
19
19
|
var _flexBox = require("@semcore/flex-box");
|
|
20
|
-
var
|
|
20
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
21
21
|
var _findComponent = require("@semcore/utils/lib/findComponent");
|
|
22
22
|
/*__reshadow-styles__:"./style/spin-container.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
24
|
-
"__SSpinContainer": "
|
|
25
|
-
"__SContent": "
|
|
26
|
-
"__SOverlay": "
|
|
27
|
-
"_theme_invert": "
|
|
28
|
-
"_theme_dark": "
|
|
29
|
-
"_theme_custom": "
|
|
30
|
-
"--background": "--
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SSpinContainer_xtzp1_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_xtzp1_gg_{z-index:0;position:relative}.___SOverlay_xtzp1_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_xtzp1_gg_._theme_invert_xtzp1_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_xtzp1_gg_._theme_dark_xtzp1_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_xtzp1_gg_._theme_custom_xtzp1_gg_{background-color:var(--background_xtzp1)}" /*__inner_css_end__*/, "xtzp1_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__SSpinContainer": "___SSpinContainer_xtzp1_gg_",
|
|
25
|
+
"__SContent": "___SContent_xtzp1_gg_",
|
|
26
|
+
"__SOverlay": "___SOverlay_xtzp1_gg_",
|
|
27
|
+
"_theme_invert": "_theme_invert_xtzp1_gg_",
|
|
28
|
+
"_theme_dark": "_theme_dark_xtzp1_gg_",
|
|
29
|
+
"_theme_custom": "_theme_custom_xtzp1_gg_",
|
|
30
|
+
"--background": "--background_xtzp1"
|
|
31
31
|
});
|
|
32
32
|
var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
33
33
|
(0, _inherits2["default"])(SpinContainerRoot, _Component);
|
|
@@ -44,7 +44,8 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
44
44
|
background = _this$asProps.background,
|
|
45
45
|
duration = _this$asProps.duration,
|
|
46
46
|
size = _this$asProps.size,
|
|
47
|
-
theme = _this$asProps.theme
|
|
47
|
+
theme = _this$asProps.theme,
|
|
48
|
+
resolveColor = _this$asProps.resolveColor;
|
|
48
49
|
return {
|
|
49
50
|
background: background,
|
|
50
51
|
// for Animated
|
|
@@ -52,7 +53,8 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
52
53
|
duration: duration,
|
|
53
54
|
// for Spin
|
|
54
55
|
size: size,
|
|
55
|
-
theme: theme
|
|
56
|
+
theme: theme,
|
|
57
|
+
resolveColor: resolveColor
|
|
56
58
|
};
|
|
57
59
|
}
|
|
58
60
|
}, {
|
|
@@ -81,6 +83,7 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
81
83
|
theme: 'dark',
|
|
82
84
|
duration: 200
|
|
83
85
|
});
|
|
86
|
+
(0, _defineProperty2["default"])(SpinContainerRoot, "enhance", [(0, _resolveColorEnhance["default"])()]);
|
|
84
87
|
var Overlay = /*#__PURE__*/function (_Component2) {
|
|
85
88
|
(0, _inherits2["default"])(Overlay, _Component2);
|
|
86
89
|
var _super2 = (0, _createSuper2["default"])(Overlay);
|
|
@@ -99,14 +102,15 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
99
102
|
theme = _this$asProps3.theme,
|
|
100
103
|
background = _this$asProps3.background,
|
|
101
104
|
loading = _this$asProps3.loading,
|
|
102
|
-
duration = _this$asProps3.duration
|
|
105
|
+
duration = _this$asProps3.duration,
|
|
106
|
+
resolveColor = _this$asProps3.resolveColor;
|
|
103
107
|
var useTheme = background ? 'custom' : theme;
|
|
104
108
|
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, _ref5.cn("FadeInOut", {
|
|
105
109
|
"visible": loading,
|
|
106
110
|
"duration": duration
|
|
107
111
|
}), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref5.cn("SOverlay", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
108
112
|
"use:theme": useTheme,
|
|
109
|
-
"use:background": (
|
|
113
|
+
"use:background": resolveColor(background)
|
|
110
114
|
}, _ref2)))));
|
|
111
115
|
}
|
|
112
116
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinContainer.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_animation","_spin","_flexBox","
|
|
1
|
+
{"version":3,"file":"SpinContainer.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_animation","_spin","_flexBox","_resolveColorEnhance","_findComponent","style","sstyled","insert","SpinContainerRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","getOverlayProps","_this$asProps","asProps","loading","background","duration","size","theme","resolveColor","render","_ref","_ref4","SSpinContainer","Box","_this$asProps2","styles","Children","forcedAdvancedMode","advancedMode","isAdvanceMode","SpinContainer","Content","displayName","Overlay","createElement","cn","_objectSpread2","assignProps","Fragment","Component","_defineProperty2","resolveColorEnhance","_Component2","_super2","_ref2","_ref5","SOverlay","_this$asProps3","useTheme","FadeInOut","_ref7","children","props","_ref3","arguments[0]","_ref6","SContent","createComponent","_default","exports"],"sources":["../../src/SpinContainer.jsx"],"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 resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\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 static enhance = [resolveColorEnhance()];\n\n getOverlayProps() {\n const { loading, background, duration, size, theme, resolveColor } = this.asProps;\n return {\n background,\n // for Animated\n loading,\n duration,\n // for Spin\n size,\n theme,\n resolveColor,\n };\n }\n\n render() {\n const SSpinContainer = Root;\n const { styles, Children, loading, forcedAdvancedMode } = this.asProps;\n\n const advancedMode =\n forcedAdvancedMode ||\n isAdvanceMode(Children, [\n SpinContainer.Content.displayName,\n SpinContainer.Overlay.displayName,\n ]);\n\n return sstyled(styles)(\n <SSpinContainer render={Box} aria-busy={loading}>\n {advancedMode ? (\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, theme, background, loading, duration, resolveColor } = this.asProps;\n const useTheme = background ? 'custom' : theme;\n\n return sstyled(styles)(\n <FadeInOut visible={loading} duration={duration}>\n <SOverlay render={Box} use:theme={useTheme} 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"],"mappings":"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"}
|
package/lib/es6/SpinContainer.js
CHANGED
|
@@ -13,17 +13,17 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
13
13
|
import { FadeInOut } from '@semcore/animation';
|
|
14
14
|
import Spin from '@semcore/spin';
|
|
15
15
|
import { Box } from '@semcore/flex-box';
|
|
16
|
-
import
|
|
16
|
+
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
17
17
|
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
18
18
|
/*__reshadow-styles__:"./style/spin-container.shadow.css"*/
|
|
19
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
20
|
-
"__SSpinContainer": "
|
|
21
|
-
"__SContent": "
|
|
22
|
-
"__SOverlay": "
|
|
23
|
-
"_theme_invert": "
|
|
24
|
-
"_theme_dark": "
|
|
25
|
-
"_theme_custom": "
|
|
26
|
-
"--background": "--
|
|
19
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SSpinContainer_xtzp1_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_xtzp1_gg_{z-index:0;position:relative}.___SOverlay_xtzp1_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_xtzp1_gg_._theme_invert_xtzp1_gg_{background-color:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SOverlay_xtzp1_gg_._theme_dark_xtzp1_gg_{background-color:var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85))}.___SOverlay_xtzp1_gg_._theme_custom_xtzp1_gg_{background-color:var(--background_xtzp1)}" /*__inner_css_end__*/, "xtzp1_gg_") /*__reshadow_css_end__*/, {
|
|
20
|
+
"__SSpinContainer": "___SSpinContainer_xtzp1_gg_",
|
|
21
|
+
"__SContent": "___SContent_xtzp1_gg_",
|
|
22
|
+
"__SOverlay": "___SOverlay_xtzp1_gg_",
|
|
23
|
+
"_theme_invert": "_theme_invert_xtzp1_gg_",
|
|
24
|
+
"_theme_dark": "_theme_dark_xtzp1_gg_",
|
|
25
|
+
"_theme_custom": "_theme_custom_xtzp1_gg_",
|
|
26
|
+
"--background": "--background_xtzp1"
|
|
27
27
|
});
|
|
28
28
|
var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
29
29
|
_inherits(SpinContainerRoot, _Component);
|
|
@@ -40,7 +40,8 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
40
40
|
background = _this$asProps.background,
|
|
41
41
|
duration = _this$asProps.duration,
|
|
42
42
|
size = _this$asProps.size,
|
|
43
|
-
theme = _this$asProps.theme
|
|
43
|
+
theme = _this$asProps.theme,
|
|
44
|
+
resolveColor = _this$asProps.resolveColor;
|
|
44
45
|
return {
|
|
45
46
|
background: background,
|
|
46
47
|
// for Animated
|
|
@@ -48,7 +49,8 @@ var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
|
48
49
|
duration: duration,
|
|
49
50
|
// for Spin
|
|
50
51
|
size: size,
|
|
51
|
-
theme: theme
|
|
52
|
+
theme: theme,
|
|
53
|
+
resolveColor: resolveColor
|
|
52
54
|
};
|
|
53
55
|
}
|
|
54
56
|
}, {
|
|
@@ -77,6 +79,7 @@ _defineProperty(SpinContainerRoot, "defaultProps", {
|
|
|
77
79
|
theme: 'dark',
|
|
78
80
|
duration: 200
|
|
79
81
|
});
|
|
82
|
+
_defineProperty(SpinContainerRoot, "enhance", [resolveColorEnhance()]);
|
|
80
83
|
var Overlay = /*#__PURE__*/function (_Component2) {
|
|
81
84
|
_inherits(Overlay, _Component2);
|
|
82
85
|
var _super2 = _createSuper(Overlay);
|
|
@@ -95,7 +98,8 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
95
98
|
theme = _this$asProps3.theme,
|
|
96
99
|
background = _this$asProps3.background,
|
|
97
100
|
loading = _this$asProps3.loading,
|
|
98
|
-
duration = _this$asProps3.duration
|
|
101
|
+
duration = _this$asProps3.duration,
|
|
102
|
+
resolveColor = _this$asProps3.resolveColor;
|
|
99
103
|
var useTheme = background ? 'custom' : theme;
|
|
100
104
|
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(FadeInOut, _ref5.cn("FadeInOut", {
|
|
101
105
|
"visible": loading,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinContainer.js","names":["React","createComponent","Component","sstyled","Root","FadeInOut","Spin","Box","
|
|
1
|
+
{"version":3,"file":"SpinContainer.js","names":["React","createComponent","Component","sstyled","Root","FadeInOut","Spin","Box","resolveColorEnhance","isAdvanceMode","style","_sstyled","insert","SpinContainerRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getOverlayProps","_this$asProps","asProps","loading","background","duration","size","theme","resolveColor","render","_ref","_ref4","SSpinContainer","_this$asProps2","styles","Children","forcedAdvancedMode","advancedMode","SpinContainer","Content","displayName","Overlay","createElement","cn","_objectSpread","_assignProps","Fragment","_defineProperty","_Component2","_super2","_ref2","_ref5","SOverlay","_this$asProps3","useTheme","_assignProps2","_ref7","children","props","_ref3","arguments[0]","_ref6","SContent","_assignProps3"],"sources":["../../src/SpinContainer.jsx"],"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 resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\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 static enhance = [resolveColorEnhance()];\n\n getOverlayProps() {\n const { loading, background, duration, size, theme, resolveColor } = this.asProps;\n return {\n background,\n // for Animated\n loading,\n duration,\n // for Spin\n size,\n theme,\n resolveColor,\n };\n }\n\n render() {\n const SSpinContainer = Root;\n const { styles, Children, loading, forcedAdvancedMode } = this.asProps;\n\n const advancedMode =\n forcedAdvancedMode ||\n isAdvanceMode(Children, [\n SpinContainer.Content.displayName,\n SpinContainer.Overlay.displayName,\n ]);\n\n return sstyled(styles)(\n <SSpinContainer render={Box} aria-busy={loading}>\n {advancedMode ? (\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, theme, background, loading, duration, resolveColor } = this.asProps;\n const useTheme = background ? 'custom' : theme;\n\n return sstyled(styles)(\n <FadeInOut visible={loading} duration={duration}>\n <SOverlay render={Box} use:theme={useTheme} 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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/spin-container",
|
|
3
3
|
"description": "Semrush SpinContainer Component",
|
|
4
|
-
"version": "7.
|
|
4
|
+
"version": "7.10.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"types": "lib/types/index.d.ts",
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/utils": "4.
|
|
13
|
-
"@semcore/spin": "5.
|
|
14
|
-
"@semcore/flex-box": "5.
|
|
15
|
-
"@semcore/animation": "2.
|
|
12
|
+
"@semcore/utils": "4.9.0-prerelease.2",
|
|
13
|
+
"@semcore/spin": "5.9.0-prerelease.1",
|
|
14
|
+
"@semcore/flex-box": "5.9.0-prerelease.1",
|
|
15
|
+
"@semcore/animation": "2.9.0-prerelease.1"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@semcore/core": "^2.
|
|
18
|
+
"@semcore/core": "^2.8.0-prerelease.0",
|
|
19
19
|
"react": "16.8 - 18",
|
|
20
20
|
"react-dom": "16.8 - 18"
|
|
21
21
|
},
|