Merge pull request #6369 from matrix-org/travis/tileshape

Use TileShape enum more universally

src/components/views/elements/ReplyThread.js

@@ -1,7 +1,6 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -32,6 +31,7 @@ import sanitizeHtml from "sanitize-html";
 import { UIFeature } from "../../../settings/UIFeature";
 import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { TileShape } from "../rooms/EventTile";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -384,7 +384,7 @@ export default class ReplyThread extends React.Component {
                 { dateSep }
                 <EventTile
                     mxEvent={ev}
-                    tileShape="reply"
+                    tileShape={TileShape.Reply}
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}

src/components/views/messages/MFileBody.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2018, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,6 +24,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import ErrorDialog from "../dialogs/ErrorDialog";
+import { TileShape } from "../rooms/EventTile";
 
 let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
 
@@ -306,7 +307,7 @@ export default class MFileBody extends React.Component {
             // If the attachment is not encrypted then we check whether we
             // are being displayed in the room timeline or in a list of
             // files in the right hand side of the screen.
-            if (this.props.tileShape === "file_grid") {
+            if (this.props.tileShape === TileShape.FileGrid) {
                 return (
                     <span className="mx_MFileBody">
                         {placeholder}

src/components/views/messages/MessageEvent.js

@@ -42,7 +42,7 @@ export default class MessageEvent extends React.Component {
         onHeightChanged: PropTypes.func,
 
         /* the shape of the tile, used */
-        tileShape: PropTypes.string,
+        tileShape: PropTypes.string, // TODO: Use TileShape enum
 
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,

src/components/views/rooms/EventTile.tsx

@@ -902,7 +902,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             mx_EventTile_12hr: this.props.isTwelveHour,
             // Note: we keep the `sending` state class for tests, not for our styles
             mx_EventTile_sending: !isEditing && isSending,
-            mx_EventTile_highlight: this.props.tileShape === 'notif' ? false : this.shouldHighlight(),
+            mx_EventTile_highlight: this.props.tileShape === TileShape.Notif ? false : this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
             mx_EventTile_last: this.props.last,
@@ -935,7 +935,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         let avatarSize;
         let needsSenderProfile;
 
-        if (this.props.tileShape === "notif") {
+        if (this.props.tileShape === TileShape.Notif) {
             avatarSize = 24;
             needsSenderProfile = true;
         } else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) {
@@ -949,7 +949,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         } else if (this.props.layout == Layout.IRC) {
             avatarSize = 14;
             needsSenderProfile = true;
-        } else if (this.props.continuation && this.props.tileShape !== "file_grid") {
+        } else if (this.props.continuation && this.props.tileShape !== TileShape.FileGrid) {
             // no avatar or sender profile for continuation messages
             avatarSize = 0;
             needsSenderProfile = false;
@@ -979,7 +979,11 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
 
         if (needsSenderProfile) {
-            if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
+            if (
+                !this.props.tileShape
+                || this.props.tileShape === TileShape.Reply
+                || this.props.tileShape === TileShape.ReplyPreview
+            ) {
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                     mxEvent={this.props.mxEvent}
                     enableFlair={this.props.enableFlair}
@@ -1065,7 +1069,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         }
 
         switch (this.props.tileShape) {
-            case 'notif': {
+            case TileShape.Notif: {
                 const room = this.context.getRoom(this.props.mxEvent.getRoomId());
                 return React.createElement(this.props.as || "li", {
                     "className": classes,
@@ -1097,7 +1101,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                     </div>,
                 ]);
             }
-            case 'file_grid': {
+            case TileShape.FileGrid: {
                 return React.createElement(this.props.as || "li", {
                     "className": classes,
                     "aria-live": ariaLive,
@@ -1128,10 +1132,10 @@ export default class EventTile extends React.Component<IProps, IState> {
                 ]);
             }
 
-            case 'reply':
+            case TileShape.Reply:
-            case 'reply_preview': {
+            case TileShape.ReplyPreview: {
                 let thread;
-                if (this.props.tileShape === 'reply_preview') {
+                if (this.props.tileShape === TileShape.ReplyPreview) {
                     thread = ReplyThread.makeThread(
                         this.props.mxEvent,
                         this.props.onHeightChanged,

src/components/views/rooms/ReplyPreview.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,6 +24,7 @@ import PropTypes from "prop-types";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { UIFeature } from "../../../settings/UIFeature";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { TileShape } from "./EventTile";
 
 function cancelQuoting() {
     dis.dispatch({
@@ -90,7 +91,7 @@ export default class ReplyPreview extends React.Component {
                 <div className="mx_ReplyPreview_clear" />
                 <EventTile
                     alwaysShowTimestamps={true}
-                    tileShape="reply_preview"
+                    tileShape={TileShape.ReplyPreview}
                     mxEvent={this.state.event}
                     permalinkCreator={this.props.permalinkCreator}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}