nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 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

19
src/components/views/messages/TextualBody.tsx
View File

@@ -52,6 +52,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
private tooltips: Element[] = [];
private reactRoots: Element[] = [];
private ref = createRef<HTMLDivElement>();
public static contextType = RoomContext;
public declare context: React.ContextType<typeof RoomContext>;
@@ -84,8 +86,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
// Handle expansion and add buttons
const pres = (ReactDOM.findDOMNode(this) as Element).getElementsByTagName("pre");
if (pres.length > 0) {
const pres = this.ref.current?.getElementsByTagName("pre");
if (pres && pres.length > 0) {
for (let i = 0; i < pres.length; i++) {
// If there already is a div wrapping the codeblock we want to skip this.
// This happens after the codeblock was edited.
@@ -477,7 +479,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
if (isEmote) {
return (
<div className="mx_MEmoteBody mx_EventTile_content" onClick={this.onBodyLinkClick} dir="auto">
<div
className="mx_MEmoteBody mx_EventTile_content"
onClick={this.onBodyLinkClick}
dir="auto"
ref={this.ref}
>
*&nbsp;
<span className="mx_MEmoteBody_sender" onClick={this.onEmoteSenderClick}>
{mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()}
@@ -490,7 +497,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
}
if (isNotice) {
return (
<div className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
<div className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick} ref={this.ref}>
{body}
{widgets}
</div>
@@ -498,14 +505,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
}
if (isCaption) {
return (
<div className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick}>
<div className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick} ref={this.ref}>
{body}
{widgets}
</div>
);
}
return (
<div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
<div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick} ref={this.ref}>
{body}
{widgets}
</div>

11
src/components/views/rooms/Autocomplete.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import React, { createRef, KeyboardEvent } from "react";
import React, { createRef, KeyboardEvent, RefObject } from "react";
import classNames from "classnames";
import { flatMap } from "lodash";
import { Room } from "matrix-js-sdk/src/matrix";
@@ -45,6 +45,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
public queryRequested?: string;
public debounceCompletionsRequest?: number;
private containerRef = createRef<HTMLDivElement>();
private completionRefs: Record<string, RefObject<HTMLElement>> = {};
public static contextType = RoomContext;
public declare context: React.ContextType<typeof RoomContext>;
@@ -260,7 +261,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
public componentDidUpdate(prevProps: IProps): void {
this.applyNewProps(prevProps.query, prevProps.room);
// this is the selected completion, so scroll it into view if needed
const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`] as HTMLElement;
const selectedCompletion = this.completionRefs[`completion${this.state.selectionOffset}`]?.current;
if (selectedCompletion) {
selectedCompletion.scrollIntoView({
@@ -286,9 +287,13 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
this.onCompletionClicked(componentPosition);
};
const refId = `completion${componentPosition}`;
if (!this.completionRefs[refId]) {
this.completionRefs[refId] = createRef();
}
return React.cloneElement(completion.component, {
"key": j,
"ref": `completion${componentPosition}`,
"ref": this.completionRefs[refId],
"id": generateCompletionDomId(componentPosition - 1), // 0 index the completion IDs
className,
onClick,