@activecollab/components 1.0.120 → 1.0.121
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/dist/cjs/components/ProgressBar/ProgressBar.js +32 -3
- package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/cjs/components/ProgressBar/Styles.js +6 -2
- package/dist/cjs/components/ProgressBar/Styles.js.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.d.ts +2 -0
- package/dist/esm/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.js +32 -3
- package/dist/esm/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/esm/components/ProgressBar/Styles.d.ts +2 -0
- package/dist/esm/components/ProgressBar/Styles.d.ts.map +1 -1
- package/dist/esm/components/ProgressBar/Styles.js +6 -2
- package/dist/esm/components/ProgressBar/Styles.js.map +1 -1
- package/dist/index.js +38 -5
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,9 +16,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
16
16
|
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; }
|
|
17
17
|
|
|
18
18
|
var ProgressBar = function ProgressBar(_ref) {
|
|
19
|
-
var progress = _ref.progress,
|
|
19
|
+
var _ref$progress = _ref.progress,
|
|
20
|
+
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
20
21
|
backgroundColor = _ref.backgroundColor,
|
|
21
|
-
progressColor = _ref.progressColor
|
|
22
|
+
progressColor = _ref.progressColor,
|
|
23
|
+
_ref$stroke = _ref.stroke,
|
|
24
|
+
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
25
|
+
_ref$width = _ref.width,
|
|
26
|
+
width = _ref$width === void 0 ? 100 : _ref$width;
|
|
22
27
|
var progressNumber = (0, _react.useMemo)(function () {
|
|
23
28
|
var width = progress;
|
|
24
29
|
|
|
@@ -32,14 +37,38 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
32
37
|
|
|
33
38
|
return width;
|
|
34
39
|
}, [progress]);
|
|
40
|
+
var widthPercent = (0, _react.useMemo)(function () {
|
|
41
|
+
var width_percent = width;
|
|
42
|
+
|
|
43
|
+
if (width > 100) {
|
|
44
|
+
width_percent = 100;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
if (width <= 0) {
|
|
48
|
+
width_percent = 100;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return width_percent;
|
|
52
|
+
}, [width]);
|
|
53
|
+
var height = (0, _react.useMemo)(function () {
|
|
54
|
+
var stroke_min = stroke;
|
|
55
|
+
|
|
56
|
+
if (stroke <= 0) {
|
|
57
|
+
stroke_min = 3;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return stroke_min;
|
|
61
|
+
}, [stroke]);
|
|
35
62
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressBar, {
|
|
36
63
|
className: "c-progress-bar",
|
|
37
|
-
$color: backgroundColor
|
|
64
|
+
$color: backgroundColor,
|
|
65
|
+
$width: widthPercent
|
|
38
66
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressBarProgress, {
|
|
39
67
|
className: "c-progress-bar__progress",
|
|
40
68
|
style: {
|
|
41
69
|
width: "".concat(progressNumber, "%")
|
|
42
70
|
},
|
|
71
|
+
$height: height,
|
|
43
72
|
$color: progressColor
|
|
44
73
|
}));
|
|
45
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","progress","backgroundColor","progressColor","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","progress","backgroundColor","progressColor","stroke","width","progressNumber","widthPercent","width_percent","height","stroke_min","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAeO,IAAMA,WAAkC,GAAG,SAArCA,WAAqC,OAM5C;AAAA,2BALJC,QAKI;AAAA,MALJA,QAKI,8BALO,CAKP;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,aAGI,QAHJA,aAGI;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,CAEL;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,GACJ;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAID,KAAK,GAAGJ,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBI,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIJ,QAAQ,GAAG,CAAf,EAAkB;AAChBI,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACJ,QAAD,CAToB,CAAvB;AAWA,MAAMM,YAAY,GAAG,oBAAQ,YAAM;AACjC,QAAIC,aAAa,GAAGH,KAApB;;AAEA,QAAIA,KAAK,GAAG,GAAZ,EAAiB;AACfG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,QAAIH,KAAK,IAAI,CAAb,EAAgB;AACdG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,WAAOA,aAAP;AACD,GAZoB,EAYlB,CAACH,KAAD,CAZkB,CAArB;AAcA,MAAMI,MAAM,GAAG,oBAAQ,YAAM;AAC3B,QAAIC,UAAU,GAAGN,MAAjB;;AAEA,QAAIA,MAAM,IAAI,CAAd,EAAiB;AACfM,MAAAA,UAAU,GAAG,CAAb;AACD;;AAED,WAAOA,UAAP;AACD,GARc,EAQZ,CAACN,MAAD,CARY,CAAf;AAUA,sBACE,6BAAC,yBAAD;AACE,IAAA,SAAS,EAAE,gBADb;AAEE,IAAA,MAAM,EAAEF,eAFV;AAGE,IAAA,MAAM,EAAEK;AAHV,kBAKE,6BAAC,iCAAD;AACE,IAAA,SAAS,EAAE,0BADb;AAEE,IAAA,KAAK,EAAE;AAAEF,MAAAA,KAAK,YAAKC,cAAL;AAAP,KAFT;AAGE,IAAA,OAAO,EAAEG,MAHX;AAIE,IAAA,MAAM,EAAEN;AAJV,IALF,CADF;AAcD,CAxDM;;;AA0DPH,WAAW,CAACW,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n /** Progress prop can be number. */\n progress: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Progress height. */\n stroke?: number;\n /** Progress width in percentage. */\n width?: number;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n progress = 0,\n backgroundColor,\n progressColor,\n stroke = 3,\n width = 100,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const widthPercent = useMemo(() => {\n let width_percent = width;\n\n if (width > 100) {\n width_percent = 100;\n }\n\n if (width <= 0) {\n width_percent = 100;\n }\n\n return width_percent;\n }, [width]);\n\n const height = useMemo(() => {\n let stroke_min = stroke;\n\n if (stroke <= 0) {\n stroke_min = 3;\n }\n\n return stroke_min;\n }, [stroke]);\n\n return (\n <StyledProgressBar\n className={\"c-progress-bar\"}\n $color={backgroundColor}\n $width={widthPercent}\n >\n <StyledProgressBarProgress\n className={\"c-progress-bar__progress\"}\n style={{ width: `${progressNumber}%` }}\n $height={height}\n $color={progressColor}\n />\n </StyledProgressBar>\n );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"file":"ProgressBar.js"}
|
|
@@ -18,7 +18,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
18
18
|
var StyledProgressBar = _styledComponents.default.div.withConfig({
|
|
19
19
|
displayName: "Styles__StyledProgressBar",
|
|
20
20
|
componentId: "sc-k5nm08-0"
|
|
21
|
-
})(["", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
21
|
+
})(["", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
22
|
+
return props.$width ? (0, _styledComponents.css)(["width:", "%;"], props.$width) : (0, _styledComponents.css)(["width:100%;"]);
|
|
23
|
+
}, function (props) {
|
|
22
24
|
return props.$color ? (0, _styledComponents.css)(["background-color:", ";"], props.$color) : (0, _styledComponents.css)(["background-color:var(--color-theme-300);"]);
|
|
23
25
|
});
|
|
24
26
|
|
|
@@ -28,7 +30,9 @@ StyledProgressBar.displayName = "StyledProgressBar";
|
|
|
28
30
|
var StyledProgressBarProgress = _styledComponents.default.div.withConfig({
|
|
29
31
|
displayName: "Styles__StyledProgressBarProgress",
|
|
30
32
|
componentId: "sc-k5nm08-1"
|
|
31
|
-
})(["
|
|
33
|
+
})(["", " ", ""], function (props) {
|
|
34
|
+
return props.$height ? (0, _styledComponents.css)(["height:", "px;"], props.$height) : (0, _styledComponents.css)(["height:3px;"]);
|
|
35
|
+
}, function (props) {
|
|
32
36
|
return props.$color ? (0, _styledComponents.css)(["background-color:", ";"], props.$color) : (0, _styledComponents.css)(["background-color:var(--color-secondary);"]);
|
|
33
37
|
});
|
|
34
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["StyledProgressBar","styled","div","BoxSizingStyle","props","$
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["StyledProgressBar","styled","div","BoxSizingStyle","props","$width","css","$color","displayName","StyledProgressBarProgress","$height"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAQO,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBAC1BC,8BAD0B,EAG1B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,oBAEeF,KAAK,CAACC,MAFrB,QAIIC,qBAJJ,kBADA;AAAA,CAH0B,EAY1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,MAAN,OACID,qBADJ,8BAE0BF,KAAK,CAACG,MAFhC,QAIID,qBAJJ,+CADA;AAAA,CAZ0B,CAAvB;;;AAsBPN,iBAAiB,CAACQ,WAAlB,GAAgC,mBAAhC;;AAEO,IAAMC,yBAAyB,GAAGR,0BAAOC,GAAV;AAAA;AAAA;AAAA,kBAClC,UAACE,KAAD;AAAA,SACAA,KAAK,CAACM,OAAN,OACIJ,qBADJ,sBAEgBF,KAAK,CAACM,OAFtB,QAIIJ,qBAJJ,kBADA;AAAA,CADkC,EAUlC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,MAAN,OACID,qBADJ,8BAE0BF,KAAK,CAACG,MAFhC,QAIID,qBAJJ,+CADA;AAAA,CAVkC,CAA/B;;;AAoBPG,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n $color?: string;\n $height?: number;\n $width?: number;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$width\n ? css`\n width: ${props.$width}%;\n `\n : css`\n width: 100%;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-theme-300);\n `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n ${(props) =>\n props.$height\n ? css`\n height: ${props.$height}px;\n `\n : css`\n height: 3px;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-secondary);\n `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,MAAM,CAAC;IAEjB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,aAAa,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,MAAM,CAAC;IAEjB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAwD7C,CAAC"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
2
|
import { StyledProgressBar, StyledProgressBarProgress } from "./Styles";
|
|
3
3
|
export var ProgressBar = function ProgressBar(_ref) {
|
|
4
|
-
var progress = _ref.progress,
|
|
4
|
+
var _ref$progress = _ref.progress,
|
|
5
|
+
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
5
6
|
backgroundColor = _ref.backgroundColor,
|
|
6
|
-
progressColor = _ref.progressColor
|
|
7
|
+
progressColor = _ref.progressColor,
|
|
8
|
+
_ref$stroke = _ref.stroke,
|
|
9
|
+
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
10
|
+
_ref$width = _ref.width,
|
|
11
|
+
width = _ref$width === void 0 ? 100 : _ref$width;
|
|
7
12
|
var progressNumber = useMemo(function () {
|
|
8
13
|
var width = progress;
|
|
9
14
|
|
|
@@ -17,14 +22,38 @@ export var ProgressBar = function ProgressBar(_ref) {
|
|
|
17
22
|
|
|
18
23
|
return width;
|
|
19
24
|
}, [progress]);
|
|
25
|
+
var widthPercent = useMemo(function () {
|
|
26
|
+
var width_percent = width;
|
|
27
|
+
|
|
28
|
+
if (width > 100) {
|
|
29
|
+
width_percent = 100;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if (width <= 0) {
|
|
33
|
+
width_percent = 100;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return width_percent;
|
|
37
|
+
}, [width]);
|
|
38
|
+
var height = useMemo(function () {
|
|
39
|
+
var stroke_min = stroke;
|
|
40
|
+
|
|
41
|
+
if (stroke <= 0) {
|
|
42
|
+
stroke_min = 3;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return stroke_min;
|
|
46
|
+
}, [stroke]);
|
|
20
47
|
return /*#__PURE__*/React.createElement(StyledProgressBar, {
|
|
21
48
|
className: "c-progress-bar",
|
|
22
|
-
$color: backgroundColor
|
|
49
|
+
$color: backgroundColor,
|
|
50
|
+
$width: widthPercent
|
|
23
51
|
}, /*#__PURE__*/React.createElement(StyledProgressBarProgress, {
|
|
24
52
|
className: "c-progress-bar__progress",
|
|
25
53
|
style: {
|
|
26
54
|
width: progressNumber + "%"
|
|
27
55
|
},
|
|
56
|
+
$height: height,
|
|
28
57
|
$color: progressColor
|
|
29
58
|
}));
|
|
30
59
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["React","useMemo","StyledProgressBar","StyledProgressBarProgress","ProgressBar","progress","backgroundColor","progressColor","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":["React","useMemo","StyledProgressBar","StyledProgressBarProgress","ProgressBar","progress","backgroundColor","progressColor","stroke","width","progressNumber","widthPercent","width_percent","height","stroke_min","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,OAApB,QAAmC,OAAnC;AACA,SAASC,iBAAT,EAA4BC,yBAA5B,QAA6D,UAA7D;AAeA,OAAO,IAAMC,WAAkC,GAAG,SAArCA,WAAqC,OAM5C;AAAA,2BALJC,QAKI;AAAA,MALJA,QAKI,8BALO,CAKP;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,aAGI,QAHJA,aAGI;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,CAEL;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,GACJ;AACJ,MAAMC,cAAc,GAAGT,OAAO,CAAC,YAAM;AACnC,QAAIQ,KAAK,GAAGJ,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBI,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIJ,QAAQ,GAAG,CAAf,EAAkB;AAChBI,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GAT6B,EAS3B,CAACJ,QAAD,CAT2B,CAA9B;AAWA,MAAMM,YAAY,GAAGV,OAAO,CAAC,YAAM;AACjC,QAAIW,aAAa,GAAGH,KAApB;;AAEA,QAAIA,KAAK,GAAG,GAAZ,EAAiB;AACfG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,QAAIH,KAAK,IAAI,CAAb,EAAgB;AACdG,MAAAA,aAAa,GAAG,GAAhB;AACD;;AAED,WAAOA,aAAP;AACD,GAZ2B,EAYzB,CAACH,KAAD,CAZyB,CAA5B;AAcA,MAAMI,MAAM,GAAGZ,OAAO,CAAC,YAAM;AAC3B,QAAIa,UAAU,GAAGN,MAAjB;;AAEA,QAAIA,MAAM,IAAI,CAAd,EAAiB;AACfM,MAAAA,UAAU,GAAG,CAAb;AACD;;AAED,WAAOA,UAAP;AACD,GARqB,EAQnB,CAACN,MAAD,CARmB,CAAtB;AAUA,sBACE,oBAAC,iBAAD;AACE,IAAA,SAAS,EAAE,gBADb;AAEE,IAAA,MAAM,EAAEF,eAFV;AAGE,IAAA,MAAM,EAAEK;AAHV,kBAKE,oBAAC,yBAAD;AACE,IAAA,SAAS,EAAE,0BADb;AAEE,IAAA,KAAK,EAAE;AAAEF,MAAAA,KAAK,EAAKC,cAAL;AAAP,KAFT;AAGE,IAAA,OAAO,EAAEG,MAHX;AAIE,IAAA,MAAM,EAAEN;AAJV,IALF,CADF;AAcD,CAxDM;AA0DPH,WAAW,CAACW,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n /** Progress prop can be number. */\n progress: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Progress height. */\n stroke?: number;\n /** Progress width in percentage. */\n width?: number;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n progress = 0,\n backgroundColor,\n progressColor,\n stroke = 3,\n width = 100,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const widthPercent = useMemo(() => {\n let width_percent = width;\n\n if (width > 100) {\n width_percent = 100;\n }\n\n if (width <= 0) {\n width_percent = 100;\n }\n\n return width_percent;\n }, [width]);\n\n const height = useMemo(() => {\n let stroke_min = stroke;\n\n if (stroke <= 0) {\n stroke_min = 3;\n }\n\n return stroke_min;\n }, [stroke]);\n\n return (\n <StyledProgressBar\n className={\"c-progress-bar\"}\n $color={backgroundColor}\n $width={widthPercent}\n >\n <StyledProgressBarProgress\n className={\"c-progress-bar__progress\"}\n style={{ width: `${progressNumber}%` }}\n $height={height}\n $color={progressColor}\n />\n </StyledProgressBar>\n );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"file":"ProgressBar.js"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
interface IStyledProgressBar {
|
|
2
2
|
$color?: string;
|
|
3
|
+
$height?: number;
|
|
4
|
+
$width?: number;
|
|
3
5
|
}
|
|
4
6
|
export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", any, IStyledProgressBar, never>;
|
|
5
7
|
export declare const StyledProgressBarProgress: import("styled-components").StyledComponent<"div", any, IStyledProgressBar, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,oFAoB7B,CAAC;AAIF,eAAO,MAAM,yBAAyB,oFAkBrC,CAAC"}
|
|
@@ -3,14 +3,18 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
|
3
3
|
export var StyledProgressBar = styled.div.withConfig({
|
|
4
4
|
displayName: "Styles__StyledProgressBar",
|
|
5
5
|
componentId: "sc-k5nm08-0"
|
|
6
|
-
})(["", " ", ""], BoxSizingStyle, function (props) {
|
|
6
|
+
})(["", " ", " ", ""], BoxSizingStyle, function (props) {
|
|
7
|
+
return props.$width ? css(["width:", "%;"], props.$width) : css(["width:100%;"]);
|
|
8
|
+
}, function (props) {
|
|
7
9
|
return props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-theme-300);"]);
|
|
8
10
|
});
|
|
9
11
|
StyledProgressBar.displayName = "StyledProgressBar";
|
|
10
12
|
export var StyledProgressBarProgress = styled.div.withConfig({
|
|
11
13
|
displayName: "Styles__StyledProgressBarProgress",
|
|
12
14
|
componentId: "sc-k5nm08-1"
|
|
13
|
-
})(["
|
|
15
|
+
})(["", " ", ""], function (props) {
|
|
16
|
+
return props.$height ? css(["height:", "px;"], props.$height) : css(["height:3px;"]);
|
|
17
|
+
}, function (props) {
|
|
14
18
|
return props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-secondary);"]);
|
|
15
19
|
});
|
|
16
20
|
StyledProgressBarProgress.displayName = "StyledProgressBarProgress";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["styled","css","BoxSizingStyle","StyledProgressBar","div","props","$color","displayName","StyledProgressBarProgress"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":["styled","css","BoxSizingStyle","StyledProgressBar","div","props","$width","$color","displayName","StyledProgressBarProgress","$height"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AAQA,OAAO,IAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,uBAC1BF,cAD0B,EAG1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIL,GADJ,mBAEeI,KAAK,CAACC,MAFrB,IAIIL,GAJJ,iBADA;AAAA,CAH0B,EAY1B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,MAAN,GACIN,GADJ,6BAE0BI,KAAK,CAACE,MAFhC,IAIIN,GAJJ,8CADA;AAAA,CAZ0B,CAAvB;AAsBPE,iBAAiB,CAACK,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,IAAMC,yBAAyB,GAAGT,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,kBAClC,UAACC,KAAD;AAAA,SACAA,KAAK,CAACK,OAAN,GACIT,GADJ,qBAEgBI,KAAK,CAACK,OAFtB,IAIIT,GAJJ,iBADA;AAAA,CADkC,EAUlC,UAACI,KAAD;AAAA,SACAA,KAAK,CAACE,MAAN,GACIN,GADJ,6BAE0BI,KAAK,CAACE,MAFhC,IAIIN,GAJJ,8CADA;AAAA,CAVkC,CAA/B;AAoBPQ,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n $color?: string;\n $height?: number;\n $width?: number;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$width\n ? css`\n width: ${props.$width}%;\n `\n : css`\n width: 100%;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-theme-300);\n `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n ${(props) =>\n props.$height\n ? css`\n height: ${props.$height}px;\n `\n : css`\n height: 3px;\n `}\n\n ${(props) =>\n props.$color\n ? css`\n background-color: ${props.$color};\n `\n : css`\n background-color: var(--color-secondary);\n `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -10418,22 +10418,31 @@
|
|
|
10418
10418
|
var StyledProgressBar = styled__default["default"].div.withConfig({
|
|
10419
10419
|
displayName: "Styles__StyledProgressBar",
|
|
10420
10420
|
componentId: "sc-k5nm08-0"
|
|
10421
|
-
})(["", " ", ""], BoxSizingStyle, function (props) {
|
|
10421
|
+
})(["", " ", " ", ""], BoxSizingStyle, function (props) {
|
|
10422
|
+
return props.$width ? styled.css(["width:", "%;"], props.$width) : styled.css(["width:100%;"]);
|
|
10423
|
+
}, function (props) {
|
|
10422
10424
|
return props.$color ? styled.css(["background-color:", ";"], props.$color) : styled.css(["background-color:var(--color-theme-300);"]);
|
|
10423
10425
|
});
|
|
10424
10426
|
StyledProgressBar.displayName = "StyledProgressBar";
|
|
10425
10427
|
var StyledProgressBarProgress = styled__default["default"].div.withConfig({
|
|
10426
10428
|
displayName: "Styles__StyledProgressBarProgress",
|
|
10427
10429
|
componentId: "sc-k5nm08-1"
|
|
10428
|
-
})(["
|
|
10430
|
+
})(["", " ", ""], function (props) {
|
|
10431
|
+
return props.$height ? styled.css(["height:", "px;"], props.$height) : styled.css(["height:3px;"]);
|
|
10432
|
+
}, function (props) {
|
|
10429
10433
|
return props.$color ? styled.css(["background-color:", ";"], props.$color) : styled.css(["background-color:var(--color-secondary);"]);
|
|
10430
10434
|
});
|
|
10431
10435
|
StyledProgressBarProgress.displayName = "StyledProgressBarProgress";
|
|
10432
10436
|
|
|
10433
10437
|
var ProgressBar = function ProgressBar(_ref) {
|
|
10434
|
-
var progress = _ref.progress,
|
|
10438
|
+
var _ref$progress = _ref.progress,
|
|
10439
|
+
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
10435
10440
|
backgroundColor = _ref.backgroundColor,
|
|
10436
|
-
progressColor = _ref.progressColor
|
|
10441
|
+
progressColor = _ref.progressColor,
|
|
10442
|
+
_ref$stroke = _ref.stroke,
|
|
10443
|
+
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
10444
|
+
_ref$width = _ref.width,
|
|
10445
|
+
width = _ref$width === void 0 ? 100 : _ref$width;
|
|
10437
10446
|
var progressNumber = React.useMemo(function () {
|
|
10438
10447
|
var width = progress;
|
|
10439
10448
|
|
|
@@ -10447,14 +10456,38 @@
|
|
|
10447
10456
|
|
|
10448
10457
|
return width;
|
|
10449
10458
|
}, [progress]);
|
|
10459
|
+
var widthPercent = React.useMemo(function () {
|
|
10460
|
+
var width_percent = width;
|
|
10461
|
+
|
|
10462
|
+
if (width > 100) {
|
|
10463
|
+
width_percent = 100;
|
|
10464
|
+
}
|
|
10465
|
+
|
|
10466
|
+
if (width <= 0) {
|
|
10467
|
+
width_percent = 100;
|
|
10468
|
+
}
|
|
10469
|
+
|
|
10470
|
+
return width_percent;
|
|
10471
|
+
}, [width]);
|
|
10472
|
+
var height = React.useMemo(function () {
|
|
10473
|
+
var stroke_min = stroke;
|
|
10474
|
+
|
|
10475
|
+
if (stroke <= 0) {
|
|
10476
|
+
stroke_min = 3;
|
|
10477
|
+
}
|
|
10478
|
+
|
|
10479
|
+
return stroke_min;
|
|
10480
|
+
}, [stroke]);
|
|
10450
10481
|
return /*#__PURE__*/React__default["default"].createElement(StyledProgressBar, {
|
|
10451
10482
|
className: "c-progress-bar",
|
|
10452
|
-
$color: backgroundColor
|
|
10483
|
+
$color: backgroundColor,
|
|
10484
|
+
$width: widthPercent
|
|
10453
10485
|
}, /*#__PURE__*/React__default["default"].createElement(StyledProgressBarProgress, {
|
|
10454
10486
|
className: "c-progress-bar__progress",
|
|
10455
10487
|
style: {
|
|
10456
10488
|
width: "".concat(progressNumber, "%")
|
|
10457
10489
|
},
|
|
10490
|
+
$height: height,
|
|
10458
10491
|
$color: progressColor
|
|
10459
10492
|
}));
|
|
10460
10493
|
};
|