import React from 'react';
import { style } from 'app/styles';
export interface NumberProps {
// This is the text or JSX that gets wrapped in stacked label
value: string | number;
style?: object | string;
}
export function convertNumberToStringWithCommas(numberValue: string | number) {
let numericValue = parseFloat(numberValue as string);
if (isNaN(numericValue)) {
numericValue = 0;
}
const [wholeNumber, decimal] = numericValue.toString().split('.');
let convertedValue = wholeNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if (decimal) {
convertedValue += `.${decimal}`;
}
return convertedValue;
}
// numbers for humans have commas
export const CommaNumber = (props: NumberProps): JSX.Element => {
return (
<span style={style(props.style)}>
{convertNumberToStringWithCommas(props.value)}
</span>
);
};
CommaNumber.displayName = 'CommaNumber';
|