Use animated number for counters
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
3e8989c0b0
commit
001234dae1
2 changed files with 10 additions and 5 deletions
|
@ -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]);
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue