tdesign-react
Version:
TDesign Component for React
330 lines (320 loc) • 12.8 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var createClass = require('../_chunks/dep-69792df2.js');
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var helper = require('../_chunks/dep-002fcc1e.js');
var statistic_defaultProps = require('./defaultProps.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useIsFirstRender = require('../hooks/useIsFirstRender.js');
var skeleton_index = require('../skeleton/index.js');
var isNumber = require('../_chunks/dep-2ffa3ff1.js');
var isFunction = require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-00b49251.js');
require('../_chunks/dep-667ac7af.js');
require('../_chunks/dep-e4e1901e.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-62e73936.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../skeleton/Skeleton.js');
require('../_util/helper.js');
require('../_chunks/dep-8fa3a4c2.js');
require('../_chunks/dep-840b1644.js');
require('../_chunks/dep-255ceed8.js');
require('../_chunks/dep-79629634.js');
require('../_chunks/dep-66114ce9.js');
require('../_chunks/dep-62d1dd66.js');
require('../_chunks/dep-7a148045.js');
require('../_util/parseTNode.js');
require('../_chunks/dep-59671c87.js');
require('../skeleton/defaultProps.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 quartOut = function quartOut(t) {
return 1 - Math.abs(Math.pow(t - 1, 4));
};
var Tween = /*#__PURE__*/function () {
function Tween(_ref) {
var _this = this;
var from = _ref.from,
to = _ref.to,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 200 : _ref$duration,
onStart = _ref.onStart,
_ref$onUpdate = _ref.onUpdate,
onUpdate = _ref$onUpdate === void 0 ? function () {} : _ref$onUpdate,
onFinish = _ref.onFinish;
createClass._classCallCheck(this, Tween);
defineProperty._defineProperty(this, "time", 0);
defineProperty._defineProperty(this, "elapsed", 0);
this.from = from;
this.to = to;
this.duration = duration;
this.onStart = onStart;
this.onUpdate = onUpdate;
this.onFinish = onFinish;
this.startTime = Date.now();
this.started = false;
this.finished = false;
this.timer = null;
this.keys = {};
Object.entries(from).forEach(function (_ref2) {
var _ref3 = slicedToArray._slicedToArray(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
if (_this.to[key] === void 0) {
_this.to[key] = value;
}
});
Object.entries(to).forEach(function (_ref4) {
var _ref5 = slicedToArray._slicedToArray(_ref4, 2),
key = _ref5[0],
value = _ref5[1];
if (_this.from[key] === void 0) {
_this.from[key] = value;
}
});
}
return createClass._createClass(Tween, [{
key: "update",
value: function update() {
var _this2 = this;
this.time = Date.now();
if (this.time < this.startTime || this.finished) return;
if (this.elapsed >= this.duration) {
var _this$onFinish;
this.finished = true;
(_this$onFinish = this.onFinish) === null || _this$onFinish === void 0 || _this$onFinish.call(this, this.keys);
return;
}
var elapsed = Math.min(this.time - this.startTime, this.duration);
this.elapsed = elapsed;
var progress = quartOut(elapsed / this.duration);
Object.keys(this.to).forEach(function (key) {
var delta = _this2.to[key] - _this2.from[key];
_this2.keys[key] = _this2.from[key] + delta * progress;
});
if (!this.started) {
var _this$onStart;
(_this$onStart = this.onStart) === null || _this$onStart === void 0 || _this$onStart.call(this, this.keys);
this.started = true;
}
this.onUpdate(this.keys);
}
}, {
key: "polyfillStart",
value: function polyfillStart() {
var _this3 = this;
var elapsed = Date.now() - this.startTime;
var interval = quartOut(elapsed / this.duration);
this.timer = setInterval(function () {
_this3.update();
if (_this3.finished) {
clearInterval(_this3.timer);
}
}, interval);
}
}, {
key: "normalStart",
value: function normalStart() {
var _this4 = this;
var _tick = function tick() {
_this4.update();
_this4.timer = requestAnimationFrame(_tick);
if (_this4.finished) {
cancelAnimationFrame(_this4.timer);
_this4.timer = null;
}
};
_tick();
}
}, {
key: "start",
value: function start() {
this.startTime = Date.now();
if (helper.getIEVersion() < 10) this.polyfillStart();else this.normalStart();
}
}, {
key: "stop",
value: function stop() {
if (helper.getIEVersion() < 10) clearInterval(this.timer);else cancelAnimationFrame(this.timer);
this.timer = null;
}
}]);
}();
var COLOR_MAP = {
black: "var(--td-text-color-primary)",
blue: "var(--td-brand-color)",
red: "var(--td-error-color)",
orange: "var(--td-warning-color)",
green: "var(--td-success-color)"
};
function getFormatValue(value, decimalPlaces, separator) {
var options = {
minimumFractionDigits: decimalPlaces !== null && decimalPlaces !== void 0 ? decimalPlaces : 0,
maximumFractionDigits: decimalPlaces !== null && decimalPlaces !== void 0 ? decimalPlaces : 20,
useGrouping: !!separator
};
return value.toLocaleString(void 0, options).replace(/,|，/g, separator);
}
var Statistic = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _animation$valueFrom;
var _useDefaultProps = hooks_useDefaultProps["default"](props, statistic_defaultProps.statisticDefaultProps),
className = _useDefaultProps.className,
style = _useDefaultProps.style,
animation = _useDefaultProps.animation,
animationStart = _useDefaultProps.animationStart,
color = _useDefaultProps.color,
decimalPlaces = _useDefaultProps.decimalPlaces,
extra = _useDefaultProps.extra,
format = _useDefaultProps.format,
loading = _useDefaultProps.loading,
prefix = _useDefaultProps.prefix,
separator = _useDefaultProps.separator,
suffix = _useDefaultProps.suffix,
title = _useDefaultProps.title,
trend = _useDefaultProps.trend,
trendPlacement = _useDefaultProps.trendPlacement,
unit = _useDefaultProps.unit,
value = _useDefaultProps.value;
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
ArrowTriangleUpFilledIcon: tdesignIconsReact.ArrowTriangleUpFilledIcon
}),
ArrowTriangleUpFilledIcon = _useGlobalIcon.ArrowTriangleUpFilledIcon;
var _useGlobalIcon2 = hooks_useGlobalIcon["default"]({
ArrowTriangleDownFilledIcon: tdesignIconsReact.ArrowTriangleDownFilledIcon
}),
ArrowTriangleDownFilledIcon = _useGlobalIcon2.ArrowTriangleDownFilledIcon;
var _useState = React.useState((_animation$valueFrom = animation === null || animation === void 0 ? void 0 : animation.valueFrom) !== null && _animation$valueFrom !== void 0 ? _animation$valueFrom : value),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
innerValue = _useState2[0],
setInnerValue = _useState2[1];
var numberValue = React.useMemo(function () {
return isNumber.isNumber(value) ? value : 0;
}, [value]);
var tween = React.useRef(null);
var isFirstRender = hooks_useIsFirstRender["default"]();
var start = function start() {
var _animation$valueFrom2;
var from = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (_animation$valueFrom2 = animation === null || animation === void 0 ? void 0 : animation.valueFrom) !== null && _animation$valueFrom2 !== void 0 ? _animation$valueFrom2 : 0;
var to = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : numberValue;
if (from !== to) {
var _tween$current;
tween.current = new Tween({
from: {
value: from
},
to: {
value: to
},
duration: animation === null || animation === void 0 ? void 0 : animation.duration,
onUpdate: function onUpdate(keys) {
setInnerValue(keys.value);
},
onFinish: function onFinish() {
setInnerValue(to);
}
});
(_tween$current = tween.current) === null || _tween$current === void 0 || _tween$current.start();
}
};
var formatValue = React.useMemo(function () {
var formatInnerValue = innerValue;
if (isFunction.isFunction(format)) {
return format(formatInnerValue);
}
formatInnerValue = getFormatValue(formatInnerValue, decimalPlaces, separator);
return formatInnerValue;
}, [innerValue, decimalPlaces, separator, format]);
var valueStyle = React.useMemo(function () {
return {
color: COLOR_MAP[color] || color
};
}, [color]);
React.useEffect(function () {
if (isFirstRender) return;
setInnerValue(value);
animationStart && animation && start();
return function () {
if (tween.current) {
tween.current.stop();
}
};
}, [value]);
React.useEffect(function () {
animationStart && animation && !tween.current && start();
}, [animationStart]);
React.useImperativeHandle(ref, function () {
return {
start: start
};
});
var trendIcons = {
increase: /* @__PURE__ */React__default["default"].createElement(ArrowTriangleUpFilledIcon, null),
decrease: /* @__PURE__ */React__default["default"].createElement(ArrowTriangleDownFilledIcon, null)
};
var trendIcon = trend ? trendIcons[trend] : null;
var prefixRender = prefix || (trendIcon && trendPlacement !== "right" ? trendIcon : null);
var suffixRender = suffix || (trendIcon && trendPlacement === "right" ? trendIcon : null);
return /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("".concat(classPrefix, "-statistic"), className),
style: style
}, title && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-statistic-title")
}, title), /* @__PURE__ */React__default["default"].createElement(skeleton_index.Skeleton, {
animation: "gradient",
theme: "text",
loading: !!loading
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-statistic-content"),
style: valueStyle
}, prefixRender && /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(classPrefix, "-statistic-content-prefix")
}, prefixRender), /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(classPrefix, "-statistic-content-value")
}, formatValue), unit && /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(classPrefix, "-statistic-content-unit")
}, unit), suffixRender && /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(classPrefix, "-statistic-content-suffix")
}, suffixRender))), extra && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(classPrefix, "-statistic-extra")
}, extra));
});
Statistic.displayName = "Statistic";
exports["default"] = Statistic;
//# sourceMappingURL=Statistic.js.map