@semcore/progress-bar 3.0.3 → 3.0.4
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/lib/cjs/ProgressBar.js +18 -18
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/style/progress-bar.shadow.css +4 -4
- package/lib/es6/ProgressBar.js +18 -18
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/style/progress-bar.shadow.css +4 -4
- package/package.json +1 -1
- package/src/ProgressBar.jsx +2 -2
- package/src/style/progress-bar.shadow.css +4 -4
package/CHANGELOG.md
CHANGED
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -46,25 +46,25 @@ var style = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SProgressBar_17u6v_gg_{position:relative;width:100%;overflow:hidden}.___SValue_17u6v_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_1in57e1;animation-name:loading_1in57e1;-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_17u6v_gg_._size_s_17u6v_gg_,.___SValue_17u6v_gg_._size_s_17u6v_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_17u6v_gg_._size_m_17u6v_gg_,.___SValue_17u6v_gg_._size_m_17u6v_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_17u6v_gg_._size_l_17u6v_gg_,.___SValue_17u6v_gg_._size_l_17u6v_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_17u6v_gg_._theme_dark_17u6v_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_17u6v_gg_._theme_invert_17u6v_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1in57e1;animation-name:loading_1in57e1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_17u6v_gg_._theme_custom_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_{width:var(--width_1in57e1);-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_.__theme_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}@media (prefers-reduced-motion){.___SValue_17u6v_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1in57e1_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SProgressBar": "
|
|
55
|
-
"__SValue": "
|
|
56
|
-
"_size_s": "
|
|
57
|
-
"_size_m": "
|
|
58
|
-
"_size_l": "
|
|
59
|
-
"_theme_dark": "
|
|
60
|
-
"_theme_invert": "
|
|
61
|
-
"@loading": "
|
|
62
|
-
"_animation": "
|
|
63
|
-
"_theme_custom": "
|
|
64
|
-
"
|
|
65
|
-
"--duration": "--
|
|
66
|
-
"--width": "--
|
|
67
|
-
"_theme": "
|
|
54
|
+
"__SProgressBar": "___SProgressBar_17u6v_gg_",
|
|
55
|
+
"__SValue": "___SValue_17u6v_gg_",
|
|
56
|
+
"_size_s": "_size_s_17u6v_gg_",
|
|
57
|
+
"_size_m": "_size_m_17u6v_gg_",
|
|
58
|
+
"_size_l": "_size_l_17u6v_gg_",
|
|
59
|
+
"_theme_dark": "_theme_dark_17u6v_gg_",
|
|
60
|
+
"_theme_invert": "_theme_invert_17u6v_gg_",
|
|
61
|
+
"@loading": "loading_1in57e1",
|
|
62
|
+
"_animation": "__animation_17u6v_gg_",
|
|
63
|
+
"_theme_custom": "_theme_custom_17u6v_gg_",
|
|
64
|
+
"--colorBg": "--colorBg_1in57e1",
|
|
65
|
+
"--duration": "--duration_1in57e1",
|
|
66
|
+
"--width": "--width_1in57e1",
|
|
67
|
+
"_theme": "__theme_17u6v_gg_"
|
|
68
68
|
});
|
|
69
69
|
|
|
70
70
|
function isCustomTheme(theme) {
|
|
@@ -112,7 +112,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
112
112
|
"use:theme": useTheme,
|
|
113
113
|
"use:animation": !value,
|
|
114
114
|
"use:duration": "".concat(duration, "ms"),
|
|
115
|
-
"
|
|
115
|
+
"colorBg": (0, _color["default"])(theme)
|
|
116
116
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
|
|
117
117
|
}
|
|
118
118
|
}]);
|
|
@@ -143,7 +143,7 @@ function Value(props) {
|
|
|
143
143
|
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SValue, _ref4.cn("SValue", _objectSpread({}, (0, _core.assignProps)({
|
|
144
144
|
"use:width": width,
|
|
145
145
|
"use:duration": "".concat(duration, "ms"),
|
|
146
|
-
"
|
|
146
|
+
"colorBg": (0, _color["default"])(theme)
|
|
147
147
|
}, _ref2))));
|
|
148
148
|
}
|
|
149
149
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,mBAKW,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,eAIW,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 colorBg={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 colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -83,8 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
background-image: var(
|
|
86
|
+
background-color: var(--colorBg);
|
|
87
|
+
background-image: var(--colorBg);
|
|
88
88
|
}
|
|
89
89
|
SProgressBar[animation] {
|
|
90
90
|
animation-duration: var(--duration);
|
|
@@ -95,8 +95,8 @@ SValue {
|
|
|
95
95
|
animation-duration: var(--duration);
|
|
96
96
|
}
|
|
97
97
|
SValue[theme] {
|
|
98
|
-
background-color: var(
|
|
99
|
-
background-image: var(
|
|
98
|
+
background-color: var(--colorBg);
|
|
99
|
+
background-image: var(--colorBg);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@media (prefers-reduced-motion) {
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -26,25 +26,25 @@ var style = (
|
|
|
26
26
|
/*__reshadow_css_start__*/
|
|
27
27
|
_sstyled.insert(
|
|
28
28
|
/*__inner_css_start__*/
|
|
29
|
-
".
|
|
29
|
+
".___SProgressBar_17u6v_gg_{position:relative;width:100%;overflow:hidden}.___SValue_17u6v_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_1in57e1;animation-name:loading_1in57e1;-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_17u6v_gg_._size_s_17u6v_gg_,.___SValue_17u6v_gg_._size_s_17u6v_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_17u6v_gg_._size_m_17u6v_gg_,.___SValue_17u6v_gg_._size_m_17u6v_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_17u6v_gg_._size_l_17u6v_gg_,.___SValue_17u6v_gg_._size_l_17u6v_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_17u6v_gg_._theme_dark_17u6v_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_17u6v_gg_._theme_invert_17u6v_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1in57e1;animation-name:loading_1in57e1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_17u6v_gg_._theme_custom_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_{width:var(--width_1in57e1);-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_.__theme_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}@media (prefers-reduced-motion){.___SValue_17u6v_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
30
30
|
/*__inner_css_end__*/
|
|
31
|
-
, "
|
|
31
|
+
, "1in57e1_gg_")
|
|
32
32
|
/*__reshadow_css_end__*/
|
|
33
33
|
, {
|
|
34
|
-
"__SProgressBar": "
|
|
35
|
-
"__SValue": "
|
|
36
|
-
"_size_s": "
|
|
37
|
-
"_size_m": "
|
|
38
|
-
"_size_l": "
|
|
39
|
-
"_theme_dark": "
|
|
40
|
-
"_theme_invert": "
|
|
41
|
-
"@loading": "
|
|
42
|
-
"_animation": "
|
|
43
|
-
"_theme_custom": "
|
|
44
|
-
"
|
|
45
|
-
"--duration": "--
|
|
46
|
-
"--width": "--
|
|
47
|
-
"_theme": "
|
|
34
|
+
"__SProgressBar": "___SProgressBar_17u6v_gg_",
|
|
35
|
+
"__SValue": "___SValue_17u6v_gg_",
|
|
36
|
+
"_size_s": "_size_s_17u6v_gg_",
|
|
37
|
+
"_size_m": "_size_m_17u6v_gg_",
|
|
38
|
+
"_size_l": "_size_l_17u6v_gg_",
|
|
39
|
+
"_theme_dark": "_theme_dark_17u6v_gg_",
|
|
40
|
+
"_theme_invert": "_theme_invert_17u6v_gg_",
|
|
41
|
+
"@loading": "loading_1in57e1",
|
|
42
|
+
"_animation": "__animation_17u6v_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_17u6v_gg_",
|
|
44
|
+
"--colorBg": "--colorBg_1in57e1",
|
|
45
|
+
"--duration": "--duration_1in57e1",
|
|
46
|
+
"--width": "--width_1in57e1",
|
|
47
|
+
"_theme": "__theme_17u6v_gg_"
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
function isCustomTheme(theme) {
|
|
@@ -93,7 +93,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
93
93
|
"use:theme": useTheme,
|
|
94
94
|
"use:animation": !value,
|
|
95
95
|
"use:duration": "".concat(duration, "ms"),
|
|
96
|
-
"
|
|
96
|
+
"colorBg": resolveColor(theme)
|
|
97
97
|
}, _ref))), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
|
|
98
98
|
}
|
|
99
99
|
}]);
|
|
@@ -127,7 +127,7 @@ function Value(props) {
|
|
|
127
127
|
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, _assignProps2({
|
|
128
128
|
"use:width": width,
|
|
129
129
|
"use:duration": "".concat(duration, "ms"),
|
|
130
|
-
"
|
|
130
|
+
"colorBg": resolveColor(theme)
|
|
131
131
|
}, _ref2))));
|
|
132
132
|
}
|
|
133
133
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,mBAKWP,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,eAIWP,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 colorBg={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 colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -83,8 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
background-image: var(
|
|
86
|
+
background-color: var(--colorBg);
|
|
87
|
+
background-image: var(--colorBg);
|
|
88
88
|
}
|
|
89
89
|
SProgressBar[animation] {
|
|
90
90
|
animation-duration: var(--duration);
|
|
@@ -95,8 +95,8 @@ SValue {
|
|
|
95
95
|
animation-duration: var(--duration);
|
|
96
96
|
}
|
|
97
97
|
SValue[theme] {
|
|
98
|
-
background-color: var(
|
|
99
|
-
background-image: var(
|
|
98
|
+
background-color: var(--colorBg);
|
|
99
|
+
background-image: var(--colorBg);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@media (prefers-reduced-motion) {
|
package/package.json
CHANGED
package/src/ProgressBar.jsx
CHANGED
|
@@ -39,7 +39,7 @@ class ProgressBarRoot extends Component {
|
|
|
39
39
|
use:theme={useTheme}
|
|
40
40
|
use:animation={!value}
|
|
41
41
|
use:duration={`${duration}ms`}
|
|
42
|
-
|
|
42
|
+
colorBg={resolveColor(theme)}
|
|
43
43
|
>
|
|
44
44
|
<Children />
|
|
45
45
|
</SProgressBar>,
|
|
@@ -57,7 +57,7 @@ function Value(props) {
|
|
|
57
57
|
render={Box}
|
|
58
58
|
use:width={width}
|
|
59
59
|
use:duration={`${duration}ms`}
|
|
60
|
-
|
|
60
|
+
colorBg={resolveColor(theme)}
|
|
61
61
|
/>,
|
|
62
62
|
);
|
|
63
63
|
}
|
|
@@ -83,8 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
background-image: var(
|
|
86
|
+
background-color: var(--colorBg);
|
|
87
|
+
background-image: var(--colorBg);
|
|
88
88
|
}
|
|
89
89
|
SProgressBar[animation] {
|
|
90
90
|
animation-duration: var(--duration);
|
|
@@ -95,8 +95,8 @@ SValue {
|
|
|
95
95
|
animation-duration: var(--duration);
|
|
96
96
|
}
|
|
97
97
|
SValue[theme] {
|
|
98
|
-
background-color: var(
|
|
99
|
-
background-image: var(
|
|
98
|
+
background-color: var(--colorBg);
|
|
99
|
+
background-image: var(--colorBg);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@media (prefers-reduced-motion) {
|