@semcore/progress-bar 3.0.5 → 3.0.6
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 +2 -2
- package/lib/cjs/ProgressBar.js +16 -16
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/ProgressBar.js +16 -16
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/ProgressBar.jsx +0 -69
- package/src/index.d.ts +0 -40
- package/src/index.js +0 -1
- package/src/style/progress-bar.shadow.css +0 -109
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.6] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
|
|
10
|
+
|
|
5
11
|
## [3.0.5] - 2022-07-07
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import ProgressBar from '@semcore/progress-bar';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
53
|
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
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_1eeal_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1eeal_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_1eeal;animation-name:loading_1eeal;-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_1eeal_gg_._size_s_1eeal_gg_,.___SValue_1eeal_gg_._size_s_1eeal_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_1eeal_gg_._size_m_1eeal_gg_,.___SValue_1eeal_gg_._size_m_1eeal_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_1eeal_gg_._size_l_1eeal_gg_,.___SValue_1eeal_gg_._size_l_1eeal_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1eeal_gg_._theme_dark_1eeal_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1eeal_gg_._theme_invert_1eeal_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1eeal{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1eeal{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1eeal_gg_.__animation_1eeal_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1eeal;animation-name:loading_1eeal;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_1eeal_gg_._theme_custom_1eeal_gg_{background-color:var(--colorBg_1eeal);background-image:var(--colorBg_1eeal)}.___SProgressBar_1eeal_gg_.__animation_1eeal_gg_{-webkit-animation-duration:var(--duration_1eeal);animation-duration:var(--duration_1eeal)}.___SValue_1eeal_gg_{width:var(--width_1eeal);-webkit-animation-duration:var(--duration_1eeal);animation-duration:var(--duration_1eeal)}.___SValue_1eeal_gg_.__theme_1eeal_gg_{background-color:var(--colorBg_1eeal);background-image:var(--colorBg_1eeal)}@media (prefers-reduced-motion){.___SValue_1eeal_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_1eeal_gg_.__animation_1eeal_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1eeal_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
|
-
"--colorBg": "--
|
|
65
|
-
"--duration": "--
|
|
66
|
-
"--width": "--
|
|
67
|
-
"_theme": "
|
|
54
|
+
"__SProgressBar": "___SProgressBar_1eeal_gg_",
|
|
55
|
+
"__SValue": "___SValue_1eeal_gg_",
|
|
56
|
+
"_size_s": "_size_s_1eeal_gg_",
|
|
57
|
+
"_size_m": "_size_m_1eeal_gg_",
|
|
58
|
+
"_size_l": "_size_l_1eeal_gg_",
|
|
59
|
+
"_theme_dark": "_theme_dark_1eeal_gg_",
|
|
60
|
+
"_theme_invert": "_theme_invert_1eeal_gg_",
|
|
61
|
+
"@loading": "loading_1eeal",
|
|
62
|
+
"_animation": "__animation_1eeal_gg_",
|
|
63
|
+
"_theme_custom": "_theme_custom_1eeal_gg_",
|
|
64
|
+
"--colorBg": "--colorBg_1eeal",
|
|
65
|
+
"--duration": "--duration_1eeal",
|
|
66
|
+
"--width": "--width_1eeal",
|
|
67
|
+
"_theme": "__theme_1eeal_gg_"
|
|
68
68
|
});
|
|
69
69
|
|
|
70
70
|
function isCustomTheme(theme) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","useTheme","sstyled","resolveColor","Component","style","children","Value","props","SValue","width","ProgressBar","createComponent"],"sources":["../../src/ProgressBar.jsx"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;EAC5B,OAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;WAUJ,yBAAgB;MACd,oBAAkC,KAAKC,OAAvC;MAAA,IAAQC,KAAR,iBAAQA,KAAR;MAAA,IAAeC,QAAf,iBAAeA,QAAf;MAAA,IAAyBC,IAAzB,iBAAyBA,IAAzB;MACA,OAAO;QACLF,KAAK,EAALA,KADK;QAELC,QAAQ,EAARA,QAFK;QAGLC,IAAI,EAAJA;MAHK,CAAP;IAKD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMC,YAAY,GAMNC,YANZ;MACA,qBAAqD,KAAKL,OAA1D;MAAA,IAAQM,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,MAAlB,kBAAkBA,MAAlB;MAAA,IAA0BL,QAA1B,kBAA0BA,QAA1B;MAAA,IAAoCL,KAApC,kBAAoCA,KAApC;MAAA,IAA2CI,KAA3C,kBAA2CA,KAA3C;MACA,IAAMO,QAAQ,GAAGZ,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;MAEA,eAAO,IAAAY,aAAA,EAAQF,MAAR,CAAP,eACE,gCAAC,YAAD;QAAA,aAEaC,QAFb;QAAA,iBAGiB,CAACP,KAHlB;QAAA,0BAImBC,QAJnB;QAAA,WAKW,IAAAQ,iBAAA,EAAab,KAAb;MALX,yBAOE,gCAAC,QAAD,2BAPF,CADF;IAWD;;;EAnC2Bc,e;;iCAAxBZ,e,iBACiB,a;iCADjBA,e,WAEWa,K;iCAFXb,e,kBAGkB;EAAA,OAAO;IAC3BG,QAAQ,EAAE,IADiB;IAE3BC,IAAI,EAAE,GAFqB;IAG3BN,KAAK,EAAE,QAHoB;IAI3BgB,QAAQ,eAAE,gCAAC,WAAD,CAAa,KAAb;EAJiB,CAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMC,MAAM,GAMAX,YANZ;EACA,IAAQE,MAAR,GAA2CQ,KAA3C,CAAQR,MAAR;EAAA,IAAgBN,KAAhB,GAA2Cc,KAA3C,CAAgBd,KAAhB;EAAA,IAAuBJ,KAAvB,GAA2CkB,KAA3C,CAAuBlB,KAAvB;EAAA,IAA8BK,QAA9B,GAA2Ca,KAA3C,CAA8Bb,QAA9B;EACA,IAAMe,KAAK,aAAMhB,KAAN,MAAX;EAEA,eAAO,IAAAQ,aAAA,EAAQF,MAAR,CAAP,eACE,gCAAC,MAAD;IAAA,aAEaU,KAFb;IAAA,0BAGmBf,QAHnB;IAAA,WAIW,IAAAQ,iBAAA,EAAab,KAAb;EAJX,YADF;AAQD;;AAED,IAAMqB,WAAW,GAAG,IAAAC,gBAAA,EAAgBpB,eAAhB,EAAiC;EACnDe,KAAK,EAALA;AADmD,CAAjC,CAApB;eAIeI,W"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ProgressBar';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
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_1eeal_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1eeal_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_1eeal;animation-name:loading_1eeal;-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_1eeal_gg_._size_s_1eeal_gg_,.___SValue_1eeal_gg_._size_s_1eeal_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_1eeal_gg_._size_m_1eeal_gg_,.___SValue_1eeal_gg_._size_m_1eeal_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_1eeal_gg_._size_l_1eeal_gg_,.___SValue_1eeal_gg_._size_l_1eeal_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1eeal_gg_._theme_dark_1eeal_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1eeal_gg_._theme_invert_1eeal_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1eeal{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1eeal{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1eeal_gg_.__animation_1eeal_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1eeal;animation-name:loading_1eeal;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_1eeal_gg_._theme_custom_1eeal_gg_{background-color:var(--colorBg_1eeal);background-image:var(--colorBg_1eeal)}.___SProgressBar_1eeal_gg_.__animation_1eeal_gg_{-webkit-animation-duration:var(--duration_1eeal);animation-duration:var(--duration_1eeal)}.___SValue_1eeal_gg_{width:var(--width_1eeal);-webkit-animation-duration:var(--duration_1eeal);animation-duration:var(--duration_1eeal)}.___SValue_1eeal_gg_.__theme_1eeal_gg_{background-color:var(--colorBg_1eeal);background-image:var(--colorBg_1eeal)}@media (prefers-reduced-motion){.___SValue_1eeal_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_1eeal_gg_.__animation_1eeal_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
30
30
|
/*__inner_css_end__*/
|
|
31
|
-
, "
|
|
31
|
+
, "1eeal_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
|
-
"--colorBg": "--
|
|
45
|
-
"--duration": "--
|
|
46
|
-
"--width": "--
|
|
47
|
-
"_theme": "
|
|
34
|
+
"__SProgressBar": "___SProgressBar_1eeal_gg_",
|
|
35
|
+
"__SValue": "___SValue_1eeal_gg_",
|
|
36
|
+
"_size_s": "_size_s_1eeal_gg_",
|
|
37
|
+
"_size_m": "_size_m_1eeal_gg_",
|
|
38
|
+
"_size_l": "_size_l_1eeal_gg_",
|
|
39
|
+
"_theme_dark": "_theme_dark_1eeal_gg_",
|
|
40
|
+
"_theme_invert": "_theme_invert_1eeal_gg_",
|
|
41
|
+
"@loading": "loading_1eeal",
|
|
42
|
+
"_animation": "__animation_1eeal_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_1eeal_gg_",
|
|
44
|
+
"--colorBg": "--colorBg_1eeal",
|
|
45
|
+
"--duration": "--duration_1eeal",
|
|
46
|
+
"--width": "--width_1eeal",
|
|
47
|
+
"_theme": "__theme_1eeal_gg_"
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
function isCustomTheme(theme) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","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"],"sources":["../../src/ProgressBar.jsx"],"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"],"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;EAC5B,OAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;;WAUJ,yBAAgB;MACd,oBAAkC,KAAKC,OAAvC;MAAA,IAAQC,KAAR,iBAAQA,KAAR;MAAA,IAAeC,QAAf,iBAAeA,QAAf;MAAA,IAAyBC,IAAzB,iBAAyBA,IAAzB;MACA,OAAO;QACLF,KAAK,EAALA,KADK;QAELC,QAAQ,EAARA,QAFK;QAGLC,IAAI,EAAJA;MAHK,CAAP;IAKD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMC,YAAY,GAMNV,GANZ;MACA,qBAAqD,KAAKM,OAA1D;MAAA,IAAQK,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,MAAlB,kBAAkBA,MAAlB;MAAA,IAA0BJ,QAA1B,kBAA0BA,QAA1B;MAAA,IAAoCL,KAApC,kBAAoCA,KAApC;MAAA,IAA2CI,KAA3C,kBAA2CA,KAA3C;MACA,IAAMM,QAAQ,GAAGX,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;MAEA,eAAOL,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,YAAD;QAAA,aAEaC,QAFb;QAAA,iBAGiB,CAACN,KAHlB;QAAA,0BAImBC,QAJnB;QAAA,WAKWP,YAAY,CAACE,KAAD;MALvB,yBAOE,oBAAC,QAAD,2BAPF,CADF;IAWD;;;;EAnC2BN,S;;gBAAxBQ,e,iBACiB,a;;gBADjBA,e,WAEWS,K;;gBAFXT,e,kBAGkB;EAAA,OAAO;IAC3BG,QAAQ,EAAE,IADiB;IAE3BC,IAAI,EAAE,GAFqB;IAG3BN,KAAK,EAAE,QAHoB;IAI3BY,QAAQ,eAAE,oBAAC,WAAD,CAAa,KAAb;EAJiB,CAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMC,MAAM,GAMAlB,GANZ;EACA,IAAQY,MAAR,GAA2CK,KAA3C,CAAQL,MAAR;EAAA,IAAgBL,KAAhB,GAA2CU,KAA3C,CAAgBV,KAAhB;EAAA,IAAuBJ,KAAvB,GAA2Cc,KAA3C,CAAuBd,KAAvB;EAAA,IAA8BK,QAA9B,GAA2CS,KAA3C,CAA8BT,QAA9B;EACA,IAAMW,KAAK,aAAMZ,KAAN,MAAX;EAEA,eAAOT,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,MAAD;IAAA,aAEaO,KAFb;IAAA,0BAGmBX,QAHnB;IAAA,WAIWP,YAAY,CAACE,KAAD;EAJvB,YADF;AAQD;;AAED,IAAMiB,WAAW,GAAGxB,eAAe,CAACS,eAAD,EAAkB;EACnDW,KAAK,EAALA;AADmD,CAAlB,CAAnC;AAIA,eAAeI,WAAf"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ProgressBar';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}
|
package/package.json
CHANGED
package/src/ProgressBar.jsx
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import resolveColor from '@semcore/utils/lib/color';
|
|
5
|
-
|
|
6
|
-
import style from './style/progress-bar.shadow.css';
|
|
7
|
-
|
|
8
|
-
function isCustomTheme(theme) {
|
|
9
|
-
return !['dark', 'invert'].includes(theme);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
class ProgressBarRoot extends Component {
|
|
13
|
-
static displayName = 'ProgressBar';
|
|
14
|
-
static style = style;
|
|
15
|
-
static defaultProps = () => ({
|
|
16
|
-
duration: 1000,
|
|
17
|
-
size: 'm',
|
|
18
|
-
theme: 'invert',
|
|
19
|
-
children: <ProgressBar.Value />,
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
getValueProps() {
|
|
23
|
-
const { value, duration, size } = this.asProps;
|
|
24
|
-
return {
|
|
25
|
-
value,
|
|
26
|
-
duration,
|
|
27
|
-
size,
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
render() {
|
|
32
|
-
const SProgressBar = Root;
|
|
33
|
-
const { Children, styles, duration, theme, value } = this.asProps;
|
|
34
|
-
const useTheme = isCustomTheme(theme) ? 'custom' : theme;
|
|
35
|
-
|
|
36
|
-
return sstyled(styles)(
|
|
37
|
-
<SProgressBar
|
|
38
|
-
render={Box}
|
|
39
|
-
use:theme={useTheme}
|
|
40
|
-
use:animation={!value}
|
|
41
|
-
use:duration={`${duration}ms`}
|
|
42
|
-
colorBg={resolveColor(theme)}
|
|
43
|
-
>
|
|
44
|
-
<Children />
|
|
45
|
-
</SProgressBar>,
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function Value(props) {
|
|
51
|
-
const SValue = Root;
|
|
52
|
-
const { styles, value, theme, duration } = props;
|
|
53
|
-
const width = `${value}%`;
|
|
54
|
-
|
|
55
|
-
return sstyled(styles)(
|
|
56
|
-
<SValue
|
|
57
|
-
render={Box}
|
|
58
|
-
use:width={width}
|
|
59
|
-
use:duration={`${duration}ms`}
|
|
60
|
-
colorBg={resolveColor(theme)}
|
|
61
|
-
/>,
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const ProgressBar = createComponent(ProgressBarRoot, {
|
|
66
|
-
Value,
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
export default ProgressBar;
|
package/src/index.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
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/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './ProgressBar';
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SProgressBar {
|
|
4
|
-
position: relative;
|
|
5
|
-
width: 100%;
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
SValue {
|
|
10
|
-
position: absolute;
|
|
11
|
-
top: 0;
|
|
12
|
-
left: 0;
|
|
13
|
-
background-image: linear-gradient(
|
|
14
|
-
-45deg,
|
|
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
|
-
);
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
|
|
24
|
-
animation-name: loading;
|
|
25
|
-
animation-timing-function: linear;
|
|
26
|
-
animation-iteration-count: infinite;
|
|
27
|
-
transition-property: width;
|
|
28
|
-
transition-timing-function: linear;
|
|
29
|
-
transition-duration: 1000ms;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
SProgressBar[size='s'],
|
|
33
|
-
SValue[size='s'] {
|
|
34
|
-
height: 4px;
|
|
35
|
-
border-radius: var(--rounded-m);
|
|
36
|
-
background-size: 8px 8px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
SProgressBar[size='m'],
|
|
40
|
-
SValue[size='m'] {
|
|
41
|
-
height: 8px;
|
|
42
|
-
border-radius: var(--rounded-m);
|
|
43
|
-
background-size: 12px 12px;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
SProgressBar[size='l'],
|
|
47
|
-
SValue[size='l'] {
|
|
48
|
-
height: 12px;
|
|
49
|
-
border-radius: var(--rounded-m);
|
|
50
|
-
background-size: 16px 16px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
SProgressBar[theme='dark'] {
|
|
54
|
-
background-color: rgba(255, 255, 255, 0.2);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
SProgressBar[theme='invert'] {
|
|
58
|
-
background-color: var(--gray-100);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
@keyframes loading {
|
|
62
|
-
from {
|
|
63
|
-
background-position: 0 0;
|
|
64
|
-
}
|
|
65
|
-
to {
|
|
66
|
-
background-position: 60px 0;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
SProgressBar[animation] {
|
|
71
|
-
background-image: linear-gradient(
|
|
72
|
-
-45deg,
|
|
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
|
-
);
|
|
80
|
-
animation-name: loading;
|
|
81
|
-
animation-timing-function: linear;
|
|
82
|
-
animation-iteration-count: infinite;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(--colorBg);
|
|
87
|
-
background-image: var(--colorBg);
|
|
88
|
-
}
|
|
89
|
-
SProgressBar[animation] {
|
|
90
|
-
animation-duration: var(--duration);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
SValue {
|
|
94
|
-
width: var(--width);
|
|
95
|
-
animation-duration: var(--duration);
|
|
96
|
-
}
|
|
97
|
-
SValue[theme] {
|
|
98
|
-
background-color: var(--colorBg);
|
|
99
|
-
background-image: var(--colorBg);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
@media (prefers-reduced-motion) {
|
|
103
|
-
SValue {
|
|
104
|
-
animation-name: none;
|
|
105
|
-
}
|
|
106
|
-
SProgressBar[animation] {
|
|
107
|
-
animation-name: none;
|
|
108
|
-
}
|
|
109
|
-
}
|