@activecollab/components 2.0.107 → 2.0.108
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/ProgressPie/ProgressPie.js +1 -1
- package/dist/cjs/components/ProgressPie/ProgressPie.js.map +1 -1
- package/dist/cjs/components/ProgressRing/ProgressRing.js +17 -3
- package/dist/cjs/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/cjs/components/ProgressRing/Styles.js +18 -6
- package/dist/cjs/components/ProgressRing/Styles.js.map +1 -1
- package/dist/esm/components/ProgressPie/ProgressPie.d.ts +2 -2
- package/dist/esm/components/ProgressPie/ProgressPie.d.ts.map +1 -1
- package/dist/esm/components/ProgressPie/ProgressPie.js +2 -2
- package/dist/esm/components/ProgressPie/ProgressPie.js.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.d.ts +14 -8
- package/dist/esm/components/ProgressRing/ProgressRing.d.ts.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.js +16 -3
- package/dist/esm/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/esm/components/ProgressRing/Styles.d.ts +3 -0
- package/dist/esm/components/ProgressRing/Styles.d.ts.map +1 -1
- package/dist/esm/components/ProgressRing/Styles.js +15 -5
- package/dist/esm/components/ProgressRing/Styles.js.map +1 -1
- package/dist/index.js +191 -166
- 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
|
@@ -15,7 +15,7 @@ var ProgressPie = exports.ProgressPie = function ProgressPie(_ref) {
|
|
|
15
15
|
var _ref$radius = _ref.radius,
|
|
16
16
|
radius = _ref$radius === void 0 ? 20 : _ref$radius,
|
|
17
17
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
18
|
-
return /*#__PURE__*/_react.default.createElement(_ProgressRing.
|
|
18
|
+
return /*#__PURE__*/_react.default.createElement(_ProgressRing.ProgressCircle, _extends({}, rest, {
|
|
19
19
|
stroke: radius,
|
|
20
20
|
radius: radius
|
|
21
21
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressPie.js","names":["_react","_interopRequireDefault","require","_ProgressRing","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ProgressPie","exports","_ref","_ref$radius","radius","rest","createElement","
|
|
1
|
+
{"version":3,"file":"ProgressPie.js","names":["_react","_interopRequireDefault","require","_ProgressRing","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ProgressPie","exports","_ref","_ref$radius","radius","rest","createElement","ProgressCircle","stroke","displayName"],"sources":["../../../../src/components/ProgressPie/ProgressPie.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ProgressCircle, ProgressCircleProps } from \"../ProgressRing\";\n\nexport const ProgressPie = ({\n radius = 20,\n ...rest\n}: Omit<\n ProgressCircleProps,\n \"stroke\" | \"fontSize\" | \"showPercentage\" | \"roundStroke\"\n>) => {\n return <ProgressCircle {...rest} stroke={radius} radius={radius} />;\n};\n\nProgressPie.displayName = \"ProgressPie\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAAsE,IAAAE,SAAA;AAAA,SAAAH,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,SAAAQ,yBAAAN,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,GAAAY,6BAAA,CAAAR,MAAA,EAAAO,QAAA,OAAAN,GAAA,EAAAJ,CAAA,MAAAJ,MAAA,CAAAgB,qBAAA,QAAAC,gBAAA,GAAAjB,MAAA,CAAAgB,qBAAA,CAAAT,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAa,gBAAA,CAAAX,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAS,gBAAA,CAAAb,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,uBAAAR,MAAA,CAAAS,SAAA,CAAAU,oBAAA,CAAAR,IAAA,CAAAJ,MAAA,EAAAC,GAAA,aAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAL,MAAA;AAAA,SAAAY,8BAAAR,MAAA,EAAAO,QAAA,QAAAP,MAAA,yBAAAJ,MAAA,WAAAiB,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAd,MAAA,OAAAC,GAAA,EAAAJ,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAgB,UAAA,CAAAd,MAAA,EAAAF,CAAA,MAAAI,GAAA,GAAAY,UAAA,CAAAhB,CAAA,OAAAU,QAAA,CAAAI,OAAA,CAAAV,GAAA,kBAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAL,MAAA;AAE/D,IAAMmB,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAAE,IAAA,EAMlB;EAAA,IAAAC,WAAA,GAAAD,IAAA,CALJE,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,EAAE,GAAAA,WAAA;IACRE,IAAI,GAAAd,wBAAA,CAAAW,IAAA,EAAA7B,SAAA;EAKP,oBAAOJ,MAAA,CAAAO,OAAA,CAAA8B,aAAA,CAAClC,aAAA,CAAAmC,cAAc,EAAA9B,QAAA,KAAK4B,IAAI;IAAEG,MAAM,EAAEJ,MAAO;IAACA,MAAM,EAAEA;EAAO,EAAE,CAAC;AACrE,CAAC;AAEDJ,WAAW,CAACS,WAAW,GAAG,aAAa"}
|
|
@@ -3,14 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ProgressRing = void 0;
|
|
6
|
+
exports.ProgressRing = exports.ProgressCircle = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
+
var _excluded = ["className", "children"];
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
var
|
|
14
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
15
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
16
|
+
var ProgressCircle = exports.ProgressCircle = function ProgressCircle(_ref) {
|
|
14
17
|
var backgroundColor = _ref.backgroundColor,
|
|
15
18
|
progressColor = _ref.progressColor,
|
|
16
19
|
_ref$progress = _ref.progress,
|
|
@@ -19,6 +22,7 @@ var ProgressRing = exports.ProgressRing = function ProgressRing(_ref) {
|
|
|
19
22
|
radius = _ref$radius === void 0 ? 20 : _ref$radius,
|
|
20
23
|
_ref$stroke = _ref.stroke,
|
|
21
24
|
stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
|
|
25
|
+
roundStroke = _ref.roundStroke,
|
|
22
26
|
className = _ref.className,
|
|
23
27
|
_ref$showPercentage = _ref.showPercentage,
|
|
24
28
|
showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
|
|
@@ -52,7 +56,7 @@ var ProgressRing = exports.ProgressRing = function ProgressRing(_ref) {
|
|
|
52
56
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledSvg, {
|
|
53
57
|
height: radius * 2,
|
|
54
58
|
width: radius * 2,
|
|
55
|
-
className:
|
|
59
|
+
className: className
|
|
56
60
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledBackgroundCircle, {
|
|
57
61
|
$color: backgroundColor,
|
|
58
62
|
$strokeDashOffset: -strokeDashoffsetOuter,
|
|
@@ -66,6 +70,7 @@ var ProgressRing = exports.ProgressRing = function ProgressRing(_ref) {
|
|
|
66
70
|
$strokeDashOffset: strokeDashoffsetInner,
|
|
67
71
|
strokeWidth: stroke,
|
|
68
72
|
strokeDasharray: "".concat(circumference, " ").concat(circumference),
|
|
73
|
+
$roundStroke: roundStroke,
|
|
69
74
|
r: normalizedRadius,
|
|
70
75
|
cx: radius,
|
|
71
76
|
cy: radius
|
|
@@ -78,5 +83,14 @@ var ProgressRing = exports.ProgressRing = function ProgressRing(_ref) {
|
|
|
78
83
|
textAnchor: "middle"
|
|
79
84
|
}, progressNumber, "%") : null);
|
|
80
85
|
};
|
|
86
|
+
var ProgressRing = exports.ProgressRing = function ProgressRing(_ref2) {
|
|
87
|
+
var className = _ref2.className,
|
|
88
|
+
children = _ref2.children,
|
|
89
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledWrapper, {
|
|
91
|
+
className: (0, _classnames.default)(className),
|
|
92
|
+
"data-testid": "progress-ring"
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(ProgressCircle, rest), children ? /*#__PURE__*/_react.default.createElement(_Styles.StyledChildrenWrapper, null, children) : null);
|
|
94
|
+
};
|
|
81
95
|
ProgressRing.displayName = "ProgressRing";
|
|
82
96
|
//# sourceMappingURL=ProgressRing.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","
|
|
1
|
+
{"version":3,"file":"ProgressRing.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","propertyIsEnumerable","sourceKeys","keys","ProgressCircle","exports","_ref","backgroundColor","progressColor","_ref$progress","progress","_ref$radius","radius","_ref$stroke","stroke","roundStroke","className","_ref$showPercentage","showPercentage","fontSize","console","warn","progressNumber","useMemo","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","createElement","StyledSvg","height","StyledBackgroundCircle","$color","$strokeDashOffset","strokeWidth","strokeDasharray","concat","cx","cy","StyledForegroundCircle","$roundStroke","StyledProgressRingPercentage","$fontSize","x","y","dominantBaseline","textAnchor","ProgressRing","_ref2","children","rest","StyledWrapper","classNames","StyledChildrenWrapper","displayName"],"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledWrapper,\n StyledChildrenWrapper,\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\n\nexport interface ProgressCircleProps {\n /** Progress prop can be number */\n progress?: number;\n /** Background color */\n backgroundColor?: string;\n /** Progress color */\n progressColor?: string;\n /** Radius size */\n radius?: number;\n /** Stroke size */\n stroke?: number;\n /** Should stroke line be rounded */\n roundStroke?: boolean;\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 interface ProgressRingProps extends ProgressCircleProps {\n children?: ReactNode;\n}\n\nexport const ProgressCircle = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n roundStroke,\n className,\n showPercentage = false,\n fontSize,\n}: ProgressCircleProps) => {\n if (stroke > radius) {\n console.warn(\"Stroke can not have value greater than the radius.\");\n stroke = radius;\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 / 2, [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 return (\n <StyledSvg height={radius * 2} width={radius * 2} className={className}>\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 $roundStroke={roundStroke}\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\nexport const ProgressRing = ({\n className,\n children,\n ...rest\n}: ProgressRingProps) => {\n return (\n <StyledWrapper\n className={classNames(className)}\n data-testid=\"progress-ring\"\n >\n <ProgressCircle {...rest} />\n {children ? (\n <StyledChildrenWrapper>{children}</StyledChildrenWrapper>\n ) : null}\n </StyledWrapper>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"mappings":"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"}
|
|
@@ -3,18 +3,28 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledSvg = exports.StyledProgressRingPercentage = exports.StyledForegroundCircle = exports.StyledBackgroundCircle = void 0;
|
|
6
|
+
exports.StyledWrapper = exports.StyledSvg = exports.StyledProgressRingPercentage = exports.StyledForegroundCircle = exports.StyledChildrenWrapper = exports.StyledBackgroundCircle = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
9
9
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
|
+
var StyledWrapper = exports.StyledWrapper = _styledComponents.default.div.withConfig({
|
|
11
|
+
displayName: "Styles__StyledWrapper",
|
|
12
|
+
componentId: "sc-o6dcyu-0"
|
|
13
|
+
})(["position:relative;display:inline-flex;"]);
|
|
14
|
+
StyledWrapper.displayName = "StyledWrapper";
|
|
15
|
+
var StyledChildrenWrapper = exports.StyledChildrenWrapper = _styledComponents.default.div.withConfig({
|
|
16
|
+
displayName: "Styles__StyledChildrenWrapper",
|
|
17
|
+
componentId: "sc-o6dcyu-1"
|
|
18
|
+
})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"]);
|
|
19
|
+
StyledChildrenWrapper.displayName = "StyledChildrenWrapper";
|
|
10
20
|
var StyledSvg = exports.StyledSvg = _styledComponents.default.svg.withConfig({
|
|
11
21
|
displayName: "Styles__StyledSvg",
|
|
12
|
-
componentId: "sc-o6dcyu-
|
|
22
|
+
componentId: "sc-o6dcyu-2"
|
|
13
23
|
})(["transform:rotate(-90deg);"]);
|
|
14
24
|
StyledSvg.displayName = "StyledSvg";
|
|
15
25
|
var StyledBackgroundCircle = exports.StyledBackgroundCircle = _styledComponents.default.circle.withConfig({
|
|
16
26
|
displayName: "Styles__StyledBackgroundCircle",
|
|
17
|
-
componentId: "sc-o6dcyu-
|
|
27
|
+
componentId: "sc-o6dcyu-3"
|
|
18
28
|
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
|
|
19
29
|
return props.$color ? (0, _styledComponents.css)(["stroke:", ";"], props.$color) : (0, _styledComponents.css)(["stroke:var(--color-theme-transparent-300);"]);
|
|
20
30
|
}, function (props) {
|
|
@@ -23,8 +33,10 @@ var StyledBackgroundCircle = exports.StyledBackgroundCircle = _styledComponents.
|
|
|
23
33
|
StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
|
|
24
34
|
var StyledForegroundCircle = exports.StyledForegroundCircle = _styledComponents.default.circle.withConfig({
|
|
25
35
|
displayName: "Styles__StyledForegroundCircle",
|
|
26
|
-
componentId: "sc-o6dcyu-
|
|
27
|
-
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
|
|
36
|
+
componentId: "sc-o6dcyu-4"
|
|
37
|
+
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", " ", ""], function (props) {
|
|
38
|
+
return props.$roundStroke && (0, _styledComponents.css)(["stroke-linecap:round;"]);
|
|
39
|
+
}, function (props) {
|
|
28
40
|
return props.$color ? (0, _styledComponents.css)(["stroke:", ";"], props.$color) : (0, _styledComponents.css)(["stroke:var(--color-secondary);"]);
|
|
29
41
|
}, function (props) {
|
|
30
42
|
return props.$strokeDashOffset && (0, _styledComponents.css)(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
|
|
@@ -32,7 +44,7 @@ var StyledForegroundCircle = exports.StyledForegroundCircle = _styledComponents.
|
|
|
32
44
|
StyledForegroundCircle.displayName = "StyledForegroundCircle";
|
|
33
45
|
var StyledProgressRingPercentage = exports.StyledProgressRingPercentage = _styledComponents.default.text.withConfig({
|
|
34
46
|
displayName: "Styles__StyledProgressRingPercentage",
|
|
35
|
-
componentId: "sc-o6dcyu-
|
|
47
|
+
componentId: "sc-o6dcyu-5"
|
|
36
48
|
})(["transform:rotate(90deg);", " ", ""], function (props) {
|
|
37
49
|
return props.$color ? (0, _styledComponents.css)(["fill:", ";"], props.$color) : (0, _styledComponents.css)(["fill:var(--color-secondary);"]);
|
|
38
50
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledWrapper","exports","styled","div","withConfig","displayName","componentId","StyledChildrenWrapper","StyledSvg","svg","StyledBackgroundCircle","circle","props","$color","css","$strokeDashOffset","StyledForegroundCircle","$roundStroke","StyledProgressRingPercentage","text","$fontSize"],"sources":["../../../../src/components/ProgressRing/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\ninterface IStyledProgressRing {\n $color?: string;\n $strokeDashOffset?: number;\n $fontSize?: number;\n $roundStroke?: boolean;\n}\n\nexport const StyledWrapper = styled.div`\n position: relative;\n display: inline-flex;\n`;\n\nStyledWrapper.displayName = \"StyledWrapper\";\n\nexport const StyledChildrenWrapper = styled.div`\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n`;\n\nStyledChildrenWrapper.displayName = \"StyledChildrenWrapper\";\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.$roundStroke &&\n css`\n stroke-linecap: round;\n `}\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"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { ProgressCircleProps } from "../ProgressRing";
|
|
3
3
|
export declare const ProgressPie: {
|
|
4
|
-
({ radius, ...rest }: Omit<
|
|
4
|
+
({ radius, ...rest }: Omit<ProgressCircleProps, "stroke" | "fontSize" | "showPercentage" | "roundStroke">): React.JSX.Element;
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=ProgressPie.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressPie.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressPie/ProgressPie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"ProgressPie.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressPie/ProgressPie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtE,eAAO,MAAM,WAAW;0BAGrB,KACD,mBAAmB,EACnB,QAAQ,GAAG,UAAU,GAAG,gBAAgB,GAAG,aAAa,CACzD;;CAEA,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { ProgressCircle } from "../ProgressRing";
|
|
4
4
|
export const ProgressPie = _ref => {
|
|
5
5
|
let {
|
|
6
6
|
radius = 20,
|
|
7
7
|
...rest
|
|
8
8
|
} = _ref;
|
|
9
|
-
return /*#__PURE__*/React.createElement(
|
|
9
|
+
return /*#__PURE__*/React.createElement(ProgressCircle, _extends({}, rest, {
|
|
10
10
|
stroke: radius,
|
|
11
11
|
radius: radius
|
|
12
12
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressPie.js","names":["React","
|
|
1
|
+
{"version":3,"file":"ProgressPie.js","names":["React","ProgressCircle","ProgressPie","_ref","radius","rest","createElement","_extends","stroke","displayName"],"sources":["../../../../src/components/ProgressPie/ProgressPie.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ProgressCircle, ProgressCircleProps } from \"../ProgressRing\";\n\nexport const ProgressPie = ({\n radius = 20,\n ...rest\n}: Omit<\n ProgressCircleProps,\n \"stroke\" | \"fontSize\" | \"showPercentage\" | \"roundStroke\"\n>) => {\n return <ProgressCircle {...rest} stroke={radius} radius={radius} />;\n};\n\nProgressPie.displayName = \"ProgressPie\";\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,QAA6B,iBAAiB;AAErE,OAAO,MAAMC,WAAW,GAAGC,IAAA,IAMrB;EAAA,IANsB;IAC1BC,MAAM,GAAG,EAAE;IACX,GAAGC;EAIL,CAAC,GAAAF,IAAA;EACC,oBAAOH,KAAA,CAAAM,aAAA,CAACL,cAAc,EAAAM,QAAA,KAAKF,IAAI;IAAEG,MAAM,EAAEJ,MAAO;IAACA,MAAM,EAAEA;EAAO,EAAE,CAAC;AACrE,CAAC;AAEDF,WAAW,CAACO,WAAW,GAAG,aAAa"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export interface
|
|
3
|
-
/** Progress prop can be number
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface ProgressCircleProps {
|
|
3
|
+
/** Progress prop can be number */
|
|
4
4
|
progress?: number;
|
|
5
|
-
/**
|
|
5
|
+
/** Background color */
|
|
6
6
|
backgroundColor?: string;
|
|
7
|
-
/**
|
|
7
|
+
/** Progress color */
|
|
8
8
|
progressColor?: string;
|
|
9
|
-
/**
|
|
9
|
+
/** Radius size */
|
|
10
10
|
radius?: number;
|
|
11
|
-
/**
|
|
11
|
+
/** Stroke size */
|
|
12
12
|
stroke?: number;
|
|
13
|
+
/** Should stroke line be rounded */
|
|
14
|
+
roundStroke?: boolean;
|
|
13
15
|
/** Applies passed classes */
|
|
14
16
|
className?: string;
|
|
15
17
|
/** Should the percentage be displayed inside ring or not */
|
|
@@ -17,8 +19,12 @@ export interface ProgressRingProps {
|
|
|
17
19
|
/** Size of displayed percentage */
|
|
18
20
|
fontSize?: number;
|
|
19
21
|
}
|
|
22
|
+
export interface ProgressRingProps extends ProgressCircleProps {
|
|
23
|
+
children?: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
export declare const ProgressCircle: ({ backgroundColor, progressColor, progress, radius, stroke, roundStroke, className, showPercentage, fontSize, }: ProgressCircleProps) => React.JSX.Element;
|
|
20
26
|
export declare const ProgressRing: {
|
|
21
|
-
({
|
|
27
|
+
({ className, children, ...rest }: ProgressRingProps): React.JSX.Element;
|
|
22
28
|
displayName: string;
|
|
23
29
|
};
|
|
24
30
|
//# sourceMappingURL=ProgressRing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAalD,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,oHAUxB,mBAAmB,sBAgErB,CAAC;AAEF,eAAO,MAAM,YAAY;uCAItB,iBAAiB;;CAYnB,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
2
|
import classNames from "classnames";
|
|
3
|
-
import { StyledBackgroundCircle, StyledForegroundCircle, StyledSvg, StyledProgressRingPercentage } from "./Styles";
|
|
4
|
-
export const
|
|
3
|
+
import { StyledWrapper, StyledChildrenWrapper, StyledBackgroundCircle, StyledForegroundCircle, StyledSvg, StyledProgressRingPercentage } from "./Styles";
|
|
4
|
+
export const ProgressCircle = _ref => {
|
|
5
5
|
let {
|
|
6
6
|
backgroundColor,
|
|
7
7
|
progressColor,
|
|
8
8
|
progress = 0,
|
|
9
9
|
radius = 20,
|
|
10
10
|
stroke = 3,
|
|
11
|
+
roundStroke,
|
|
11
12
|
className,
|
|
12
13
|
showPercentage = false,
|
|
13
14
|
fontSize
|
|
@@ -33,7 +34,7 @@ export const ProgressRing = _ref => {
|
|
|
33
34
|
return /*#__PURE__*/React.createElement(StyledSvg, {
|
|
34
35
|
height: radius * 2,
|
|
35
36
|
width: radius * 2,
|
|
36
|
-
className:
|
|
37
|
+
className: className
|
|
37
38
|
}, /*#__PURE__*/React.createElement(StyledBackgroundCircle, {
|
|
38
39
|
$color: backgroundColor,
|
|
39
40
|
$strokeDashOffset: -strokeDashoffsetOuter,
|
|
@@ -47,6 +48,7 @@ export const ProgressRing = _ref => {
|
|
|
47
48
|
$strokeDashOffset: strokeDashoffsetInner,
|
|
48
49
|
strokeWidth: stroke,
|
|
49
50
|
strokeDasharray: circumference + " " + circumference,
|
|
51
|
+
$roundStroke: roundStroke,
|
|
50
52
|
r: normalizedRadius,
|
|
51
53
|
cx: radius,
|
|
52
54
|
cy: radius
|
|
@@ -59,5 +61,16 @@ export const ProgressRing = _ref => {
|
|
|
59
61
|
textAnchor: "middle"
|
|
60
62
|
}, progressNumber, "%") : null);
|
|
61
63
|
};
|
|
64
|
+
export const ProgressRing = _ref2 => {
|
|
65
|
+
let {
|
|
66
|
+
className,
|
|
67
|
+
children,
|
|
68
|
+
...rest
|
|
69
|
+
} = _ref2;
|
|
70
|
+
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
|
71
|
+
className: classNames(className),
|
|
72
|
+
"data-testid": "progress-ring"
|
|
73
|
+
}, /*#__PURE__*/React.createElement(ProgressCircle, rest), children ? /*#__PURE__*/React.createElement(StyledChildrenWrapper, null, children) : null);
|
|
74
|
+
};
|
|
62
75
|
ProgressRing.displayName = "ProgressRing";
|
|
63
76
|
//# sourceMappingURL=ProgressRing.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.js","names":["React","useMemo","classNames","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","
|
|
1
|
+
{"version":3,"file":"ProgressRing.js","names":["React","useMemo","classNames","StyledWrapper","StyledChildrenWrapper","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","ProgressCircle","_ref","backgroundColor","progressColor","progress","radius","stroke","roundStroke","className","showPercentage","fontSize","console","warn","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","createElement","height","$color","$strokeDashOffset","strokeWidth","strokeDasharray","r","cx","cy","$roundStroke","$fontSize","x","y","dominantBaseline","textAnchor","ProgressRing","_ref2","children","rest","displayName"],"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledWrapper,\n StyledChildrenWrapper,\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\n\nexport interface ProgressCircleProps {\n /** Progress prop can be number */\n progress?: number;\n /** Background color */\n backgroundColor?: string;\n /** Progress color */\n progressColor?: string;\n /** Radius size */\n radius?: number;\n /** Stroke size */\n stroke?: number;\n /** Should stroke line be rounded */\n roundStroke?: boolean;\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 interface ProgressRingProps extends ProgressCircleProps {\n children?: ReactNode;\n}\n\nexport const ProgressCircle = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n roundStroke,\n className,\n showPercentage = false,\n fontSize,\n}: ProgressCircleProps) => {\n if (stroke > radius) {\n console.warn(\"Stroke can not have value greater than the radius.\");\n stroke = radius;\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 / 2, [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 return (\n <StyledSvg height={radius * 2} width={radius * 2} className={className}>\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 $roundStroke={roundStroke}\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\nexport const ProgressRing = ({\n className,\n children,\n ...rest\n}: ProgressRingProps) => {\n return (\n <StyledWrapper\n className={classNames(className)}\n data-testid=\"progress-ring\"\n >\n <ProgressCircle {...rest} />\n {children ? (\n <StyledChildrenWrapper>{children}</StyledChildrenWrapper>\n ) : null}\n </StyledWrapper>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"mappings":"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"}
|
|
@@ -2,7 +2,10 @@ interface IStyledProgressRing {
|
|
|
2
2
|
$color?: string;
|
|
3
3
|
$strokeDashOffset?: number;
|
|
4
4
|
$fontSize?: number;
|
|
5
|
+
$roundStroke?: boolean;
|
|
5
6
|
}
|
|
7
|
+
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const StyledChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
9
|
export declare const StyledSvg: import("styled-components").StyledComponent<"svg", any, {}, never>;
|
|
7
10
|
export declare const StyledBackgroundCircle: import("styled-components").StyledComponent<"circle", any, IStyledProgressRing, never>;
|
|
8
11
|
export declare const StyledForegroundCircle: import("styled-components").StyledComponent<"circle", any, IStyledProgressRing, never>;
|
|
@@ -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;IAC3B,SAAS,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;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,oEAGzB,CAAC;AAIF,eAAO,MAAM,qBAAqB,oEAKjC,CAAC;AAIF,eAAO,MAAM,SAAS,oEAErB,CAAC;AAIF,eAAO,MAAM,sBAAsB,wFAkBlC,CAAC;AAIF,eAAO,MAAM,sBAAsB,wFAwBlC,CAAC;AAIF,eAAO,MAAM,4BAA4B,sFAoBxC,CAAC"}
|
|
@@ -1,22 +1,32 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
+
export const StyledWrapper = styled.div.withConfig({
|
|
3
|
+
displayName: "Styles__StyledWrapper",
|
|
4
|
+
componentId: "sc-o6dcyu-0"
|
|
5
|
+
})(["position:relative;display:inline-flex;"]);
|
|
6
|
+
StyledWrapper.displayName = "StyledWrapper";
|
|
7
|
+
export const StyledChildrenWrapper = styled.div.withConfig({
|
|
8
|
+
displayName: "Styles__StyledChildrenWrapper",
|
|
9
|
+
componentId: "sc-o6dcyu-1"
|
|
10
|
+
})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"]);
|
|
11
|
+
StyledChildrenWrapper.displayName = "StyledChildrenWrapper";
|
|
2
12
|
export const StyledSvg = styled.svg.withConfig({
|
|
3
13
|
displayName: "Styles__StyledSvg",
|
|
4
|
-
componentId: "sc-o6dcyu-
|
|
14
|
+
componentId: "sc-o6dcyu-2"
|
|
5
15
|
})(["transform:rotate(-90deg);"]);
|
|
6
16
|
StyledSvg.displayName = "StyledSvg";
|
|
7
17
|
export const StyledBackgroundCircle = styled.circle.withConfig({
|
|
8
18
|
displayName: "Styles__StyledBackgroundCircle",
|
|
9
|
-
componentId: "sc-o6dcyu-
|
|
19
|
+
componentId: "sc-o6dcyu-3"
|
|
10
20
|
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], props => props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-theme-transparent-300);"]), props => props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset));
|
|
11
21
|
StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
|
|
12
22
|
export const StyledForegroundCircle = styled.circle.withConfig({
|
|
13
23
|
displayName: "Styles__StyledForegroundCircle",
|
|
14
|
-
componentId: "sc-o6dcyu-
|
|
15
|
-
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], props => props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-secondary);"]), props => props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset));
|
|
24
|
+
componentId: "sc-o6dcyu-4"
|
|
25
|
+
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", " ", ""], props => props.$roundStroke && css(["stroke-linecap:round;"]), props => props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-secondary);"]), props => props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset));
|
|
16
26
|
StyledForegroundCircle.displayName = "StyledForegroundCircle";
|
|
17
27
|
export const StyledProgressRingPercentage = styled.text.withConfig({
|
|
18
28
|
displayName: "Styles__StyledProgressRingPercentage",
|
|
19
|
-
componentId: "sc-o6dcyu-
|
|
29
|
+
componentId: "sc-o6dcyu-5"
|
|
20
30
|
})(["transform:rotate(90deg);", " ", ""], props => props.$color ? css(["fill:", ";"], props.$color) : css(["fill:var(--color-secondary);"]), props => props.$fontSize ? css(["font-size:", "px;"], props.$fontSize) : css(["font-size:10px;"]));
|
|
21
31
|
StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
|
|
22
32
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","StyledWrapper","div","withConfig","displayName","componentId","StyledChildrenWrapper","StyledSvg","svg","StyledBackgroundCircle","circle","props","$color","$strokeDashOffset","StyledForegroundCircle","$roundStroke","StyledProgressRingPercentage","text","$fontSize"],"sources":["../../../../src/components/ProgressRing/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\ninterface IStyledProgressRing {\n $color?: string;\n $strokeDashOffset?: number;\n $fontSize?: number;\n $roundStroke?: boolean;\n}\n\nexport const StyledWrapper = styled.div`\n position: relative;\n display: inline-flex;\n`;\n\nStyledWrapper.displayName = \"StyledWrapper\";\n\nexport const StyledChildrenWrapper = styled.div`\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n`;\n\nStyledChildrenWrapper.displayName = \"StyledChildrenWrapper\";\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.$roundStroke &&\n css`\n stroke-linecap: round;\n `}\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"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8CAGtC;AAEDJ,aAAa,CAACG,WAAW,GAAG,eAAe;AAE3C,OAAO,MAAME,qBAAqB,GAAGP,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0EAK9C;AAEDC,qBAAqB,CAACF,WAAW,GAAG,uBAAuB;AAE3D,OAAO,MAAMG,SAAS,GAAGR,MAAM,CAACS,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAElC;AAEDE,SAAS,CAACH,WAAW,GAAG,WAAW;AAEnC,OAAO,MAAMK,sBAAsB,GAAGV,MAAM,CAACW,MAAM,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4EAI9CM,KAAK,IACNA,KAAK,CAACC,MAAM,GACRZ,GAAG,mBACSW,KAAK,CAACC,MAAM,IAExBZ,GAAG,gDAEF,EAEJW,KAAK,IACNA,KAAK,CAACE,iBAAiB,IACvBb,GAAG,8BACoBW,KAAK,CAACE,iBAAiB,CAC7C,CACJ;AAEDJ,sBAAsB,CAACL,WAAW,GAAG,wBAAwB;AAE7D,OAAO,MAAMU,sBAAsB,GAAGf,MAAM,CAACW,MAAM,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iFAI9CM,KAAK,IACNA,KAAK,CAACI,YAAY,IAClBf,GAAG,2BAEF,EAEAW,KAAK,IACNA,KAAK,CAACC,MAAM,GACRZ,GAAG,mBACSW,KAAK,CAACC,MAAM,IAExBZ,GAAG,oCAEF,EAEJW,KAAK,IACNA,KAAK,CAACE,iBAAiB,IACvBb,GAAG,8BACoBW,KAAK,CAACE,iBAAiB,CAC7C,CACJ;AAEDC,sBAAsB,CAACV,WAAW,GAAG,wBAAwB;AAE7D,OAAO,MAAMY,4BAA4B,GAAGjB,MAAM,CAACkB,IAAI,CAAAd,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0CAGlDM,KAAK,IACNA,KAAK,CAACC,MAAM,GACRZ,GAAG,iBACOW,KAAK,CAACC,MAAM,IAEtBZ,GAAG,kCAEF,EAEJW,KAAK,IACNA,KAAK,CAACO,SAAS,GACXlB,GAAG,wBACYW,KAAK,CAACO,SAAS,IAE9BlB,GAAG,qBAEF,CACR;AAEDgB,4BAA4B,CAACZ,WAAW,GAAG,8BAA8B"}
|