@activecollab/components 1.0.99 → 1.0.100
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/ProgressRing/ProgressRing.js +29 -6
- package/dist/cjs/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/cjs/components/ProgressRing/Styles.js +14 -2
- package/dist/cjs/components/ProgressRing/Styles.js.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.d.ts +2 -0
- package/dist/esm/components/ProgressRing/ProgressRing.d.ts.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.js +30 -7
- package/dist/esm/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/esm/components/ProgressRing/Styles.d.ts +2 -0
- package/dist/esm/components/ProgressRing/Styles.d.ts.map +1 -1
- package/dist/esm/components/ProgressRing/Styles.js +10 -1
- package/dist/esm/components/ProgressRing/Styles.js.map +1 -1
- package/dist/index.js +39 -7
- 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
|
@@ -28,7 +28,23 @@ var ProgressRing = function ProgressRing(_ref) {
|
|
|
28
28
|
radius = _ref$radius === void 0 ? 20 : _ref$radius,
|
|
29
29
|
_ref$stroke = _ref.stroke,
|
|
30
30
|
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
31
|
-
className = _ref.className
|
|
31
|
+
className = _ref.className,
|
|
32
|
+
_ref$showPercentage = _ref.showPercentage,
|
|
33
|
+
showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
|
|
34
|
+
fontSize = _ref.fontSize;
|
|
35
|
+
var progressNumber = (0, _react.useMemo)(function () {
|
|
36
|
+
var width = progress;
|
|
37
|
+
|
|
38
|
+
if (progress > 100) {
|
|
39
|
+
width = 100;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
if (progress < 0) {
|
|
43
|
+
width = 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return width;
|
|
47
|
+
}, [progress]);
|
|
32
48
|
var normalizedRadius = (0, _react.useMemo)(function () {
|
|
33
49
|
return radius - stroke;
|
|
34
50
|
}, [radius, stroke]);
|
|
@@ -36,11 +52,11 @@ var ProgressRing = function ProgressRing(_ref) {
|
|
|
36
52
|
return normalizedRadius * 2 * Math.PI;
|
|
37
53
|
}, [normalizedRadius]);
|
|
38
54
|
var strokeDashoffsetOuter = (0, _react.useMemo)(function () {
|
|
39
|
-
return circumference - (100 -
|
|
40
|
-
}, [circumference,
|
|
55
|
+
return circumference - (100 - progressNumber) / 100 * circumference;
|
|
56
|
+
}, [circumference, progressNumber]);
|
|
41
57
|
var strokeDashoffsetInner = (0, _react.useMemo)(function () {
|
|
42
|
-
return circumference -
|
|
43
|
-
}, [circumference,
|
|
58
|
+
return circumference - progressNumber / 100 * circumference;
|
|
59
|
+
}, [circumference, progressNumber]);
|
|
44
60
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledSvg, {
|
|
45
61
|
height: radius * 2,
|
|
46
62
|
width: radius * 2,
|
|
@@ -61,7 +77,14 @@ var ProgressRing = function ProgressRing(_ref) {
|
|
|
61
77
|
r: normalizedRadius,
|
|
62
78
|
cx: radius,
|
|
63
79
|
cy: radius
|
|
64
|
-
})
|
|
80
|
+
}), showPercentage ? /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressRingPercentage, {
|
|
81
|
+
$color: progressColor,
|
|
82
|
+
$fontSize: fontSize,
|
|
83
|
+
x: "50%",
|
|
84
|
+
y: "-50%",
|
|
85
|
+
dominantBaseline: "central",
|
|
86
|
+
textAnchor: "middle"
|
|
87
|
+
}, progressNumber, "%") : null);
|
|
65
88
|
};
|
|
66
89
|
|
|
67
90
|
exports.ProgressRing = ProgressRing;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;;;;;;;AAqBO,IAAMA,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIC,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACP,QAAD,CAToB,CAAvB;AAWA,MAAMQ,gBAAgB,GAAG,oBAAQ;AAAA,WAAMP,MAAM,GAAGC,MAAf;AAAA,GAAR,EAA+B,CAACD,MAAD,EAASC,MAAT,CAA/B,CAAzB;AACA,MAAMO,aAAa,GAAG,oBACpB;AAAA,WAAMD,gBAAgB,GAAG,CAAnB,GAAuBE,IAAI,CAACC,EAAlC;AAAA,GADoB,EAEpB,CAACH,gBAAD,CAFoB,CAAtB;AAIA,MAAMI,qBAAqB,GAAG,oBAC5B;AAAA,WAAMH,aAAa,GAAI,CAAC,MAAMH,cAAP,IAAyB,GAA1B,GAAiCG,aAAvD;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAIA,MAAMO,qBAAqB,GAAG,oBAC5B;AAAA,WAAMJ,aAAa,GAAIH,cAAc,GAAG,GAAlB,GAAyBG,aAA/C;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAKA,sBACE,6BAAC,iBAAD;AACE,IAAA,MAAM,EAAEL,MAAM,GAAG,CADnB;AAEE,IAAA,KAAK,EAAEA,MAAM,GAAG,CAFlB;AAGE,IAAA,SAAS,EAAE,yBAAWE,SAAX;AAHb,kBAKE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEL,eADV;AAEE,IAAA,iBAAiB,EAAE,CAACc,qBAFtB;AAGE,IAAA,WAAW,EAAEV,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IALF,eAcE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEF,aADV;AAEE,IAAA,iBAAiB,EAAEc,qBAFrB;AAGE,IAAA,WAAW,EAAEX,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IAdF,EAuBGG,cAAc,gBACb,6BAAC,oCAAD;AACE,IAAA,MAAM,EAAEL,aADV;AAEE,IAAA,SAAS,EAAEM,QAFb;AAGE,IAAA,CAAC,EAAC,KAHJ;AAIE,IAAA,CAAC,EAAC,MAJJ;AAKE,IAAA,gBAAgB,EAAC,SALnB;AAME,IAAA,UAAU,EAAC;AANb,KAQGC,cARH,MADa,GAWX,IAlCN,CADF;AAsCD,CAzEM;;;AA2EPT,YAAY,CAACiB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\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 /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\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 normalizedRadius = useMemo(() => radius - stroke, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
|
|
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.StyledSvg = exports.StyledForegroundCircle = exports.StyledBackgroundCircle = void 0;
|
|
8
|
+
exports.StyledSvg = exports.StyledProgressRingPercentage = exports.StyledForegroundCircle = exports.StyledBackgroundCircle = void 0;
|
|
9
9
|
|
|
10
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
11
|
|
|
@@ -25,7 +25,7 @@ var StyledBackgroundCircle = _styledComponents.default.circle.withConfig({
|
|
|
25
25
|
displayName: "Styles__StyledBackgroundCircle",
|
|
26
26
|
componentId: "sc-o6dcyu-1"
|
|
27
27
|
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
|
|
28
|
-
return props.$color ? (0, _styledComponents.css)(["stroke:", ";"], props.$color) : (0, _styledComponents.css)(["stroke:var(--color-theme-300);"]);
|
|
28
|
+
return props.$color ? (0, _styledComponents.css)(["stroke:", ";"], props.$color) : (0, _styledComponents.css)(["stroke:var(--color-theme-transparent-300);"]);
|
|
29
29
|
}, function (props) {
|
|
30
30
|
return props.$strokeDashOffset && (0, _styledComponents.css)(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
|
|
31
31
|
});
|
|
@@ -44,4 +44,16 @@ var StyledForegroundCircle = _styledComponents.default.circle.withConfig({
|
|
|
44
44
|
|
|
45
45
|
exports.StyledForegroundCircle = StyledForegroundCircle;
|
|
46
46
|
StyledForegroundCircle.displayName = "StyledForegroundCircle";
|
|
47
|
+
|
|
48
|
+
var StyledProgressRingPercentage = _styledComponents.default.text.withConfig({
|
|
49
|
+
displayName: "Styles__StyledProgressRingPercentage",
|
|
50
|
+
componentId: "sc-o6dcyu-3"
|
|
51
|
+
})(["transform:rotate(90deg);", " ", ""], function (props) {
|
|
52
|
+
return props.$color ? (0, _styledComponents.css)(["fill:", ";"], props.$color) : (0, _styledComponents.css)(["fill:var(--color-secondary);"]);
|
|
53
|
+
}, function (props) {
|
|
54
|
+
return props.$fontSize ? (0, _styledComponents.css)(["font-size:", "px;"], props.$fontSize) : (0, _styledComponents.css)(["font-size:10px;"]);
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
exports.StyledProgressRingPercentage = StyledProgressRingPercentage;
|
|
58
|
+
StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
|
|
47
59
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressRing/Styles.ts"],"names":["StyledSvg","styled","svg","displayName","StyledBackgroundCircle","circle","props","$color","css","$strokeDashOffset","StyledForegroundCircle"],"mappings":";;;;;;;;;AAAA;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressRing/Styles.ts"],"names":["StyledSvg","styled","svg","displayName","StyledBackgroundCircle","circle","props","$color","css","$strokeDashOffset","StyledForegroundCircle","StyledProgressRingPercentage","text","$fontSize"],"mappings":";;;;;;;;;AAAA;;;;;;AAQO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,iCAAf;;;AAIPF,SAAS,CAACG,WAAV,GAAwB,WAAxB;;AAEO,IAAMC,sBAAsB,GAAGH,0BAAOI,MAAV;AAAA;AAAA;AAAA,4EAI/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,oBAEgBF,KAAK,CAACC,MAFtB,QAIIC,qBAJJ,iDADA;AAAA,CAJ+B,EAa/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,iBAAN,QACAD,qBADA,+BAEuBF,KAAK,CAACG,iBAF7B,CADA;AAAA,CAb+B,CAA5B;;;AAoBPL,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;;AAEO,IAAMO,sBAAsB,GAAGT,0BAAOI,MAAV;AAAA;AAAA;AAAA,4EAI/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,oBAEgBF,KAAK,CAACC,MAFtB,QAIIC,qBAJJ,qCADA;AAAA,CAJ+B,EAa/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,iBAAN,QACAD,qBADA,+BAEuBF,KAAK,CAACG,iBAF7B,CADA;AAAA,CAb+B,CAA5B;;;AAoBPC,sBAAsB,CAACP,WAAvB,GAAqC,wBAArC;;AAEO,IAAMQ,4BAA4B,GAAGV,0BAAOW,IAAV;AAAA;AAAA;AAAA,0CAGrC,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,OACIC,qBADJ,kBAEcF,KAAK,CAACC,MAFpB,QAIIC,qBAJJ,mCADA;AAAA,CAHqC,EAYrC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACO,SAAN,OACIL,qBADJ,yBAEmBF,KAAK,CAACO,SAFzB,QAIIL,qBAJJ,sBADA;AAAA,CAZqC,CAAlC;;;AAsBPG,4BAA4B,CAACR,WAA7B,GAA2C,8BAA3C","sourcesContent":["import styled, { css } from \"styled-components\";\n\ninterface IStyledProgressRing {\n $color?: string;\n $strokeDashOffset?: number;\n $fontSize?: number;\n}\n\nexport const StyledSvg = styled.svg`\n transform: rotate(-90deg);\n`;\n\nStyledSvg.displayName = \"StyledSvg\";\n\nexport const StyledBackgroundCircle = styled.circle<IStyledProgressRing>`\n fill: transparent;\n transition: stroke-dashoffset 0.5s linear;\n\n ${(props) =>\n props.$color\n ? css`\n stroke: ${props.$color};\n `\n : css`\n stroke: var(--color-theme-transparent-300);\n `}\n\n ${(props) =>\n props.$strokeDashOffset &&\n css`\n stroke-dashoffset: ${props.$strokeDashOffset};\n `}\n`;\n\nStyledBackgroundCircle.displayName = \"StyledBackgroundCircle\";\n\nexport const StyledForegroundCircle = styled.circle<IStyledProgressRing>`\n fill: transparent;\n transition: stroke-dashoffset 0.5s linear;\n\n ${(props) =>\n props.$color\n ? css`\n stroke: ${props.$color};\n `\n : css`\n stroke: var(--color-secondary);\n `}\n\n ${(props) =>\n props.$strokeDashOffset &&\n css`\n stroke-dashoffset: ${props.$strokeDashOffset};\n `}\n`;\n\nStyledForegroundCircle.displayName = \"StyledForegroundCircle\";\n\nexport const StyledProgressRingPercentage = styled.text<IStyledProgressRing>`\n transform: rotate(90deg);\n\n ${(props) =>\n props.$color\n ? css`\n fill: ${props.$color};\n `\n : css`\n fill: var(--color-secondary);\n `}\n\n ${(props) =>\n props.$fontSize\n ? css`\n font-size: ${props.$fontSize}px;\n `\n : css`\n font-size: 10px;\n `}\n`;\n\nStyledProgressRingPercentage.displayName = \"StyledProgressRingPercentage\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAS3C,MAAM,WAAW,kBAAkB;IAEjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,kBAAkB,CAyE/C,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
|
-
import { StyledBackgroundCircle, StyledForegroundCircle, StyledSvg } from "./Styles";
|
|
2
|
+
import { StyledBackgroundCircle, StyledForegroundCircle, StyledSvg, StyledProgressRingPercentage } from "./Styles";
|
|
3
3
|
import classNames from "classnames";
|
|
4
4
|
export var ProgressRing = function ProgressRing(_ref) {
|
|
5
5
|
var backgroundColor = _ref.backgroundColor,
|
|
@@ -10,7 +10,23 @@ export var ProgressRing = function ProgressRing(_ref) {
|
|
|
10
10
|
radius = _ref$radius === void 0 ? 20 : _ref$radius,
|
|
11
11
|
_ref$stroke = _ref.stroke,
|
|
12
12
|
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
13
|
-
className = _ref.className
|
|
13
|
+
className = _ref.className,
|
|
14
|
+
_ref$showPercentage = _ref.showPercentage,
|
|
15
|
+
showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
|
|
16
|
+
fontSize = _ref.fontSize;
|
|
17
|
+
var progressNumber = useMemo(function () {
|
|
18
|
+
var width = progress;
|
|
19
|
+
|
|
20
|
+
if (progress > 100) {
|
|
21
|
+
width = 100;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (progress < 0) {
|
|
25
|
+
width = 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return width;
|
|
29
|
+
}, [progress]);
|
|
14
30
|
var normalizedRadius = useMemo(function () {
|
|
15
31
|
return radius - stroke;
|
|
16
32
|
}, [radius, stroke]);
|
|
@@ -18,11 +34,11 @@ export var ProgressRing = function ProgressRing(_ref) {
|
|
|
18
34
|
return normalizedRadius * 2 * Math.PI;
|
|
19
35
|
}, [normalizedRadius]);
|
|
20
36
|
var strokeDashoffsetOuter = useMemo(function () {
|
|
21
|
-
return circumference - (100 -
|
|
22
|
-
}, [circumference,
|
|
37
|
+
return circumference - (100 - progressNumber) / 100 * circumference;
|
|
38
|
+
}, [circumference, progressNumber]);
|
|
23
39
|
var strokeDashoffsetInner = useMemo(function () {
|
|
24
|
-
return circumference -
|
|
25
|
-
}, [circumference,
|
|
40
|
+
return circumference - progressNumber / 100 * circumference;
|
|
41
|
+
}, [circumference, progressNumber]);
|
|
26
42
|
return /*#__PURE__*/React.createElement(StyledSvg, {
|
|
27
43
|
height: radius * 2,
|
|
28
44
|
width: radius * 2,
|
|
@@ -43,7 +59,14 @@ export var ProgressRing = function ProgressRing(_ref) {
|
|
|
43
59
|
r: normalizedRadius,
|
|
44
60
|
cx: radius,
|
|
45
61
|
cy: radius
|
|
46
|
-
})
|
|
62
|
+
}), showPercentage ? /*#__PURE__*/React.createElement(StyledProgressRingPercentage, {
|
|
63
|
+
$color: progressColor,
|
|
64
|
+
$fontSize: fontSize,
|
|
65
|
+
x: "50%",
|
|
66
|
+
y: "-50%",
|
|
67
|
+
dominantBaseline: "central",
|
|
68
|
+
textAnchor: "middle"
|
|
69
|
+
}, progressNumber, "%") : null);
|
|
47
70
|
};
|
|
48
71
|
ProgressRing.displayName = "ProgressRing";
|
|
49
72
|
//# sourceMappingURL=ProgressRing.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["React","useMemo","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","classNames","ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,OAApB,QAAmC,OAAnC;AACA,SACEC,sBADF,EAEEC,sBAFF,EAGEC,SAHF,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["React","useMemo","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","classNames","ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":"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","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\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 /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\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 normalizedRadius = useMemo(() => radius - stroke, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
interface IStyledProgressRing {
|
|
2
2
|
$color?: string;
|
|
3
3
|
$strokeDashOffset?: number;
|
|
4
|
+
$fontSize?: number;
|
|
4
5
|
}
|
|
5
6
|
export declare const StyledSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;
|
|
6
7
|
export declare const StyledBackgroundCircle: import("styled-components").StyledComponent<"circle", any, IStyledProgressRing, never>;
|
|
7
8
|
export declare const StyledForegroundCircle: import("styled-components").StyledComponent<"circle", any, IStyledProgressRing, never>;
|
|
9
|
+
export declare const StyledProgressRingPercentage: import("styled-components").StyledComponent<"text", any, IStyledProgressRing, never>;
|
|
8
10
|
export {};
|
|
9
11
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/Styles.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/Styles.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,oEAErB,CAAC;AAIF,eAAO,MAAM,sBAAsB,wFAkBlC,CAAC;AAIF,eAAO,MAAM,sBAAsB,wFAkBlC,CAAC;AAIF,eAAO,MAAM,4BAA4B,sFAoBxC,CAAC"}
|
|
@@ -8,7 +8,7 @@ export var StyledBackgroundCircle = styled.circle.withConfig({
|
|
|
8
8
|
displayName: "Styles__StyledBackgroundCircle",
|
|
9
9
|
componentId: "sc-o6dcyu-1"
|
|
10
10
|
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
|
|
11
|
-
return props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-theme-300);"]);
|
|
11
|
+
return props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-theme-transparent-300);"]);
|
|
12
12
|
}, function (props) {
|
|
13
13
|
return props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
|
|
14
14
|
});
|
|
@@ -22,4 +22,13 @@ export var StyledForegroundCircle = styled.circle.withConfig({
|
|
|
22
22
|
return props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
|
|
23
23
|
});
|
|
24
24
|
StyledForegroundCircle.displayName = "StyledForegroundCircle";
|
|
25
|
+
export var StyledProgressRingPercentage = styled.text.withConfig({
|
|
26
|
+
displayName: "Styles__StyledProgressRingPercentage",
|
|
27
|
+
componentId: "sc-o6dcyu-3"
|
|
28
|
+
})(["transform:rotate(90deg);", " ", ""], function (props) {
|
|
29
|
+
return props.$color ? css(["fill:", ";"], props.$color) : css(["fill:var(--color-secondary);"]);
|
|
30
|
+
}, function (props) {
|
|
31
|
+
return props.$fontSize ? css(["font-size:", "px;"], props.$fontSize) : css(["font-size:10px;"]);
|
|
32
|
+
});
|
|
33
|
+
StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
|
|
25
34
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ProgressRing/Styles.ts"],"names":["styled","css","StyledSvg","svg","displayName","StyledBackgroundCircle","circle","props","$color","$strokeDashOffset","StyledForegroundCircle"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ProgressRing/Styles.ts"],"names":["styled","css","StyledSvg","svg","displayName","StyledBackgroundCircle","circle","props","$color","$strokeDashOffset","StyledForegroundCircle","StyledProgressRingPercentage","text","$fontSize"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAQA,OAAO,IAAMC,SAAS,GAAGF,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,iCAAf;AAIPD,SAAS,CAACE,WAAV,GAAwB,WAAxB;AAEA,OAAO,IAAMC,sBAAsB,GAAGL,MAAM,CAACM,MAAV;AAAA;AAAA;AAAA,4EAI/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIP,GADJ,mBAEgBM,KAAK,CAACC,MAFtB,IAIIP,GAJJ,gDADA;AAAA,CAJ+B,EAa/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACE,iBAAN,IACAR,GADA,8BAEuBM,KAAK,CAACE,iBAF7B,CADA;AAAA,CAb+B,CAA5B;AAoBPJ,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;AAEA,OAAO,IAAMM,sBAAsB,GAAGV,MAAM,CAACM,MAAV;AAAA;AAAA;AAAA,4EAI/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIP,GADJ,mBAEgBM,KAAK,CAACC,MAFtB,IAIIP,GAJJ,oCADA;AAAA,CAJ+B,EAa/B,UAACM,KAAD;AAAA,SACAA,KAAK,CAACE,iBAAN,IACAR,GADA,8BAEuBM,KAAK,CAACE,iBAF7B,CADA;AAAA,CAb+B,CAA5B;AAoBPC,sBAAsB,CAACN,WAAvB,GAAqC,wBAArC;AAEA,OAAO,IAAMO,4BAA4B,GAAGX,MAAM,CAACY,IAAV;AAAA;AAAA;AAAA,0CAGrC,UAACL,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,GACIP,GADJ,iBAEcM,KAAK,CAACC,MAFpB,IAIIP,GAJJ,kCADA;AAAA,CAHqC,EAYrC,UAACM,KAAD;AAAA,SACAA,KAAK,CAACM,SAAN,GACIZ,GADJ,wBAEmBM,KAAK,CAACM,SAFzB,IAIIZ,GAJJ,qBADA;AAAA,CAZqC,CAAlC;AAsBPU,4BAA4B,CAACP,WAA7B,GAA2C,8BAA3C","sourcesContent":["import styled, { css } from \"styled-components\";\n\ninterface IStyledProgressRing {\n $color?: string;\n $strokeDashOffset?: number;\n $fontSize?: number;\n}\n\nexport const StyledSvg = styled.svg`\n transform: rotate(-90deg);\n`;\n\nStyledSvg.displayName = \"StyledSvg\";\n\nexport const StyledBackgroundCircle = styled.circle<IStyledProgressRing>`\n fill: transparent;\n transition: stroke-dashoffset 0.5s linear;\n\n ${(props) =>\n props.$color\n ? css`\n stroke: ${props.$color};\n `\n : css`\n stroke: var(--color-theme-transparent-300);\n `}\n\n ${(props) =>\n props.$strokeDashOffset &&\n css`\n stroke-dashoffset: ${props.$strokeDashOffset};\n `}\n`;\n\nStyledBackgroundCircle.displayName = \"StyledBackgroundCircle\";\n\nexport const StyledForegroundCircle = styled.circle<IStyledProgressRing>`\n fill: transparent;\n transition: stroke-dashoffset 0.5s linear;\n\n ${(props) =>\n props.$color\n ? css`\n stroke: ${props.$color};\n `\n : css`\n stroke: var(--color-secondary);\n `}\n\n ${(props) =>\n props.$strokeDashOffset &&\n css`\n stroke-dashoffset: ${props.$strokeDashOffset};\n `}\n`;\n\nStyledForegroundCircle.displayName = \"StyledForegroundCircle\";\n\nexport const StyledProgressRingPercentage = styled.text<IStyledProgressRing>`\n transform: rotate(90deg);\n\n ${(props) =>\n props.$color\n ? css`\n fill: ${props.$color};\n `\n : css`\n fill: var(--color-secondary);\n `}\n\n ${(props) =>\n props.$fontSize\n ? css`\n font-size: ${props.$fontSize}px;\n `\n : css`\n font-size: 10px;\n `}\n`;\n\nStyledProgressRingPercentage.displayName = \"StyledProgressRingPercentage\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -10541,7 +10541,7 @@
|
|
|
10541
10541
|
displayName: "Styles__StyledBackgroundCircle",
|
|
10542
10542
|
componentId: "sc-o6dcyu-1"
|
|
10543
10543
|
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
|
|
10544
|
-
return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-theme-300);"]);
|
|
10544
|
+
return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-theme-transparent-300);"]);
|
|
10545
10545
|
}, function (props) {
|
|
10546
10546
|
return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
|
|
10547
10547
|
});
|
|
@@ -10555,6 +10555,15 @@
|
|
|
10555
10555
|
return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
|
|
10556
10556
|
});
|
|
10557
10557
|
StyledForegroundCircle.displayName = "StyledForegroundCircle";
|
|
10558
|
+
var StyledProgressRingPercentage = styled__default["default"].text.withConfig({
|
|
10559
|
+
displayName: "Styles__StyledProgressRingPercentage",
|
|
10560
|
+
componentId: "sc-o6dcyu-3"
|
|
10561
|
+
})(["transform:rotate(90deg);", " ", ""], function (props) {
|
|
10562
|
+
return props.$color ? styled.css(["fill:", ";"], props.$color) : styled.css(["fill:var(--color-secondary);"]);
|
|
10563
|
+
}, function (props) {
|
|
10564
|
+
return props.$fontSize ? styled.css(["font-size:", "px;"], props.$fontSize) : styled.css(["font-size:10px;"]);
|
|
10565
|
+
});
|
|
10566
|
+
StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
|
|
10558
10567
|
|
|
10559
10568
|
var ProgressRing = function ProgressRing(_ref) {
|
|
10560
10569
|
var backgroundColor = _ref.backgroundColor,
|
|
@@ -10565,7 +10574,23 @@
|
|
|
10565
10574
|
radius = _ref$radius === void 0 ? 20 : _ref$radius,
|
|
10566
10575
|
_ref$stroke = _ref.stroke,
|
|
10567
10576
|
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
10568
|
-
className = _ref.className
|
|
10577
|
+
className = _ref.className,
|
|
10578
|
+
_ref$showPercentage = _ref.showPercentage,
|
|
10579
|
+
showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
|
|
10580
|
+
fontSize = _ref.fontSize;
|
|
10581
|
+
var progressNumber = React.useMemo(function () {
|
|
10582
|
+
var width = progress;
|
|
10583
|
+
|
|
10584
|
+
if (progress > 100) {
|
|
10585
|
+
width = 100;
|
|
10586
|
+
}
|
|
10587
|
+
|
|
10588
|
+
if (progress < 0) {
|
|
10589
|
+
width = 0;
|
|
10590
|
+
}
|
|
10591
|
+
|
|
10592
|
+
return width;
|
|
10593
|
+
}, [progress]);
|
|
10569
10594
|
var normalizedRadius = React.useMemo(function () {
|
|
10570
10595
|
return radius - stroke;
|
|
10571
10596
|
}, [radius, stroke]);
|
|
@@ -10573,11 +10598,11 @@
|
|
|
10573
10598
|
return normalizedRadius * 2 * Math.PI;
|
|
10574
10599
|
}, [normalizedRadius]);
|
|
10575
10600
|
var strokeDashoffsetOuter = React.useMemo(function () {
|
|
10576
|
-
return circumference - (100 -
|
|
10577
|
-
}, [circumference,
|
|
10601
|
+
return circumference - (100 - progressNumber) / 100 * circumference;
|
|
10602
|
+
}, [circumference, progressNumber]);
|
|
10578
10603
|
var strokeDashoffsetInner = React.useMemo(function () {
|
|
10579
|
-
return circumference -
|
|
10580
|
-
}, [circumference,
|
|
10604
|
+
return circumference - progressNumber / 100 * circumference;
|
|
10605
|
+
}, [circumference, progressNumber]);
|
|
10581
10606
|
return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
|
|
10582
10607
|
height: radius * 2,
|
|
10583
10608
|
width: radius * 2,
|
|
@@ -10598,7 +10623,14 @@
|
|
|
10598
10623
|
r: normalizedRadius,
|
|
10599
10624
|
cx: radius,
|
|
10600
10625
|
cy: radius
|
|
10601
|
-
})
|
|
10626
|
+
}), showPercentage ? /*#__PURE__*/React__default["default"].createElement(StyledProgressRingPercentage, {
|
|
10627
|
+
$color: progressColor,
|
|
10628
|
+
$fontSize: fontSize,
|
|
10629
|
+
x: "50%",
|
|
10630
|
+
y: "-50%",
|
|
10631
|
+
dominantBaseline: "central",
|
|
10632
|
+
textAnchor: "middle"
|
|
10633
|
+
}, progressNumber, "%") : null);
|
|
10602
10634
|
};
|
|
10603
10635
|
ProgressRing.displayName = "ProgressRing";
|
|
10604
10636
|
|