nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Switch away from deprecated ReactDOM findDOMNode (#28259)

Browse Source 
* Remove unused method getVisibleDecryptionFailures

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch away from ReactDOM findDOMNode

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2024-10-22 12:58:45 +01:00
committed by GitHub
parent 19ef3267c0
commit d4cf3881bc
7 changed files with 77 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/structures/MessagePanel.tsx
View File

@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { createRef, ReactNode, TransitionEvent } from "react";
import ReactDOM from "react-dom";
import classNames from "classnames";
import { Room, MatrixClient, RoomStateEvent, EventStatus, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
@@ -245,7 +244,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
private readMarkerNode = createRef<HTMLLIElement>();
private whoIsTyping = createRef<WhoIsTypingTile>();
private scrollPanel = createRef<ScrollPanel>();
public scrollPanel = createRef<ScrollPanel>();
private readonly showTypingNotificationsWatcherRef: string;
private eventTiles: Record<string, UnwrappedEventTile> = {};
@@ -376,13 +375,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
// +1: read marker is below the window
public getReadMarkerPosition(): number | null {
const readMarker = this.readMarkerNode.current;
const messageWrapper = this.scrollPanel.current;
const messageWrapper = this.scrollPanel.current?.divScroll;
if (!readMarker || !messageWrapper) {
return null;
}
const wrapperRect = (ReactDOM.findDOMNode(messageWrapper) as HTMLElement).getBoundingClientRect();
const wrapperRect = messageWrapper.getBoundingClientRect();
const readMarkerRect = readMarker.getBoundingClientRect();
// the read-marker pretends to have zero height when it is actually

2
src/components/structures/ScrollPanel.tsx
View File

@@ -186,7 +186,7 @@ export default class ScrollPanel extends React.Component<IProps> {
private bottomGrowth!: number;
private minListHeight!: number;
private heightUpdateInProgress = false;
private divScroll: HTMLDivElement | null = null;
public divScroll: HTMLDivElement | null = null;
public constructor(props: IProps) {
super(props);

64
src/components/structures/TimelinePanel.tsx
View File

@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { createRef, ReactNode } from "react";
import ReactDOM from "react-dom";
import {
Room,
RoomEvent,
@@ -67,9 +66,6 @@ const READ_RECEIPT_INTERVAL_MS = 500;
const READ_MARKER_DEBOUNCE_MS = 100;
// How far off-screen a decryption failure can be for it to still count as "visible"
const VISIBLE_DECRYPTION_FAILURE_MARGIN = 100;
const debuglog = (...args: any[]): void => {
if (SettingsStore.getValue("debug_timeline_panel")) {
logger.log.call(console, "TimelinePanel debuglog:", ...args);
@@ -398,6 +394,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
}
}
private get messagePanelDiv(): HTMLDivElement | null {
return this.messagePanel.current?.scrollPanel.current?.divScroll ?? null;
}
/**
* Logs out debug info to describe the state of the TimelinePanel and the
* events in the room according to the matrix-js-sdk. This is useful when
@@ -418,15 +418,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
// And we can suss out any corrupted React `key` problems.
let renderedEventIds: string[] | undefined;
try {
const messagePanel = this.messagePanel.current;
if (messagePanel) {
const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as Element;
if (messagePanelNode) {
const actuallyRenderedEvents = messagePanelNode.querySelectorAll("[data-event-id]");
renderedEventIds = [...actuallyRenderedEvents].map((renderedEvent) => {
return renderedEvent.getAttribute("data-event-id")!;
});
}
const messagePanelNode = this.messagePanelDiv;
if (messagePanelNode) {
const actuallyRenderedEvents = messagePanelNode.querySelectorAll("[data-event-id]");
renderedEventIds = [...actuallyRenderedEvents].map((renderedEvent) => {
return renderedEvent.getAttribute("data-event-id")!;
});
}
} catch (err) {
logger.error(`onDumpDebugLogs: Failed to get the actual event ID's in the DOM`, err);
@@ -1766,45 +1763,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
return index > -1 ? index : null;
}
/**
* Get a list of undecryptable events currently visible on-screen.
*
* @param {boolean} addMargin Whether to add an extra margin beyond the viewport
* where events are still considered "visible"
*
* @returns {MatrixEvent[] | null} A list of undecryptable events, or null if
* the list of events could not be determined.
*/
public getVisibleDecryptionFailures(addMargin?: boolean): MatrixEvent[] | null {
const messagePanel = this.messagePanel.current;
if (!messagePanel) return null;
const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as Element;
if (!messagePanelNode) return null; // sometimes this happens for fresh rooms/post-sync
const wrapperRect = messagePanelNode.getBoundingClientRect();
const margin = addMargin ? VISIBLE_DECRYPTION_FAILURE_MARGIN : 0;
const screenTop = wrapperRect.top - margin;
const screenBottom = wrapperRect.bottom + margin;
const result: MatrixEvent[] = [];
for (const ev of this.state.liveEvents) {
const eventId = ev.getId();
if (!eventId) continue;
const node = messagePanel.getNodeForEventId(eventId);
if (!node) continue;
const boundingRect = node.getBoundingClientRect();
if (boundingRect.top > screenBottom) {
// we have gone past the visible section of timeline
break;
} else if (boundingRect.bottom >= screenTop) {
// the tile for this event is in the visible part of the screen (or just above/below it).
if (ev.isDecryptionFailure()) result.push(ev);
}
}
return result;
}
private getLastDisplayedEventIndex(opts: IEventIndexOpts = {}): number | null {
const ignoreOwn = opts.ignoreOwn || false;
const allowPartial = opts.allowPartial || false;
@@ -1812,7 +1770,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
const messagePanel = this.messagePanel.current;
if (!messagePanel) return null;
const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as Element;
const messagePanelNode = this.messagePanelDiv;
if (!messagePanelNode) return null; // sometimes this happens for fresh rooms/post-sync
const wrapperRect = messagePanelNode.getBoundingClientRect();
const myUserId = MatrixClientPeg.safeGet().credentials.userId;