mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-24 12:48:07 +01:00
cb2adaaf9d
This commit introduces new utility component - ShortNumber. It should work almost the same way as original shortNumberFormat function, though it also localizes units and accepts one more prop - renderer. Renderer is a function that takes rendered short formatted number and also ready-to-pluralize number to format display result accordingly. Ready-to-pluralize number allows to correctly select plural for compactly notated numbers, respecting thousands and other units. Issue #12451 accurately describes the issue with using raw numbers when replacing counter with short version. In short, it doesn't work with languages such as Russian, that require different plurals, according to the unit number was compacted to. All previous usages of shortNumberFormat were replaced with new function, and as it became unused, it was removed to avoid misleading.
62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
// @ts-check
|
|
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
/**
|
|
* Returns custom renderer for one of the common counter types
|
|
*
|
|
* @param {"statuses" | "following" | "followers"} counterType
|
|
* Type of the counter
|
|
* @param {boolean} isBold Whether display number must be displayed in bold
|
|
* @returns {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
|
|
* Renderer function
|
|
* @throws If counterType is not covered by this function
|
|
*/
|
|
export function counterRenderer(counterType, isBold = true) {
|
|
/**
|
|
* @type {(displayNumber: JSX.Element) => JSX.Element}
|
|
*/
|
|
const renderCounter = isBold
|
|
? (displayNumber) => <strong>{displayNumber}</strong>
|
|
: (displayNumber) => displayNumber;
|
|
|
|
switch (counterType) {
|
|
case 'statuses': {
|
|
return (displayNumber, pluralReady) => (
|
|
<FormattedMessage
|
|
id='account.statuses_counter'
|
|
defaultMessage='{count, plural, one {{counter} Toot} other {{counter} Toots}}'
|
|
values={{
|
|
count: pluralReady,
|
|
counter: renderCounter(displayNumber),
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
case 'following': {
|
|
return (displayNumber, pluralReady) => (
|
|
<FormattedMessage
|
|
id='account.following_counter'
|
|
defaultMessage='{count, plural, other {{counter} Following}}'
|
|
values={{
|
|
count: pluralReady,
|
|
counter: renderCounter(displayNumber),
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
case 'followers': {
|
|
return (displayNumber, pluralReady) => (
|
|
<FormattedMessage
|
|
id='account.followers_counter'
|
|
defaultMessage='{count, plural, one {{counter} Follower} other {{counter} Followers}}'
|
|
values={{
|
|
count: pluralReady,
|
|
counter: renderCounter(displayNumber),
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
default: throw Error(`Incorrect counter name: ${counterType}. Ensure it accepted by commonCounter function`);
|
|
}
|
|
}
|