tdesign-react
Version:
TDesign Component for React
258 lines (250 loc) • 10.4 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0fe55884.js');
var React = require('react');
var tdesignIconsReact = require('tdesign-icons-react');
var classNames = require('classnames');
var helper = require('../_chunks/dep-779273e7.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var progress_defaultProps = require('./defaultProps.js');
require('../_chunks/dep-b325182b.js');
require('../_chunks/dep-a7fe58de.js');
require('../_chunks/dep-737b8bd8.js');
require('../_chunks/dep-40583e7c.js');
require('../_chunks/dep-bb3e9667.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-3448f35f.js');
require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-bdafd287.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.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: helper.getBackgroundColor(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"
}
}, /*#__PURE__*/React.isValidElement(label) ? label : "".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