1 | "use client";
|
2 |
|
3 | var __rest = this && this.__rest || function (s, e) {
|
4 | var t = {};
|
5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
6 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
8 | }
|
9 | return t;
|
10 | };
|
11 | import * as React from 'react';
|
12 | import CheckCircleFilled from "@ant-design/icons/es/icons/CheckCircleFilled";
|
13 | import CheckOutlined from "@ant-design/icons/es/icons/CheckOutlined";
|
14 | import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
|
15 | import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
|
16 | import classNames from 'classnames';
|
17 | import omit from "rc-util/es/omit";
|
18 | import { devUseWarning } from '../_util/warning';
|
19 | import { ConfigContext } from '../config-provider';
|
20 | import Circle from './Circle';
|
21 | import Line from './Line';
|
22 | import Steps from './Steps';
|
23 | import useStyle from './style';
|
24 | import { getSize, getSuccessPercent, validProgress } from './utils';
|
25 | export const ProgressTypes = ['line', 'circle', 'dashboard'];
|
26 | const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
|
27 | const Progress = React.forwardRef((props, ref) => {
|
28 | const {
|
29 | prefixCls: customizePrefixCls,
|
30 | className,
|
31 | rootClassName,
|
32 | steps,
|
33 | strokeColor,
|
34 | percent = 0,
|
35 | size = 'default',
|
36 | showInfo = true,
|
37 | type = 'line',
|
38 | status,
|
39 | format,
|
40 | style
|
41 | } = props,
|
42 | restProps = __rest(props, ["prefixCls", "className", "rootClassName", "steps", "strokeColor", "percent", "size", "showInfo", "type", "status", "format", "style"]);
|
43 | const percentNumber = React.useMemo(() => {
|
44 | var _a, _b;
|
45 | const successPercent = getSuccessPercent(props);
|
46 | return parseInt(successPercent !== undefined ? (_a = successPercent !== null && successPercent !== void 0 ? successPercent : 0) === null || _a === void 0 ? void 0 : _a.toString() : (_b = percent !== null && percent !== void 0 ? percent : 0) === null || _b === void 0 ? void 0 : _b.toString(), 10);
|
47 | }, [percent, props.success, props.successPercent]);
|
48 | const progressStatus = React.useMemo(() => {
|
49 | if (!ProgressStatuses.includes(status) && percentNumber >= 100) {
|
50 | return 'success';
|
51 | }
|
52 | return status || 'normal';
|
53 | }, [status, percentNumber]);
|
54 | const {
|
55 | getPrefixCls,
|
56 | direction,
|
57 | progress: progressStyle
|
58 | } = React.useContext(ConfigContext);
|
59 | const prefixCls = getPrefixCls('progress', customizePrefixCls);
|
60 | const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
61 | const progressInfo = React.useMemo(() => {
|
62 | if (!showInfo) {
|
63 | return null;
|
64 | }
|
65 | const successPercent = getSuccessPercent(props);
|
66 | let text;
|
67 | const textFormatter = format || (number => `${number}%`);
|
68 | const isLineType = type === 'line';
|
69 | if (format || progressStatus !== 'exception' && progressStatus !== 'success') {
|
70 | text = textFormatter(validProgress(percent), validProgress(successPercent));
|
71 | } else if (progressStatus === 'exception') {
|
72 | text = isLineType ? React.createElement(CloseCircleFilled, null) : React.createElement(CloseOutlined, null);
|
73 | } else if (progressStatus === 'success') {
|
74 | text = isLineType ? React.createElement(CheckCircleFilled, null) : React.createElement(CheckOutlined, null);
|
75 | }
|
76 | return React.createElement("span", {
|
77 | className: `${prefixCls}-text`,
|
78 | title: typeof text === 'string' ? text : undefined
|
79 | }, text);
|
80 | }, [showInfo, percent, percentNumber, progressStatus, type, prefixCls, format]);
|
81 | if (process.env.NODE_ENV !== 'production') {
|
82 | const warning = devUseWarning('Progress');
|
83 | warning.deprecated(!('successPercent' in props), 'successPercent', 'success.percent');
|
84 | warning.deprecated(!('width' in props), 'width', 'size');
|
85 | if ((type === 'circle' || type === 'dashboard') && Array.isArray(size)) {
|
86 | process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'Type "circle" and "dashboard" do not accept array as `size`, please use number or preset size instead.') : void 0;
|
87 | }
|
88 | if (props.success && 'progress' in props.success) {
|
89 | warning.deprecated(false, 'success.progress', 'success.percent');
|
90 | }
|
91 | }
|
92 | const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor;
|
93 | const strokeColorNotGradient = typeof strokeColor === 'string' || Array.isArray(strokeColor) ? strokeColor : undefined;
|
94 | let progress;
|
95 |
|
96 | if (type === 'line') {
|
97 | progress = steps ? ( React.createElement(Steps, Object.assign({}, props, {
|
98 | strokeColor: strokeColorNotGradient,
|
99 | prefixCls: prefixCls,
|
100 | steps: steps
|
101 | }), progressInfo)) : ( React.createElement(Line, Object.assign({}, props, {
|
102 | strokeColor: strokeColorNotArray,
|
103 | prefixCls: prefixCls,
|
104 | direction: direction
|
105 | }), progressInfo));
|
106 | } else if (type === 'circle' || type === 'dashboard') {
|
107 | progress = React.createElement(Circle, Object.assign({}, props, {
|
108 | strokeColor: strokeColorNotArray,
|
109 | prefixCls: prefixCls,
|
110 | progressStatus: progressStatus
|
111 | }), progressInfo);
|
112 | }
|
113 | const classString = classNames(prefixCls, `${prefixCls}-status-${progressStatus}`, `${prefixCls}-${type === 'dashboard' && 'circle' || steps && 'steps' || type}`, {
|
114 | [`${prefixCls}-inline-circle`]: type === 'circle' && getSize(size, 'circle')[0] <= 20,
|
115 | [`${prefixCls}-show-info`]: showInfo,
|
116 | [`${prefixCls}-${size}`]: typeof size === 'string',
|
117 | [`${prefixCls}-rtl`]: direction === 'rtl'
|
118 | }, progressStyle === null || progressStyle === void 0 ? void 0 : progressStyle.className, className, rootClassName, hashId, cssVarCls);
|
119 | return wrapCSSVar( React.createElement("div", Object.assign({
|
120 | ref: ref,
|
121 | style: Object.assign(Object.assign({}, progressStyle === null || progressStyle === void 0 ? void 0 : progressStyle.style), style),
|
122 | className: classString,
|
123 | role: "progressbar",
|
124 | "aria-valuenow": percentNumber
|
125 | }, omit(restProps, ['trailColor', 'strokeWidth', 'width', 'gapDegree', 'gapPosition', 'strokeLinecap', 'success', 'successPercent'])), progress));
|
126 | });
|
127 | if (process.env.NODE_ENV !== 'production') {
|
128 | Progress.displayName = 'Progress';
|
129 | }
|
130 | export default Progress; |
\ | No newline at end of file |