feat(memberCount): format count according to user locale (#1679)

This commit is contained in:
Ryan Cao 2023-09-06 01:46:33 +08:00 committed by GitHub
parent faeb4fb585
commit aecd9d8fda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -30,6 +30,9 @@ const ChannelMemberStore = findStoreLazy("ChannelMemberStore") as FluxStore & {
getProps(guildId: string, channelId: string): { groups: { count: number; id: string; }[]; }; getProps(guildId: string, channelId: string): { groups: { count: number; id: string; }[]; };
}; };
const sharedIntlNumberFormat = new Intl.NumberFormat();
const numberFormat = (value: number) => sharedIntlNumberFormat.format(value);
function MemberCount() { function MemberCount() {
const { id: channelId, guild_id: guildId } = useStateFromStores([SelectedChannelStore], () => getCurrentChannel()); const { id: channelId, guild_id: guildId } = useStateFromStores([SelectedChannelStore], () => getCurrentChannel());
const { groups } = useStateFromStores( const { groups } = useStateFromStores(
@ -57,7 +60,7 @@ function MemberCount() {
alignContent: "center", alignContent: "center",
gap: 0 gap: 0
}}> }}>
<Tooltip text={`${online} Online in this Channel`} position="bottom"> <Tooltip text={`${numberFormat(online)} online in this channel`} position="bottom">
{props => ( {props => (
<div {...props}> <div {...props}>
<span <span
@ -70,11 +73,11 @@ function MemberCount() {
marginRight: "0.5em" marginRight: "0.5em"
}} }}
/> />
<span style={{ color: "var(--green-360)" }}>{online}</span> <span style={{ color: "var(--green-360)" }}>{numberFormat(online)}</span>
</div> </div>
)} )}
</Tooltip> </Tooltip>
<Tooltip text={`${total} Total Server Members`} position="bottom"> <Tooltip text={`${numberFormat(total)} total server members`} position="bottom">
{props => ( {props => (
<div {...props}> <div {...props}>
<span <span
@ -88,7 +91,7 @@ function MemberCount() {
marginLeft: "1em" marginLeft: "1em"
}} }}
/> />
<span style={{ color: "var(--primary-400)" }}>{total}</span> <span style={{ color: "var(--primary-400)" }}>{numberFormat(total)}</span>
</div> </div>
)} )}
</Tooltip> </Tooltip>