admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Number display formatting (#1556)

Browse Source 
* number display formatting

* - add tests
This commit is contained in:
brendanlaschke
2023-09-13 11:12:25 +03:00
committed by GitHub
parent 7e6c9141f4
commit 84b474c3cc
7 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/content-display/components/MoneyDisplay.tsx
View File

@ -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;

22
front/src/modules/ui/content-display/components/NumberDisplay.tsx Normal file
View File

@ -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 (
<StyledNumberDisplay>
{value && formatNumber(Number(value))}
</StyledNumberDisplay>
);
}

4
front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
View File

@ -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() {
<EditableField
IconLabel={currentEditableFieldDefinition.Icon}
editModeContent={<GenericEditableNumberFieldEditMode />}
displayModeContent={<TextDisplay text={fieldValue} />}
displayModeContent={<NumberDisplay value={fieldValue} />}
isDisplayModeContentEmpty={!fieldValue}
/>
</RecoilScope>

4
front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
View File

@ -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={<TextDisplay text={fieldValue} />}
nonEditModeContent={<NumberDisplay value={fieldValue} />}
></EditableCell>
);
}