diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.tsx
similarity index 73%
rename from src/components/views/messages/EditHistoryMessage.js
rename to src/components/views/messages/EditHistoryMessage.tsx
index 2c6a567f6b..1abed87b76 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.tsx
@@ -15,107 +15,112 @@ limitations under the License.
*/
import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
import * as HtmlUtils from '../../../HtmlUtils';
import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
import { formatTime } from '../../../DateUtils';
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { pillifyLinks, unmountPills } from '../../../utils/pillify';
import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import classNames from 'classnames';
import RedactedBody from "./RedactedBody";
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from "../elements/AccessibleButton";
+import ConfirmAndWaitRedactDialog from "../dialogs/ConfirmAndWaitRedactDialog";
+import ViewSource from "../../structures/ViewSource";
function getReplacedContent(event) {
const originalContent = event.getOriginalContent();
return originalContent["m.new_content"] || originalContent;
}
-@replaceableComponent("views.messages.EditHistoryMessage")
-export default class EditHistoryMessage extends React.PureComponent {
- static propTypes = {
- // the message event being edited
- mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
- previousEdit: PropTypes.instanceOf(MatrixEvent),
- isBaseEvent: PropTypes.bool,
- };
+interface IProps {
+ // the message event being edited
+ mxEvent: MatrixEvent;
+ previousEdit?: MatrixEvent;
+ isBaseEvent?: boolean;
+ isTwelveHour?: boolean;
+}
- constructor(props) {
+interface IState {
+ canRedact: boolean;
+ sendStatus: EventStatus;
+}
+
+@replaceableComponent("views.messages.EditHistoryMessage")
+export default class EditHistoryMessage extends React.PureComponent
{
+ private content = createRef();
+ private pills: Element[] = [];
+
+ constructor(props: IProps) {
super(props);
+
const cli = MatrixClientPeg.get();
const { userId } = cli.credentials;
const event = this.props.mxEvent;
const room = cli.getRoom(event.getRoomId());
if (event.localRedactionEvent()) {
- event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
+ event.localRedactionEvent().on("status", this.onAssociatedStatusChanged);
}
const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
this.state = { canRedact, sendStatus: event.getAssociatedStatus() };
-
- this._content = createRef();
- this._pills = [];
}
- _onAssociatedStatusChanged = () => {
+ private onAssociatedStatusChanged = (): void => {
this.setState({ sendStatus: this.props.mxEvent.getAssociatedStatus() });
};
- _onRedactClick = async () => {
+ private onRedactClick = async (): Promise => {
const event = this.props.mxEvent;
const cli = MatrixClientPeg.get();
- const ConfirmAndWaitRedactDialog = sdk.getComponent("dialogs.ConfirmAndWaitRedactDialog");
Modal.createTrackedDialog('Confirm Redact Dialog', 'Edit history', ConfirmAndWaitRedactDialog, {
redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
}, 'mx_Dialog_confirmredact');
};
- _onViewSourceClick = () => {
- const ViewSource = sdk.getComponent('structures.ViewSource');
+ private onViewSourceClick = (): void => {
Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
mxEvent: this.props.mxEvent,
}, 'mx_Dialog_viewsource');
};
- pillifyLinks() {
+ private pillifyLinks(): void {
// not present for redacted events
- if (this._content.current) {
- pillifyLinks(this._content.current.children, this.props.mxEvent, this._pills);
+ if (this.content.current) {
+ pillifyLinks(this.content.current.children, this.props.mxEvent, this.pills);
}
}
- componentDidMount() {
+ public componentDidMount(): void {
this.pillifyLinks();
}
- componentWillUnmount() {
- unmountPills(this._pills);
+ public componentWillUnmount(): void {
+ unmountPills(this.pills);
const event = this.props.mxEvent;
if (event.localRedactionEvent()) {
- event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);
+ event.localRedactionEvent().off("status", this.onAssociatedStatusChanged);
}
}
- componentDidUpdate() {
+ public componentDidUpdate(): void {
this.pillifyLinks();
}
- _renderActionBar() {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ private renderActionBar(): JSX.Element {
// hide the button when already redacted
let redactButton;
if (!this.props.mxEvent.isRedacted() && !this.props.isBaseEvent && this.state.canRedact) {
redactButton = (
-
+
{ _t("Remove") }
);
}
const viewSourceButton = (
-
+
{ _t("View Source") }
);
@@ -128,7 +133,7 @@ export default class EditHistoryMessage extends React.PureComponent {
);
}
- render() {
+ public render(): JSX.Element {
const { mxEvent } = this.props;
const content = getReplacedContent(mxEvent);
let contentContainer;
@@ -139,18 +144,22 @@ export default class EditHistoryMessage extends React.PureComponent {
if (this.props.previousEdit) {
contentElements = editBodyDiffToHtml(getReplacedContent(this.props.previousEdit), content);
} else {
- contentElements = HtmlUtils.bodyToHtml(content, null, { stripReplyFallback: true });
+ contentElements = HtmlUtils.bodyToHtml(
+ content,
+ null,
+ { stripReplyFallback: true, returnString: false },
+ );
}
if (mxEvent.getContent().msgtype === "m.emote") {
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
contentContainer = (
- *
+
*
{ name }
{ contentElements }
);
} else {
- contentContainer =
{ contentElements }
;
+ contentContainer =
{ contentElements }
;
}
}
@@ -167,7 +176,7 @@ export default class EditHistoryMessage extends React.PureComponent {
{ timestamp }
{ contentContainer }
- { this._renderActionBar() }
+ { this.renderActionBar() }
{ _t(
"You have ignored this user, so their message is hidden. Show anyways.",
- {}, { a: (sub) => { sub } },
+ {}, { a: (sub) => { sub } },
) }
);
}
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
index c2e137c97b..66200036cd 100644
--- a/src/components/views/messages/RedactedBody.tsx
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -16,13 +16,18 @@ limitations under the License.
import React, { useContext } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
import { IBodyProps } from "./IBodyProps";
-const RedactedBody = React.forwardRef(({ mxEvent }, ref) => {
+interface IProps {
+ mxEvent: MatrixEvent;
+}
+
+const RedactedBody = React.forwardRef(({ mxEvent }, ref) => {
const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("Message deleted");
diff --git a/src/components/views/messages/RoomAvatarEvent.js b/src/components/views/messages/RoomAvatarEvent.tsx
similarity index 88%
rename from src/components/views/messages/RoomAvatarEvent.js
rename to src/components/views/messages/RoomAvatarEvent.tsx
index 9832332311..12a8c88913 100644
--- a/src/components/views/messages/RoomAvatarEvent.js
+++ b/src/components/views/messages/RoomAvatarEvent.tsx
@@ -17,23 +17,24 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media";
+import RoomAvatar from "../avatars/RoomAvatar";
+import ImageView from "../elements/ImageView";
+
+interface IProps {
+ /* the MatrixEvent to show */
+ mxEvent: MatrixEvent;
+}
@replaceableComponent("views.messages.RoomAvatarEvent")
-export default class RoomAvatarEvent extends React.Component {
- static propTypes = {
- /* the MatrixEvent to show */
- mxEvent: PropTypes.object.isRequired,
- };
-
- onAvatarClick = () => {
+export default class RoomAvatarEvent extends React.Component {
+ private onAvatarClick = (): void => {
const cli = MatrixClientPeg.get();
const ev = this.props.mxEvent;
const httpUrl = mediaFromMxc(ev.getContent().url).srcHttp;
@@ -44,7 +45,6 @@ export default class RoomAvatarEvent extends React.Component {
roomName: room ? room.name : '',
});
- const ImageView = sdk.getComponent("elements.ImageView");
const params = {
src: httpUrl,
name: text,
@@ -52,10 +52,9 @@ export default class RoomAvatarEvent extends React.Component {
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
};
- render() {
+ public render(): JSX.Element {
const ev = this.props.mxEvent;
const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
- const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
if (!ev.getContent().url || ev.getContent().url.trim().length === 0) {
return (
diff --git a/src/components/views/messages/RoomCreate.js b/src/components/views/messages/RoomCreate.tsx
similarity index 85%
rename from src/components/views/messages/RoomCreate.js
rename to src/components/views/messages/RoomCreate.tsx
index a0bc8daa64..c846ba5632 100644
--- a/src/components/views/messages/RoomCreate.js
+++ b/src/components/views/messages/RoomCreate.tsx
@@ -16,7 +16,6 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
import dis from '../../../dispatcher/dispatcher';
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
@@ -24,15 +23,16 @@ import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import EventTileBubble from "./EventTileBubble";
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+
+interface IProps {
+ /* the MatrixEvent to show */
+ mxEvent: MatrixEvent;
+}
@replaceableComponent("views.messages.RoomCreate")
-export default class RoomCreate extends React.Component {
- static propTypes = {
- /* the MatrixEvent to show */
- mxEvent: PropTypes.object.isRequired,
- };
-
- _onLinkClicked = e => {
+export default class RoomCreate extends React.Component {
+ private onLinkClicked = (e: React.MouseEvent): void => {
e.preventDefault();
const predecessor = this.props.mxEvent.getContent()['predecessor'];
@@ -45,7 +45,7 @@ export default class RoomCreate extends React.Component {
});
};
- render() {
+ public render(): JSX.Element {
const predecessor = this.props.mxEvent.getContent()['predecessor'];
if (predecessor === undefined) {
return ; // We should never have been instantiated in this case
@@ -55,7 +55,7 @@ export default class RoomCreate extends React.Component {
permalinkCreator.load();
const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
const link = (
-
+
{ _t("Click here to see older messages.") }
);
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index 83fe7f5a3d..63ff39721d 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -138,6 +138,7 @@ export default class TextualBody extends React.Component {
// If it's less than 30% we don't add the expansion button.
// We also round the number as it sometimes can be 29.99...
const percentageOfViewport = Math.round(pre.offsetHeight / UIStore.instance.windowHeight * 100);
+ // TODO: additionally show the button if it's an expanded quoted message
if (percentageOfViewport < 30) return;
const button = document.createElement("span");
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx
index 4a62d6711e..7afa29624a 100644
--- a/src/components/views/rooms/AuxPanel.tsx
+++ b/src/components/views/rooms/AuxPanel.tsx
@@ -15,7 +15,6 @@ limitations under the License.
*/
import React from 'react';
-import classNames from 'classnames';
import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
import { Room } from 'matrix-js-sdk/src/models/room';
@@ -35,16 +34,6 @@ interface IProps {
room: Room;
userId: string;
showApps: boolean; // Render apps
-
- // maxHeight attribute for the aux panel and the video
- // therein
- maxHeight: number;
-
- // a callback which is called when the content of the aux panel changes
- // content in a way that is likely to make it change size.
- onResize: () => void;
- fullHeight: boolean;
-
resizeNotifier: ResizeNotifier;
}
@@ -92,13 +81,6 @@ export default class AuxPanel extends React.Component {
return objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState);
}
- componentDidUpdate(prevProps, prevState) {
- // most changes are likely to cause a resize
- if (this.props.onResize) {
- this.props.onResize();
- }
- }
-
private rateLimitedUpdate = throttle(() => {
this.setState({ counters: this.computeCounters() });
}, 500, { leading: true, trailing: true });
@@ -138,7 +120,6 @@ export default class AuxPanel extends React.Component {
const callView = (
);
@@ -148,7 +129,6 @@ export default class AuxPanel extends React.Component {
appsDrawer = ;
@@ -204,21 +184,12 @@ export default class AuxPanel extends React.Component {
}
}
- const classes = classNames({
- "mx_RoomView_auxPanel": true,
- "mx_RoomView_auxPanel_fullHeight": this.props.fullHeight,
- });
- const style: React.CSSProperties = {};
- if (!this.props.fullHeight) {
- style.maxHeight = this.props.maxHeight;
- }
-
return (
-
+
{ stateViews }
+ { this.props.children }
{ appsDrawer }
{ callView }
- { this.props.children }
);
}
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 06be8f943e..00f4c058fd 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -58,6 +58,7 @@ import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
import SettingsStore from "../../../settings/SettingsStore";
+import MKeyVerificationConclusion from "../messages/MKeyVerificationConclusion";
const eventTileTypes = {
[EventType.RoomMessage]: 'messages.MessageEvent',
@@ -144,8 +145,7 @@ export function getHandlerTile(ev) {
// XXX: This is extremely a hack. Possibly these components should have an interface for
// declining to render?
if (type === "m.key.verification.cancel" || type === "m.key.verification.done") {
- const MKeyVerificationConclusion = sdk.getComponent("messages.MKeyVerificationConclusion");
- if (!MKeyVerificationConclusion.prototype._shouldRender.call(null, ev, ev.request)) {
+ if (!MKeyVerificationConclusion.shouldRender(ev, ev.request)) {
return;
}
}
@@ -323,7 +323,7 @@ interface IState {
reactions: Relations;
hover: boolean;
-
+ isQuoteExpanded?: boolean;
thread?: Thread;
}
@@ -331,7 +331,8 @@ interface IState {
export default class EventTile extends React.Component {
private suppressReadReceiptAnimation: boolean;
private isListeningForReceipts: boolean;
- private tile = React.createRef();
+ // TODO: Types
+ private tile = React.createRef();
private replyThread = React.createRef();
public readonly ref = createRef();
@@ -889,8 +890,8 @@ export default class EventTile extends React.Component {
actionBarFocused: focused,
});
};
-
- getTile = () => this.tile.current;
+ // TODO: Types
+ getTile: () => any | null = () => this.tile.current;
getReplyThread = () => this.replyThread.current;
@@ -915,6 +916,11 @@ export default class EventTile extends React.Component {
});
};
+ private setQuoteExpanded = (expanded: boolean) => {
+ this.setState({
+ isQuoteExpanded: expanded,
+ });
+ };
render() {
const msgtype = this.props.mxEvent.getContent().msgtype;
const eventType = this.props.mxEvent.getType() as EventType;
@@ -924,6 +930,7 @@ export default class EventTile extends React.Component {
isInfoMessage,
isLeftAlignedBubbleMessage,
} = getEventDisplayInfo(this.props.mxEvent);
+ const { isQuoteExpanded } = this.state;
// This shouldn't happen: the caller should check we support this type
// before trying to instantiate us
@@ -936,6 +943,7 @@ export default class EventTile extends React.Component {