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.
74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
// @ts-check
|
|
import React from 'react';
|
|
import { Sparklines, SparklinesCurve } from 'react-sparklines';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import Permalink from './permalink';
|
|
import ShortNumber from 'mastodon/components/short_number';
|
|
|
|
/**
|
|
* Used to render counter of how much people are talking about hashtag
|
|
*
|
|
* @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
|
|
*/
|
|
const accountsCountRenderer = (displayNumber, pluralReady) => (
|
|
<FormattedMessage
|
|
id='trends.counter_by_accounts'
|
|
defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking'
|
|
values={{
|
|
count: pluralReady,
|
|
counter: <strong>{displayNumber}</strong>,
|
|
}}
|
|
/>
|
|
);
|
|
|
|
const Hashtag = ({ hashtag }) => (
|
|
<div className='trends__item'>
|
|
<div className='trends__item__name'>
|
|
<Permalink
|
|
href={hashtag.get('url')}
|
|
to={`/timelines/tag/${hashtag.get('name')}`}
|
|
>
|
|
#<span>{hashtag.get('name')}</span>
|
|
</Permalink>
|
|
|
|
<ShortNumber
|
|
value={
|
|
hashtag.getIn(['history', 0, 'accounts']) * 1 +
|
|
hashtag.getIn(['history', 1, 'accounts']) * 1
|
|
}
|
|
renderer={accountsCountRenderer}
|
|
/>
|
|
</div>
|
|
|
|
<div className='trends__item__current'>
|
|
<ShortNumber
|
|
value={
|
|
hashtag.getIn(['history', 0, 'uses']) * 1 +
|
|
hashtag.getIn(['history', 1, 'uses']) * 1
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className='trends__item__sparkline'>
|
|
<Sparklines
|
|
width={50}
|
|
height={28}
|
|
data={hashtag
|
|
.get('history')
|
|
.reverse()
|
|
.map((day) => day.get('uses'))
|
|
.toArray()}
|
|
>
|
|
<SparklinesCurve style={{ fill: 'none' }} />
|
|
</Sparklines>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
Hashtag.propTypes = {
|
|
hashtag: ImmutablePropTypes.map.isRequired,
|
|
};
|
|
|
|
export default Hashtag;
|