@semcore/progress-bar 16.0.0-prerelease.6 → 16.0.0-prerelease.9
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/lib/esm/ProgressBar.mjs +72 -66
- package/lib/esm/index.mjs +2 -2
- package/package.json +3 -3
package/lib/esm/ProgressBar.mjs
CHANGED
|
@@ -1,95 +1,101 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { sstyled
|
|
8
|
-
import
|
|
9
|
-
import { Box
|
|
10
|
-
import
|
|
11
|
-
var
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
8
|
+
import React from "react";
|
|
9
|
+
import { Box } from "@semcore/flex-box";
|
|
10
|
+
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
11
|
+
var style = (
|
|
12
12
|
/*__reshadow_css_start__*/
|
|
13
|
-
(
|
|
13
|
+
(sstyled.insert(
|
|
14
14
|
/*__inner_css_start__*/
|
|
15
|
-
|
|
16
|
-
linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%));overflow:hidden;animation-name:loading_1fe10;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_1fe10);animation-duration:var(--duration_1fe10);transition-duration:var(--duration_1fe10)}.___SValue_1fe10_gg_.__theme_1fe10_gg_{background-color:var(--colorBg_1fe10);background-image:var(--colorBg_1fe10)}.___SProgressBar_1fe10_gg_._size_s_1fe10_gg_,.___SValue_1fe10_gg_._size_s_1fe10_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_1fe10_gg_._size_m_1fe10_gg_,.___SValue_1fe10_gg_._size_m_1fe10_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_1fe10_gg_._size_l_1fe10_gg_,.___SValue_1fe10_gg_._size_l_1fe10_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_1fe10_gg_._theme_invert_1fe10_gg_{background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_1fe10_gg_.__animation_1fe10_gg_{background-color:var(--intergalactic-progress-bar-value-bg, #000000);background-image:var(--intergalactic-progress-bar-pattern-gradient,
|
|
17
|
-
linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%));animation-name:loading_1fe10;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_1fe10)}.___SProgressBar_1fe10_gg_._theme_custom_1fe10_gg_{background-color:var(--colorBg_1fe10);background-image:var(--colorBg_1fe10)}@media (prefers-reduced-motion){.___SProgressBar_1fe10_gg_.__animation_1fe10_gg_,.___SValue_1fe10_gg_{animation-name:none}}`,
|
|
15
|
+
"@keyframes loading_1fe10{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1fe10_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_1fe10_gg_._theme_dark_1fe10_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgba(255, 255, 255, 0.2))}.___SValue_1fe10_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg, #000000);background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%));overflow:hidden;animation-name:loading_1fe10;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_1fe10);animation-duration:var(--duration_1fe10);transition-duration:var(--duration_1fe10)}.___SValue_1fe10_gg_.__theme_1fe10_gg_{background-color:var(--colorBg_1fe10);background-image:var(--colorBg_1fe10)}.___SProgressBar_1fe10_gg_._size_s_1fe10_gg_,.___SValue_1fe10_gg_._size_s_1fe10_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_1fe10_gg_._size_m_1fe10_gg_,.___SValue_1fe10_gg_._size_m_1fe10_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_1fe10_gg_._size_l_1fe10_gg_,.___SValue_1fe10_gg_._size_l_1fe10_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_1fe10_gg_._theme_invert_1fe10_gg_{background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_1fe10_gg_.__animation_1fe10_gg_{background-color:var(--intergalactic-progress-bar-value-bg, #000000);background-image:var(--intergalactic-progress-bar-pattern-gradient,\n linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%));animation-name:loading_1fe10;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_1fe10)}.___SProgressBar_1fe10_gg_._theme_custom_1fe10_gg_{background-color:var(--colorBg_1fe10);background-image:var(--colorBg_1fe10)}@media (prefers-reduced-motion){.___SProgressBar_1fe10_gg_.__animation_1fe10_gg_,.___SValue_1fe10_gg_{animation-name:none}}",
|
|
18
16
|
"1fe10_gg_"
|
|
19
17
|
), {
|
|
20
|
-
__SProgressBar: "___SProgressBar_1fe10_gg_",
|
|
21
|
-
_theme_dark: "_theme_dark_1fe10_gg_",
|
|
22
|
-
__SValue: "___SValue_1fe10_gg_",
|
|
18
|
+
"__SProgressBar": "___SProgressBar_1fe10_gg_",
|
|
19
|
+
"_theme_dark": "_theme_dark_1fe10_gg_",
|
|
20
|
+
"__SValue": "___SValue_1fe10_gg_",
|
|
23
21
|
"--width": "--width_1fe10",
|
|
24
22
|
"--duration": "--duration_1fe10",
|
|
25
|
-
_theme: "__theme_1fe10_gg_",
|
|
23
|
+
"_theme": "__theme_1fe10_gg_",
|
|
26
24
|
"--colorBg": "--colorBg_1fe10",
|
|
27
|
-
_size_s: "_size_s_1fe10_gg_",
|
|
28
|
-
_size_m: "_size_m_1fe10_gg_",
|
|
29
|
-
_size_l: "_size_l_1fe10_gg_",
|
|
30
|
-
_theme_invert: "_theme_invert_1fe10_gg_",
|
|
25
|
+
"_size_s": "_size_s_1fe10_gg_",
|
|
26
|
+
"_size_m": "_size_m_1fe10_gg_",
|
|
27
|
+
"_size_l": "_size_l_1fe10_gg_",
|
|
28
|
+
"_theme_invert": "_theme_invert_1fe10_gg_",
|
|
31
29
|
"@loading": "loading_1fe10",
|
|
32
|
-
_animation: "__animation_1fe10_gg_",
|
|
33
|
-
_theme_custom: "_theme_custom_1fe10_gg_"
|
|
30
|
+
"_animation": "__animation_1fe10_gg_",
|
|
31
|
+
"_theme_custom": "_theme_custom_1fe10_gg_"
|
|
34
32
|
})
|
|
35
33
|
);
|
|
36
|
-
function
|
|
37
|
-
return !["dark", "invert"].includes(
|
|
34
|
+
function isCustomTheme(theme) {
|
|
35
|
+
return !["dark", "invert"].includes(theme);
|
|
38
36
|
}
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
var
|
|
42
|
-
function
|
|
43
|
-
|
|
37
|
+
var ProgressBarRoot = /* @__PURE__ */ function(_Component) {
|
|
38
|
+
_inherits(ProgressBarRoot2, _Component);
|
|
39
|
+
var _super = _createSuper(ProgressBarRoot2);
|
|
40
|
+
function ProgressBarRoot2() {
|
|
41
|
+
_classCallCheck(this, ProgressBarRoot2);
|
|
42
|
+
return _super.apply(this, arguments);
|
|
44
43
|
}
|
|
45
|
-
|
|
44
|
+
_createClass(ProgressBarRoot2, [{
|
|
46
45
|
key: "getValueProps",
|
|
47
|
-
value: function() {
|
|
48
|
-
var
|
|
46
|
+
value: function getValueProps() {
|
|
47
|
+
var _this$asProps = this.asProps, value = _this$asProps.value, duration = _this$asProps.duration, size = _this$asProps.size, resolveColor = _this$asProps.resolveColor;
|
|
49
48
|
return {
|
|
50
|
-
value
|
|
51
|
-
duration
|
|
52
|
-
size
|
|
53
|
-
resolveColor
|
|
49
|
+
value,
|
|
50
|
+
duration,
|
|
51
|
+
size,
|
|
52
|
+
resolveColor
|
|
54
53
|
};
|
|
55
54
|
}
|
|
56
55
|
}, {
|
|
57
56
|
key: "render",
|
|
58
|
-
value: function() {
|
|
59
|
-
var
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
"
|
|
67
|
-
|
|
57
|
+
value: function render() {
|
|
58
|
+
var _ref = this.asProps, _ref3;
|
|
59
|
+
var SProgressBar = Box;
|
|
60
|
+
var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, duration = _this$asProps2.duration, theme = _this$asProps2.theme, value = _this$asProps2.value, resolveColor = _this$asProps2.resolveColor;
|
|
61
|
+
var useTheme = isCustomTheme(theme) ? "custom" : theme;
|
|
62
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, assignProps({
|
|
63
|
+
"use:theme": useTheme,
|
|
64
|
+
"use:animation": !value,
|
|
65
|
+
"use:duration": "".concat(duration, "ms"),
|
|
66
|
+
"colorBg": resolveColor(theme),
|
|
67
|
+
"role": "progressbar",
|
|
68
|
+
"aria-valuenow": value
|
|
69
|
+
}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})));
|
|
68
70
|
}
|
|
69
|
-
}])
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
}]);
|
|
72
|
+
return ProgressBarRoot2;
|
|
73
|
+
}(Component);
|
|
74
|
+
_defineProperty(ProgressBarRoot, "displayName", "ProgressBar");
|
|
75
|
+
_defineProperty(ProgressBarRoot, "style", style);
|
|
76
|
+
_defineProperty(ProgressBarRoot, "enhance", [resolveColorEnhance()]);
|
|
77
|
+
_defineProperty(ProgressBarRoot, "defaultProps", function() {
|
|
75
78
|
return {
|
|
76
79
|
duration: 1e3,
|
|
77
80
|
size: "m",
|
|
78
81
|
theme: "invert",
|
|
79
|
-
children: /* @__PURE__ */
|
|
82
|
+
children: /* @__PURE__ */ React.createElement(ProgressBar.Value, null)
|
|
80
83
|
};
|
|
81
84
|
});
|
|
82
|
-
function
|
|
83
|
-
var
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
function Value(props) {
|
|
86
|
+
var _ref2 = arguments[0], _ref4;
|
|
87
|
+
var SValue = Box;
|
|
88
|
+
var styles = props.styles, value = props.value, theme = props.theme, duration = props.duration, resolveColor = props.resolveColor;
|
|
89
|
+
var width = "".concat(value, "%");
|
|
90
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, assignProps({
|
|
91
|
+
"use:width": width,
|
|
92
|
+
"use:duration": "".concat(duration, "ms"),
|
|
93
|
+
"colorBg": resolveColor(theme)
|
|
94
|
+
}, _ref2))));
|
|
89
95
|
}
|
|
90
|
-
var
|
|
91
|
-
Value
|
|
96
|
+
var ProgressBar = createComponent(ProgressBarRoot, {
|
|
97
|
+
Value
|
|
92
98
|
});
|
|
93
99
|
export {
|
|
94
|
-
|
|
100
|
+
ProgressBar as default
|
|
95
101
|
};
|
package/lib/esm/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/progress-bar",
|
|
3
3
|
"description": "Semrush ProgressBar Component",
|
|
4
|
-
"version": "16.0.0-prerelease.
|
|
4
|
+
"version": "16.0.0-prerelease.9",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.0-prerelease.
|
|
17
|
+
"@semcore/flex-box": "16.0.0-prerelease.9"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@semcore/base-components": "^16.0.0-prerelease.
|
|
20
|
+
"@semcore/base-components": "^16.0.0-prerelease.9"
|
|
21
21
|
},
|
|
22
22
|
"repository": {
|
|
23
23
|
"type": "git",
|