Share body prop types with an interface

src/components/views/messages/IBodyProps.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 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.
+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 { MatrixEvent } from "matrix-js-sdk/src";
+import { TileShape } from "../rooms/EventTile";
+import { MediaEventHelper } from "../../../utils/MediaEventHelper";
+import EditorStateTransfer from "../../../utils/EditorStateTransfer";
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
+
+export interface IBodyProps {
+    mxEvent: MatrixEvent;
+
+    /* a list of words to highlight */
+    highlights: string[];
+
+    /* link URL for the highlights */
+    highlightLink: string;
+
+    /* callback called when dynamic content in events are loaded */
+    onHeightChanged: () => void;
+
+    showUrlPreview?: boolean;
+    tileShape: TileShape;
+    maxImageHeight?: number;
+    replacingEventId?: string;
+    editState?: EditorStateTransfer;
+    onMessageAllowed: () => void; // TODO: Docs
+    permalinkCreator: RoomPermalinkCreator;
+    mediaEventHelper: MediaEventHelper;
+}

src/components/views/messages/MAudioBody.tsx

@@ -15,21 +15,14 @@ limitations under the License.
 */
 
 import React from "react";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Playback } from "../../../voice/Playback";
 import InlineSpinner from '../elements/InlineSpinner';
 import { _t } from "../../../languageHandler";
 import AudioPlayer from "../audio_messages/AudioPlayer";
-import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
-import { TileShape } from "../rooms/EventTile";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-    tileShape?: TileShape;
-    mediaEventHelper: MediaEventHelper;
-}
+import MFileBody from "./MFileBody";
+import { IBodyProps } from "./IBodyProps";
 
 interface IState {
     error?: Error;
@@ -37,8 +30,8 @@ interface IState {
 }
 
 @replaceableComponent("views.messages.MAudioBody")
-export default class MAudioBody extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps) {
+export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
+    constructor(props: IBodyProps) {
         super(props);
 
         this.state = {};

src/components/views/messages/MFileBody.tsx

@@ -28,6 +28,7 @@ import { TileShape } from "../rooms/EventTile";
 import { IContent, MatrixEvent } from "matrix-js-sdk/src";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
+import { IBodyProps } from "./IBodyProps";
 
 let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
 
@@ -123,17 +124,9 @@ export function presentableTextForFile(content: IContent, withSize = true): stri
     return linkText;
 }
 
-interface IProps {
-    /* the MatrixEvent to show */
-    mxEvent: MatrixEvent;
-    /* called when the download link iframe is shown */
-    onHeightChanged: () => void;
-    /* the shape of the tile, used */
-    tileShape: TileShape;
+interface IProps extends IBodyProps {
     /* whether or not to show the default placeholder for the file. Defaults to true. */
     showGenericPlaceholder: boolean;
-    /* helper which contains the file access */
-    mediaEventHelper: MediaEventHelper;
 }
 
 interface IState {

src/components/views/messages/MImageBody.tsx

@@ -27,26 +27,10 @@ import InlineSpinner from '../elements/InlineSpinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { IMediaEventContent } from '../../../customisations/models/IMediaEventContent';
 import ImageView from '../elements/ImageView';
 import { SyncState } from 'matrix-js-sdk/src/sync.api';
-import { MediaEventHelper } from "../../../utils/MediaEventHelper";
-
-export interface IProps {
-    /* the MatrixEvent to show */
-    mxEvent: MatrixEvent;
-    /* called when the image has loaded */
-    onHeightChanged(): void;
-
-    /* the maximum image height to use */
-    maxImageHeight?: number;
-
-    /* the permalinkCreator */
-    permalinkCreator?: RoomPermalinkCreator;
-    mediaEventHelper: MediaEventHelper;
-}
+import { IBodyProps } from "./IBodyProps";
 
 interface IState {
     decryptedUrl?: string;
@@ -64,12 +48,12 @@ interface IState {
 }
 
 @replaceableComponent("views.messages.MImageBody")
-export default class MImageBody extends React.Component<IProps, IState> {
+export default class MImageBody extends React.Component<IBodyProps, IState> {
     static contextType = MatrixClientContext;
     private unmounted = true;
     private image = createRef<HTMLImageElement>();
 
-    constructor(props: IProps) {
+    constructor(props: IBodyProps) {
         super(props);
 
         this.state = {

src/components/views/messages/MVideoBody.tsx

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 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,17 +23,8 @@ import InlineSpinner from '../elements/InlineSpinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
-import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
-import { MatrixEvent } from "matrix-js-sdk/src";
-
-interface IProps {
-    /* the MatrixEvent to show */
-    mxEvent: MatrixEvent;
-    /* called when the video has loaded */
-    onHeightChanged: () => void;
-    mediaEventHelper: MediaEventHelper;
-}
+import { IBodyProps } from "./IBodyProps";
 
 interface IState {
     decryptedUrl?: string;
@@ -47,7 +37,7 @@ interface IState {
 }
 
 @replaceableComponent("views.messages.MVideoBody")
-export default class MVideoBody extends React.PureComponent<IProps, IState> {
+export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
     private videoRef = React.createRef<HTMLVideoElement>();
 
     constructor(props) {

src/components/views/messages/MVoiceOrAudioBody.tsx

@@ -15,18 +15,14 @@ limitations under the License.
 */
 
 import React from "react";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import MAudioBody from "./MAudioBody";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SettingsStore from "../../../settings/SettingsStore";
 import MVoiceMessageBody from "./MVoiceMessageBody";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-}
+import { IBodyProps } from "./IBodyProps";
 
 @replaceableComponent("views.messages.MVoiceOrAudioBody")
-export default class MVoiceOrAudioBody extends React.PureComponent<IProps> {
+export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> {
     public render() {
         // MSC2516 is a legacy identifier. See https://github.com/matrix-org/matrix-doc/pull/3245
         const isVoiceMessage = !!this.props.mxEvent.getContent()['org.matrix.msc2516.voice']

src/components/views/messages/MessageEvent.tsx

@@ -22,45 +22,17 @@ import RedactedBody from "./RedactedBody";
 import UnknownBody from "./UnknownBody";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IMediaBody } from "./IMediaBody";
-import { MatrixEvent } from "matrix-js-sdk/src";
-import { TileShape } from "../rooms/EventTile";
-import PermalinkConstructor from "../../../utils/permalinks/PermalinkConstructor";
 import { IOperableEventTile } from "../context_menus/MessageContextMenu";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { ReactAnyComponent } from "../../../@types/common";
 import { EventType, MsgType } from "matrix-js-sdk/src/@types/event";
+import { IBodyProps } from "./IBodyProps";
 
-interface IProps {
-    /* the MatrixEvent to show */
-    mxEvent: MatrixEvent;
-
-    /* a list of words to highlight */
-    highlights: string[];
-
-    /* link URL for the highlights */
-    highlightLink: string;
-
-    /* should show URL previews for this event */
-    showUrlPreview: boolean;
-
-    /* callback called when dynamic content in events are loaded */
-    onHeightChanged: () => void;
-
-    /* the shape of the tile, used */
-    tileShape: TileShape;
-
-    /* the maximum image height to use, if the event is an image */
-    maxImageHeight?: number;
-
+// onMessageAllowed is handled internally
+interface IProps extends Omit<IBodyProps, "onMessageAllowed"> {
     /* overrides for the msgtype-specific components, used by ReplyTile to override file rendering */
     overrideBodyTypes?: Record<string, React.Component>;
     overrideEventTypes?: Record<string, React.Component>;
-
-    /* the permalinkCreator */
-    permalinkCreator: PermalinkConstructor;
-
-    replacingEventId?: string;
-    editState?: unknown;
 }
 
 @replaceableComponent("views.messages.MessageEvent")

src/components/views/messages/RedactedBody.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 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.
@@ -16,17 +16,13 @@ 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";
 
-interface IProps {
-    mxEvent: MatrixEvent;
-}
-
-const RedactedBody = React.forwardRef<any, IProps>(({ mxEvent }, ref) => {
+const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent }, ref) => {
     const cli: MatrixClient = useContext(MatrixClientContext);
 
     let text = _t("Message deleted");

src/components/views/messages/TextualBody.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { createRef, SyntheticEvent } from 'react';
 import ReactDOM from 'react-dom';
 import highlight from 'highlight.js';
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 
 import * as HtmlUtils from '../../../HtmlUtils';
@@ -38,37 +37,13 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
-import { TileShape } from '../rooms/EventTile';
-import EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
 import Spoiler from "../elements/Spoiler";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import MessageEditHistoryDialog from "../dialogs/MessageEditHistoryDialog";
 import EditMessageComposer from '../rooms/EditMessageComposer';
 import LinkPreviewGroup from '../rooms/LinkPreviewGroup';
-
-interface IProps {
-    /* the MatrixEvent to show */
-    mxEvent: MatrixEvent;
-
-    /* a list of words to highlight */
-    highlights?: string[];
-
-    /* link URL for the highlights */
-    highlightLink?: string;
-
-    /* should show URL previews for this event */
-    showUrlPreview?: boolean;
-
-    /* the shape of the tile, used */
-    tileShape?: TileShape;
-
-    editState?: EditorStateTransfer;
-    replacingEventId?: string;
-
-    /* callback for when our widget has loaded */
-    onHeightChanged(): void;
-}
+import { IBodyProps } from "./IBodyProps";
 
 interface IState {
     // the URLs (if any) to be previewed with a LinkPreviewWidget inside this TextualBody.
@@ -79,7 +54,7 @@ interface IState {
 }
 
 @replaceableComponent("views.messages.TextualBody")
-export default class TextualBody extends React.Component<IProps, IState> {
+export default class TextualBody extends React.Component<IBodyProps, IState> {
     private readonly contentRef = createRef<HTMLSpanElement>();
 
     private unmounted = false;