Statistic.js 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import classNames from 'classnames';
  12. import pickAttrs from "rc-util/es/pickAttrs";
  13. import { useComponentConfig } from '../config-provider/context';
  14. import Skeleton from '../skeleton';
  15. import StatisticNumber from './Number';
  16. import useStyle from './style';
  17. const Statistic = /*#__PURE__*/React.forwardRef((props, ref) => {
  18. const {
  19. prefixCls: customizePrefixCls,
  20. className,
  21. rootClassName,
  22. style,
  23. valueStyle,
  24. value = 0,
  25. title,
  26. valueRender,
  27. prefix,
  28. suffix,
  29. loading = false,
  30. /* --- FormatConfig starts --- */
  31. formatter,
  32. precision,
  33. decimalSeparator = '.',
  34. groupSeparator = ',',
  35. /* --- FormatConfig starts --- */
  36. onMouseEnter,
  37. onMouseLeave
  38. } = props,
  39. rest = __rest(props, ["prefixCls", "className", "rootClassName", "style", "valueStyle", "value", "title", "valueRender", "prefix", "suffix", "loading", "formatter", "precision", "decimalSeparator", "groupSeparator", "onMouseEnter", "onMouseLeave"]);
  40. const {
  41. getPrefixCls,
  42. direction,
  43. className: contextClassName,
  44. style: contextStyle
  45. } = useComponentConfig('statistic');
  46. const prefixCls = getPrefixCls('statistic', customizePrefixCls);
  47. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  48. const valueNode = /*#__PURE__*/React.createElement(StatisticNumber, {
  49. decimalSeparator: decimalSeparator,
  50. groupSeparator: groupSeparator,
  51. prefixCls: prefixCls,
  52. formatter: formatter,
  53. precision: precision,
  54. value: value
  55. });
  56. const cls = classNames(prefixCls, {
  57. [`${prefixCls}-rtl`]: direction === 'rtl'
  58. }, contextClassName, className, rootClassName, hashId, cssVarCls);
  59. const internalRef = React.useRef(null);
  60. React.useImperativeHandle(ref, () => ({
  61. nativeElement: internalRef.current
  62. }));
  63. const restProps = pickAttrs(rest, {
  64. aria: true,
  65. data: true
  66. });
  67. return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({}, restProps, {
  68. ref: internalRef,
  69. className: cls,
  70. style: Object.assign(Object.assign({}, contextStyle), style),
  71. onMouseEnter: onMouseEnter,
  72. onMouseLeave: onMouseLeave
  73. }), title && /*#__PURE__*/React.createElement("div", {
  74. className: `${prefixCls}-title`
  75. }, title), /*#__PURE__*/React.createElement(Skeleton, {
  76. paragraph: false,
  77. loading: loading,
  78. className: `${prefixCls}-skeleton`
  79. }, /*#__PURE__*/React.createElement("div", {
  80. style: valueStyle,
  81. className: `${prefixCls}-content`
  82. }, prefix && /*#__PURE__*/React.createElement("span", {
  83. className: `${prefixCls}-content-prefix`
  84. }, prefix), valueRender ? valueRender(valueNode) : valueNode, suffix && /*#__PURE__*/React.createElement("span", {
  85. className: `${prefixCls}-content-suffix`
  86. }, suffix)))));
  87. });
  88. if (process.env.NODE_ENV !== 'production') {
  89. Statistic.displayName = 'Statistic';
  90. }
  91. export default Statistic;