@semcore/progress-bar 16.0.11 → 17.0.0-prerelease.18
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 +6 -0
- package/README.md +4 -4
- package/lib/cjs/ProgressBar.js +80 -89
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +3 -3
- package/lib/es6/ProgressBar.js +74 -83
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/esm/ProgressBar.mjs +75 -70
- package/lib/types/index.d.ts +2 -8
- package/package.json +4 -6
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/@semcore/progress-bar)
|
|
4
4
|
[](https://www.npmjs.com/package/@semcore/progress-bar)
|
|
5
|
-
[](https://github.com/semrush/intergalactic/blob/
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
|
|
6
6
|
|
|
7
7
|
> This component is part of the Intergalactic Design System
|
|
8
8
|
|
|
@@ -20,13 +20,13 @@ npm install @semcore/progress-bar
|
|
|
20
20
|
|
|
21
21
|
## 👤 Author
|
|
22
22
|
|
|
23
|
-
[UI-kit team](https://github.com/semrush/intergalactic/blob/
|
|
23
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
24
24
|
|
|
25
25
|
## 🤝 Contributing
|
|
26
26
|
|
|
27
27
|
Contributions, issues and feature requests are welcome!
|
|
28
28
|
|
|
29
|
-
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/
|
|
29
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
|
|
30
30
|
|
|
31
31
|
## Show your support
|
|
32
32
|
|
|
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
|
|
|
34
34
|
|
|
35
35
|
## 📝 License
|
|
36
36
|
|
|
37
|
-
This project is [MIT](https://github.com/semrush/intergalactic/blob/
|
|
37
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
|
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -1,117 +1,108 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports
|
|
8
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
7
|
+
exports.default = void 0;
|
|
13
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
9
|
var _core = require("@semcore/core");
|
|
10
|
+
var _baseComponents = require("@semcore/base-components");
|
|
15
11
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
16
|
-
var _flexBox = require("@semcore/flex-box");
|
|
17
12
|
var _react = _interopRequireDefault(require("react"));
|
|
18
13
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
19
|
-
|
|
14
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes loading_u2ua8{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_u2ua8_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_u2ua8_gg_._theme_dark_u2ua8_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgba(255, 255, 255, 0.2))}.___SValue_u2ua8_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_u2ua8;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_u2ua8);animation-duration:var(--duration_u2ua8);transition-duration:var(--duration_u2ua8)}.___SValue_u2ua8_gg_.__theme_u2ua8_gg_{background-color:var(--colorBg_u2ua8);background-image:var(--colorBg_u2ua8)}.___SProgressBar_u2ua8_gg_._size_s_u2ua8_gg_,.___SValue_u2ua8_gg_._size_s_u2ua8_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_u2ua8_gg_._size_m_u2ua8_gg_,.___SValue_u2ua8_gg_._size_m_u2ua8_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_u2ua8_gg_._size_l_u2ua8_gg_,.___SValue_u2ua8_gg_._size_l_u2ua8_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_u2ua8_gg_._theme_invert_u2ua8_gg_{background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_u2ua8_gg_.__animation_u2ua8_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_u2ua8;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_u2ua8)}.___SProgressBar_u2ua8_gg_._theme_custom_u2ua8_gg_{background-color:var(--colorBg_u2ua8);background-image:var(--colorBg_u2ua8)}@media (prefers-reduced-motion){.___SProgressBar_u2ua8_gg_.__animation_u2ua8_gg_,.___SValue_u2ua8_gg_{animation-name:none}}", /*__inner_css_end__*/"u2ua8_gg_"),
|
|
20
15
|
/*__reshadow_css_end__*/
|
|
21
16
|
{
|
|
22
|
-
"__SProgressBar": "
|
|
23
|
-
"_theme_dark": "
|
|
24
|
-
"__SValue": "
|
|
25
|
-
"--width": "--
|
|
26
|
-
"--duration": "--
|
|
27
|
-
"_theme": "
|
|
28
|
-
"--colorBg": "--
|
|
29
|
-
"_size_s": "
|
|
30
|
-
"_size_m": "
|
|
31
|
-
"_size_l": "
|
|
32
|
-
"_theme_invert": "
|
|
33
|
-
"@loading": "
|
|
34
|
-
"_animation": "
|
|
35
|
-
"_theme_custom": "
|
|
17
|
+
"__SProgressBar": "___SProgressBar_u2ua8_gg_",
|
|
18
|
+
"_theme_dark": "_theme_dark_u2ua8_gg_",
|
|
19
|
+
"__SValue": "___SValue_u2ua8_gg_",
|
|
20
|
+
"--width": "--width_u2ua8",
|
|
21
|
+
"--duration": "--duration_u2ua8",
|
|
22
|
+
"_theme": "__theme_u2ua8_gg_",
|
|
23
|
+
"--colorBg": "--colorBg_u2ua8",
|
|
24
|
+
"_size_s": "_size_s_u2ua8_gg_",
|
|
25
|
+
"_size_m": "_size_m_u2ua8_gg_",
|
|
26
|
+
"_size_l": "_size_l_u2ua8_gg_",
|
|
27
|
+
"_theme_invert": "_theme_invert_u2ua8_gg_",
|
|
28
|
+
"@loading": "loading_u2ua8",
|
|
29
|
+
"_animation": "__animation_u2ua8_gg_",
|
|
30
|
+
"_theme_custom": "_theme_custom_u2ua8_gg_"
|
|
36
31
|
});
|
|
37
32
|
function isCustomTheme(theme) {
|
|
38
33
|
return !['dark', 'invert'].includes(theme);
|
|
39
34
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
class ProgressBarRoot extends _core.Component {
|
|
36
|
+
getValueProps() {
|
|
37
|
+
const {
|
|
38
|
+
value,
|
|
39
|
+
duration,
|
|
40
|
+
size,
|
|
41
|
+
resolveColor
|
|
42
|
+
} = this.asProps;
|
|
43
|
+
return {
|
|
44
|
+
value,
|
|
45
|
+
duration,
|
|
46
|
+
size,
|
|
47
|
+
resolveColor
|
|
48
|
+
};
|
|
44
49
|
}
|
|
45
|
-
(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
}, {
|
|
62
|
-
key: "render",
|
|
63
|
-
value: function render() {
|
|
64
|
-
var _ref = this.asProps,
|
|
65
|
-
_ref3;
|
|
66
|
-
var SProgressBar = _flexBox.Box;
|
|
67
|
-
var _this$asProps2 = this.asProps,
|
|
68
|
-
Children = _this$asProps2.Children,
|
|
69
|
-
styles = _this$asProps2.styles,
|
|
70
|
-
duration = _this$asProps2.duration,
|
|
71
|
-
theme = _this$asProps2.theme,
|
|
72
|
-
value = _this$asProps2.value,
|
|
73
|
-
resolveColor = _this$asProps2.resolveColor;
|
|
74
|
-
var useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
75
|
-
return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SProgressBar, _ref3.cn("SProgressBar", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
50
|
+
render() {
|
|
51
|
+
var _ref = this.asProps,
|
|
52
|
+
_ref3;
|
|
53
|
+
const SProgressBar = _baseComponents.Box;
|
|
54
|
+
const {
|
|
55
|
+
Children,
|
|
56
|
+
styles,
|
|
57
|
+
duration,
|
|
58
|
+
theme,
|
|
59
|
+
value,
|
|
60
|
+
resolveColor
|
|
61
|
+
} = this.asProps;
|
|
62
|
+
const useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
63
|
+
return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SProgressBar, _ref3.cn("SProgressBar", {
|
|
64
|
+
...(0, _core.assignProps)({
|
|
76
65
|
"use:theme": useTheme,
|
|
77
66
|
"use:animation": !value,
|
|
78
|
-
"use:duration":
|
|
67
|
+
"use:duration": `${duration}ms`,
|
|
79
68
|
"colorBg": resolveColor(theme),
|
|
80
69
|
"role": 'progressbar',
|
|
81
70
|
"aria-valuenow": value
|
|
82
|
-
}, _ref)
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
(0, _defineProperty2
|
|
87
|
-
(0, _defineProperty2
|
|
88
|
-
(0, _defineProperty2
|
|
89
|
-
(0, _defineProperty2
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
};
|
|
96
|
-
});
|
|
71
|
+
}, _ref)
|
|
72
|
+
}), /*#__PURE__*/_react.default.createElement(Children, _ref3.cn("Children", {})));
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
(0, _defineProperty2.default)(ProgressBarRoot, "displayName", 'ProgressBar');
|
|
76
|
+
(0, _defineProperty2.default)(ProgressBarRoot, "style", style);
|
|
77
|
+
(0, _defineProperty2.default)(ProgressBarRoot, "enhance", [(0, _resolveColorEnhance.default)()]);
|
|
78
|
+
(0, _defineProperty2.default)(ProgressBarRoot, "defaultProps", () => ({
|
|
79
|
+
duration: 1000,
|
|
80
|
+
size: 'm',
|
|
81
|
+
theme: 'invert',
|
|
82
|
+
children: /*#__PURE__*/_react.default.createElement(ProgressBar.Value, null)
|
|
83
|
+
}));
|
|
97
84
|
function Value(props) {
|
|
98
85
|
var _ref2 = arguments[0],
|
|
99
86
|
_ref4;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
87
|
+
const SValue = _baseComponents.Box;
|
|
88
|
+
const {
|
|
89
|
+
styles,
|
|
90
|
+
value,
|
|
91
|
+
theme,
|
|
92
|
+
duration,
|
|
93
|
+
resolveColor
|
|
94
|
+
} = props;
|
|
95
|
+
const width = `${value}%`;
|
|
96
|
+
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SValue, _ref4.cn("SValue", {
|
|
97
|
+
...(0, _core.assignProps)({
|
|
98
|
+
"use:width": width,
|
|
99
|
+
"use:duration": `${duration}ms`,
|
|
100
|
+
"colorBg": resolveColor(theme)
|
|
101
|
+
}, _ref2)
|
|
102
|
+
}));
|
|
112
103
|
}
|
|
113
|
-
|
|
114
|
-
Value
|
|
104
|
+
const ProgressBar = (0, _core.createComponent)(ProgressBarRoot, {
|
|
105
|
+
Value
|
|
115
106
|
});
|
|
116
|
-
var _default = exports
|
|
107
|
+
var _default = exports.default = ProgressBar;
|
|
117
108
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["_core","require","
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","Component","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Box","Children","styles","useTheme","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","createComponent","_default","exports"],"sources":["../../src/ProgressBar.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\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 enhance = [resolveColorEnhance()];\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, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,oBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,aAAaA,CAACC,KAAK,EAAE;EAC5B,OAAO,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAACC,QAAQ,CAACD,KAAK,CAAC;AAC5C;AAEA,MAAME,eAAe,SAASC,eAAS,CAAC;EAWtCC,aAAaA,CAAA,EAAG;IACd,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACC,OAAO;IAC5D,OAAO;MACLJ,KAAK;MACLC,QAAQ;MACRC,IAAI;MACJC;IACF,CAAC;EACH;EAEAE,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAF,OAAA;MAAAG,KAAA;IACP,MAAMC,YAAY,GAMNC,mBAAG;IALf,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAEV,QAAQ;MAAEN,KAAK;MAAEK,KAAK;MAAEG;IAAa,CAAC,GAAG,IAAI,CAACC,OAAO;IAC/E,MAAMQ,QAAQ,GAAGlB,aAAa,CAACC,KAAK,CAAC,GAAG,QAAQ,GAAGA,KAAK;IAExD,OAAAY,KAAA,GAAO,IAAAf,aAAO,EAACmB,MAAM,CAAC,eACpBrB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACN,YAAY,EAAAD,KAAA,CAAAQ,EAAA;MAAA,OAAA9B,KAAA,CAAA+B,WAAA;QAAA,aAEAJ,QAAQ;QAAA,iBACJ,CAACZ,KAAK;QAAA,gBACP,GAAGC,QAAQ,IAAI;QAAA,WACpBE,YAAY,CAACR,KAAK,CAAC;QAAA,QACvB,aAAa;QAAA,iBACHK;MAAK,GAAAM,IAAA;IAAA,iBAEpBhB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACJ,QAAQ,EAAAH,KAAA,CAAAQ,EAAA,gBAAE,CACC,CAAC;EAEnB;AACF;AAAC,IAAAE,gBAAA,CAAAJ,OAAA,EAxCKhB,eAAe,iBACE,aAAa;AAAA,IAAAoB,gBAAA,CAAAJ,OAAA,EAD9BhB,eAAe,WAEJN,KAAK;AAAA,IAAA0B,gBAAA,CAAAJ,OAAA,EAFhBhB,eAAe,aAGF,CAAC,IAAAqB,4BAAmB,EAAC,CAAC,CAAC;AAAA,IAAAD,gBAAA,CAAAJ,OAAA,EAHpChB,eAAe,kBAIG,OAAO;EAC3BI,QAAQ,EAAE,IAAI;EACdC,IAAI,EAAE,GAAG;EACTP,KAAK,EAAE,QAAQ;EACfwB,QAAQ,eAAE7B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACM,WAAW,CAACC,KAAK,MAAE;AAChC,CAAC,CAAC;AAiCJ,SAASA,KAAKA,CAACC,KAAK,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACpB,MAAMC,MAAM,GAMAjB,mBAAG;EALf,MAAM;IAAEE,MAAM;IAAEX,KAAK;IAAEL,KAAK;IAAEM,QAAQ;IAAEE;EAAa,CAAC,GAAGmB,KAAK;EAC9D,MAAMK,KAAK,GAAG,GAAG3B,KAAK,GAAG;EAEzB,OAAAyB,KAAA,GAAO,IAAAjC,aAAO,EAACmB,MAAM,CAAC,eACpBrB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACY,MAAM,EAAAD,KAAA,CAAAV,EAAA;IAAA,OAAA9B,KAAA,CAAA+B,WAAA;MAAA,aAEMW,KAAK;MAAA,gBACF,GAAG1B,QAAQ,IAAI;MAAA,WACpBE,YAAY,CAACR,KAAK;IAAC,GAAA4B,KAAA;EAAA,EAC7B,CAAC;AAEN;AAEA,MAAMH,WAAW,GAAG,IAAAQ,qBAAe,EAAC/B,eAAe,EAAE;EACnDwB;AACF,CAAC,CAAC;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEYO,WAAW","ignoreList":[]}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\nexport type ProgressBarProps = BoxProps & {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n};\n\nexport type ValueProps = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n};\n\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\ndeclare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {\n Value: Intergalactic.Component<'div', ValueProps>;\n};\n\nexport default ProgressBar;\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
Object.defineProperty(exports, "default", {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: function
|
|
10
|
-
return _ProgressBar
|
|
9
|
+
get: function () {
|
|
10
|
+
return _ProgressBar.default;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
13
|
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -1,113 +1,104 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
2
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
3
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
9
4
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
5
|
+
import { Box } from '@semcore/base-components';
|
|
10
6
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
11
7
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
12
|
-
import { Box } from '@semcore/flex-box';
|
|
13
8
|
import React from 'react';
|
|
14
9
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
15
|
-
|
|
10
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes loading_u2ua8{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_u2ua8_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_u2ua8_gg_._theme_dark_u2ua8_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgba(255, 255, 255, 0.2))}.___SValue_u2ua8_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_u2ua8;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_u2ua8);animation-duration:var(--duration_u2ua8);transition-duration:var(--duration_u2ua8)}.___SValue_u2ua8_gg_.__theme_u2ua8_gg_{background-color:var(--colorBg_u2ua8);background-image:var(--colorBg_u2ua8)}.___SProgressBar_u2ua8_gg_._size_s_u2ua8_gg_,.___SValue_u2ua8_gg_._size_s_u2ua8_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_u2ua8_gg_._size_m_u2ua8_gg_,.___SValue_u2ua8_gg_._size_m_u2ua8_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_u2ua8_gg_._size_l_u2ua8_gg_,.___SValue_u2ua8_gg_._size_l_u2ua8_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_u2ua8_gg_._theme_invert_u2ua8_gg_{background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_u2ua8_gg_.__animation_u2ua8_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_u2ua8;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_u2ua8)}.___SProgressBar_u2ua8_gg_._theme_custom_u2ua8_gg_{background-color:var(--colorBg_u2ua8);background-image:var(--colorBg_u2ua8)}@media (prefers-reduced-motion){.___SProgressBar_u2ua8_gg_.__animation_u2ua8_gg_,.___SValue_u2ua8_gg_{animation-name:none}}", /*__inner_css_end__*/"u2ua8_gg_"),
|
|
16
11
|
/*__reshadow_css_end__*/
|
|
17
12
|
{
|
|
18
|
-
"__SProgressBar": "
|
|
19
|
-
"_theme_dark": "
|
|
20
|
-
"__SValue": "
|
|
21
|
-
"--width": "--
|
|
22
|
-
"--duration": "--
|
|
23
|
-
"_theme": "
|
|
24
|
-
"--colorBg": "--
|
|
25
|
-
"_size_s": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"_size_l": "
|
|
28
|
-
"_theme_invert": "
|
|
29
|
-
"@loading": "
|
|
30
|
-
"_animation": "
|
|
31
|
-
"_theme_custom": "
|
|
13
|
+
"__SProgressBar": "___SProgressBar_u2ua8_gg_",
|
|
14
|
+
"_theme_dark": "_theme_dark_u2ua8_gg_",
|
|
15
|
+
"__SValue": "___SValue_u2ua8_gg_",
|
|
16
|
+
"--width": "--width_u2ua8",
|
|
17
|
+
"--duration": "--duration_u2ua8",
|
|
18
|
+
"_theme": "__theme_u2ua8_gg_",
|
|
19
|
+
"--colorBg": "--colorBg_u2ua8",
|
|
20
|
+
"_size_s": "_size_s_u2ua8_gg_",
|
|
21
|
+
"_size_m": "_size_m_u2ua8_gg_",
|
|
22
|
+
"_size_l": "_size_l_u2ua8_gg_",
|
|
23
|
+
"_theme_invert": "_theme_invert_u2ua8_gg_",
|
|
24
|
+
"@loading": "loading_u2ua8",
|
|
25
|
+
"_animation": "__animation_u2ua8_gg_",
|
|
26
|
+
"_theme_custom": "_theme_custom_u2ua8_gg_"
|
|
32
27
|
});
|
|
33
28
|
function isCustomTheme(theme) {
|
|
34
29
|
return !['dark', 'invert'].includes(theme);
|
|
35
30
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
class ProgressBarRoot extends Component {
|
|
32
|
+
getValueProps() {
|
|
33
|
+
const {
|
|
34
|
+
value,
|
|
35
|
+
duration,
|
|
36
|
+
size,
|
|
37
|
+
resolveColor
|
|
38
|
+
} = this.asProps;
|
|
39
|
+
return {
|
|
40
|
+
value,
|
|
41
|
+
duration,
|
|
42
|
+
size,
|
|
43
|
+
resolveColor
|
|
44
|
+
};
|
|
40
45
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
}, {
|
|
58
|
-
key: "render",
|
|
59
|
-
value: function render() {
|
|
60
|
-
var _ref = this.asProps,
|
|
61
|
-
_ref3;
|
|
62
|
-
var SProgressBar = Box;
|
|
63
|
-
var _this$asProps2 = this.asProps,
|
|
64
|
-
Children = _this$asProps2.Children,
|
|
65
|
-
styles = _this$asProps2.styles,
|
|
66
|
-
duration = _this$asProps2.duration,
|
|
67
|
-
theme = _this$asProps2.theme,
|
|
68
|
-
value = _this$asProps2.value,
|
|
69
|
-
resolveColor = _this$asProps2.resolveColor;
|
|
70
|
-
var useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
71
|
-
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, _assignProps({
|
|
46
|
+
render() {
|
|
47
|
+
var _ref = this.asProps,
|
|
48
|
+
_ref3;
|
|
49
|
+
const SProgressBar = Box;
|
|
50
|
+
const {
|
|
51
|
+
Children,
|
|
52
|
+
styles,
|
|
53
|
+
duration,
|
|
54
|
+
theme,
|
|
55
|
+
value,
|
|
56
|
+
resolveColor
|
|
57
|
+
} = this.asProps;
|
|
58
|
+
const useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
59
|
+
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SProgressBar, _ref3.cn("SProgressBar", {
|
|
60
|
+
..._assignProps({
|
|
72
61
|
"use:theme": useTheme,
|
|
73
62
|
"use:animation": !value,
|
|
74
|
-
"use:duration":
|
|
63
|
+
"use:duration": `${duration}ms`,
|
|
75
64
|
"colorBg": resolveColor(theme),
|
|
76
65
|
"role": 'progressbar',
|
|
77
66
|
"aria-valuenow": value
|
|
78
|
-
}, _ref)
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
67
|
+
}, _ref)
|
|
68
|
+
}), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
|
|
69
|
+
}
|
|
70
|
+
}
|
|
82
71
|
_defineProperty(ProgressBarRoot, "displayName", 'ProgressBar');
|
|
83
72
|
_defineProperty(ProgressBarRoot, "style", style);
|
|
84
73
|
_defineProperty(ProgressBarRoot, "enhance", [resolveColorEnhance()]);
|
|
85
|
-
_defineProperty(ProgressBarRoot, "defaultProps",
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
};
|
|
92
|
-
});
|
|
74
|
+
_defineProperty(ProgressBarRoot, "defaultProps", () => ({
|
|
75
|
+
duration: 1000,
|
|
76
|
+
size: 'm',
|
|
77
|
+
theme: 'invert',
|
|
78
|
+
children: /*#__PURE__*/React.createElement(ProgressBar.Value, null)
|
|
79
|
+
}));
|
|
93
80
|
function Value(props) {
|
|
94
81
|
var _ref2 = arguments[0],
|
|
95
82
|
_ref4;
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
83
|
+
const SValue = Box;
|
|
84
|
+
const {
|
|
85
|
+
styles,
|
|
86
|
+
value,
|
|
87
|
+
theme,
|
|
88
|
+
duration,
|
|
89
|
+
resolveColor
|
|
90
|
+
} = props;
|
|
91
|
+
const width = `${value}%`;
|
|
92
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", {
|
|
93
|
+
..._assignProps2({
|
|
94
|
+
"use:width": width,
|
|
95
|
+
"use:duration": `${duration}ms`,
|
|
96
|
+
"colorBg": resolveColor(theme)
|
|
97
|
+
}, _ref2)
|
|
98
|
+
}));
|
|
108
99
|
}
|
|
109
|
-
|
|
110
|
-
Value
|
|
100
|
+
const ProgressBar = createComponent(ProgressBarRoot, {
|
|
101
|
+
Value
|
|
111
102
|
});
|
|
112
103
|
export default ProgressBar;
|
|
113
104
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["createComponent","Component","sstyled","Root","resolveColorEnhance","
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["Box","createComponent","Component","sstyled","Root","resolveColorEnhance","React","style","_sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Children","styles","useTheme","createElement","cn","_assignProps","_defineProperty","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","_assignProps2"],"sources":["../../src/ProgressBar.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\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 enhance = [resolveColorEnhance()];\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, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\nexport type ProgressBarProps = BoxProps & {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n};\n\nexport type ValueProps = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n};\n\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\ndeclare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {\n Value: Intergalactic.Component<'div', ValueProps>;\n};\n\nexport default ProgressBar;\n"],"mappings":"","ignoreList":[]}
|
package/lib/esm/ProgressBar.mjs
CHANGED
|
@@ -1,100 +1,105 @@
|
|
|
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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { createComponent, sstyled,
|
|
2
|
+
import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
|
|
3
|
+
import { Box } from "@semcore/base-components";
|
|
8
4
|
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
9
|
-
import { Box } from "@semcore/flex-box";
|
|
10
5
|
import React from "react";
|
|
11
6
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
12
|
-
|
|
7
|
+
const style = (
|
|
13
8
|
/*__reshadow_css_start__*/
|
|
14
9
|
(sstyled.insert(
|
|
15
10
|
/*__inner_css_start__*/
|
|
16
|
-
"@keyframes
|
|
11
|
+
"@keyframes loading_u2ua8{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_u2ua8_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_u2ua8_gg_._theme_dark_u2ua8_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgba(255, 255, 255, 0.2))}.___SValue_u2ua8_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_u2ua8;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_u2ua8);animation-duration:var(--duration_u2ua8);transition-duration:var(--duration_u2ua8)}.___SValue_u2ua8_gg_.__theme_u2ua8_gg_{background-color:var(--colorBg_u2ua8);background-image:var(--colorBg_u2ua8)}.___SProgressBar_u2ua8_gg_._size_s_u2ua8_gg_,.___SValue_u2ua8_gg_._size_s_u2ua8_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_u2ua8_gg_._size_m_u2ua8_gg_,.___SValue_u2ua8_gg_._size_m_u2ua8_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_u2ua8_gg_._size_l_u2ua8_gg_,.___SValue_u2ua8_gg_._size_l_u2ua8_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_u2ua8_gg_._theme_invert_u2ua8_gg_{background-color:var(--intergalactic-progress-bar-bg, #e0e1e9)}.___SProgressBar_u2ua8_gg_.__animation_u2ua8_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_u2ua8;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_u2ua8)}.___SProgressBar_u2ua8_gg_._theme_custom_u2ua8_gg_{background-color:var(--colorBg_u2ua8);background-image:var(--colorBg_u2ua8)}@media (prefers-reduced-motion){.___SProgressBar_u2ua8_gg_.__animation_u2ua8_gg_,.___SValue_u2ua8_gg_{animation-name:none}}",
|
|
17
12
|
/*__inner_css_end__*/
|
|
18
|
-
"
|
|
13
|
+
"u2ua8_gg_"
|
|
19
14
|
), /*__reshadow_css_end__*/
|
|
20
15
|
{
|
|
21
|
-
"__SProgressBar": "
|
|
22
|
-
"_theme_dark": "
|
|
23
|
-
"__SValue": "
|
|
24
|
-
"--width": "--
|
|
25
|
-
"--duration": "--
|
|
26
|
-
"_theme": "
|
|
27
|
-
"--colorBg": "--
|
|
28
|
-
"_size_s": "
|
|
29
|
-
"_size_m": "
|
|
30
|
-
"_size_l": "
|
|
31
|
-
"_theme_invert": "
|
|
32
|
-
"@loading": "
|
|
33
|
-
"_animation": "
|
|
34
|
-
"_theme_custom": "
|
|
16
|
+
"__SProgressBar": "___SProgressBar_u2ua8_gg_",
|
|
17
|
+
"_theme_dark": "_theme_dark_u2ua8_gg_",
|
|
18
|
+
"__SValue": "___SValue_u2ua8_gg_",
|
|
19
|
+
"--width": "--width_u2ua8",
|
|
20
|
+
"--duration": "--duration_u2ua8",
|
|
21
|
+
"_theme": "__theme_u2ua8_gg_",
|
|
22
|
+
"--colorBg": "--colorBg_u2ua8",
|
|
23
|
+
"_size_s": "_size_s_u2ua8_gg_",
|
|
24
|
+
"_size_m": "_size_m_u2ua8_gg_",
|
|
25
|
+
"_size_l": "_size_l_u2ua8_gg_",
|
|
26
|
+
"_theme_invert": "_theme_invert_u2ua8_gg_",
|
|
27
|
+
"@loading": "loading_u2ua8",
|
|
28
|
+
"_animation": "__animation_u2ua8_gg_",
|
|
29
|
+
"_theme_custom": "_theme_custom_u2ua8_gg_"
|
|
35
30
|
})
|
|
36
31
|
);
|
|
37
32
|
function isCustomTheme(theme) {
|
|
38
33
|
return !["dark", "invert"].includes(theme);
|
|
39
34
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
class ProgressBarRoot extends Component {
|
|
36
|
+
getValueProps() {
|
|
37
|
+
const {
|
|
38
|
+
value,
|
|
39
|
+
duration,
|
|
40
|
+
size,
|
|
41
|
+
resolveColor
|
|
42
|
+
} = this.asProps;
|
|
43
|
+
return {
|
|
44
|
+
value,
|
|
45
|
+
duration,
|
|
46
|
+
size,
|
|
47
|
+
resolveColor
|
|
48
|
+
};
|
|
44
49
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
value: function render() {
|
|
60
|
-
var _ref = this.asProps, _ref3;
|
|
61
|
-
var SProgressBar = Box;
|
|
62
|
-
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;
|
|
63
|
-
var useTheme = isCustomTheme(theme) ? "custom" : theme;
|
|
64
|
-
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, assignProps({
|
|
50
|
+
render() {
|
|
51
|
+
var _ref = this.asProps, _ref3;
|
|
52
|
+
const SProgressBar = Box;
|
|
53
|
+
const {
|
|
54
|
+
Children,
|
|
55
|
+
styles,
|
|
56
|
+
duration,
|
|
57
|
+
theme,
|
|
58
|
+
value,
|
|
59
|
+
resolveColor
|
|
60
|
+
} = this.asProps;
|
|
61
|
+
const useTheme = isCustomTheme(theme) ? "custom" : theme;
|
|
62
|
+
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SProgressBar, _ref3.cn("SProgressBar", {
|
|
63
|
+
...assignProps({
|
|
65
64
|
"use:theme": useTheme,
|
|
66
65
|
"use:animation": !value,
|
|
67
|
-
"use:duration":
|
|
66
|
+
"use:duration": `${duration}ms`,
|
|
68
67
|
"colorBg": resolveColor(theme),
|
|
69
68
|
"role": "progressbar",
|
|
70
69
|
"aria-valuenow": value
|
|
71
|
-
}, _ref)
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
70
|
+
}, _ref)
|
|
71
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})));
|
|
72
|
+
}
|
|
73
|
+
}
|
|
75
74
|
_defineProperty(ProgressBarRoot, "displayName", "ProgressBar");
|
|
76
75
|
_defineProperty(ProgressBarRoot, "style", style);
|
|
77
76
|
_defineProperty(ProgressBarRoot, "enhance", [resolveColorEnhance()]);
|
|
78
|
-
_defineProperty(ProgressBarRoot, "defaultProps",
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
};
|
|
85
|
-
});
|
|
77
|
+
_defineProperty(ProgressBarRoot, "defaultProps", () => ({
|
|
78
|
+
duration: 1e3,
|
|
79
|
+
size: "m",
|
|
80
|
+
theme: "invert",
|
|
81
|
+
children: /* @__PURE__ */ React.createElement(ProgressBar.Value, null)
|
|
82
|
+
}));
|
|
86
83
|
function Value(props) {
|
|
87
84
|
var _ref2 = arguments[0], _ref4;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
85
|
+
const SValue = Box;
|
|
86
|
+
const {
|
|
87
|
+
styles,
|
|
88
|
+
value,
|
|
89
|
+
theme,
|
|
90
|
+
duration,
|
|
91
|
+
resolveColor
|
|
92
|
+
} = props;
|
|
93
|
+
const width = `${value}%`;
|
|
94
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref4.cn("SValue", {
|
|
95
|
+
...assignProps({
|
|
96
|
+
"use:width": width,
|
|
97
|
+
"use:duration": `${duration}ms`,
|
|
98
|
+
"colorBg": resolveColor(theme)
|
|
99
|
+
}, _ref2)
|
|
100
|
+
}));
|
|
96
101
|
}
|
|
97
|
-
|
|
102
|
+
const ProgressBar = createComponent(ProgressBarRoot, {
|
|
98
103
|
Value
|
|
99
104
|
});
|
|
100
105
|
export {
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { BoxProps } from '@semcore/base-components';
|
|
2
|
+
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
3
|
|
|
4
|
-
/** @deprecated */
|
|
5
|
-
export interface IProgressBarProps extends ProgressBarProps, UnknownProperties {}
|
|
6
4
|
export type ProgressBarProps = BoxProps & {
|
|
7
5
|
/**
|
|
8
6
|
* Progress bar theme
|
|
@@ -22,8 +20,6 @@ export type ProgressBarProps = BoxProps & {
|
|
|
22
20
|
duration?: number;
|
|
23
21
|
};
|
|
24
22
|
|
|
25
|
-
/** @deprecated */
|
|
26
|
-
export interface IValueProps extends ValueProps, UnknownProperties {}
|
|
27
23
|
export type ValueProps = BoxProps & {
|
|
28
24
|
/** Controls the size of the value bar */
|
|
29
25
|
size?: 's' | 'm' | 'l';
|
|
@@ -35,8 +31,6 @@ export type ValueProps = BoxProps & {
|
|
|
35
31
|
theme?: string;
|
|
36
32
|
};
|
|
37
33
|
|
|
38
|
-
/** @deprecated */
|
|
39
|
-
export interface IProgressBarCxt extends ProgressBarCxt, UnknownProperties {}
|
|
40
34
|
export type ProgressBarCxt = {
|
|
41
35
|
getValueProps: PropGetterFn;
|
|
42
36
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/progress-bar",
|
|
3
3
|
"description": "Semrush ProgressBar Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "17.0.0-prerelease.18",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -13,11 +13,8 @@
|
|
|
13
13
|
"import": "./lib/esm/index.mjs",
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
|
-
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.11"
|
|
18
|
-
},
|
|
19
16
|
"peerDependencies": {
|
|
20
|
-
"@semcore/base-components": "^
|
|
17
|
+
"@semcore/base-components": "^17.0.0-prerelease.18"
|
|
21
18
|
},
|
|
22
19
|
"repository": {
|
|
23
20
|
"type": "git",
|
|
@@ -25,7 +22,8 @@
|
|
|
25
22
|
"directory": "semcore/progress-bar"
|
|
26
23
|
},
|
|
27
24
|
"devDependencies": {
|
|
28
|
-
"@semcore/
|
|
25
|
+
"@semcore/base-components": "17.0.0-prerelease.18",
|
|
26
|
+
"@semcore/core": "17.0.0-prerelease.18",
|
|
29
27
|
"@semcore/testing-utils": "1.0.0"
|
|
30
28
|
},
|
|
31
29
|
"scripts": {
|