From d156a56603d68e1835b416338e549aded59fd43b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 16 Jul 2021 10:57:14 -0600 Subject: [PATCH] Share body prop types with an interface --- src/components/views/messages/IBodyProps.ts | 43 +++++++++++++++++++ src/components/views/messages/MAudioBody.tsx | 15 ++----- src/components/views/messages/MFileBody.tsx | 11 +---- src/components/views/messages/MImageBody.tsx | 22 ++-------- src/components/views/messages/MVideoBody.tsx | 16 ++----- .../views/messages/MVoiceOrAudioBody.tsx | 8 +--- .../views/messages/MessageEvent.tsx | 34 ++------------- .../views/messages/RedactedBody.tsx | 10 ++--- src/components/views/messages/TextualBody.tsx | 29 +------------ 9 files changed, 65 insertions(+), 123 deletions(-) create mode 100644 src/components/views/messages/IBodyProps.ts diff --git a/src/components/views/messages/IBodyProps.ts b/src/components/views/messages/IBodyProps.ts new file mode 100644 index 0000000000..8aabd3080c --- /dev/null +++ b/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; +} diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx index 4f688fd136..26982f242f 100644 --- a/src/components/views/messages/MAudioBody.tsx +++ b/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 { - constructor(props: IProps) { +export default class MAudioBody extends React.PureComponent { + constructor(props: IBodyProps) { super(props); this.state = {}; diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx index f1f004ef21..e0a1119b62 100644 --- a/src/components/views/messages/MFileBody.tsx +++ b/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 { diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 9325c39982..a6e9816e35 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/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 { +export default class MImageBody extends React.Component { static contextType = MatrixClientContext; private unmounted = true; private image = createRef(); - constructor(props: IProps) { + constructor(props: IBodyProps) { super(props); this.state = { diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index 2b873f6506..e58e3ef3c0 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/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 { +export default class MVideoBody extends React.PureComponent { private videoRef = React.createRef(); constructor(props) { diff --git a/src/components/views/messages/MVoiceOrAudioBody.tsx b/src/components/views/messages/MVoiceOrAudioBody.tsx index 676b5a2c47..adfd102e19 100644 --- a/src/components/views/messages/MVoiceOrAudioBody.tsx +++ b/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 { +export default class MVoiceOrAudioBody extends React.PureComponent { 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'] diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx index 3c59e68c8b..53592e3985 100644 --- a/src/components/views/messages/MessageEvent.tsx +++ b/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 { /* overrides for the msgtype-specific components, used by ReplyTile to override file rendering */ overrideBodyTypes?: Record; overrideEventTypes?: Record; - - /* the permalinkCreator */ - permalinkCreator: PermalinkConstructor; - - replacingEventId?: string; - editState?: unknown; } @replaceableComponent("views.messages.MessageEvent") diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx index 3e5da1dd43..c2e137c97b 100644 --- a/src/components/views/messages/RedactedBody.tsx +++ b/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(({ mxEvent }, ref) => { +const RedactedBody = React.forwardRef(({ mxEvent }, ref) => { const cli: MatrixClient = useContext(MatrixClientContext); let text = _t("Message deleted"); diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 9009b9ee1b..c7277557a3 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/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 { +export default class TextualBody extends React.Component { private readonly contentRef = createRef(); private unmounted = false;