signal-desktop/ts/components/SharedGroupNames.tsx
Jamie Kyle 0e490542a7
RTL
2023-04-20 10:03:43 -07:00

96 lines
2.2 KiB
TypeScript

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { take } from 'lodash';
import { Intl } from './Intl';
import type { LocalizerType } from '../types/Util';
import { UserText } from './UserText';
type PropsType = {
i18n: LocalizerType;
nameClassName?: string;
sharedGroupNames: ReadonlyArray<string>;
};
export function SharedGroupNames({
i18n,
nameClassName,
sharedGroupNames,
}: PropsType): JSX.Element {
const firstThreeGroups = take(sharedGroupNames, 3).map((group, i) => (
// We cannot guarantee uniqueness of group names
// eslint-disable-next-line react/no-array-index-key
<strong key={i} className={nameClassName}>
<UserText text={group} />
</strong>
));
if (sharedGroupNames.length >= 5) {
const remainingCount = sharedGroupNames.length - 3;
return (
<Intl
i18n={i18n}
id="icu:member-of-more-than-3-groups--multiple-more"
components={{
group1: firstThreeGroups[0],
group2: firstThreeGroups[1],
group3: firstThreeGroups[2],
remainingCount,
}}
/>
);
}
if (sharedGroupNames.length === 4) {
return (
<Intl
i18n={i18n}
id="icu:member-of-more-than-3-groups--one-more"
components={{
group1: firstThreeGroups[0],
group2: firstThreeGroups[1],
group3: firstThreeGroups[2],
}}
/>
);
}
if (firstThreeGroups.length === 3) {
return (
<Intl
i18n={i18n}
id="icu:member-of-3-groups"
components={{
group1: firstThreeGroups[0],
group2: firstThreeGroups[1],
group3: firstThreeGroups[2],
}}
/>
);
}
if (firstThreeGroups.length >= 2) {
return (
<Intl
i18n={i18n}
id="icu:member-of-2-groups"
components={{
group1: firstThreeGroups[0],
group2: firstThreeGroups[1],
}}
/>
);
}
if (firstThreeGroups.length >= 1) {
return (
<Intl
i18n={i18n}
id="icu:member-of-1-group"
components={{
group: firstThreeGroups[0],
}}
/>
);
}
return <>{i18n('icu:no-groups-in-common')}</>;
}