tdesign-react
Version:
TDesign Component for React
255 lines (247 loc) • 10.3 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-cc768e34.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var _util_linearGradient = require('../_util/linearGradient.js');
var progress_defaultProps = require('./defaultProps.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
require('../_chunks/dep-6d4d8660.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-3a869b87.js');
require('../_chunks/dep-ac58e1cc.js');
require('dayjs');
require('../_chunks/dep-7da96a57.js');
require('../_chunks/dep-07b911d8.js');
require('../_chunks/dep-4b02d669.js');
require('../_chunks/dep-f0379c5f.js');
require('../_chunks/dep-ddacd27a.js');
require('../_chunks/dep-028b759d.js');
require('../_chunks/dep-8a116183.js');
require('../_chunks/dep-4671b9bd.js');
require('../_chunks/dep-bed9d73e.js');
require('../_chunks/dep-780eda7b.js');
require('../_chunks/dep-47bdc05f.js');
require('../_chunks/dep-cab13149.js');
require('../_chunks/dep-a30819a4.js');
require('../_chunks/dep-6a7ba247.js');
require('../_chunks/dep-c87d9752.js');
require('../_chunks/dep-bd956a2d.js');
require('../_chunks/dep-0cdb3286.js');
require('../_chunks/dep-865c186c.js');
require('../_chunks/dep-f4e58639.js');
require('../_chunks/dep-781a2854.js');
require('../_chunks/dep-1ef213f8.js');
require('../_chunks/dep-e2c832a5.js');
require('../_chunks/dep-810b3643.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
CheckCircleIcon: tdesignIconsReact.CheckIcon,
CloseCircleIcon: tdesignIconsReact.CloseIcon,
ErrorCircleIcon: tdesignIconsReact.ErrorIcon,
CheckCircleFilledIcon: tdesignIconsReact.CheckCircleFilledIcon,
CloseCircleFilledIcon: tdesignIconsReact.CloseCircleFilledIcon,
ErrorCircleFilledIcon: tdesignIconsReact.ErrorCircleFilledIcon
}),
CheckCircleIcon = _useGlobalIcon.CheckCircleIcon,
CloseCircleIcon = _useGlobalIcon.CloseCircleIcon,
ErrorCircleIcon = _useGlobalIcon.ErrorCircleIcon,
CheckCircleFilledIcon = _useGlobalIcon.CheckCircleFilledIcon,
CloseCircleFilledIcon = _useGlobalIcon.CloseCircleFilledIcon,
ErrorCircleFilledIcon = _useGlobalIcon.ErrorCircleFilledIcon;
var _useDefaultProps = hooks_useDefaultProps["default"](props, progress_defaultProps.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,
error: CloseCircleFilledIcon,
warning: ErrorCircleFilledIcon
};
var getInfoContent = function getInfoContent() {
if (!label) {
return "";
}
var info;
if (typeof label === "boolean") {
info = /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__info")
}, "".concat(percentage, "%"));
if (["success", "error", "warning"].includes(status)) {
var Icon = iconMap[status];
info = /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__info")
}, /* @__PURE__ */React__default["default"].createElement(Icon, {
className: "".concat(classPrefix, "-progress__icon")
}));
}
} else {
info = /* @__PURE__ */React__default["default"].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__default["default"].createElement("div", {
ref: ref,
className: classNames__default["default"]("".concat(classPrefix, "-progress--circle"), defineProperty._defineProperty({}, "".concat(statusClassName), status)),
style: circleBoxStyle
}, getInfoContent(), /* @__PURE__ */React__default["default"].createElement("svg", {
width: diameter,
height: diameter,
viewBox: "0 0 ".concat(diameter + circleStokeWidth, " ").concat(diameter + circleStokeWidth)
}, /* @__PURE__ */React__default["default"].createElement("circle", {
cx: circleCenterInViewBox,
cy: circleCenterInViewBox,
r: radius,
strokeWidth: circleStokeWidth,
stroke: trackColor || "var(--td-bg-color-component)",
fill: "none"
}), percentage > 0 && /* @__PURE__ */React__default["default"].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__default["default"].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: _util_linearGradient["default"](color),
borderRadius: getHeight()
};
if (theme === "plump") {
var PLUMP_SEPARATE = 10;
progressDom = /* @__PURE__ */React__default["default"].createElement("div", {
ref: ref,
className: classNames__default["default"]("".concat(classPrefix, "-progress__bar"), "".concat(classPrefix, "-progress--plump"), defineProperty._defineProperty(defineProperty._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__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__inner"),
style: barStyle
}, label && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__info"),
style: {
color: "#fff"
}
}, "".concat(percentage, "%"))) : /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__inner"),
style: barStyle
}), getInfoContent()));
} else {
progressDom = /* @__PURE__ */React__default["default"].createElement("div", {
ref: ref,
className: classNames__default["default"]("".concat(classPrefix, "-progress--thin"), defineProperty._defineProperty({}, "".concat(statusClassName), status))
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__bar"),
style: trackStyle
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-progress__inner"),
style: barStyle
})), getInfoContent());
}
return /* @__PURE__ */React__default["default"].createElement("div", {
className: className,
style: style
}, progressDom);
});
Progress.displayName = "Progress";
exports["default"] = Progress;
//# sourceMappingURL=Progress.js.map