2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { FormatConfig, valueType } from './utils';
|
2019-01-09 20:38:09 +08:00
|
|
|
|
|
|
|
interface NumberProps extends FormatConfig {
|
|
|
|
value: valueType;
|
2024-01-26 15:27:02 +08:00
|
|
|
prefixCls?: string;
|
2019-01-09 20:38:09 +08:00
|
|
|
}
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const StatisticNumber: React.FC<NumberProps> = (props) => {
|
2019-01-10 17:04:14 +08:00
|
|
|
const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props;
|
2019-01-09 20:38:09 +08:00
|
|
|
|
|
|
|
let valueNode: React.ReactNode;
|
|
|
|
|
|
|
|
if (typeof formatter === 'function') {
|
|
|
|
// Customize formatter
|
|
|
|
valueNode = formatter(value);
|
|
|
|
} else {
|
|
|
|
// Internal formatter
|
|
|
|
const val: string = String(value);
|
2019-02-02 21:55:46 +08:00
|
|
|
const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
|
2019-01-09 20:38:09 +08:00
|
|
|
|
|
|
|
// Process if illegal number
|
2020-04-06 11:19:44 +08:00
|
|
|
if (!cells || val === '-') {
|
2019-01-09 20:38:09 +08:00
|
|
|
valueNode = val;
|
|
|
|
} else {
|
2019-02-02 21:55:46 +08:00
|
|
|
const negative = cells[1];
|
|
|
|
let int = cells[2] || '0';
|
|
|
|
let decimal = cells[4] || '';
|
2019-01-09 20:38:09 +08:00
|
|
|
|
2019-01-10 17:04:14 +08:00
|
|
|
int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
|
2019-01-09 20:38:09 +08:00
|
|
|
|
|
|
|
if (typeof precision === 'number') {
|
2022-11-28 00:20:50 +08:00
|
|
|
decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0);
|
2019-01-09 20:38:09 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
if (decimal) {
|
|
|
|
decimal = `${decimalSeparator}${decimal}`;
|
|
|
|
}
|
|
|
|
|
|
|
|
valueNode = [
|
|
|
|
<span key="int" className={`${prefixCls}-content-value-int`}>
|
2019-02-02 21:55:46 +08:00
|
|
|
{negative}
|
2019-01-09 20:38:09 +08:00
|
|
|
{int}
|
|
|
|
</span>,
|
|
|
|
decimal && (
|
|
|
|
<span key="decimal" className={`${prefixCls}-content-value-decimal`}>
|
|
|
|
{decimal}
|
|
|
|
</span>
|
|
|
|
),
|
|
|
|
];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return <span className={`${prefixCls}-content-value`}>{valueNode}</span>;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default StatisticNumber;
|