Merge remote-tracking branch 'upstream/develop' into feature/call-event-tile

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/messages/EditHistoryMessage.js

@@ -110,20 +110,20 @@ export default class EditHistoryMessage extends React.PureComponent {
         if (!this.props.mxEvent.isRedacted() && !this.props.isBaseEvent && this.state.canRedact) {
             redactButton = (
                 <AccessibleButton onClick={this._onRedactClick}>
-                    {_t("Remove")}
+                    { _t("Remove") }
                 </AccessibleButton>
             );
         }
         const viewSourceButton = (
             <AccessibleButton onClick={this._onViewSourceClick}>
-                {_t("View Source")}
+                { _t("View Source") }
             </AccessibleButton>
         );
         // disabled remove button when not allowed
         return (
             <div className="mx_MessageActionBar">
-                {redactButton}
-                {viewSourceButton}
+                { redactButton }
+                { viewSourceButton }
             </div>
         );
     }
@@ -146,11 +146,11 @@ export default class EditHistoryMessage extends React.PureComponent {
                 contentContainer = (
                     <div className="mx_EventTile_content" ref={this._content}>*&nbsp;
                         <span className="mx_MEmoteBody_sender">{ name }</span>
-                        &nbsp;{contentElements}
+                        &nbsp;{ contentElements }
                     </div>
                 );
             } else {
-                contentContainer = <div className="mx_EventTile_content" ref={this._content}>{contentElements}</div>;
+                contentContainer = <div className="mx_EventTile_content" ref={this._content}>{ contentElements }</div>;
             }
         }
 
@@ -165,7 +165,7 @@ export default class EditHistoryMessage extends React.PureComponent {
             <li>
                 <div className={classes}>
                     <div className="mx_EventTile_line">
-                        <span className="mx_MessageTimestamp">{timestamp}</span>
+                        <span className="mx_MessageTimestamp">{ timestamp }</span>
                         { contentContainer }
                         { this._renderActionBar() }
                     </div>

src/components/views/messages/MFileBody.js

@@ -211,7 +211,7 @@ export default class MFileBody extends React.Component {
                 // but it is not guaranteed between various browsers' settings.
                 return (
                     <span className="mx_MFileBody">
-                        {placeholder}
+                        { placeholder }
                         <div className="mx_MFileBody_download">
                             <AccessibleButton onClick={decrypt}>
                                 { _t("Decrypt %(text)s", { text: text }) }
@@ -243,7 +243,7 @@ export default class MFileBody extends React.Component {
             // If the attachment is encrypted then put the link inside an iframe.
             return (
                 <span className="mx_MFileBody">
-                    {placeholder}
+                    { placeholder }
                     <div className="mx_MFileBody_download">
                         <div style={{ display: "none" }}>
                             { /*
@@ -312,7 +312,7 @@ export default class MFileBody extends React.Component {
             if (this.props.tileShape === TileShape.FileGrid) {
                 return (
                     <span className="mx_MFileBody">
-                        {placeholder}
+                        { placeholder }
                         <div className="mx_MFileBody_download">
                             <a className="mx_MFileBody_downloadLink" {...downloadProps}>
                                 { fileName }
@@ -326,7 +326,7 @@ export default class MFileBody extends React.Component {
             } else {
                 return (
                     <span className="mx_MFileBody">
-                        {placeholder}
+                        { placeholder }
                         <div className="mx_MFileBody_download">
                             <a {...downloadProps}>
                                 <span className="mx_MFileBody_download_icon" />
@@ -339,7 +339,7 @@ export default class MFileBody extends React.Component {
         } else {
             const extra = text ? (': ' + text) : '';
             return <span className="mx_MFileBody">
-                {placeholder}
+                { placeholder }
                 { _t("Invalid file%(extra)s", { extra: extra }) }
             </span>;
         }

src/components/views/messages/MImageBody.tsx

@@ -304,13 +304,6 @@ export default class MImageBody extends React.Component<IProps, IState> {
             this.downloadImage();
             this.setState({ showImage: true });
         }
-
-        this._afterComponentDidMount();
-    }
-
-    // To be overridden by subclasses (e.g. MStickerBody) for further
-    // initialisation after componentDidMount
-    _afterComponentDidMount() {
     }
 
     componentWillUnmount() {
@@ -432,7 +425,7 @@ export default class MImageBody extends React.Component<IProps, IState> {
     // Overidden by MStickerBody
     protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
         return <a href={contentUrl} onClick={this.onClick}>
-            {children}
+            { children }
         </a>;
     }
 
@@ -440,9 +433,9 @@ export default class MImageBody extends React.Component<IProps, IState> {
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (blurhash) return <Blurhash hash={blurhash} width={width} height={height} />;
-        return <div className="mx_MImageBody_thumbnail_spinner">
+        return (
             <InlineSpinner w={32} h={32} />
-        </div>;
+        );
     }
 
     // Overidden by MStickerBody
@@ -499,7 +492,7 @@ export class HiddenImagePlaceholder extends React.PureComponent<PlaceholderIProp
             <div className={className} style={{ maxWidth: maxWidth }}>
                 <div className='mx_HiddenImagePlaceholder_button'>
                     <span className='mx_HiddenImagePlaceholder_eye' />
-                    <span>{_t("Show image")}</span>
+                    <span>{ _t("Show image") }</span>
                 </div>
             </div>
         );

src/components/views/messages/MKeyVerificationRequest.tsx

@@ -131,7 +131,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
             const accepted = request.ready || request.started || request.done;
             if (accepted) {
                 stateLabel = (<AccessibleButton onClick={this.openRequest}>
-                    {this.acceptedLabel(request.receivingUserId)}
+                    { this.acceptedLabel(request.receivingUserId) }
                 </AccessibleButton>);
             } else if (request.cancelled) {
                 stateLabel = this.cancelledLabel(request.cancellingUserId);
@@ -140,7 +140,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
             } else if (request.declining) {
                 stateLabel = _t("Declining …");
             }
-            stateNode = (<div className="mx_cryptoEvent_state">{stateLabel}</div>);
+            stateNode = (<div className="mx_cryptoEvent_state">{ stateLabel }</div>);
         }
 
         if (!request.initiatedByMe) {
@@ -150,10 +150,10 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
             if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
                     <AccessibleButton kind="danger" onClick={this.onRejectClicked}>
-                        {_t("Decline")}
+                        { _t("Decline") }
                     </AccessibleButton>
                     <AccessibleButton kind="primary" onClick={this.onAcceptClicked}>
-                        {_t("Accept")}
+                        { _t("Accept") }
                     </AccessibleButton>
                 </div>);
             }

src/components/views/messages/MessageActionBar.js

@@ -286,7 +286,7 @@ export default class MessageActionBar extends React.PureComponent {
 
         // aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
         return <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
-            {toolbarOpts}
+            { toolbarOpts }
         </Toolbar>;
     }
 }

src/components/views/messages/MessageTimestamp.tsx

@@ -45,7 +45,7 @@ export default class MessageTimestamp extends React.Component<IProps> {
                 title={formatFullDate(date, this.props.showTwelveHour)}
                 aria-hidden={true}
             >
-                {timestamp}
+                { timestamp }
             </span>
         );
     }

src/components/views/messages/MjolnirBody.js

@@ -41,10 +41,10 @@ export default class MjolnirBody extends React.Component {
 
     render() {
         return (
-            <div className='mx_MjolnirBody'><i>{_t(
+            <div className='mx_MjolnirBody'><i>{ _t(
                 "You have ignored this user, so their message is hidden. <a>Show anyways.</a>",
-                {}, { a: (sub) => <a href="#" onClick={this._onAllowClick}>{sub}</a> },
-            )}</i></div>
+                {}, { a: (sub) => <a href="#" onClick={this._onAllowClick}>{ sub }</a> },
+            ) }</i></div>
         );
     }
 }

src/components/views/messages/ReactionsRow.tsx

@@ -199,7 +199,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
                 href="#"
                 onClick={this.onShowAllClick}
             >
-                {_t("Show all")}
+                { _t("Show all") }
             </a>;
         }
 

src/components/views/messages/ReactionsRowButton.tsx

@@ -142,12 +142,12 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             onMouseLeave={this.onMouseLeave}
         >
             <span className="mx_ReactionsRowButton_content" aria-hidden="true">
-                {content}
+                { content }
             </span>
             <span className="mx_ReactionsRowButton_count" aria-hidden="true">
-                {count}
+                { count }
             </span>
-            {tooltip}
+            { tooltip }
         </AccessibleButton>;
     }
 }

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -51,7 +51,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
                 senders.push(name);
             }
             const shortName = unicodeToShortcode(content);
-            tooltipLabel = <div>{_t(
+            tooltipLabel = <div>{ _t(
                 "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
                 {
                     shortName,
@@ -59,7 +59,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
                 {
                     reactors: () => {
                         return <div className="mx_Tooltip_title">
-                            {formatCommaSeparatedList(senders, 6)}
+                            { formatCommaSeparatedList(senders, 6) }
                         </div>;
                     },
                     reactedWith: (sub) => {
@@ -67,11 +67,11 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
                             return null;
                         }
                         return <div className="mx_Tooltip_sub">
-                            {sub}
+                            { sub }
                         </div>;
                     },
                 },
-            )}</div>;
+            ) }</div>;
         }
 
         let tooltip;

src/components/views/messages/RoomCreate.js

@@ -56,7 +56,7 @@ export default class RoomCreate extends React.Component {
         const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
         const link = (
             <a href={predecessorPermalink} onClick={this._onLinkClicked}>
-                {_t("Click here to see older messages.")}
+                { _t("Click here to see older messages.") }
             </a>
         );
 

src/components/views/messages/TextualBody.tsx

@@ -475,10 +475,10 @@ export default class TextualBody extends React.Component<IProps, IState> {
 
         const tooltip = <div>
             <div className="mx_Tooltip_title">
-                {_t("Edited at %(date)s", { date: dateString })}
+                { _t("Edited at %(date)s", { date: dateString }) }
             </div>
             <div className="mx_Tooltip_sub">
-                {_t("Click to view edits")}
+                { _t("Click to view edits") }
             </div>
         </div>;
 
@@ -489,7 +489,7 @@ export default class TextualBody extends React.Component<IProps, IState> {
                 title={_t("Edited at %(date)s. Click to view edits.", { date: dateString })}
                 tooltip={tooltip}
             >
-                <span>{`(${_t("edited")})`}</span>
+                <span>{ `(${_t("edited")})` }</span>
             </AccessibleTooltipButton>
         );
     }
@@ -513,8 +513,8 @@ export default class TextualBody extends React.Component<IProps, IState> {
         });
         if (this.props.replacingEventId) {
             body = <>
-                {body}
-                {this.renderEditedMarker()}
+                { body }
+                { this.renderEditedMarker() }
             </>;
         }
 

src/components/views/messages/TileErrorBoundary.tsx

@@ -67,14 +67,14 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
             let submitLogsButton;
             if (SdkConfig.get().bug_report_endpoint_url) {
                 submitLogsButton = <a onClick={this.onBugReport} href="#">
-                    {_t("Submit logs")}
+                    { _t("Submit logs") }
                 </a>;
             }
 
             return (<div className={classNames(classes)}>
                 <div className="mx_EventTile_line">
                     <span>
-                        {_t("Can't load this message")}
+                        { _t("Can't load this message") }
                         { mxEvent && ` (${mxEvent.getType()})` }
                         { submitLogsButton }
                     </span>

src/components/views/messages/UnknownBody.tsx

@@ -16,12 +16,19 @@ limitations under the License.
 */
 
 import React, { forwardRef } from "react";
+import { MatrixEvent } from "matrix-js-sdk/src";
 
-export default forwardRef(({ mxEvent }, ref) => {
+interface IProps {
+    mxEvent: MatrixEvent;
+    children?: React.ReactNode;
+}
+
+export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject<HTMLSpanElement>) => {
     const text = mxEvent.getContent().body;
     return (
         <span className="mx_UnknownBody" ref={ref}>
             { text }
+            { children }
         </span>
     );
 });

src/components/views/messages/ViewSourceEvent.js

@@ -60,9 +60,9 @@ export default class ViewSourceEvent extends React.PureComponent {
 
         let content;
         if (expanded) {
-            content = <pre>{JSON.stringify(mxEvent, null, 4)}</pre>;
+            content = <pre>{ JSON.stringify(mxEvent, null, 4) }</pre>;
         } else {
-            content = <code>{`{ "type": ${mxEvent.getType()} }`}</code>;
+            content = <code>{ `{ "type": ${mxEvent.getType()} }` }</code>;
         }
 
         const classes = classNames("mx_ViewSourceEvent mx_EventTile_content", {
@@ -70,7 +70,7 @@ export default class ViewSourceEvent extends React.PureComponent {
         });
 
         return <span className={classes}>
-            {content}
+            { content }
             <a
                 className="mx_ViewSourceEvent_toggle"
                 href="#"