Pass nodeRef to CSSTransition to avoid ReactDOM.findDOMNode (#28339)

Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 31, 2024 · 195337d · 195337d
1 parent 4bb9f2e
commit 195337d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
@@ -61,6 +61,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
     private unmounted = true;
     private image = createRef<HTMLImageElement>();
+    private placeholder = createRef<HTMLDivElement>();
     private timeout?: number;
     private sizeWatcher?: string;
 
@@ -453,7 +454,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                 "mx_MImageBody_placeholder--blurhash": this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
             });
 
-            placeholder = <div className={classes}>{this.getPlaceholder(maxWidth, maxHeight)}</div>;
+            placeholder = (
+                <div className={classes} ref={this.placeholder}>
+                    {this.getPlaceholder(maxWidth, maxHeight)}
+                </div>
+            );
         }
 
         let showPlaceholder = Boolean(placeholder);
@@ -499,8 +504,19 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         if (!this.props.forExport) {
             placeholder = (
                 <SwitchTransition mode="out-in">
-                    <CSSTransition classNames="mx_rtg--fade" key={`img-${showPlaceholder}`} timeout={300}>
-                        {showPlaceholder ? placeholder : <></> /* Transition always expects a child */}
+                    <CSSTransition
+                        classNames="mx_rtg--fade"
+                        key={`img-${showPlaceholder}`}
+                        timeout={300}
+                        nodeRef={this.placeholder}
+                    >
+                        {
+                            showPlaceholder ? (
+                                placeholder
+                            ) : (
+                                <div ref={this.placeholder} />
+                            ) /* Transition always expects a child */
+                        }
                     </CSSTransition>
                 </SwitchTransition>
             );

diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx
@@ -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 from "react";
+import React, { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { CSSTransition } from "react-transition-group";
 
@@ -61,6 +61,7 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v
 
 export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
     private isMounted = true;
+    private toolbar = createRef<HTMLDivElement>();
 
     public constructor(props: IProps) {
         super(props);
@@ -113,8 +114,18 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
         if (tiles.length > 0) {
             // NOTE: The CSSTransition timeout MUST match the timeout in our CSS!
             return (
-                <CSSTransition appear={true} in={this.state.doAnimation} timeout={640} classNames="mx_RoomBreadcrumbs">
-                    <Toolbar className="mx_RoomBreadcrumbs" aria-label={_t("room_list|breadcrumbs_label")}>
+                <CSSTransition
+                    appear={true}
+                    in={this.state.doAnimation}
+                    timeout={640}
+                    classNames="mx_RoomBreadcrumbs"
+                    nodeRef={this.toolbar}
+                >
+                    <Toolbar
+                        className="mx_RoomBreadcrumbs"
+                        aria-label={_t("room_list|breadcrumbs_label")}
+                        ref={this.toolbar}
+                    >
                         {tiles.slice(this.state.skipFirst ? 1 : 0)}
                     </Toolbar>
                 </CSSTransition>