@canlooks/can-ui 0.0.29 → 0.0.30
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/app/app.style.js +1 -1
- package/dist/cjs/components/progress/progress.d.ts +3 -2
- package/dist/cjs/components/progress/progress.js +20 -17
- package/dist/esm/components/app/app.style.js +1 -1
- package/dist/esm/components/progress/progress.d.ts +3 -2
- package/dist/esm/components/progress/progress.js +20 -17
- package/documentation/dist/assets/{index-DGYeA9_D.js → index-BLGjXpOp.js} +186 -187
- package/documentation/dist/index.html +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { ColorPropsValue, DivProps } from '../../types';
|
|
3
3
|
export interface ProgressProps extends DivProps {
|
|
4
4
|
showInfo?: boolean;
|
|
5
|
+
renderInfo?(value?: number): ReactNode;
|
|
5
6
|
color?: ColorPropsValue;
|
|
6
7
|
status?: 'default' | 'processing' | 'success' | 'error';
|
|
7
8
|
variant?: 'linear' | 'circular' | 'gauge';
|
|
@@ -20,4 +21,4 @@ export interface ProgressProps extends DivProps {
|
|
|
20
21
|
strokeLinecap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
|
|
21
22
|
value?: number;
|
|
22
23
|
}
|
|
23
|
-
export declare const Progress: React.MemoExoticComponent<({ showInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
24
|
+
export declare const Progress: React.MemoExoticComponent<({ showInfo, renderInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
@@ -10,10 +10,13 @@ const react_2 = require("@emotion/react");
|
|
|
10
10
|
const __1 = require("../..");
|
|
11
11
|
const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
|
|
12
12
|
const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
|
|
13
|
-
exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
|
|
13
|
+
exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
|
|
14
14
|
const { colors: { success, error } } = (0, theme_1.useTheme)();
|
|
15
15
|
const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
|
|
16
|
-
const
|
|
16
|
+
const renderInfoFn = () => {
|
|
17
|
+
if (renderInfo) {
|
|
18
|
+
return renderInfo(value);
|
|
19
|
+
}
|
|
17
20
|
if (isSucceed) {
|
|
18
21
|
return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleCheck_1.faCircleCheck, className: progress_style_1.classes.icon, style: { color: success.main } });
|
|
19
22
|
}
|
|
@@ -35,19 +38,19 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
|
|
|
35
38
|
if (variant === 'circular' && indeterminate) {
|
|
36
39
|
const dasharray = commonCircleProps.r * 10;
|
|
37
40
|
const anim = (0, react_2.keyframes) `
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
0% {
|
|
42
|
+
stroke-dasharray: 1px ${dasharray}px;
|
|
43
|
+
stroke-dashoffset: 0;
|
|
44
|
+
}
|
|
45
|
+
50% {
|
|
46
|
+
stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
|
|
47
|
+
stroke-dashoffset: -${dasharray / 2 * .15}px;
|
|
48
|
+
}
|
|
49
|
+
100% {
|
|
50
|
+
stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
|
|
51
|
+
stroke-dashoffset: -${dasharray / 2 * 1.25}px;
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
51
54
|
return (0, react_2.css)({ animation: `${anim} 1.4s linear infinite` });
|
|
52
55
|
}
|
|
53
56
|
return;
|
|
@@ -59,7 +62,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
|
|
|
59
62
|
}, children: (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.bar, style: indeterminate
|
|
60
63
|
? void 0
|
|
61
64
|
: { width: value + '%' } }) }), showInfo && !indeterminate &&
|
|
62
|
-
(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children:
|
|
65
|
+
(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfoFn() })] })
|
|
63
66
|
: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: progress_style_1.classes.svg, width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: {
|
|
64
67
|
transform: variant === 'gauge'
|
|
65
68
|
? `rotate(${90 + gapDegree / 2}deg)`
|
|
@@ -67,5 +70,5 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, color = 'primary', stat
|
|
|
67
70
|
}, children: [(0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, className: progress_style_1.classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), (0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: progress_style_1.classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
|
|
68
71
|
? strokeDasharray * (1 - value / 100)
|
|
69
72
|
: strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
|
|
70
|
-
(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children:
|
|
73
|
+
(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfoFn() })] }) }));
|
|
71
74
|
});
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { ColorPropsValue, DivProps } from '../../types';
|
|
3
3
|
export interface ProgressProps extends DivProps {
|
|
4
4
|
showInfo?: boolean;
|
|
5
|
+
renderInfo?(value?: number): ReactNode;
|
|
5
6
|
color?: ColorPropsValue;
|
|
6
7
|
status?: 'default' | 'processing' | 'success' | 'error';
|
|
7
8
|
variant?: 'linear' | 'circular' | 'gauge';
|
|
@@ -20,4 +21,4 @@ export interface ProgressProps extends DivProps {
|
|
|
20
21
|
strokeLinecap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
|
|
21
22
|
value?: number;
|
|
22
23
|
}
|
|
23
|
-
export declare const Progress: React.MemoExoticComponent<({ showInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
24
|
+
export declare const Progress: React.MemoExoticComponent<({ showInfo, renderInfo, color, status, variant, gapDegree, size, indeterminate, barWidth, strokeLinecap, value, ...props }: ProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
@@ -7,10 +7,13 @@ import { css, keyframes } from '@emotion/react';
|
|
|
7
7
|
import { Icon } from '../..';
|
|
8
8
|
import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
|
|
9
9
|
import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
|
|
10
|
-
export const Progress = memo(({ showInfo = true, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
|
|
10
|
+
export const Progress = memo(({ showInfo = true, renderInfo, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }) => {
|
|
11
11
|
const { colors: { success, error } } = useTheme();
|
|
12
12
|
const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
|
|
13
|
-
const
|
|
13
|
+
const renderInfoFn = () => {
|
|
14
|
+
if (renderInfo) {
|
|
15
|
+
return renderInfo(value);
|
|
16
|
+
}
|
|
14
17
|
if (isSucceed) {
|
|
15
18
|
return _jsx(Icon, { icon: faCircleCheck, className: classes.icon, style: { color: success.main } });
|
|
16
19
|
}
|
|
@@ -32,19 +35,19 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
|
|
|
32
35
|
if (variant === 'circular' && indeterminate) {
|
|
33
36
|
const dasharray = commonCircleProps.r * 10;
|
|
34
37
|
const anim = keyframes `
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
38
|
+
0% {
|
|
39
|
+
stroke-dasharray: 1px ${dasharray}px;
|
|
40
|
+
stroke-dashoffset: 0;
|
|
41
|
+
}
|
|
42
|
+
50% {
|
|
43
|
+
stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
|
|
44
|
+
stroke-dashoffset: -${dasharray / 2 * .15}px;
|
|
45
|
+
}
|
|
46
|
+
100% {
|
|
47
|
+
stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
|
|
48
|
+
stroke-dashoffset: -${dasharray / 2 * 1.25}px;
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
48
51
|
return css({ animation: `${anim} 1.4s linear infinite` });
|
|
49
52
|
}
|
|
50
53
|
return;
|
|
@@ -56,7 +59,7 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
|
|
|
56
59
|
}, children: _jsx("div", { className: classes.bar, style: indeterminate
|
|
57
60
|
? void 0
|
|
58
61
|
: { width: value + '%' } }) }), showInfo && !indeterminate &&
|
|
59
|
-
_jsx("div", { className: classes.info, children:
|
|
62
|
+
_jsx("div", { className: classes.info, children: renderInfoFn() })] })
|
|
60
63
|
: _jsxs(_Fragment, { children: [_jsxs("svg", { className: classes.svg, width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: {
|
|
61
64
|
transform: variant === 'gauge'
|
|
62
65
|
? `rotate(${90 + gapDegree / 2}deg)`
|
|
@@ -64,5 +67,5 @@ export const Progress = memo(({ showInfo = true, color = 'primary', status = 'de
|
|
|
64
67
|
}, children: [_jsx("circle", { ...commonCircleProps, className: classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), _jsx("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
|
|
65
68
|
? strokeDasharray * (1 - value / 100)
|
|
66
69
|
: strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
|
|
67
|
-
_jsx("div", { className: classes.info, children:
|
|
70
|
+
_jsx("div", { className: classes.info, children: renderInfoFn() })] }) }));
|
|
68
71
|
});
|