PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-31 11:21:19 +00:00 committed by GitHub
parent 4bb9f2ed7b
commit 195337d865
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/views/messages/MImageBody.tsx
View file

@ -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>
);

17
src/components/views/rooms/RoomBreadcrumbs.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 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>