Use animated number for counters

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-05-05 14:48:57 +02:00
parent 3e8989c0b0
commit 001234dae1
2 changed files with 10 additions and 5 deletions

View file

@ -15,7 +15,7 @@ const obfuscatedCount = (count: number): string => {
} }
}; };
const shortNumberFormat = (number: any, intl: IntlShape) => { const shortNumberFormat = (number: any, intl: IntlShape, max?: number) => {
if (!isNumber(number)) return '•'; if (!isNumber(number)) return '•';
let value = number; let value = number;
@ -28,6 +28,10 @@ const shortNumberFormat = (number: any, intl: IntlShape) => {
value = roundDown(value / 1000000); value = roundDown(value / 1000000);
} }
if (max && value > max) {
return `${max}+`;
}
return intl.formatNumber(value, { return intl.formatNumber(value, {
maximumFractionDigits: 0, maximumFractionDigits: 0,
minimumFractionDigits: 0, minimumFractionDigits: 0,
@ -41,9 +45,10 @@ interface IAnimatedNumber {
value: number; value: number;
obfuscate?: boolean; obfuscate?: boolean;
short?: boolean; short?: boolean;
max?: number;
} }
const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short }) => { const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short, max }) => {
const intl = useIntl(); const intl = useIntl();
const { reduceMotion } = useSettings(); const { reduceMotion } = useSettings();
@ -61,7 +66,7 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short })
setFormattedValue(obfuscate setFormattedValue(obfuscate
? obfuscatedCount(value) ? obfuscatedCount(value)
: short : short
? shortNumberFormat(value, intl) ? shortNumberFormat(value, intl, max)
: intl.formatNumber(value, { numberingSystem: 'latn' })); : intl.formatNumber(value, { numberingSystem: 'latn' }));
}, [value]); }, [value]);

View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { shortNumberFormat } from 'soapbox/utils/numbers'; import AnimatedNumber from 'soapbox/components/animated-number';
interface ICounter { interface ICounter {
/** Number this counter should display. */ /** Number this counter should display. */
@ -13,7 +13,7 @@ interface ICounter {
const Counter: React.FC<ICounter> = ({ count, countMax }) => { const Counter: React.FC<ICounter> = ({ count, countMax }) => {
return ( return (
<span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'> <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
{shortNumberFormat(count, countMax)} <AnimatedNumber value={count} max={countMax} />
</span> </span>
); );
}; };