Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into export-conversations

src/utils/FileDownloader.ts

@@ -43,9 +43,8 @@ function getManagedIframe(): { iframe: HTMLIFrameElement, onLoadPromise: Promise
 
     // Dev note: the reassignment warnings are entirely incorrect here.
 
-    // @ts-ignore
-    // noinspection JSConstantReassignment
-    managedIframe.style = { display: "none" };
+    managedIframe.style.display = "none";
+
     // @ts-ignore
     // noinspection JSConstantReassignment
     managedIframe.sandbox = "allow-scripts allow-downloads allow-downloads-without-user-activation";

src/utils/FormattingUtils.ts

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import { _t } from '../languageHandler';
+import { jsxJoin } from './ReactUtils';
 
 /**
  * formats numbers to fit into ~3 characters, suitable for badge counts
@@ -103,7 +104,7 @@ 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: string[], itemLimit?: number): string {
+export function formatCommaSeparatedList(items: Array<string | JSX.Element>, itemLimit?: number): string | JSX.Element {
     const remaining = itemLimit === undefined ? 0 : Math.max(
         items.length - itemLimit, 0,
     );
@@ -113,9 +114,9 @@ export function formatCommaSeparatedList(items: string[], itemLimit?: number): s
         return items[0];
     } else if (remaining > 0) {
         items = items.slice(0, itemLimit);
-        return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
+        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: items.join(', '), lastItem: lastItem });
+        return _t("%(items)s and %(lastItem)s", { items: jsxJoin(items, ', '), lastItem: lastItem });
     }
 }

src/utils/ReactUtils.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+/**
+ * Joins an array into one value with a joiner. E.g. join(["hello", "world"], " ") -> <span>hello world</span>
+ * @param array the array of element to join
+ * @param joiner the string/JSX.Element to join with
+ * @returns the joined array
+ */
+export function jsxJoin(array: Array<string | JSX.Element>, joiner?: string | JSX.Element): JSX.Element {
+    const newArray = [];
+    array.forEach((element, index) => {
+        newArray.push(element, (index === array.length - 1) ? null : joiner);
+    });
+    return (
+        <span>{ newArray }</span>
+    );
+}