@semcore/progress-bar 2.2.0 → 2.3.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 +18 -0
- package/lib/cjs/ProgressBar.js +28 -22
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/index.js +5 -1
- package/lib/cjs/style/progress-bar.shadow.css +9 -0
- package/lib/es6/ProgressBar.js +20 -19
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/style/progress-bar.shadow.css +9 -0
- package/package.json +8 -2
- package/src/ProgressBar.js +2 -2
- package/src/style/progress-bar.shadow.css +9 -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
|
+
## [2.3.0] - 2021-03-04
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Disabled animation if reduce motion is preferred.
|
|
10
|
+
|
|
11
|
+
## [2.2.2] - 2022-02-24
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added repository field to package.json file.
|
|
16
|
+
|
|
17
|
+
## [2.2.1] - 2021-8-26
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Add 'sideEffect=false' for more optimal build via webpack
|
|
22
|
+
|
|
5
23
|
## [2.2.0] - 2021-07-05
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
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
|
-
exports
|
|
10
|
+
exports["default"] = exports.Progress = exports.Bar = void 0;
|
|
11
11
|
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
@@ -35,9 +35,15 @@ var _color = _interopRequireDefault(require("@semcore/utils/lib/color"));
|
|
|
35
35
|
|
|
36
36
|
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
var _excluded = ["Children", "styles", "duration", "size", "theme", "value", "animation"];
|
|
39
|
+
|
|
40
|
+
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); }
|
|
41
|
+
|
|
42
|
+
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; }
|
|
43
|
+
|
|
44
|
+
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; }
|
|
39
45
|
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
46
|
+
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; }
|
|
41
47
|
|
|
42
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); }; }
|
|
43
49
|
|
|
@@ -48,25 +54,25 @@ var style = (
|
|
|
48
54
|
/*__reshadow_css_start__*/
|
|
49
55
|
_core.sstyled.insert(
|
|
50
56
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
57
|
+
".___SProgressBar_1jx5f_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1jx5f_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#479d2e 25%,#4fae33 0,#4fae33 50%,#479d2e 0,#479d2e 76%,#4fae33 0);overflow:hidden;-webkit-animation-name:loading_1v03k;animation-name:loading_1v03k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_1jx5f_gg_._size_s_1jx5f_gg_,.___SValue_1jx5f_gg_._size_s_1jx5f_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_1jx5f_gg_._size_m_1jx5f_gg_,.___SValue_1jx5f_gg_._size_m_1jx5f_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_1jx5f_gg_._size_l_1jx5f_gg_,.___SValue_1jx5f_gg_._size_l_1jx5f_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1jx5f_gg_._theme_dark_1jx5f_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1jx5f_gg_._theme_invert_1jx5f_gg_{background-color:#dee3e5}@-webkit-keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:loading_1v03k;animation-name:loading_1v03k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-color:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-image:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_{width:var(--width_1v03k);-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_.__theme_1jx5f_gg_{background-color:var(--backgroundColor_1v03k);background-image:var(--backgroundColor_1v03k)}@media (prefers-reduced-motion){.___SValue_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
52
58
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
59
|
+
, "1v03k_gg_")
|
|
54
60
|
/*__reshadow_css_end__*/
|
|
55
61
|
, {
|
|
56
|
-
"__SProgressBar": "
|
|
57
|
-
"__SValue": "
|
|
58
|
-
"_size_s": "
|
|
59
|
-
"_size_m": "
|
|
60
|
-
"_size_l": "
|
|
61
|
-
"_theme_dark": "
|
|
62
|
-
"_theme_invert": "
|
|
63
|
-
"@loading": "
|
|
64
|
-
"_animation": "
|
|
65
|
-
"_theme_custom": "
|
|
66
|
-
"--backgroundColor": "--
|
|
67
|
-
"--duration": "--
|
|
68
|
-
"--width": "--
|
|
69
|
-
"_theme": "
|
|
62
|
+
"__SProgressBar": "___SProgressBar_1jx5f_gg_",
|
|
63
|
+
"__SValue": "___SValue_1jx5f_gg_",
|
|
64
|
+
"_size_s": "_size_s_1jx5f_gg_",
|
|
65
|
+
"_size_m": "_size_m_1jx5f_gg_",
|
|
66
|
+
"_size_l": "_size_l_1jx5f_gg_",
|
|
67
|
+
"_theme_dark": "_theme_dark_1jx5f_gg_",
|
|
68
|
+
"_theme_invert": "_theme_invert_1jx5f_gg_",
|
|
69
|
+
"@loading": "loading_1v03k",
|
|
70
|
+
"_animation": "__animation_1jx5f_gg_",
|
|
71
|
+
"_theme_custom": "_theme_custom_1jx5f_gg_",
|
|
72
|
+
"--backgroundColor": "--backgroundColor_1v03k",
|
|
73
|
+
"--duration": "--duration_1v03k",
|
|
74
|
+
"--width": "--width_1v03k",
|
|
75
|
+
"_theme": "__theme_1jx5f_gg_"
|
|
70
76
|
});
|
|
71
77
|
|
|
72
78
|
function isCustomTheme(theme) {
|
|
@@ -111,7 +117,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
111
117
|
theme = _this$asProps2.theme,
|
|
112
118
|
value = _this$asProps2.value,
|
|
113
119
|
animation = _this$asProps2.animation,
|
|
114
|
-
other = (0, _objectWithoutProperties2["default"])(_this$asProps2,
|
|
120
|
+
other = (0, _objectWithoutProperties2["default"])(_this$asProps2, _excluded);
|
|
115
121
|
var useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
116
122
|
var color = (0, _color["default"])(theme);
|
|
117
123
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProgressBar.js"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","animation","other","useTheme","color","logger","warn","undefined","displayName","Component","style","children","Value","props","SValue","width","ProgressBar","Progress","React","forwardRef","ref","Bar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/ProgressBar.js"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","animation","other","useTheme","color","logger","warn","undefined","displayName","Component","style","children","Value","props","SValue","width","ProgressBar","Progress","React","forwardRef","ref","Bar"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n static displayName = 'ProgressBar';\n static style = style;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size } = this.asProps;\n return {\n value,\n duration,\n size,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n const color = resolveColor(theme);\n\n logger.warn(\n animation !== undefined,\n \"The 'animation' property is deprecated, use 'value'\",\n other['data-ui-name'] || ProgressBarRoot.displayName,\n );\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={animation === undefined ? !value : animation}\n use:duration={`${duration}ms`}\n backgroundColor={color}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, size, theme, duration } = props;\n const width = `${value}%`;\n const color = resolveColor(theme);\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n backgroundColor={color}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n\nconst Progress = React.forwardRef(function (props, ref) {\n logger.warn(\n true,\n \"Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'\",\n props['data-ui-name'] || ProgressBar.displayName,\n );\n return <ProgressBar.Value ref={ref} {...props} />;\n});\n\nconst Bar = React.forwardRef(function (props, ref) {\n logger.warn(\n true,\n \"Component '<Bar/>' is deprecated, please use '<ProgressBar/>'\",\n props['data-ui-name'] || ProgressBar.displayName,\n );\n return <ProgressBar ref={ref} {...props} />;\n});\n\nexport { Bar, Progress };\n"],"file":"ProgressBar.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(_ProgressBar).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
|
|
@@ -100,3 +100,12 @@ SValue[theme] {
|
|
|
100
100
|
background-color: var(--backgroundColor);
|
|
101
101
|
background-image: var(--backgroundColor);
|
|
102
102
|
}
|
|
103
|
+
|
|
104
|
+
@media (prefers-reduced-motion) {
|
|
105
|
+
SValue {
|
|
106
|
+
animation-name: none;
|
|
107
|
+
}
|
|
108
|
+
SProgressBar[animation] {
|
|
109
|
+
animation-name: none;
|
|
110
|
+
}
|
|
111
|
+
}
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -9,10 +9,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
9
9
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
10
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
11
11
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
+
var _excluded = ["Children", "styles", "duration", "size", "theme", "value", "animation"];
|
|
12
13
|
|
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
14
|
+
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; }
|
|
14
15
|
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
16
|
+
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; }
|
|
16
17
|
|
|
17
18
|
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); }; }
|
|
18
19
|
|
|
@@ -29,25 +30,25 @@ var style = (
|
|
|
29
30
|
/*__reshadow_css_start__*/
|
|
30
31
|
_sstyled.insert(
|
|
31
32
|
/*__inner_css_start__*/
|
|
32
|
-
".
|
|
33
|
+
".___SProgressBar_1jx5f_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1jx5f_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#479d2e 25%,#4fae33 0,#4fae33 50%,#479d2e 0,#479d2e 76%,#4fae33 0);overflow:hidden;-webkit-animation-name:loading_1v03k;animation-name:loading_1v03k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_1jx5f_gg_._size_s_1jx5f_gg_,.___SValue_1jx5f_gg_._size_s_1jx5f_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_1jx5f_gg_._size_m_1jx5f_gg_,.___SValue_1jx5f_gg_._size_m_1jx5f_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_1jx5f_gg_._size_l_1jx5f_gg_,.___SValue_1jx5f_gg_._size_l_1jx5f_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1jx5f_gg_._theme_dark_1jx5f_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1jx5f_gg_._theme_invert_1jx5f_gg_{background-color:#dee3e5}@-webkit-keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:loading_1v03k;animation-name:loading_1v03k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-color:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-image:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_{width:var(--width_1v03k);-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_.__theme_1jx5f_gg_{background-color:var(--backgroundColor_1v03k);background-image:var(--backgroundColor_1v03k)}@media (prefers-reduced-motion){.___SValue_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
33
34
|
/*__inner_css_end__*/
|
|
34
|
-
, "
|
|
35
|
+
, "1v03k_gg_")
|
|
35
36
|
/*__reshadow_css_end__*/
|
|
36
37
|
, {
|
|
37
|
-
"__SProgressBar": "
|
|
38
|
-
"__SValue": "
|
|
39
|
-
"_size_s": "
|
|
40
|
-
"_size_m": "
|
|
41
|
-
"_size_l": "
|
|
42
|
-
"_theme_dark": "
|
|
43
|
-
"_theme_invert": "
|
|
44
|
-
"@loading": "
|
|
45
|
-
"_animation": "
|
|
46
|
-
"_theme_custom": "
|
|
47
|
-
"--backgroundColor": "--
|
|
48
|
-
"--duration": "--
|
|
49
|
-
"--width": "--
|
|
50
|
-
"_theme": "
|
|
38
|
+
"__SProgressBar": "___SProgressBar_1jx5f_gg_",
|
|
39
|
+
"__SValue": "___SValue_1jx5f_gg_",
|
|
40
|
+
"_size_s": "_size_s_1jx5f_gg_",
|
|
41
|
+
"_size_m": "_size_m_1jx5f_gg_",
|
|
42
|
+
"_size_l": "_size_l_1jx5f_gg_",
|
|
43
|
+
"_theme_dark": "_theme_dark_1jx5f_gg_",
|
|
44
|
+
"_theme_invert": "_theme_invert_1jx5f_gg_",
|
|
45
|
+
"@loading": "loading_1v03k",
|
|
46
|
+
"_animation": "__animation_1jx5f_gg_",
|
|
47
|
+
"_theme_custom": "_theme_custom_1jx5f_gg_",
|
|
48
|
+
"--backgroundColor": "--backgroundColor_1v03k",
|
|
49
|
+
"--duration": "--duration_1v03k",
|
|
50
|
+
"--width": "--width_1v03k",
|
|
51
|
+
"_theme": "__theme_1jx5f_gg_"
|
|
51
52
|
});
|
|
52
53
|
|
|
53
54
|
function isCustomTheme(theme) {
|
|
@@ -94,7 +95,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
94
95
|
theme = _this$asProps2.theme,
|
|
95
96
|
value = _this$asProps2.value,
|
|
96
97
|
animation = _this$asProps2.animation,
|
|
97
|
-
other = _objectWithoutProperties(_this$asProps2,
|
|
98
|
+
other = _objectWithoutProperties(_this$asProps2, _excluded);
|
|
98
99
|
|
|
99
100
|
var useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
100
101
|
var color = resolveColor(theme);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProgressBar.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","logger","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","animation","other","useTheme","color","warn","undefined","displayName","style","children","Value","props","SValue","width","ProgressBar","Progress","forwardRef","ref","Bar"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/ProgressBar.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","logger","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","animation","other","useTheme","color","warn","undefined","displayName","style","children","Value","props","SValue","width","ProgressBar","Progress","forwardRef","ref","Bar"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n static displayName = 'ProgressBar';\n static style = style;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size } = this.asProps;\n return {\n value,\n duration,\n size,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n const color = resolveColor(theme);\n\n logger.warn(\n animation !== undefined,\n \"The 'animation' property is deprecated, use 'value'\",\n other['data-ui-name'] || ProgressBarRoot.displayName,\n );\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={animation === undefined ? !value : animation}\n use:duration={`${duration}ms`}\n backgroundColor={color}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, size, theme, duration } = props;\n const width = `${value}%`;\n const color = resolveColor(theme);\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n backgroundColor={color}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n\nconst Progress = React.forwardRef(function (props, ref) {\n logger.warn(\n true,\n \"Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'\",\n props['data-ui-name'] || ProgressBar.displayName,\n );\n return <ProgressBar.Value ref={ref} {...props} />;\n});\n\nconst Bar = React.forwardRef(function (props, ref) {\n logger.warn(\n true,\n \"Component '<Bar/>' is deprecated, please use '<ProgressBar/>'\",\n props['data-ui-name'] || ProgressBar.displayName,\n );\n return <ProgressBar ref={ref} {...props} />;\n});\n\nexport { Bar, Progress };\n"],"file":"ProgressBar.js"}
|
|
@@ -100,3 +100,12 @@ SValue[theme] {
|
|
|
100
100
|
background-color: var(--backgroundColor);
|
|
101
101
|
background-image: var(--backgroundColor);
|
|
102
102
|
}
|
|
103
|
+
|
|
104
|
+
@media (prefers-reduced-motion) {
|
|
105
|
+
SValue {
|
|
106
|
+
animation-name: none;
|
|
107
|
+
}
|
|
108
|
+
SProgressBar[animation] {
|
|
109
|
+
animation-name: none;
|
|
110
|
+
}
|
|
111
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/progress-bar",
|
|
3
3
|
"description": "SEMRush ProgressBar Component",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.3.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
8
9
|
"author": "Roman Lysov <r.lysov@semrush.com>",
|
|
9
10
|
"license": "MIT",
|
|
10
11
|
"scripts": {
|
|
@@ -20,6 +21,11 @@
|
|
|
20
21
|
"react": "16.8 - 17"
|
|
21
22
|
},
|
|
22
23
|
"jest": {
|
|
23
|
-
"preset": "jest-preset-ui"
|
|
24
|
+
"preset": "@semcore/jest-preset-ui"
|
|
25
|
+
},
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "https://github.com/semrush/intergalactic.git",
|
|
29
|
+
"directory": "semcore/progress-bar"
|
|
24
30
|
}
|
|
25
31
|
}
|
package/src/ProgressBar.js
CHANGED
|
@@ -77,7 +77,7 @@ const ProgressBar = createComponent(ProgressBarRoot, {
|
|
|
77
77
|
|
|
78
78
|
export default ProgressBar;
|
|
79
79
|
|
|
80
|
-
const Progress = React.forwardRef(function(props, ref) {
|
|
80
|
+
const Progress = React.forwardRef(function (props, ref) {
|
|
81
81
|
logger.warn(
|
|
82
82
|
true,
|
|
83
83
|
"Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'",
|
|
@@ -86,7 +86,7 @@ const Progress = React.forwardRef(function(props, ref) {
|
|
|
86
86
|
return <ProgressBar.Value ref={ref} {...props} />;
|
|
87
87
|
});
|
|
88
88
|
|
|
89
|
-
const Bar = React.forwardRef(function(props, ref) {
|
|
89
|
+
const Bar = React.forwardRef(function (props, ref) {
|
|
90
90
|
logger.warn(
|
|
91
91
|
true,
|
|
92
92
|
"Component '<Bar/>' is deprecated, please use '<ProgressBar/>'",
|
|
@@ -100,3 +100,12 @@ SValue[theme] {
|
|
|
100
100
|
background-color: var(--backgroundColor);
|
|
101
101
|
background-image: var(--backgroundColor);
|
|
102
102
|
}
|
|
103
|
+
|
|
104
|
+
@media (prefers-reduced-motion) {
|
|
105
|
+
SValue {
|
|
106
|
+
animation-name: none;
|
|
107
|
+
}
|
|
108
|
+
SProgressBar[animation] {
|
|
109
|
+
animation-name: none;
|
|
110
|
+
}
|
|
111
|
+
}
|