tdesign-react
Version:
TDesign Component for React
225 lines (221 loc) • 8.47 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import React, { forwardRef } from 'react';
import classNames from 'classnames';
import { CheckIcon, CloseIcon, ErrorIcon, CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
import useConfig from '../hooks/useConfig.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import getBackgroundColor from '../_util/linearGradient.js';
import { progressDefaultProps } from './defaultProps.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-eca3a3de.js';
import '../config-provider/ConfigContext.js';
import 'lodash-es';
import '../_chunks/dep-f97636ce.js';
import '../_chunks/dep-9dbbf468.js';
import 'dayjs';
import '../_chunks/dep-6b660ef0.js';
var Progress = /*#__PURE__*/forwardRef(function (props, ref) {
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = useGlobalIcon({
CheckCircleIcon: CheckIcon,
CloseCircleIcon: CloseIcon,
ErrorCircleIcon: ErrorIcon,
CheckCircleFilledIcon: CheckCircleFilledIcon,
CloseCircleFilledIcon: CloseCircleFilledIcon,
ErrorCircleFilledIcon: ErrorCircleFilledIcon
}),
CheckCircleIcon = _useGlobalIcon.CheckCircleIcon,
CloseCircleIcon = _useGlobalIcon.CloseCircleIcon,
ErrorCircleIcon = _useGlobalIcon.ErrorCircleIcon,
CheckCircleFilledIcon$1 = _useGlobalIcon.CheckCircleFilledIcon,
CloseCircleFilledIcon$1 = _useGlobalIcon.CloseCircleFilledIcon,
ErrorCircleFilledIcon$1 = _useGlobalIcon.ErrorCircleFilledIcon;
var _useDefaultProps = useDefaultProps(props, progressDefaultProps),
theme = _useDefaultProps.theme,
percentage = _useDefaultProps.percentage,
label = _useDefaultProps.label,
_useDefaultProps$colo = _useDefaultProps.color,
color = _useDefaultProps$colo === void 0 ? "" : _useDefaultProps$colo,
trackColor = _useDefaultProps.trackColor,
strokeWidth = _useDefaultProps.strokeWidth,
size = _useDefaultProps.size,
className = _useDefaultProps.className,
style = _useDefaultProps.style,
customizeStatus = _useDefaultProps.status;
var status = !customizeStatus && percentage >= 100 ? "success" : customizeStatus;
var iconMap = {
success: CheckCircleFilledIcon$1,
error: CloseCircleFilledIcon$1,
warning: ErrorCircleFilledIcon$1
};
var getInfoContent = function getInfoContent() {
if (!label) {
return "";
}
var info;
if (typeof label === "boolean") {
info = /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__info")
}, "".concat(percentage, "%"));
if (["success", "error", "warning"].includes(status)) {
var Icon = iconMap[status];
info = /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__info")
}, /* @__PURE__ */React.createElement(Icon, {
className: "".concat(classPrefix, "-progress__icon")
}));
}
} else {
info = /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__info")
}, label);
}
return info;
};
var statusClassName = "".concat(classPrefix, "-progress--status--").concat(status);
var progressDom;
if (theme === "circle") {
iconMap = {
success: CheckCircleIcon,
error: CloseCircleIcon,
warning: ErrorCircleIcon
};
var getDiameter = function getDiameter() {
var diameter2 = 112;
if (!size) {
return diameter2;
}
switch (size) {
default:
diameter2 = Number(size);
break;
case "small":
diameter2 = 72;
break;
case "medium":
diameter2 = 112;
break;
case "large":
diameter2 = 160;
break;
}
return diameter2;
};
var getCircleStokeWidth = function getCircleStokeWidth() {
if (!strokeWidth) {
if (size === "small") {
return 4;
}
}
if (typeof strokeWidth !== "number" || Number.isNaN(strokeWidth)) {
return 6;
}
return strokeWidth;
};
var circleStokeWidth = getCircleStokeWidth();
var diameter = getDiameter();
var radius = diameter / 2;
var innerRadius = radius - circleStokeWidth;
var perimeter = Math.PI * 2 * radius;
var percent = percentage / 100;
var strokeDasharray = "".concat(perimeter * percent, " ").concat(perimeter * (1 - percent));
var fontSizeRatio = innerRadius * 0.27;
var circleBoxStyle = {
width: diameter,
height: diameter,
fontSize: 4 + fontSizeRatio
};
var circlePathStyle = {
stroke: color,
strokeLinecap: circleStokeWidth < 30 ? "round" : "buff"
};
var circleCenterInViewBox = radius + circleStokeWidth / 2;
progressDom = /* @__PURE__ */React.createElement("div", {
ref: ref,
className: classNames("".concat(classPrefix, "-progress--circle"), _defineProperty({}, "".concat(statusClassName), status)),
style: circleBoxStyle
}, getInfoContent(), /* @__PURE__ */React.createElement("svg", {
width: diameter,
height: diameter,
viewBox: "0 0 ".concat(diameter + circleStokeWidth, " ").concat(diameter + circleStokeWidth)
}, /* @__PURE__ */React.createElement("circle", {
cx: circleCenterInViewBox,
cy: circleCenterInViewBox,
r: radius,
strokeWidth: circleStokeWidth,
stroke: trackColor || "var(--td-bg-color-component)",
fill: "none"
}), percentage > 0 && /* @__PURE__ */React.createElement("circle", {
cx: circleCenterInViewBox,
cy: circleCenterInViewBox,
r: radius,
strokeWidth: circleStokeWidth,
fill: "none",
transform: "matrix(0,-1,1,0,0,".concat(diameter + circleStokeWidth, ")"),
strokeDasharray: strokeDasharray,
className: "".concat(classPrefix, "-progress__circle-inner"),
style: circlePathStyle
})));
return /* @__PURE__ */React.createElement("div", {
className: className
}, progressDom);
}
var getHeight = function getHeight() {
if (strokeWidth) {
return typeof strokeWidth === "string" ? strokeWidth : "".concat(strokeWidth, "px");
}
};
var trackStyle = {
height: getHeight(),
backgroundColor: trackColor,
borderRadius: getHeight()
};
var barStyle = {
width: "".concat(percentage, "%"),
background: getBackgroundColor(color),
borderRadius: getHeight()
};
if (theme === "plump") {
var PLUMP_SEPARATE = 10;
progressDom = /* @__PURE__ */React.createElement("div", {
ref: ref,
className: classNames("".concat(classPrefix, "-progress__bar"), "".concat(classPrefix, "-progress--plump"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(statusClassName), status), "".concat(classPrefix, "-progress--over-ten"), percentage > PLUMP_SEPARATE), "".concat(classPrefix, "-progress--under-ten"), percentage <= PLUMP_SEPARATE)),
style: trackStyle
}, percentage > PLUMP_SEPARATE ? /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__inner"),
style: barStyle
}, label && /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__info"),
style: {
color: "#fff"
}
}, "".concat(percentage, "%"))) : /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__inner"),
style: barStyle
}), getInfoContent()));
} else {
progressDom = /* @__PURE__ */React.createElement("div", {
ref: ref,
className: classNames("".concat(classPrefix, "-progress--thin"), _defineProperty({}, "".concat(statusClassName), status))
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__bar"),
style: trackStyle
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-progress__inner"),
style: barStyle
})), getInfoContent());
}
return /* @__PURE__ */React.createElement("div", {
className: className,
style: style
}, progressDom);
});
Progress.displayName = "Progress";
export { Progress as default };
//# sourceMappingURL=Progress.js.map