diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 8f464e08bd..5be4468a28 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -89,6 +89,35 @@ function computedStyle(element) {
return cssText;
}
+/**
+ * Extracts a human readable label for the file attachment to use as
+ * link text.
+ *
+ * @param {Object} content The "content" key of the matrix event.
+ * @param {boolean} withSize Whether to include size information. Default true.
+ * @return {string} the human readable link text for the attachment.
+ */
+export function presentableTextForFile(content, withSize = true) {
+ let linkText = _t("Attachment");
+ if (content.body && content.body.length > 0) {
+ // The content body should be the name of the file including a
+ // file extension.
+ linkText = content.body;
+ }
+
+ if (content.info && content.info.size && withSize) {
+ // If we know the size of the file then add it as human readable
+ // string to the end of the link text so that the user knows how
+ // big a file they are downloading.
+ // The content.info also contains a MIME-type but we don't display
+ // it since it is "ugly", users generally aren't aware what it
+ // means and the type of the attachment can usually be inferrered
+ // from the file extension.
+ linkText += ' (' + filesize(content.info.size) + ')';
+ }
+ return linkText;
+}
+
@replaceableComponent("views.messages.MFileBody")
export default class MFileBody extends React.Component {
static propTypes = {
@@ -119,35 +148,6 @@ export default class MFileBody extends React.Component {
this._dummyLink = createRef();
}
- /**
- * Extracts a human readable label for the file attachment to use as
- * link text.
- *
- * @param {Object} content The "content" key of the matrix event.
- * @param {boolean} withSize Whether to include size information. Default true.
- * @return {string} the human readable link text for the attachment.
- */
- presentableTextForFile(content, withSize = true) {
- let linkText = _t("Attachment");
- if (content.body && content.body.length > 0) {
- // The content body should be the name of the file including a
- // file extension.
- linkText = content.body;
- }
-
- if (content.info && content.info.size && withSize) {
- // If we know the size of the file then add it as human readable
- // string to the end of the link text so that the user knows how
- // big a file they are downloading.
- // The content.info also contains a MIME-type but we don't display
- // it since it is "ugly", users generally aren't aware what it
- // means and the type of the attachment can usually be inferrered
- // from the file extension.
- linkText += ' (' + filesize(content.info.size) + ')';
- }
- return linkText;
- }
-
_getContentUrl() {
const media = mediaFromContent(this.props.mxEvent.getContent());
return media.srcHttp;
@@ -161,7 +161,7 @@ export default class MFileBody extends React.Component {
render() {
const content = this.props.mxEvent.getContent();
- const text = this.presentableTextForFile(content);
+ const text = presentableTextForFile(content);
const isEncrypted = content.file !== undefined;
const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
const contentUrl = this._getContentUrl();
@@ -173,7 +173,7 @@ export default class MFileBody extends React.Component {
placeholder = (
- {this.presentableTextForFile(content, false)}
+ {presentableTextForFile(content, false)}
);
}
diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js
index cdc78e46e8..5ace22a560 100644
--- a/src/components/views/messages/MImageReplyBody.js
+++ b/src/components/views/messages/MImageReplyBody.js
@@ -1,5 +1,5 @@
/*
-Copyright 2020 Tulir Asokan
+Copyright 2020-2021 Tulir Asokan
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,10 +15,10 @@ limitations under the License.
*/
import React from "react";
-import { _td } from "../../../languageHandler";
+import {_td} from "../../../languageHandler";
import * as sdk from "../../../index";
import MImageBody from './MImageBody';
-import MFileBody from "./MFileBody";
+import {presentableTextForFile} from "./MFileBody";
export default class MImageReplyBody extends MImageBody {
onClick(ev) {
@@ -31,7 +31,7 @@ export default class MImageReplyBody extends MImageBody {
// Don't show "Download this_file.png ..."
getFileBody() {
- return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent());
+ return presentableTextForFile(this.props.mxEvent.getContent());
}
render() {
@@ -45,15 +45,17 @@ export default class MImageReplyBody extends MImageBody {
const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content);
const fileBody = this.getFileBody();
const SenderProfile = sdk.getComponent('messages.SenderProfile');
- const sender = ;
+ const sender = ;
return
-
{ thumbnail }
-
{ sender }
-
{ fileBody }
+
{thumbnail}
+
{sender}
+
{fileBody}
;
}
}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 19c5a7acaa..4411f94f02 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -247,7 +247,7 @@ interface IProps {
// It could also be done by subclassing EventTile, but that'd be quite
// boiilerplatey. So just make the necessary render decisions conditional
// for now.
- tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview';
+ tileShape?: 'notif' | 'file_grid';
// show twelve hour timestamps
isTwelveHour?: boolean;
@@ -940,7 +940,7 @@ export default class EventTile extends React.Component {
}
if (needsSenderProfile) {
- if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
+ if (!this.props.tileShape) {
sender = {
);
}
- case 'reply':
- case 'reply_preview': {
- let thread;
- if (this.props.tileShape === 'reply_preview') {
- thread = ReplyThread.makeThread(
- this.props.mxEvent,
- this.props.onHeightChanged,
- this.props.permalinkCreator,
- this.replyThread,
- );
- }
- return (
-
- { ircTimestamp }
- { avatar }
- { sender }
- { ircPadlock }
-
- { groupTimestamp }
- { groupPadlock }
- { thread }
-
-
-
- );
- }
default: {
const thread = ReplyThread.makeThread(
this.props.mxEvent,
diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js
index 56a6609cc7..222fcea552 100644
--- a/src/components/views/rooms/ReplyPreview.js
+++ b/src/components/views/rooms/ReplyPreview.js
@@ -87,9 +87,11 @@ export default class ReplyPreview extends React.Component {
-
+
;
diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js
index 95503493f7..336c5a721b 100644
--- a/src/components/views/rooms/ReplyTile.js
+++ b/src/components/views/rooms/ReplyTile.js
@@ -1,5 +1,5 @@
/*
-Copyright 2020 Tulir Asokan
+Copyright 2020-2021 Tulir Asokan
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -25,42 +25,8 @@ import dis from '../../../dispatcher/dispatcher';
import SettingsStore from "../../../settings/SettingsStore";
import {MatrixClient} from 'matrix-js-sdk';
-import { objectHasDiff } from '../../../utils/objects';
-
-const eventTileTypes = {
- 'm.room.message': 'messages.MessageEvent',
- 'm.sticker': 'messages.MessageEvent',
- 'm.call.invite': 'messages.TextualEvent',
- 'm.call.answer': 'messages.TextualEvent',
- 'm.call.hangup': 'messages.TextualEvent',
-};
-
-const stateEventTileTypes = {
- 'm.room.aliases': 'messages.TextualEvent',
- // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex
- 'm.room.canonical_alias': 'messages.TextualEvent',
- 'm.room.create': 'messages.RoomCreate',
- 'm.room.member': 'messages.TextualEvent',
- 'm.room.name': 'messages.TextualEvent',
- 'm.room.avatar': 'messages.RoomAvatarEvent',
- 'm.room.third_party_invite': 'messages.TextualEvent',
- 'm.room.history_visibility': 'messages.TextualEvent',
- 'm.room.encryption': 'messages.TextualEvent',
- 'm.room.topic': 'messages.TextualEvent',
- 'm.room.power_levels': 'messages.TextualEvent',
- 'm.room.pinned_events': 'messages.TextualEvent',
- 'm.room.server_acl': 'messages.TextualEvent',
- 'im.vector.modular.widgets': 'messages.TextualEvent',
- 'm.room.tombstone': 'messages.TextualEvent',
- 'm.room.join_rules': 'messages.TextualEvent',
- 'm.room.guest_access': 'messages.TextualEvent',
- 'm.room.related_groups': 'messages.TextualEvent',
-};
-
-function getHandlerTile(ev) {
- const type = ev.getType();
- return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
-}
+import {objectHasDiff} from '../../../utils/objects';
+import {getHandlerTile} from "./EventTile";
class ReplyTile extends React.Component {
static contextTypes = {
@@ -94,7 +60,7 @@ class ReplyTile extends React.Component {
return true;
}
- return !this._propsEqual(this.props, nextProps);
+ return objectHasDiff(this.props, nextProps);
}
componentWillUnmount() {
@@ -108,28 +74,6 @@ class ReplyTile extends React.Component {
}
}
- _propsEqual(objA, objB) {
- const keysA = Object.keys(objA);
- const keysB = Object.keys(objB);
-
- if (keysA.length !== keysB.length) {
- return false;
- }
-
- for (let i = 0; i < keysA.length; i++) {
- const key = keysA[i];
-
- if (!objB.hasOwnProperty(key)) {
- return false;
- }
-
- if (objA[key] !== objB[key]) {
- return false;
- }
- }
- return true;
- }
-
onClick(e) {
// This allows the permalink to be opened in a new tab/window or copied as
// matrix.to, but also for it to enable routing within Riot when clicked.