hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Prefer ref over findDOMNode to make unit tests not flaky (#4372)

Browse Source 
Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
This commit is contained in:
Janne Savolainen 2021-11-17 18:38:42 +02:00 committed by GitHub
parent 1fad7a18f9
commit e146dff9da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/components/dialog/dialog.tsx
View File

@ -22,7 +22,7 @@
import "./dialog.scss"; import "./dialog.scss";
import React from "react"; import React from "react";
import { createPortal, findDOMNode } from "react-dom"; import { createPortal } from "react-dom";
import { disposeOnUnmount, observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { reaction } from "mobx"; import { reaction } from "mobx";
import { Animate } from "../animate"; import { Animate } from "../animate";
@ -50,6 +50,7 @@ interface DialogState {
@observer @observer
export class Dialog extends React.PureComponent<DialogProps, DialogState> { export class Dialog extends React.PureComponent<DialogProps, DialogState> {
private contentElem: HTMLElement; private contentElem: HTMLElement;
ref = React.createRef<HTMLDivElement>();
static defaultProps: DialogProps = { static defaultProps: DialogProps = {
isOpen: false, isOpen: false,
@ -69,9 +70,8 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
isOpen: this.props.isOpen, isOpen: this.props.isOpen,
}; };
get elem() { get elem(): HTMLElement {
// eslint-disable-next-line react/no-find-dom-node return this.ref.current;
return findDOMNode(this) as HTMLElement;
} }
get isOpen() { get isOpen() {
@ -154,7 +154,11 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
className = cssNames("Dialog flex center", className, { modal, pinned }); className = cssNames("Dialog flex center", className, { modal, pinned });
let dialog = ( let dialog = (
<div className={className} onClick={stopPropagation}> <div
className={className}
onClick={stopPropagation}
ref={this.ref}
>
<div className="box" ref={e => this.contentElem = e}> <div className="box" ref={e => this.contentElem = e}>
{this.props.children} {this.props.children}
</div> </div>