refactor(react): replace findDOMNode by ref (#7479)

frontend/src/components/common/account.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { siteRoot, isPro, gettext, appAvatarURL, enableSSOToThirdpartWebsite } from '../../utils/constants';
@@ -35,10 +34,6 @@ class Account extends Component {
     this.handleProps();
   }
 
-  getContainer = () => {
-    return findDOMNode(this);
-  };
-
   handleProps = () => {
     if (this.state.showInfo) {
       this.addEvents();
@@ -61,9 +56,7 @@ class Account extends Component {
 
   handleDocumentClick = (e) => {
     if (e && (e.which === 3 || (e.type === 'keyup' && e.which !== Utils.keyCodes.tab))) return;
-    const container = this.getContainer();
+    if (this.accountDOM && this.accountDOM.contains(e.target) && this.accountDOM !== e.target && (e.type !== 'keyup' || e.which === Utils.keyCodes.tab)) {
-
-    if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === Utils.keyCodes.tab)) {
       return;
     }
 
@@ -148,7 +141,7 @@ class Account extends Component {
 
   render() {
     return (
-      <div id="account">
+      <div id="account" ref={ref => this.accountDOM = ref}>
         <a id="my-info" href="#" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label={gettext('View profile and more')}>
           {this.renderAvatar()}
         </a>

frontend/src/components/sf-table/masks/cell-mask.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 
 class CellMask extends React.PureComponent {
@@ -7,9 +6,8 @@ class CellMask extends React.PureComponent {
   componentDidUpdate() {
     // Scrolling left and right causes the interface to re-render,
     // and the style of CellMask is reset and needs to be fixed
-    const dom = findDOMNode(this);
+    if (this.cellMaskNode && this.cellMaskNode.style.position === 'fixed') {
-    if (dom.style.position === 'fixed') {
+      this.cellMaskNode.style.transform = 'none';
-      dom.style.transform = 'none';
     }
   }
 
@@ -27,6 +25,11 @@ class CellMask extends React.PureComponent {
     };
   };
 
+  setNode = (node) => {
+    this.cellMaskNode = node;
+    this.props.innerRef && this.props.innerRef(node);
+  };
+
   render() {
     const { width, height, top, left, zIndex, children, innerRef, ...rest } = this.props;
     const style = this.getMaskStyle();
@@ -34,7 +37,7 @@ class CellMask extends React.PureComponent {
       <div
         style={style}
         data-test="cell-mask"
-        ref={innerRef}
+        ref={this.setNode}
         {...rest}
       >
         {children}

frontend/src/metadata/components/cell-editors/text-editor/index.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import classnames from 'classnames';
 import { KeyCodes } from '../../../../constants';
 import { CellValueType } from './constants';
@@ -105,12 +104,11 @@ class SimpleTextEditor extends Component {
   };
 
   getInputNode = () => {
-    const domNode = findDOMNode(this.input);
+    if (!this.input) return null;
-    if (domNode.tagName === 'INPUT') {
+    if (this.input.tagName === 'INPUT') {
-      return domNode;
+      return this.input;
     }
-
+    return this.input.querySelector('input:not([type=hidden])');
-    return domNode.querySelector('input:not([type=hidden])');
   };
 
   setInputRef = (input) => {

frontend/src/metadata/views/table/masks/cell-mask.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 
 class CellMask extends React.PureComponent {
@@ -7,9 +6,8 @@ class CellMask extends React.PureComponent {
   componentDidUpdate() {
     // Scrolling left and right causes the interface to re-render,
     // and the style of CellMask is reset and needs to be fixed
-    const dom = findDOMNode(this);
+    if (this.cellMaskNode && this.cellMaskNode.style.position === 'fixed') {
-    if (dom.style.position === 'fixed') {
+      this.cellMaskNode.style.transform = 'none';
-      dom.style.transform = 'none';
     }
   }
 
@@ -27,6 +25,11 @@ class CellMask extends React.PureComponent {
     };
   };
 
+  setNode = (node) => {
+    this.cellMaskNode = node;
+    this.props.innerRef && this.props.innerRef(node);
+  };
+
   render() {
     const { width, height, top, left, zIndex, children, innerRef, ...rest } = this.props;
     const style = this.getMaskStyle();
@@ -34,7 +37,7 @@ class CellMask extends React.PureComponent {
       <div
         style={style}
         data-test="cell-mask"
-        ref={innerRef}
+        ref={this.setNode}
         {...rest}
       >
         {children}