tdesign-react
Version:
TDesign Component for React
297 lines (291 loc) • 11 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import React, { forwardRef, useState, useMemo, useRef, useEffect, useImperativeHandle } from 'react';
import classNames from 'classnames';
import { isNumber, isFunction } from 'lodash-es';
import { ArrowTriangleUpFilledIcon, ArrowTriangleDownFilledIcon } from 'tdesign-icons-react';
import { _ as _classCallCheck, a as _createClass } from '../_chunks/dep-83726008.js';
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { g as getIEVersion } from '../_chunks/dep-1630b9b4.js';
import { statisticDefaultProps } from './defaultProps.js';
import useConfig from '../hooks/useConfig.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import useIsFirstRender from '../hooks/useIsFirstRender.js';
import { Skeleton } from '../skeleton/index.js';
import '../_chunks/dep-026a4c6b.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-87d110df.js';
import '../_chunks/dep-6b660ef0.js';
import '../config-provider/ConfigContext.js';
import '../locale/zh_CN.js';
import '../_chunks/dep-e29214cb.js';
import 'dayjs';
import '../_chunks/dep-3c9ab31a.js';
import '../skeleton/Skeleton.js';
import '../_util/helper.js';
import '../_util/parseTNode.js';
import '../_chunks/dep-f53c91cd.js';
import '../_chunks/dep-b908e1fe.js';
import '../skeleton/defaultProps.js';
import '../skeleton/style/index.js';
import '../skeleton/type.js';
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;
_classCallCheck(this, Tween);
_defineProperty(this, "time", 0);
_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(_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(_ref4, 2),
key = _ref5[0],
value = _ref5[1];
if (_this.from[key] === void 0) {
_this.from[key] = value;
}
});
}
return _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 (getIEVersion() < 10) this.polyfillStart();else this.normalStart();
}
}, {
key: "stop",
value: function stop() {
if (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__*/forwardRef(function (props, ref) {
var _animation$valueFrom;
var _useDefaultProps = useDefaultProps(props, 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 = useConfig(),
classPrefix = _useConfig.classPrefix;
var _useGlobalIcon = useGlobalIcon({
ArrowTriangleUpFilledIcon: ArrowTriangleUpFilledIcon
}),
ArrowTriangleUpFilledIcon$1 = _useGlobalIcon.ArrowTriangleUpFilledIcon;
var _useGlobalIcon2 = useGlobalIcon({
ArrowTriangleDownFilledIcon: ArrowTriangleDownFilledIcon
}),
ArrowTriangleDownFilledIcon$1 = _useGlobalIcon2.ArrowTriangleDownFilledIcon;
var _useState = useState((_animation$valueFrom = animation === null || animation === void 0 ? void 0 : animation.valueFrom) !== null && _animation$valueFrom !== void 0 ? _animation$valueFrom : value),
_useState2 = _slicedToArray(_useState, 2),
innerValue = _useState2[0],
setInnerValue = _useState2[1];
var numberValue = useMemo(function () {
return isNumber(value) ? value : 0;
}, [value]);
var tween = useRef(null);
var isFirstRender = useIsFirstRender();
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 = useMemo(function () {
var formatInnerValue = innerValue;
if (isFunction(format)) {
return format(formatInnerValue);
}
formatInnerValue = getFormatValue(formatInnerValue, decimalPlaces, separator);
return formatInnerValue;
}, [innerValue, decimalPlaces, separator, format]);
var valueStyle = useMemo(function () {
return {
color: COLOR_MAP[color] || color
};
}, [color]);
useEffect(function () {
if (isFirstRender) return;
setInnerValue(value);
animationStart && animation && start();
return function () {
if (tween.current) {
tween.current.stop();
}
};
}, [value]);
useEffect(function () {
animationStart && animation && !tween.current && start();
}, [animationStart]);
useImperativeHandle(ref, function () {
return {
start: start
};
});
var trendIcons = {
increase: /* @__PURE__ */React.createElement(ArrowTriangleUpFilledIcon$1, null),
decrease: /* @__PURE__ */React.createElement(ArrowTriangleDownFilledIcon$1, 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.createElement("div", {
className: classNames("".concat(classPrefix, "-statistic"), className),
style: style
}, title && /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-statistic-title")
}, title), /* @__PURE__ */React.createElement(Skeleton, {
animation: "gradient",
theme: "text",
loading: !!loading
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-statistic-content"),
style: valueStyle
}, prefixRender && /* @__PURE__ */React.createElement("span", {
className: "".concat(classPrefix, "-statistic-content-prefix")
}, prefixRender), /* @__PURE__ */React.createElement("span", {
className: "".concat(classPrefix, "-statistic-content-value")
}, formatValue), unit && /* @__PURE__ */React.createElement("span", {
className: "".concat(classPrefix, "-statistic-content-unit")
}, unit), suffixRender && /* @__PURE__ */React.createElement("span", {
className: "".concat(classPrefix, "-statistic-content-suffix")
}, suffixRender))), extra && /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-statistic-extra")
}, extra));
});
Statistic.displayName = "Statistic";
export { Statistic as default };
//# sourceMappingURL=Statistic.js.map