@semcore/spin-container 5.1.0 → 6.0.2
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 +12 -7
- package/lib/cjs/SpinContainer.js.map +1 -1
- package/lib/cjs/style/spin-container.shadow.css +8 -2
- package/lib/es6/SpinContainer.js +12 -7
- package/lib/es6/SpinContainer.js.map +1 -1
- package/lib/es6/style/spin-container.shadow.css +8 -2
- package/package.json +2 -2
- package/src/SpinContainer.jsx +3 -2
- package/src/style/spin-container.shadow.css +8 -2
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
|
+
## [6.0.2] - 2022-05-31
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.1 ~> 3.32.2], `@semcore/spin` [4.0.1 ~> 4.0.2], `@semcore/flex-box` [4.5.3 ~> 4.5.4], `@semcore/animation` [1.5.1 ~> 1.5.2]).
|
|
10
|
+
|
|
11
|
+
## [6.0.1] - 2022-05-19
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/spin` [4.0.0 ~> 4.0.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3], `@semcore/animation` [1.5.0 ~> 1.5.1]).
|
|
16
|
+
|
|
17
|
+
## [6.0.0] - 2022-05-17
|
|
18
|
+
|
|
19
|
+
### BREAK
|
|
20
|
+
|
|
21
|
+
- Updated styles according to the library redesign policy.
|
|
22
|
+
|
|
5
23
|
## [5.1.0] - 2022-04-25
|
|
6
24
|
|
|
7
25
|
### Fixed
|
package/lib/cjs/SpinContainer.js
CHANGED
|
@@ -52,16 +52,18 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SSpinContainer_1vd8z_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1vd8z_gg_{z-index:0;position:relative}.___SOverlay_1vd8z_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1vd8z_gg_._theme_invert_1vd8z_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1vd8z_gg_._theme_dark_1vd8z_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1vd8z_gg_._theme_custom_1vd8z_gg_{background-color:var(--background_1505dra)}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1505dra_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SSpinContainer": "
|
|
61
|
-
"__SContent": "
|
|
62
|
-
"__SOverlay": "
|
|
63
|
-
"
|
|
64
|
-
"
|
|
60
|
+
"__SSpinContainer": "___SSpinContainer_1vd8z_gg_",
|
|
61
|
+
"__SContent": "___SContent_1vd8z_gg_",
|
|
62
|
+
"__SOverlay": "___SOverlay_1vd8z_gg_",
|
|
63
|
+
"_theme_invert": "_theme_invert_1vd8z_gg_",
|
|
64
|
+
"_theme_dark": "_theme_dark_1vd8z_gg_",
|
|
65
|
+
"_theme_custom": "_theme_custom_1vd8z_gg_",
|
|
66
|
+
"--background": "--background_1505dra"
|
|
65
67
|
});
|
|
66
68
|
|
|
67
69
|
var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -137,13 +139,16 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
137
139
|
var SOverlay = _flexBox.Box;
|
|
138
140
|
var _this$asProps3 = this.asProps,
|
|
139
141
|
styles = _this$asProps3.styles,
|
|
142
|
+
theme = _this$asProps3.theme,
|
|
140
143
|
background = _this$asProps3.background,
|
|
141
144
|
loading = _this$asProps3.loading,
|
|
142
145
|
duration = _this$asProps3.duration;
|
|
146
|
+
var useTheme = background ? 'custom' : theme;
|
|
143
147
|
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_animation.FadeInOut, _ref5.cn("FadeInOut", {
|
|
144
148
|
"visible": loading,
|
|
145
149
|
"duration": duration
|
|
146
150
|
}), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, (0, _core.assignProps)({
|
|
151
|
+
"use:theme": useTheme,
|
|
147
152
|
"use:background": (0, _color["default"])(background)
|
|
148
153
|
}, _ref2)))));
|
|
149
154
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SpinContainer.jsx"],"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
|
|
1
|
+
{"version":3,"sources":["../../src/SpinContainer.jsx"],"names":["SpinContainerRoot","asProps","loading","background","duration","size","theme","SSpinContainer","Box","styles","Children","advanceMode","SpinContainer","Content","displayName","Overlay","Component","style","SOverlay","useTheme","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, theme, background, loading, duration } = 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"],"file":"SpinContainer.js"}
|
|
@@ -22,9 +22,15 @@ SOverlay {
|
|
|
22
22
|
position: absolute;
|
|
23
23
|
top: 0;
|
|
24
24
|
left: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
SOverlay[theme='invert'] {
|
|
28
|
+
background-color: color-mod(var(--gray-800) a(40%));
|
|
29
|
+
}
|
|
30
|
+
SOverlay[theme='dark'] {
|
|
25
31
|
background-color: rgba(255, 255, 255, 0.85);
|
|
26
32
|
}
|
|
27
33
|
|
|
28
|
-
SOverlay[
|
|
29
|
-
background: var(--background);
|
|
34
|
+
SOverlay[theme='custom'] {
|
|
35
|
+
background-color: var(--background);
|
|
30
36
|
}
|
package/lib/es6/SpinContainer.js
CHANGED
|
@@ -30,16 +30,18 @@ var style = (
|
|
|
30
30
|
/*__reshadow_css_start__*/
|
|
31
31
|
_sstyled.insert(
|
|
32
32
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
33
|
+
".___SSpinContainer_1vd8z_gg_{z-index:0;position:relative;display:block;overflow:hidden}.___SContent_1vd8z_gg_{z-index:0;position:relative}.___SOverlay_1vd8z_gg_{z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;position:absolute;top:0;left:0}.___SOverlay_1vd8z_gg_._theme_invert_1vd8z_gg_{background-color:rgba(25,27,35,.4)}.___SOverlay_1vd8z_gg_._theme_dark_1vd8z_gg_{background-color:hsla(0,0%,100%,.85)}.___SOverlay_1vd8z_gg_._theme_custom_1vd8z_gg_{background-color:var(--background_1505dra)}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
35
|
+
, "1505dra_gg_")
|
|
36
36
|
/*__reshadow_css_end__*/
|
|
37
37
|
, {
|
|
38
|
-
"__SSpinContainer": "
|
|
39
|
-
"__SContent": "
|
|
40
|
-
"__SOverlay": "
|
|
41
|
-
"
|
|
42
|
-
"
|
|
38
|
+
"__SSpinContainer": "___SSpinContainer_1vd8z_gg_",
|
|
39
|
+
"__SContent": "___SContent_1vd8z_gg_",
|
|
40
|
+
"__SOverlay": "___SOverlay_1vd8z_gg_",
|
|
41
|
+
"_theme_invert": "_theme_invert_1vd8z_gg_",
|
|
42
|
+
"_theme_dark": "_theme_dark_1vd8z_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_1vd8z_gg_",
|
|
44
|
+
"--background": "--background_1505dra"
|
|
43
45
|
});
|
|
44
46
|
|
|
45
47
|
var SpinContainerRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -120,13 +122,16 @@ var Overlay = /*#__PURE__*/function (_Component2) {
|
|
|
120
122
|
var SOverlay = Box;
|
|
121
123
|
var _this$asProps3 = this.asProps,
|
|
122
124
|
styles = _this$asProps3.styles,
|
|
125
|
+
theme = _this$asProps3.theme,
|
|
123
126
|
background = _this$asProps3.background,
|
|
124
127
|
loading = _this$asProps3.loading,
|
|
125
128
|
duration = _this$asProps3.duration;
|
|
129
|
+
var useTheme = background ? 'custom' : theme;
|
|
126
130
|
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(FadeInOut, _ref5.cn("FadeInOut", {
|
|
127
131
|
"visible": loading,
|
|
128
132
|
"duration": duration
|
|
129
133
|
}), /*#__PURE__*/React.createElement(SOverlay, _ref5.cn("SOverlay", _objectSpread({}, _assignProps2({
|
|
134
|
+
"use:theme": useTheme,
|
|
130
135
|
"use:background": resolveColor(background)
|
|
131
136
|
}, _ref2)))));
|
|
132
137
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SpinContainer.jsx"],"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":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,OAAOC,IAAP,MAAiB,eAAjB;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,0BAAzB;AACA,SAASC,aAAT,QAA8B,kCAA9B
|
|
1
|
+
{"version":3,"sources":["../../src/SpinContainer.jsx"],"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","useTheme","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, theme, background, loading, duration } = 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"],"file":"SpinContainer.js"}
|
|
@@ -22,9 +22,15 @@ SOverlay {
|
|
|
22
22
|
position: absolute;
|
|
23
23
|
top: 0;
|
|
24
24
|
left: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
SOverlay[theme='invert'] {
|
|
28
|
+
background-color: color-mod(var(--gray-800) a(40%));
|
|
29
|
+
}
|
|
30
|
+
SOverlay[theme='dark'] {
|
|
25
31
|
background-color: rgba(255, 255, 255, 0.85);
|
|
26
32
|
}
|
|
27
33
|
|
|
28
|
-
SOverlay[
|
|
29
|
-
background: var(--background);
|
|
34
|
+
SOverlay[theme='custom'] {
|
|
35
|
+
background-color: var(--background);
|
|
30
36
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/spin-container",
|
|
3
3
|
"description": "SEMRush SpinContainer Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "6.0.2",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"types": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@semcore/utils": "^3.31",
|
|
17
|
-
"@semcore/spin": "^
|
|
17
|
+
"@semcore/spin": "^4",
|
|
18
18
|
"@semcore/flex-box": "^4",
|
|
19
19
|
"@semcore/animation": "^1"
|
|
20
20
|
},
|
package/src/SpinContainer.jsx
CHANGED
|
@@ -63,11 +63,12 @@ class Overlay extends Component {
|
|
|
63
63
|
|
|
64
64
|
render() {
|
|
65
65
|
const SOverlay = Root;
|
|
66
|
-
const { styles, background, loading, duration } = this.asProps;
|
|
66
|
+
const { styles, theme, background, loading, duration } = this.asProps;
|
|
67
|
+
const useTheme = background ? 'custom' : theme;
|
|
67
68
|
|
|
68
69
|
return sstyled(styles)(
|
|
69
70
|
<FadeInOut visible={loading} duration={duration}>
|
|
70
|
-
<SOverlay render={Box} use:background={resolveColor(background)} />
|
|
71
|
+
<SOverlay render={Box} use:theme={useTheme} use:background={resolveColor(background)} />
|
|
71
72
|
</FadeInOut>,
|
|
72
73
|
);
|
|
73
74
|
}
|
|
@@ -22,9 +22,15 @@ SOverlay {
|
|
|
22
22
|
position: absolute;
|
|
23
23
|
top: 0;
|
|
24
24
|
left: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
SOverlay[theme='invert'] {
|
|
28
|
+
background-color: color-mod(var(--gray-800) a(40%));
|
|
29
|
+
}
|
|
30
|
+
SOverlay[theme='dark'] {
|
|
25
31
|
background-color: rgba(255, 255, 255, 0.85);
|
|
26
32
|
}
|
|
27
33
|
|
|
28
|
-
SOverlay[
|
|
29
|
-
background: var(--background);
|
|
34
|
+
SOverlay[theme='custom'] {
|
|
35
|
+
background-color: var(--background);
|
|
30
36
|
}
|