matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add max count to sidebar icons

Browse Source
This commit is contained in:
Chewbacca
2022-11-03 12:13:45 -04:00
parent d0960de07c
commit be136fe6cf
8 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/soapbox/utils/__tests__/numbers.test.tsx
View File

@ -27,6 +27,11 @@ describe('shortNumberFormat', () => {
expect(screen.getByTestId('num')).toHaveTextContent('•');
});
test('handles max argument', () => {
render(<div data-testid='num'>{shortNumberFormat(25, 20)}</div>, undefined, null);
expect(screen.getByTestId('num')).toHaveTextContent('20+');
});
test('formats numbers under 1,000', () => {
render(<div data-testid='num'>{shortNumberFormat(555)}</div>, undefined, null);
expect(screen.getByTestId('num')).toHaveTextContent('555');

6
app/soapbox/utils/numbers.tsx
View File

@ -16,7 +16,7 @@ const roundDown = (num: number) => {
};
/** Display a number nicely for the UI, eg 1000 becomes 1K. */
export const shortNumberFormat = (number: any): React.ReactNode => {
export const shortNumberFormat = (number: any, max?: number): React.ReactNode => {
if (!isNumber(number)) return '•';
let value = number;
@ -29,6 +29,10 @@ export const shortNumberFormat = (number: any): React.ReactNode => {
value = roundDown(value / 1000000);
}
if (max && value > max) {
return <span>{max}+</span>;
}
return (
<span>
<FormattedNumber