@semcore/progress-bar 2.3.1 → 3.0.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 +8 -0
- package/lib/cjs/ProgressBar.js +23 -60
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/index.d.ts +40 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/progress-bar.shadow.css +20 -22
- package/lib/es6/ProgressBar.js +22 -48
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/index.d.ts +40 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/progress-bar.shadow.css +20 -22
- package/lib/types/index.d.ts +0 -4
- package/package.json +4 -1
- package/src/ProgressBar.jsx +5 -34
- package/src/index.d.ts +0 -4
- package/src/index.js +0 -1
- package/src/style/progress-bar.shadow.css +20 -22
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Updated styles according to the library redesign policy.
|
|
10
|
+
- Remove named import "Progress" and "Bar".
|
|
11
|
+
- Remove "animation" props, use "value=0".
|
|
12
|
+
|
|
5
13
|
## [2.3.1] - 2022-03-14
|
|
6
14
|
|
|
7
15
|
### Changed
|
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -7,11 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports["default"] =
|
|
11
|
-
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
exports["default"] = void 0;
|
|
15
11
|
|
|
16
12
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
17
13
|
|
|
@@ -33,10 +29,6 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
33
29
|
|
|
34
30
|
var _color = _interopRequireDefault(require("@semcore/utils/lib/color"));
|
|
35
31
|
|
|
36
|
-
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
37
|
-
|
|
38
|
-
var _excluded = ["Children", "styles", "duration", "size", "theme", "value", "animation"];
|
|
39
|
-
|
|
40
32
|
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
33
|
|
|
42
34
|
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; }
|
|
@@ -54,25 +46,25 @@ var style = (
|
|
|
54
46
|
/*__reshadow_css_start__*/
|
|
55
47
|
_core.sstyled.insert(
|
|
56
48
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
49
|
+
".___SProgressBar_8d83n_gg_{position:relative;width:100%;overflow:hidden}.___SValue_8d83n_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-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_8d83n_gg_._size_s_8d83n_gg_,.___SValue_8d83n_gg_._size_s_8d83n_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_8d83n_gg_._size_m_8d83n_gg_,.___SValue_8d83n_gg_._size_m_8d83n_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_8d83n_gg_._size_l_8d83n_gg_,.___SValue_8d83n_gg_._size_l_8d83n_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_8d83n_gg_._theme_dark_8d83n_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_8d83n_gg_._theme_invert_8d83n_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_8d83n_gg_._theme_custom_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_{width:var(--width_1tcsv8p);-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_.__theme_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}@media (prefers-reduced-motion){.___SValue_8d83n_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
58
50
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
51
|
+
, "1tcsv8p_gg_")
|
|
60
52
|
/*__reshadow_css_end__*/
|
|
61
53
|
, {
|
|
62
|
-
"__SProgressBar": "
|
|
63
|
-
"__SValue": "
|
|
64
|
-
"_size_s": "
|
|
65
|
-
"_size_m": "
|
|
66
|
-
"_size_l": "
|
|
67
|
-
"_theme_dark": "
|
|
68
|
-
"_theme_invert": "
|
|
69
|
-
"@loading": "
|
|
70
|
-
"_animation": "
|
|
71
|
-
"_theme_custom": "
|
|
72
|
-
"
|
|
73
|
-
"--duration": "--
|
|
74
|
-
"--width": "--
|
|
75
|
-
"_theme": "
|
|
54
|
+
"__SProgressBar": "___SProgressBar_8d83n_gg_",
|
|
55
|
+
"__SValue": "___SValue_8d83n_gg_",
|
|
56
|
+
"_size_s": "_size_s_8d83n_gg_",
|
|
57
|
+
"_size_m": "_size_m_8d83n_gg_",
|
|
58
|
+
"_size_l": "_size_l_8d83n_gg_",
|
|
59
|
+
"_theme_dark": "_theme_dark_8d83n_gg_",
|
|
60
|
+
"_theme_invert": "_theme_invert_8d83n_gg_",
|
|
61
|
+
"@loading": "loading_1tcsv8p",
|
|
62
|
+
"_animation": "__animation_8d83n_gg_",
|
|
63
|
+
"_theme_custom": "_theme_custom_8d83n_gg_",
|
|
64
|
+
"--\u0441olorBg": "--\u0441olorBg_1tcsv8p",
|
|
65
|
+
"--duration": "--duration_1tcsv8p",
|
|
66
|
+
"--width": "--width_1tcsv8p",
|
|
67
|
+
"_theme": "__theme_8d83n_gg_"
|
|
76
68
|
});
|
|
77
69
|
|
|
78
70
|
function isCustomTheme(theme) {
|
|
@@ -105,7 +97,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
105
97
|
}, {
|
|
106
98
|
key: "render",
|
|
107
99
|
value: function render() {
|
|
108
|
-
var _ref = this
|
|
100
|
+
var _ref = this.asProps,
|
|
109
101
|
_ref3;
|
|
110
102
|
|
|
111
103
|
var SProgressBar = _flexBox.Box;
|
|
@@ -113,21 +105,14 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
113
105
|
Children = _this$asProps2.Children,
|
|
114
106
|
styles = _this$asProps2.styles,
|
|
115
107
|
duration = _this$asProps2.duration,
|
|
116
|
-
size = _this$asProps2.size,
|
|
117
108
|
theme = _this$asProps2.theme,
|
|
118
|
-
value = _this$asProps2.value
|
|
119
|
-
animation = _this$asProps2.animation,
|
|
120
|
-
other = (0, _objectWithoutProperties2["default"])(_this$asProps2, _excluded);
|
|
109
|
+
value = _this$asProps2.value;
|
|
121
110
|
var useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
122
|
-
var color = (0, _color["default"])(theme);
|
|
123
|
-
|
|
124
|
-
_logger["default"].warn(animation !== undefined, "The 'animation' property is deprecated, use 'value'", other['data-ui-name'] || ProgressBarRoot.displayName);
|
|
125
|
-
|
|
126
111
|
return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, (0, _core.assignProps)({
|
|
127
112
|
"use:theme": useTheme,
|
|
128
|
-
"use:animation":
|
|
113
|
+
"use:animation": !value,
|
|
129
114
|
"use:duration": "".concat(duration, "ms"),
|
|
130
|
-
"
|
|
115
|
+
"\u0441olorBg": (0, _color["default"])(theme)
|
|
131
116
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
|
|
132
117
|
}
|
|
133
118
|
}]);
|
|
@@ -146,21 +131,19 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
146
131
|
});
|
|
147
132
|
|
|
148
133
|
function Value(props) {
|
|
149
|
-
var _ref2 =
|
|
134
|
+
var _ref2 = arguments[0],
|
|
150
135
|
_ref4;
|
|
151
136
|
|
|
152
137
|
var SValue = _flexBox.Box;
|
|
153
138
|
var styles = props.styles,
|
|
154
139
|
value = props.value,
|
|
155
|
-
size = props.size,
|
|
156
140
|
theme = props.theme,
|
|
157
141
|
duration = props.duration;
|
|
158
142
|
var width = "".concat(value, "%");
|
|
159
|
-
var color = (0, _color["default"])(theme);
|
|
160
143
|
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SValue, _ref4.cn("SValue", _objectSpread({}, (0, _core.assignProps)({
|
|
161
144
|
"use:width": width,
|
|
162
145
|
"use:duration": "".concat(duration, "ms"),
|
|
163
|
-
"
|
|
146
|
+
"\u0441olorBg": (0, _color["default"])(theme)
|
|
164
147
|
}, _ref2))));
|
|
165
148
|
}
|
|
166
149
|
|
|
@@ -169,24 +152,4 @@ var ProgressBar = (0, _core["default"])(ProgressBarRoot, {
|
|
|
169
152
|
});
|
|
170
153
|
var _default = ProgressBar;
|
|
171
154
|
exports["default"] = _default;
|
|
172
|
-
|
|
173
|
-
var Progress = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
174
|
-
_logger["default"].warn(true, "Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'", props['data-ui-name'] || ProgressBar.displayName);
|
|
175
|
-
|
|
176
|
-
return /*#__PURE__*/_react["default"].createElement(ProgressBar.Value, (0, _extends2["default"])({
|
|
177
|
-
ref: ref
|
|
178
|
-
}, props));
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
exports.Progress = Progress;
|
|
182
|
-
|
|
183
|
-
var Bar = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
184
|
-
_logger["default"].warn(true, "Component '<Bar/>' is deprecated, please use '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
|
|
185
|
-
|
|
186
|
-
return /*#__PURE__*/_react["default"].createElement(ProgressBar, (0, _extends2["default"])({
|
|
187
|
-
ref: ref
|
|
188
|
-
}, props));
|
|
189
|
-
});
|
|
190
|
-
|
|
191
|
-
exports.Bar = Bar;
|
|
192
155
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","
|
|
1
|
+
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","useTheme","Component","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNC,YANZ;AACA,2BAAqD,KAAKL,OAA1D;AAAA,UAAQM,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BL,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMO,QAAQ,GAAGZ,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAO,mBAAQU,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACP,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,wBAKW,uBAAaL,KAAb;AALX,+BAOE,gCAAC,QAAD,2BAPF,CADF;AAWD;;;EAnC2BY,e;;iCAAxBV,e,iBACiB,a;iCADjBA,e,WAEWW,K;iCAFXX,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3Bc,IAAAA,QAAQ,eAAE,gCAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GAMAT,YANZ;AACA,MAAQE,MAAR,GAA2CM,KAA3C,CAAQN,MAAR;AAAA,MAAgBN,KAAhB,GAA2CY,KAA3C,CAAgBZ,KAAhB;AAAA,MAAuBJ,KAAvB,GAA2CgB,KAA3C,CAAuBhB,KAAvB;AAAA,MAA8BK,QAA9B,GAA2CW,KAA3C,CAA8BX,QAA9B;AACA,MAAMa,KAAK,aAAMd,KAAN,MAAX;AAEA,iBAAO,mBAAQM,MAAR,CAAP,eACE,gCAAC,MAAD;AAAA,iBAEaQ,KAFb;AAAA,8BAGmBb,QAHnB;AAAA,oBAIW,uBAAaL,KAAb;AAJX,cADF;AAQD;;AAED,IAAMmB,WAAW,GAAG,sBAAgBjB,eAAhB,EAAiC;AACnDa,EAAAA,KAAK,EAALA;AADmD,CAAjC,CAApB;eAIeI,W","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';\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, theme, value } = 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 сolorBg={resolveColor(theme)}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration } = 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 сolorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
|
|
2
|
+
import { IBoxProps } from '@semcore/flex-box';
|
|
3
|
+
|
|
4
|
+
export interface IProgressBarProps extends IBoxProps {
|
|
5
|
+
/**
|
|
6
|
+
* Progress bar theme
|
|
7
|
+
* @default invert
|
|
8
|
+
*/
|
|
9
|
+
theme?: 'dark' | 'invert' | string;
|
|
10
|
+
/**
|
|
11
|
+
* Progress bar size
|
|
12
|
+
* @default m
|
|
13
|
+
*/
|
|
14
|
+
size?: 's' | 'm' | 'l';
|
|
15
|
+
/** Value as a percentage */
|
|
16
|
+
value?: number;
|
|
17
|
+
/** Duration of animation, ms
|
|
18
|
+
* @default 1000
|
|
19
|
+
*/
|
|
20
|
+
duration?: number;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface IValueProps extends IBoxProps {
|
|
24
|
+
size?: 's' | 'm' | 'l';
|
|
25
|
+
value?: number;
|
|
26
|
+
duration?: number;
|
|
27
|
+
theme?: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface IProgressBarCxt {
|
|
31
|
+
getValueProps: PropGetterFn;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
declare const ProgressBar: (<T>(
|
|
35
|
+
props: CProps<IProgressBarProps & T, IProgressBarCxt>,
|
|
36
|
+
) => ReturnEl) & {
|
|
37
|
+
Value: <T>(props: IValueProps & T) => ReturnEl;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export default ProgressBar;
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _ProgressBar =
|
|
17
|
-
|
|
18
|
-
Object.keys(_ProgressBar).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _ProgressBar[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _ProgressBar[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
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; }
|
|
15
|
+
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './ProgressBar';\n"],"file":"index.js"}
|
|
@@ -12,12 +12,12 @@ SValue {
|
|
|
12
12
|
left: 0;
|
|
13
13
|
background-image: linear-gradient(
|
|
14
14
|
-45deg,
|
|
15
|
-
color-mod(var(--green) shade(10%)) 25%,
|
|
16
|
-
var(--green) 0,
|
|
17
|
-
var(--green) 50%,
|
|
18
|
-
color-mod(var(--green) shade(10%)) 0,
|
|
19
|
-
color-mod(var(--green) shade(10%)) 76%,
|
|
20
|
-
var(--green) 0
|
|
15
|
+
color-mod(var(--green-400) shade(10%)) 25%,
|
|
16
|
+
var(--green-400) 0,
|
|
17
|
+
var(--green-400) 50%,
|
|
18
|
+
color-mod(var(--green-400) shade(10%)) 0,
|
|
19
|
+
color-mod(var(--green-400) shade(10%)) 76%,
|
|
20
|
+
var(--green-400) 0
|
|
21
21
|
);
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
|
|
@@ -32,21 +32,21 @@ SValue {
|
|
|
32
32
|
SProgressBar[size='s'],
|
|
33
33
|
SValue[size='s'] {
|
|
34
34
|
height: 4px;
|
|
35
|
-
border-radius:
|
|
35
|
+
border-radius: var(--rounded-m);
|
|
36
36
|
background-size: 8px 8px;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
SProgressBar[size='m'],
|
|
40
40
|
SValue[size='m'] {
|
|
41
41
|
height: 8px;
|
|
42
|
-
border-radius:
|
|
42
|
+
border-radius: var(--rounded-m);
|
|
43
43
|
background-size: 12px 12px;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
SProgressBar[size='l'],
|
|
47
47
|
SValue[size='l'] {
|
|
48
48
|
height: 12px;
|
|
49
|
-
border-radius:
|
|
49
|
+
border-radius: var(--rounded-m);
|
|
50
50
|
background-size: 16px 16px;
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -55,7 +55,7 @@ SProgressBar[theme='dark'] {
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
SProgressBar[theme='invert'] {
|
|
58
|
-
background-color: var(--
|
|
58
|
+
background-color: var(--gray-100);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
@keyframes loading {
|
|
@@ -70,12 +70,12 @@ SProgressBar[theme='invert'] {
|
|
|
70
70
|
SProgressBar[animation] {
|
|
71
71
|
background-image: linear-gradient(
|
|
72
72
|
-45deg,
|
|
73
|
-
color-mod(var(--
|
|
74
|
-
var(--
|
|
75
|
-
var(--
|
|
76
|
-
color-mod(var(--
|
|
77
|
-
color-mod(var(--
|
|
78
|
-
var(--
|
|
73
|
+
color-mod(var(--gray-100) shade(10%)) 25%,
|
|
74
|
+
var(--gray-100) 0,
|
|
75
|
+
var(--gray-100) 50%,
|
|
76
|
+
color-mod(var(--gray-100) shade(10%)) 0,
|
|
77
|
+
color-mod(var(--gray-100) shade(10%)) 76%,
|
|
78
|
+
var(--gray-100) 0
|
|
79
79
|
);
|
|
80
80
|
animation-name: loading;
|
|
81
81
|
animation-timing-function: linear;
|
|
@@ -83,10 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
|
|
88
|
-
SProgressBar[theme='custom'] {
|
|
89
|
-
background-image: var(--backgroundColor);
|
|
86
|
+
background-color: var(--сolorBg);
|
|
87
|
+
background-image: var(--сolorBg);
|
|
90
88
|
}
|
|
91
89
|
SProgressBar[animation] {
|
|
92
90
|
animation-duration: var(--duration);
|
|
@@ -97,8 +95,8 @@ SValue {
|
|
|
97
95
|
animation-duration: var(--duration);
|
|
98
96
|
}
|
|
99
97
|
SValue[theme] {
|
|
100
|
-
background-color: var(
|
|
101
|
-
background-image: var(
|
|
98
|
+
background-color: var(--сolorBg);
|
|
99
|
+
background-image: var(--сolorBg);
|
|
102
100
|
}
|
|
103
101
|
|
|
104
102
|
@media (prefers-reduced-motion) {
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
3
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
@@ -9,7 +7,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
9
7
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
8
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
11
9
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
-
var _excluded = ["Children", "styles", "duration", "size", "theme", "value", "animation"];
|
|
13
10
|
|
|
14
11
|
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; }
|
|
15
12
|
|
|
@@ -23,32 +20,31 @@ import React from 'react';
|
|
|
23
20
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
24
21
|
import { Box } from '@semcore/flex-box';
|
|
25
22
|
import resolveColor from '@semcore/utils/lib/color';
|
|
26
|
-
import logger from '@semcore/utils/lib/logger';
|
|
27
23
|
|
|
28
24
|
/*__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
29
25
|
var style = (
|
|
30
26
|
/*__reshadow_css_start__*/
|
|
31
27
|
_sstyled.insert(
|
|
32
28
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
29
|
+
".___SProgressBar_8d83n_gg_{position:relative;width:100%;overflow:hidden}.___SValue_8d83n_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-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_8d83n_gg_._size_s_8d83n_gg_,.___SValue_8d83n_gg_._size_s_8d83n_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_8d83n_gg_._size_m_8d83n_gg_,.___SValue_8d83n_gg_._size_m_8d83n_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_8d83n_gg_._size_l_8d83n_gg_,.___SValue_8d83n_gg_._size_l_8d83n_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_8d83n_gg_._theme_dark_8d83n_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_8d83n_gg_._theme_invert_8d83n_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_8d83n_gg_._theme_custom_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_{width:var(--width_1tcsv8p);-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_.__theme_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}@media (prefers-reduced-motion){.___SValue_8d83n_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
34
30
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
31
|
+
, "1tcsv8p_gg_")
|
|
36
32
|
/*__reshadow_css_end__*/
|
|
37
33
|
, {
|
|
38
|
-
"__SProgressBar": "
|
|
39
|
-
"__SValue": "
|
|
40
|
-
"_size_s": "
|
|
41
|
-
"_size_m": "
|
|
42
|
-
"_size_l": "
|
|
43
|
-
"_theme_dark": "
|
|
44
|
-
"_theme_invert": "
|
|
45
|
-
"@loading": "
|
|
46
|
-
"_animation": "
|
|
47
|
-
"_theme_custom": "
|
|
48
|
-
"
|
|
49
|
-
"--duration": "--
|
|
50
|
-
"--width": "--
|
|
51
|
-
"_theme": "
|
|
34
|
+
"__SProgressBar": "___SProgressBar_8d83n_gg_",
|
|
35
|
+
"__SValue": "___SValue_8d83n_gg_",
|
|
36
|
+
"_size_s": "_size_s_8d83n_gg_",
|
|
37
|
+
"_size_m": "_size_m_8d83n_gg_",
|
|
38
|
+
"_size_l": "_size_l_8d83n_gg_",
|
|
39
|
+
"_theme_dark": "_theme_dark_8d83n_gg_",
|
|
40
|
+
"_theme_invert": "_theme_invert_8d83n_gg_",
|
|
41
|
+
"@loading": "loading_1tcsv8p",
|
|
42
|
+
"_animation": "__animation_8d83n_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_8d83n_gg_",
|
|
44
|
+
"--\u0441olorBg": "--\u0441olorBg_1tcsv8p",
|
|
45
|
+
"--duration": "--duration_1tcsv8p",
|
|
46
|
+
"--width": "--width_1tcsv8p",
|
|
47
|
+
"_theme": "__theme_8d83n_gg_"
|
|
52
48
|
});
|
|
53
49
|
|
|
54
50
|
function isCustomTheme(theme) {
|
|
@@ -82,29 +78,22 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
82
78
|
}, {
|
|
83
79
|
key: "render",
|
|
84
80
|
value: function render() {
|
|
85
|
-
var _ref = this
|
|
81
|
+
var _ref = this.asProps,
|
|
86
82
|
_ref3;
|
|
87
83
|
|
|
88
84
|
var SProgressBar = Box;
|
|
89
|
-
|
|
90
85
|
var _this$asProps2 = this.asProps,
|
|
91
86
|
Children = _this$asProps2.Children,
|
|
92
87
|
styles = _this$asProps2.styles,
|
|
93
88
|
duration = _this$asProps2.duration,
|
|
94
|
-
size = _this$asProps2.size,
|
|
95
89
|
theme = _this$asProps2.theme,
|
|
96
|
-
value = _this$asProps2.value
|
|
97
|
-
animation = _this$asProps2.animation,
|
|
98
|
-
other = _objectWithoutProperties(_this$asProps2, _excluded);
|
|
99
|
-
|
|
90
|
+
value = _this$asProps2.value;
|
|
100
91
|
var useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
101
|
-
var color = resolveColor(theme);
|
|
102
|
-
logger.warn(animation !== undefined, "The 'animation' property is deprecated, use 'value'", other['data-ui-name'] || ProgressBarRoot.displayName);
|
|
103
92
|
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, _assignProps({
|
|
104
93
|
"use:theme": useTheme,
|
|
105
|
-
"use:animation":
|
|
94
|
+
"use:animation": !value,
|
|
106
95
|
"use:duration": "".concat(duration, "ms"),
|
|
107
|
-
"
|
|
96
|
+
"\u0441olorBg": resolveColor(theme)
|
|
108
97
|
}, _ref))), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
|
|
109
98
|
}
|
|
110
99
|
}]);
|
|
@@ -126,21 +115,19 @@ _defineProperty(ProgressBarRoot, "defaultProps", function () {
|
|
|
126
115
|
});
|
|
127
116
|
|
|
128
117
|
function Value(props) {
|
|
129
|
-
var _ref2 =
|
|
118
|
+
var _ref2 = arguments[0],
|
|
130
119
|
_ref4;
|
|
131
120
|
|
|
132
121
|
var SValue = Box;
|
|
133
122
|
var styles = props.styles,
|
|
134
123
|
value = props.value,
|
|
135
|
-
size = props.size,
|
|
136
124
|
theme = props.theme,
|
|
137
125
|
duration = props.duration;
|
|
138
126
|
var width = "".concat(value, "%");
|
|
139
|
-
var color = resolveColor(theme);
|
|
140
127
|
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, _assignProps2({
|
|
141
128
|
"use:width": width,
|
|
142
129
|
"use:duration": "".concat(duration, "ms"),
|
|
143
|
-
"
|
|
130
|
+
"\u0441olorBg": resolveColor(theme)
|
|
144
131
|
}, _ref2))));
|
|
145
132
|
}
|
|
146
133
|
|
|
@@ -148,17 +135,4 @@ var ProgressBar = createComponent(ProgressBarRoot, {
|
|
|
148
135
|
Value: Value
|
|
149
136
|
});
|
|
150
137
|
export default ProgressBar;
|
|
151
|
-
var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
152
|
-
logger.warn(true, "Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'", props['data-ui-name'] || ProgressBar.displayName);
|
|
153
|
-
return /*#__PURE__*/React.createElement(ProgressBar.Value, _extends({
|
|
154
|
-
ref: ref
|
|
155
|
-
}, props));
|
|
156
|
-
});
|
|
157
|
-
var Bar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
158
|
-
logger.warn(true, "Component '<Bar/>' is deprecated, please use '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
|
|
159
|
-
return /*#__PURE__*/React.createElement(ProgressBar, _extends({
|
|
160
|
-
ref: ref
|
|
161
|
-
}, props));
|
|
162
|
-
});
|
|
163
|
-
export { Bar, Progress };
|
|
164
138
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","
|
|
1
|
+
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","useTheme","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,0BAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNV,GANZ;AACA,2BAAqD,KAAKM,OAA1D;AAAA,UAAQK,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BJ,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMM,QAAQ,GAAGX,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAOL,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACN,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,wBAKWP,YAAY,CAACE,KAAD;AALvB,+BAOE,oBAAC,QAAD,2BAPF,CADF;AAWD;;;;EAnC2BN,S;;gBAAxBQ,e,iBACiB,a;;gBADjBA,e,WAEWS,K;;gBAFXT,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3BY,IAAAA,QAAQ,eAAE,oBAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GAMAlB,GANZ;AACA,MAAQY,MAAR,GAA2CK,KAA3C,CAAQL,MAAR;AAAA,MAAgBL,KAAhB,GAA2CU,KAA3C,CAAgBV,KAAhB;AAAA,MAAuBJ,KAAvB,GAA2Cc,KAA3C,CAAuBd,KAAvB;AAAA,MAA8BK,QAA9B,GAA2CS,KAA3C,CAA8BT,QAA9B;AACA,MAAMW,KAAK,aAAMZ,KAAN,MAAX;AAEA,iBAAOT,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,MAAD;AAAA,iBAEaO,KAFb;AAAA,8BAGmBX,QAHnB;AAAA,oBAIWP,YAAY,CAACE,KAAD;AAJvB,cADF;AAQD;;AAED,IAAMiB,WAAW,GAAGxB,eAAe,CAACS,eAAD,EAAkB;AACnDW,EAAAA,KAAK,EAALA;AADmD,CAAlB,CAAnC;AAIA,eAAeI,WAAf","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';\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, theme, value } = 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 сolorBg={resolveColor(theme)}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration } = 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 сolorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
|
|
2
|
+
import { IBoxProps } from '@semcore/flex-box';
|
|
3
|
+
|
|
4
|
+
export interface IProgressBarProps extends IBoxProps {
|
|
5
|
+
/**
|
|
6
|
+
* Progress bar theme
|
|
7
|
+
* @default invert
|
|
8
|
+
*/
|
|
9
|
+
theme?: 'dark' | 'invert' | string;
|
|
10
|
+
/**
|
|
11
|
+
* Progress bar size
|
|
12
|
+
* @default m
|
|
13
|
+
*/
|
|
14
|
+
size?: 's' | 'm' | 'l';
|
|
15
|
+
/** Value as a percentage */
|
|
16
|
+
value?: number;
|
|
17
|
+
/** Duration of animation, ms
|
|
18
|
+
* @default 1000
|
|
19
|
+
*/
|
|
20
|
+
duration?: number;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface IValueProps extends IBoxProps {
|
|
24
|
+
size?: 's' | 'm' | 'l';
|
|
25
|
+
value?: number;
|
|
26
|
+
duration?: number;
|
|
27
|
+
theme?: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface IProgressBarCxt {
|
|
31
|
+
getValueProps: PropGetterFn;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
declare const ProgressBar: (<T>(
|
|
35
|
+
props: CProps<IProgressBarProps & T, IProgressBarCxt>,
|
|
36
|
+
) => ReturnEl) & {
|
|
37
|
+
Value: <T>(props: IValueProps & T) => ReturnEl;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export default ProgressBar;
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB","sourcesContent":["export { default } from './ProgressBar';\n"],"file":"index.js"}
|
|
@@ -12,12 +12,12 @@ SValue {
|
|
|
12
12
|
left: 0;
|
|
13
13
|
background-image: linear-gradient(
|
|
14
14
|
-45deg,
|
|
15
|
-
color-mod(var(--green) shade(10%)) 25%,
|
|
16
|
-
var(--green) 0,
|
|
17
|
-
var(--green) 50%,
|
|
18
|
-
color-mod(var(--green) shade(10%)) 0,
|
|
19
|
-
color-mod(var(--green) shade(10%)) 76%,
|
|
20
|
-
var(--green) 0
|
|
15
|
+
color-mod(var(--green-400) shade(10%)) 25%,
|
|
16
|
+
var(--green-400) 0,
|
|
17
|
+
var(--green-400) 50%,
|
|
18
|
+
color-mod(var(--green-400) shade(10%)) 0,
|
|
19
|
+
color-mod(var(--green-400) shade(10%)) 76%,
|
|
20
|
+
var(--green-400) 0
|
|
21
21
|
);
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
|
|
@@ -32,21 +32,21 @@ SValue {
|
|
|
32
32
|
SProgressBar[size='s'],
|
|
33
33
|
SValue[size='s'] {
|
|
34
34
|
height: 4px;
|
|
35
|
-
border-radius:
|
|
35
|
+
border-radius: var(--rounded-m);
|
|
36
36
|
background-size: 8px 8px;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
SProgressBar[size='m'],
|
|
40
40
|
SValue[size='m'] {
|
|
41
41
|
height: 8px;
|
|
42
|
-
border-radius:
|
|
42
|
+
border-radius: var(--rounded-m);
|
|
43
43
|
background-size: 12px 12px;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
SProgressBar[size='l'],
|
|
47
47
|
SValue[size='l'] {
|
|
48
48
|
height: 12px;
|
|
49
|
-
border-radius:
|
|
49
|
+
border-radius: var(--rounded-m);
|
|
50
50
|
background-size: 16px 16px;
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -55,7 +55,7 @@ SProgressBar[theme='dark'] {
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
SProgressBar[theme='invert'] {
|
|
58
|
-
background-color: var(--
|
|
58
|
+
background-color: var(--gray-100);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
@keyframes loading {
|
|
@@ -70,12 +70,12 @@ SProgressBar[theme='invert'] {
|
|
|
70
70
|
SProgressBar[animation] {
|
|
71
71
|
background-image: linear-gradient(
|
|
72
72
|
-45deg,
|
|
73
|
-
color-mod(var(--
|
|
74
|
-
var(--
|
|
75
|
-
var(--
|
|
76
|
-
color-mod(var(--
|
|
77
|
-
color-mod(var(--
|
|
78
|
-
var(--
|
|
73
|
+
color-mod(var(--gray-100) shade(10%)) 25%,
|
|
74
|
+
var(--gray-100) 0,
|
|
75
|
+
var(--gray-100) 50%,
|
|
76
|
+
color-mod(var(--gray-100) shade(10%)) 0,
|
|
77
|
+
color-mod(var(--gray-100) shade(10%)) 76%,
|
|
78
|
+
var(--gray-100) 0
|
|
79
79
|
);
|
|
80
80
|
animation-name: loading;
|
|
81
81
|
animation-timing-function: linear;
|
|
@@ -83,10 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
|
|
88
|
-
SProgressBar[theme='custom'] {
|
|
89
|
-
background-image: var(--backgroundColor);
|
|
86
|
+
background-color: var(--сolorBg);
|
|
87
|
+
background-image: var(--сolorBg);
|
|
90
88
|
}
|
|
91
89
|
SProgressBar[animation] {
|
|
92
90
|
animation-duration: var(--duration);
|
|
@@ -97,8 +95,8 @@ SValue {
|
|
|
97
95
|
animation-duration: var(--duration);
|
|
98
96
|
}
|
|
99
97
|
SValue[theme] {
|
|
100
|
-
background-color: var(
|
|
101
|
-
background-image: var(
|
|
98
|
+
background-color: var(--сolorBg);
|
|
99
|
+
background-image: var(--сolorBg);
|
|
102
100
|
}
|
|
103
101
|
|
|
104
102
|
@media (prefers-reduced-motion) {
|
package/lib/types/index.d.ts
CHANGED
|
@@ -18,10 +18,6 @@ export interface IProgressBarProps extends IBoxProps {
|
|
|
18
18
|
* @default 1000
|
|
19
19
|
*/
|
|
20
20
|
duration?: number;
|
|
21
|
-
/** Sets an animated background
|
|
22
|
-
* @deprecated v2.0.0 {@link IProgressBarProps.value}
|
|
23
|
-
* */
|
|
24
|
-
animation?: boolean;
|
|
25
21
|
}
|
|
26
22
|
|
|
27
23
|
export interface IValueProps extends IBoxProps {
|
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": "3.0.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -27,5 +27,8 @@
|
|
|
27
27
|
"type": "git",
|
|
28
28
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
29
29
|
"directory": "semcore/progress-bar"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
30
33
|
}
|
|
31
34
|
}
|
package/src/ProgressBar.jsx
CHANGED
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
3
|
import { Box } from '@semcore/flex-box';
|
|
4
4
|
import resolveColor from '@semcore/utils/lib/color';
|
|
5
|
-
import logger from '@semcore/utils/lib/logger';
|
|
6
5
|
|
|
7
6
|
import style from './style/progress-bar.shadow.css';
|
|
8
7
|
|
|
@@ -31,23 +30,16 @@ class ProgressBarRoot extends Component {
|
|
|
31
30
|
|
|
32
31
|
render() {
|
|
33
32
|
const SProgressBar = Root;
|
|
34
|
-
const { Children, styles, duration,
|
|
33
|
+
const { Children, styles, duration, theme, value } = this.asProps;
|
|
35
34
|
const useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
36
|
-
const color = resolveColor(theme);
|
|
37
|
-
|
|
38
|
-
logger.warn(
|
|
39
|
-
animation !== undefined,
|
|
40
|
-
"The 'animation' property is deprecated, use 'value'",
|
|
41
|
-
other['data-ui-name'] || ProgressBarRoot.displayName,
|
|
42
|
-
);
|
|
43
35
|
|
|
44
36
|
return sstyled(styles)(
|
|
45
37
|
<SProgressBar
|
|
46
38
|
render={Box}
|
|
47
39
|
use:theme={useTheme}
|
|
48
|
-
use:animation={
|
|
40
|
+
use:animation={!value}
|
|
49
41
|
use:duration={`${duration}ms`}
|
|
50
|
-
|
|
42
|
+
сolorBg={resolveColor(theme)}
|
|
51
43
|
>
|
|
52
44
|
<Children />
|
|
53
45
|
</SProgressBar>,
|
|
@@ -57,16 +49,15 @@ class ProgressBarRoot extends Component {
|
|
|
57
49
|
|
|
58
50
|
function Value(props) {
|
|
59
51
|
const SValue = Root;
|
|
60
|
-
const { styles, value,
|
|
52
|
+
const { styles, value, theme, duration } = props;
|
|
61
53
|
const width = `${value}%`;
|
|
62
|
-
const color = resolveColor(theme);
|
|
63
54
|
|
|
64
55
|
return sstyled(styles)(
|
|
65
56
|
<SValue
|
|
66
57
|
render={Box}
|
|
67
58
|
use:width={width}
|
|
68
59
|
use:duration={`${duration}ms`}
|
|
69
|
-
|
|
60
|
+
сolorBg={resolveColor(theme)}
|
|
70
61
|
/>,
|
|
71
62
|
);
|
|
72
63
|
}
|
|
@@ -76,23 +67,3 @@ const ProgressBar = createComponent(ProgressBarRoot, {
|
|
|
76
67
|
});
|
|
77
68
|
|
|
78
69
|
export default ProgressBar;
|
|
79
|
-
|
|
80
|
-
const Progress = React.forwardRef(function (props, ref) {
|
|
81
|
-
logger.warn(
|
|
82
|
-
true,
|
|
83
|
-
"Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'",
|
|
84
|
-
props['data-ui-name'] || ProgressBar.displayName,
|
|
85
|
-
);
|
|
86
|
-
return <ProgressBar.Value ref={ref} {...props} />;
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
const Bar = React.forwardRef(function (props, ref) {
|
|
90
|
-
logger.warn(
|
|
91
|
-
true,
|
|
92
|
-
"Component '<Bar/>' is deprecated, please use '<ProgressBar/>'",
|
|
93
|
-
props['data-ui-name'] || ProgressBar.displayName,
|
|
94
|
-
);
|
|
95
|
-
return <ProgressBar ref={ref} {...props} />;
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
export { Bar, Progress };
|
package/src/index.d.ts
CHANGED
|
@@ -18,10 +18,6 @@ export interface IProgressBarProps extends IBoxProps {
|
|
|
18
18
|
* @default 1000
|
|
19
19
|
*/
|
|
20
20
|
duration?: number;
|
|
21
|
-
/** Sets an animated background
|
|
22
|
-
* @deprecated v2.0.0 {@link IProgressBarProps.value}
|
|
23
|
-
* */
|
|
24
|
-
animation?: boolean;
|
|
25
21
|
}
|
|
26
22
|
|
|
27
23
|
export interface IValueProps extends IBoxProps {
|
package/src/index.js
CHANGED
|
@@ -12,12 +12,12 @@ SValue {
|
|
|
12
12
|
left: 0;
|
|
13
13
|
background-image: linear-gradient(
|
|
14
14
|
-45deg,
|
|
15
|
-
color-mod(var(--green) shade(10%)) 25%,
|
|
16
|
-
var(--green) 0,
|
|
17
|
-
var(--green) 50%,
|
|
18
|
-
color-mod(var(--green) shade(10%)) 0,
|
|
19
|
-
color-mod(var(--green) shade(10%)) 76%,
|
|
20
|
-
var(--green) 0
|
|
15
|
+
color-mod(var(--green-400) shade(10%)) 25%,
|
|
16
|
+
var(--green-400) 0,
|
|
17
|
+
var(--green-400) 50%,
|
|
18
|
+
color-mod(var(--green-400) shade(10%)) 0,
|
|
19
|
+
color-mod(var(--green-400) shade(10%)) 76%,
|
|
20
|
+
var(--green-400) 0
|
|
21
21
|
);
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
|
|
@@ -32,21 +32,21 @@ SValue {
|
|
|
32
32
|
SProgressBar[size='s'],
|
|
33
33
|
SValue[size='s'] {
|
|
34
34
|
height: 4px;
|
|
35
|
-
border-radius:
|
|
35
|
+
border-radius: var(--rounded-m);
|
|
36
36
|
background-size: 8px 8px;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
SProgressBar[size='m'],
|
|
40
40
|
SValue[size='m'] {
|
|
41
41
|
height: 8px;
|
|
42
|
-
border-radius:
|
|
42
|
+
border-radius: var(--rounded-m);
|
|
43
43
|
background-size: 12px 12px;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
SProgressBar[size='l'],
|
|
47
47
|
SValue[size='l'] {
|
|
48
48
|
height: 12px;
|
|
49
|
-
border-radius:
|
|
49
|
+
border-radius: var(--rounded-m);
|
|
50
50
|
background-size: 16px 16px;
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -55,7 +55,7 @@ SProgressBar[theme='dark'] {
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
SProgressBar[theme='invert'] {
|
|
58
|
-
background-color: var(--
|
|
58
|
+
background-color: var(--gray-100);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
@keyframes loading {
|
|
@@ -70,12 +70,12 @@ SProgressBar[theme='invert'] {
|
|
|
70
70
|
SProgressBar[animation] {
|
|
71
71
|
background-image: linear-gradient(
|
|
72
72
|
-45deg,
|
|
73
|
-
color-mod(var(--
|
|
74
|
-
var(--
|
|
75
|
-
var(--
|
|
76
|
-
color-mod(var(--
|
|
77
|
-
color-mod(var(--
|
|
78
|
-
var(--
|
|
73
|
+
color-mod(var(--gray-100) shade(10%)) 25%,
|
|
74
|
+
var(--gray-100) 0,
|
|
75
|
+
var(--gray-100) 50%,
|
|
76
|
+
color-mod(var(--gray-100) shade(10%)) 0,
|
|
77
|
+
color-mod(var(--gray-100) shade(10%)) 76%,
|
|
78
|
+
var(--gray-100) 0
|
|
79
79
|
);
|
|
80
80
|
animation-name: loading;
|
|
81
81
|
animation-timing-function: linear;
|
|
@@ -83,10 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
|
|
88
|
-
SProgressBar[theme='custom'] {
|
|
89
|
-
background-image: var(--backgroundColor);
|
|
86
|
+
background-color: var(--сolorBg);
|
|
87
|
+
background-image: var(--сolorBg);
|
|
90
88
|
}
|
|
91
89
|
SProgressBar[animation] {
|
|
92
90
|
animation-duration: var(--duration);
|
|
@@ -97,8 +95,8 @@ SValue {
|
|
|
97
95
|
animation-duration: var(--duration);
|
|
98
96
|
}
|
|
99
97
|
SValue[theme] {
|
|
100
|
-
background-color: var(
|
|
101
|
-
background-image: var(
|
|
98
|
+
background-color: var(--сolorBg);
|
|
99
|
+
background-image: var(--сolorBg);
|
|
102
100
|
}
|
|
103
101
|
|
|
104
102
|
@media (prefers-reduced-motion) {
|