From 84b474c3cc5cb326607dbdf97a8a0a6a1b253e92 Mon Sep 17 00:00:00 2001 From: brendanlaschke Date: Wed, 13 Sep 2023 11:12:25 +0300 Subject: [PATCH] Number display formatting (#1556) * number display formatting * - add tests --- .../components/MoneyDisplay.tsx | 2 +- .../components/NumberDisplay.tsx | 22 +++++++++++++++++++ .../components/GenericEditableNumberField.tsx | 4 ++-- .../components/GenericEditableNumberCell.tsx | 4 ++-- .../src/utils/format/__tests__/number.test.ts | 17 ++++++++++++++ front/src/utils/format/number.ts | 3 +++ front/src/utils/formatNumber.ts | 4 ---- 7 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 front/src/modules/ui/content-display/components/NumberDisplay.tsx create mode 100644 front/src/utils/format/__tests__/number.test.ts create mode 100644 front/src/utils/format/number.ts delete mode 100644 front/src/utils/formatNumber.ts diff --git a/front/src/modules/ui/content-display/components/MoneyDisplay.tsx b/front/src/modules/ui/content-display/components/MoneyDisplay.tsx index c2840f238..c8b522462 100644 --- a/front/src/modules/ui/content-display/components/MoneyDisplay.tsx +++ b/front/src/modules/ui/content-display/components/MoneyDisplay.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { formatNumber } from '~/utils/formatNumber'; +import { formatNumber } from '~/utils/format/number'; const StyledTextInputDisplay = styled.div` overflow: hidden; diff --git a/front/src/modules/ui/content-display/components/NumberDisplay.tsx b/front/src/modules/ui/content-display/components/NumberDisplay.tsx new file mode 100644 index 000000000..c09665899 --- /dev/null +++ b/front/src/modules/ui/content-display/components/NumberDisplay.tsx @@ -0,0 +1,22 @@ +import styled from '@emotion/styled'; + +import { formatNumber } from '~/utils/format/number'; + +const StyledNumberDisplay = styled.div` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +`; + +type OwnProps = { + value: string; +}; + +export function NumberDisplay({ value }: OwnProps) { + return ( + + {value && formatNumber(Number(value))} + + ); +} diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx index f74cfdf05..9bac42bf4 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { useRecoilValue } from 'recoil'; -import { TextDisplay } from '@/ui/content-display/components/TextDisplay'; +import { NumberDisplay } from '@/ui/content-display/components/NumberDisplay'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext'; @@ -34,7 +34,7 @@ export function GenericEditableNumberField() { } - displayModeContent={} + displayModeContent={} isDisplayModeContentEmpty={!fieldValue} /> diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx index 22a850d5e..46858301c 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx @@ -1,6 +1,6 @@ import { useRecoilValue } from 'recoil'; -import { TextDisplay } from '@/ui/content-display/components/TextDisplay'; +import { NumberDisplay } from '@/ui/content-display/components/NumberDisplay'; import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; @@ -36,7 +36,7 @@ export function GenericEditableNumberCell({ columnDefinition={columnDefinition} /> } - nonEditModeContent={} + nonEditModeContent={} > ); } diff --git a/front/src/utils/format/__tests__/number.test.ts b/front/src/utils/format/__tests__/number.test.ts new file mode 100644 index 000000000..37237e03d --- /dev/null +++ b/front/src/utils/format/__tests__/number.test.ts @@ -0,0 +1,17 @@ +import { formatNumber } from '../number'; + +// This tests the en-US locale by default +describe('formatNumber', () => { + it(`Should format 123 correctly`, () => { + expect(formatNumber(123)).toEqual('123'); + }); + it(`Should format decimal numbers correctly`, () => { + expect(formatNumber(123.92)).toEqual('123.92'); + }); + it(`Should format large numbers correctly`, () => { + expect(formatNumber(1234567)).toEqual('1,234,567'); + }); + it(`Should format large numbers with a decimal point correctly`, () => { + expect(formatNumber(7654321.89)).toEqual('7,654,321.89'); + }); +}); diff --git a/front/src/utils/format/number.ts b/front/src/utils/format/number.ts new file mode 100644 index 000000000..1029bc047 --- /dev/null +++ b/front/src/utils/format/number.ts @@ -0,0 +1,3 @@ +export function formatNumber(value: number): string { + return value.toLocaleString(); +} diff --git a/front/src/utils/formatNumber.ts b/front/src/utils/formatNumber.ts deleted file mode 100644 index dc318a437..000000000 --- a/front/src/utils/formatNumber.ts +++ /dev/null @@ -1,4 +0,0 @@ -export function formatNumber(value: number) { - // Formats the value to a string and add commas to it ex: 50,000 | 500,000 - return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); -}