Refactor view source event to MVVM (#33428)

* Refactor view source event to MVVM * remove unused variable since movement * Update view source event screenshots * Update packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Use view model disposables for source event decryption * Consolidate source event view model updates * Fix prettier * Fix view source expanded class name * Remove void from source event decryption --------- Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-05-12 11:17:47 +00:00
parent b19025e578
commit 39607799de
23 changed files with 708 additions and 138 deletions
@@ -1,83 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { type MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
-import classNames from "classnames";
-import { CollapseIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { _t } from "../../../languageHandler";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-}
-
-interface IState {
-    expanded: boolean;
-}
-
-export default class ViewSourceEvent extends React.PureComponent<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            expanded: false,
-        };
-    }
-
-    public componentDidMount(): void {
-        const { mxEvent } = this.props;
-
-        const client = MatrixClientPeg.safeGet();
-        client.decryptEventIfNeeded(mxEvent);
-
-        if (mxEvent.isBeingDecrypted()) {
-            mxEvent.once(MatrixEventEvent.Decrypted, () => this.forceUpdate());
-        }
-    }
-
-    private onToggle = (ev: ButtonEvent): void => {
-        ev.preventDefault();
-        const { expanded } = this.state;
-        this.setState({
-            expanded: !expanded,
-        });
-    };
-
-    public render(): React.ReactNode {
-        const { mxEvent } = this.props;
-        const { expanded } = this.state;
-
-        let content;
-        if (expanded) {
-            content = <pre>{JSON.stringify(mxEvent, null, 4)}</pre>;
-        } else {
-            content = <code>{`{ "type": ${mxEvent.getType()} }`}</code>;
-        }
-
-        const classes = classNames("mx_ViewSourceEvent mx_EventTile_content", {
-            mx_ViewSourceEvent_expanded: expanded,
-        });
-
-        return (
-            <span className={classes}>
-                {content}
-                <AccessibleButton
-                    kind="link"
-                    title={_t("devtools|toggle_event")}
-                    className="mx_ViewSourceEvent_toggle"
-                    onClick={this.onToggle}
-                >
-                    {expanded ? <CollapseIcon /> : <ExpandIcon />}
-                </AccessibleButton>
-            </span>
-        );
-    }
-}