sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 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 11:58:45 +00: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
src/NodeAnimator.tsx
+16 -14
View File
@@ -6,12 +6,11 @@ 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, { Key, MutableRefObject, ReactElement, ReactInstance } from "react";
import ReactDom from "react-dom";
import React, { Key, MutableRefObject, ReactElement, RefCallback } from "react";
interface IChildProps {
style: React.CSSProperties;
ref: (node: React.ReactInstance) => void;
ref: RefCallback<HTMLElement>;
}
interface IProps {
@@ -36,7 +35,7 @@ function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number
* automatic positional animation, look at react-shuffle or similar libraries.
*/
export default class NodeAnimator extends React.Component<IProps> {
private nodes: Record<string, ReactInstance> = {};
private nodes: Record<string, HTMLElement> = {};
private children: { [key: string]: ReactElement } = {};
public static defaultProps: Partial<IProps> = {
startStyles: [],
@@ -71,10 +70,10 @@ export default class NodeAnimator extends React.Component<IProps> {
if (!isReactElement(c)) return;
if (oldChildren[c.key!]) {
const old = oldChildren[c.key!];
const oldNode = ReactDom.findDOMNode(this.nodes[old.key!]);
const oldNode = this.nodes[old.key!];
if (oldNode && (oldNode as HTMLElement).style.left !== c.props.style.left) {
this.applyStyles(oldNode as HTMLElement, { left: c.props.style.left });
if (oldNode && oldNode.style.left !== c.props.style.left) {
this.applyStyles(oldNode, { left: c.props.style.left });
}
// clone the old element with the props (and children) of the new element
// so prop updates are still received by the children.
@@ -98,26 +97,29 @@ export default class NodeAnimator extends React.Component<IProps> {
});
}
private collectNode(k: Key, node: React.ReactInstance, restingStyle: React.CSSProperties): void {
private collectNode(k: Key, domNode: HTMLElement | null, restingStyle: React.CSSProperties): void {
const key = typeof k === "bigint" ? Number(k) : k;
if (node && this.nodes[key] === undefined && this.props.startStyles.length > 0) {
if (domNode && this.nodes[key] === undefined && this.props.startStyles.length > 0) {
const startStyles = this.props.startStyles;
const domNode = ReactDom.findDOMNode(node);
// start from startStyle 1: 0 is the one we gave it
// to start with, so now we animate 1 etc.
for (let i = 1; i < startStyles.length; ++i) {
this.applyStyles(domNode as HTMLElement, startStyles[i]);
this.applyStyles(domNode, startStyles[i]);
}
// and then we animate to the resting state
window.setTimeout(() => {
this.applyStyles(domNode as HTMLElement, restingStyle);
this.applyStyles(domNode, restingStyle);
}, 0);
}
this.nodes[key] = node;
if (domNode) {
this.nodes[key] = domNode;
} else {
delete this.nodes[key];
}
if (this.props.innerRef) {
this.props.innerRef.current = node;
this.props.innerRef.current = domNode;
}
}