@homecode/ui 4.24.0 → 4.24.2
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/esm/src/components/Progress/Progress.js +2 -2
- package/dist/esm/src/components/ProgressCircular/ProgressCircular.js +2 -2
- package/dist/esm/src/components/ProgressCircular/ProgressCircular.styl.js +2 -2
- package/dist/esm/types/src/components/Progress/Progress.d.ts +1 -1
- package/dist/esm/types/src/components/Progress/Progress.types.d.ts +1 -0
- package/dist/esm/types/src/components/ProgressCircular/ProgressCircular.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3,9 +3,9 @@ import cn from 'classnames';
|
|
|
3
3
|
import { calculateProgress } from './Progress.helpers.js';
|
|
4
4
|
import S from './Progress.styl.js';
|
|
5
5
|
|
|
6
|
-
function Progress({ value, showPercentage, size = 'm', alignText = 'center', }) {
|
|
6
|
+
function Progress({ value, showPercentage, size = 'm', alignText = 'center', className, }) {
|
|
7
7
|
const progress = calculateProgress(value);
|
|
8
|
-
const classes = cn(S.root, S[`size-${size}`], S[`align-${alignText}`], value > 0 && S.animated);
|
|
8
|
+
const classes = cn(S.root, S[`size-${size}`], S[`align-${alignText}`], value > 0 && S.animated, className);
|
|
9
9
|
return (jsxs("div", { className: classes, children: [jsx("div", { className: S.bar, style: { width: `${progress}%` } }), showPercentage && jsxs("div", { className: S.label, children: [Math.round(progress), "%"] })] }));
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -9,14 +9,14 @@ const SIZE_MAP = {
|
|
|
9
9
|
l: 60,
|
|
10
10
|
xl: 120,
|
|
11
11
|
};
|
|
12
|
-
function ProgressCircular({ value, showPercentage, size = 'm', strokeWidth, }) {
|
|
12
|
+
function ProgressCircular({ value, showPercentage, size = 'm', strokeWidth, className, }) {
|
|
13
13
|
const progress = calculateProgress(value);
|
|
14
14
|
const pixelSize = SIZE_MAP[size];
|
|
15
15
|
const calculatedStrokeWidth = strokeWidth ?? pixelSize / 10;
|
|
16
16
|
const radius = (pixelSize - calculatedStrokeWidth) / 2;
|
|
17
17
|
const circumference = 2 * Math.PI * radius;
|
|
18
18
|
const strokeDashoffset = circumference - (progress / 100) * circumference;
|
|
19
|
-
return (jsxs("svg", { width: pixelSize, height: pixelSize, viewBox: `0 0 ${pixelSize} ${pixelSize}`, className: cn(S.root, value > 0 && S.animated), children: [jsx("circle", { className: S.background, cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", strokeWidth: calculatedStrokeWidth }), jsx("circle", { cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", stroke: "var(--active-color)", strokeWidth: calculatedStrokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, transform: `rotate(-90 ${pixelSize / 2} ${pixelSize / 2})
|
|
19
|
+
return (jsxs("svg", { width: pixelSize, height: pixelSize, viewBox: `0 0 ${pixelSize} ${pixelSize}`, className: cn(S.root, value > 0 && S.animated, className), children: [jsx("circle", { className: S.background, cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", strokeWidth: calculatedStrokeWidth }), jsx("circle", { cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", stroke: "var(--active-color)", strokeWidth: calculatedStrokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, transform: `rotate(-90 ${pixelSize / 2} ${pixelSize / 2})`, className: S.progress }), showPercentage && (jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", fontSize: "16", fontWeight: "bold", children: [Math.round(progress), "%"] }))] }));
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export { ProgressCircular };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".ProgressCircular_root__z7xBm .ProgressCircular_background__Rlqcq{stroke:var(--accent-color-alpha-100)}.ProgressCircular_root__z7xBm.ProgressCircular_animated__w3Bpf .
|
|
4
|
-
var S = {"root":"ProgressCircular_root__z7xBm","background":"ProgressCircular_background__Rlqcq","animated":"ProgressCircular_animated__w3Bpf"};
|
|
3
|
+
var css_248z = ".ProgressCircular_root__z7xBm .ProgressCircular_background__Rlqcq{stroke:var(--accent-color-alpha-100)}.ProgressCircular_root__z7xBm.ProgressCircular_animated__w3Bpf .ProgressCircular_progress__QVG7n{transition:stroke-dashoffset .3s ease-in-out}.ProgressCircular_root__z7xBm text{fill:var(--accent-color)}";
|
|
4
|
+
var S = {"root":"ProgressCircular_root__z7xBm","background":"ProgressCircular_background__Rlqcq","animated":"ProgressCircular_animated__w3Bpf","progress":"ProgressCircular_progress__QVG7n"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ProgressProps } from './Progress.types';
|
|
2
|
-
export declare function Progress({ value, showPercentage, size, alignText, }: ProgressProps): JSX.Element;
|
|
2
|
+
export declare function Progress({ value, showPercentage, size, alignText, className, }: ProgressProps): JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ProgressCircularProps } from './ProgressCircular.types';
|
|
2
2
|
export type { ProgressCircularProps } from './ProgressCircular.types';
|
|
3
|
-
export declare function ProgressCircular({ value, showPercentage, size, strokeWidth, }: ProgressCircularProps): JSX.Element;
|
|
3
|
+
export declare function ProgressCircular({ value, showPercentage, size, strokeWidth, className, }: ProgressCircularProps): JSX.Element;
|