diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 0722cb872af..4eb0177fef6 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -135,7 +135,7 @@ export default class MemberEventListSummary extends React.Component { const desc = formatCommaSeparatedList(descs); - return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc }); + return _t('%(nameList)s %(transitionList)s', { nameList, transitionList: desc }); }); if (!summaries) { diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx index 7498a491731..8934b2b98fb 100644 --- a/src/components/views/messages/ReactionsRowButton.tsx +++ b/src/components/views/messages/ReactionsRowButton.tsx @@ -106,31 +106,20 @@ export default class ReactionsRowButton extends React.PureComponent reacted with %(content)s", - { - content, - }, - { - reactors: () => { - return formatCommaSeparatedList(senders, 6); - }, - reactedWith: (sub) => { - if (!content) { - return null; - } - return sub; - }, - }, - ); } const isPeeking = room.getMyMembership() !== "join"; return reacted with %(content)s": " reacted with %(content)s", + "%(reactors)s reacted with %(content)s": "%(reactors)s reacted with %(content)s", "reacted with %(shortName)s": "reacted with %(shortName)s", "Message deleted": "Message deleted", "Message deleted by %(name)s": "Message deleted by %(name)s", diff --git a/src/utils/FormattingUtils.ts b/src/utils/FormattingUtils.ts index b527ee7ea2c..265deaed38d 100644 --- a/src/utils/FormattingUtils.ts +++ b/src/utils/FormattingUtils.ts @@ -104,7 +104,10 @@ export function getUserNameColorClass(userId: string): string { * @returns {string} a string constructed by joining `items` with a comma * between each item, but with the last item appended as " and [lastItem]". */ -export function formatCommaSeparatedList(items: Array, itemLimit?: number): string | JSX.Element { +export function formatCommaSeparatedList(items: string[], itemLimit?: number): string; +export function formatCommaSeparatedList(items: JSX.Element[], itemLimit?: number): JSX.Element; +export function formatCommaSeparatedList(items: Array, itemLimit?: number): JSX.Element | string; +export function formatCommaSeparatedList(items: Array, itemLimit?: number): JSX.Element | string { const remaining = itemLimit === undefined ? 0 : Math.max( items.length - itemLimit, 0, ); @@ -112,11 +115,25 @@ export function formatCommaSeparatedList(items: Array, ite return ""; } else if (items.length === 1) { return items[0]; - } else if (remaining > 0) { - items = items.slice(0, itemLimit); - return _t("%(items)s and %(count)s others", { items: jsxJoin(items, ', '), count: remaining } ); } else { - const lastItem = items.pop(); - return _t("%(items)s and %(lastItem)s", { items: jsxJoin(items, ', '), lastItem: lastItem }); + let lastItem; + if (remaining > 0) { + items = items.slice(0, itemLimit); + } else { + lastItem = items.pop(); + } + + let joinedItems; + if (items.every(e => typeof e === "string")) { + joinedItems = items.join(", "); + } else { + joinedItems = jsxJoin(items, ", "); + } + + if (remaining > 0) { + return _t("%(items)s and %(count)s others", { items: joinedItems, count: remaining } ); + } else { + return _t("%(items)s and %(lastItem)s", { items: joinedItems, lastItem }); + } } }