Replace deprecated findDOMNode

packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx

@@ -12,7 +12,6 @@ import {
 } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { lazy } from '../../Utils/ComponentUtils';
 import { Seq } from '../../Utils/IterableUtils';
 import DateRangeSelector from '../../Components/InputControls/DateRangeSelector';
@@ -64,6 +63,7 @@ const PLOT_SETTINGS_OPEN_KEY = 'wdk/filterParam/plotSettingsOpen';
 var Histogram = (function () {
   /** Common histogram component */
   class LazyHistogram extends React.Component {
+    histoRef = React.createRef();
     constructor(props) {
       super(props);
       this.handleResize = throttle(this.handleResize.bind(this), 100);
@@ -80,11 +80,14 @@ var Histogram = (function () {
 
     componentDidMount() {
       $(window).on('resize', this.handleResize);
-      $(ReactDOM.findDOMNode(this))
-        .on('plotselected .chart', this.handlePlotSelected.bind(this))
-        .on('plotselecting .chart', this.handlePlotSelecting.bind(this))
-        .on('plotunselected .chart', this.handlePlotUnselected.bind(this))
-        .on('plothover .chart', this.handlePlotHover.bind(this));
+      const histoContainer = this.histoRef.current;
+      if (histoContainer) {
+        $(histoContainer)
+          .on('plotselected .chart', this.handlePlotSelected.bind(this))
+          .on('plotselecting .chart', this.handlePlotSelecting.bind(this))
+          .on('plotunselected .chart', this.handlePlotUnselected.bind(this))
+          .on('plothover .chart', this.handlePlotHover.bind(this));
+      }
 
       this.createPlot();
       this.createTooltip();
@@ -416,7 +419,7 @@ var Histogram = (function () {
 
       if (this.plot) this.plot.destroy();
 
-      this.$chart = $(ReactDOM.findDOMNode(this)).find('.chart');
+      this.$chart = $(this.histoRef.current).find('.chart');
       this.plot = $.plot(this.$chart, seriesData, plotOptions);
     }
 
@@ -656,7 +659,7 @@ var Histogram = (function () {
       );
 
       return (
-        <div className="chart-container">
+        <div className="chart-container" ref={this.histoRef}>
           <div className="chart"></div>
           <div className="chart-title y-axis">
             <div>{yaxisLabel}</div>

packages/libs/wdk-client/src/Components/Display/Sticky.jsx

@@ -3,14 +3,16 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 class Sticky extends React.Component {
+  inputRef = React.createRef();
+
   constructor(props) {
     super(props);
     this.updateIsFixed = this.updateIsFixed.bind(this);
     this.state = { isFixed: false, height: null, width: null };
   }
 
   componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.node = inputRef.current;
     window.addEventListener('scroll', this.updateIsFixed, { passive: true });
     window.addEventListener('wheel', this.updateIsFixed, { passive: true });
     window.addEventListener('resize', this.updateIsFixed, { passive: true });

packages/libs/wdk-client/src/Components/InputControls/IndeterminateCheckbox.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-import React from 'react';
+import React, { createRef } from 'react';
 import FormEvent = React.FormEvent;
 
 export type IndeterminateCheckboxProps<T> = {
@@ -18,6 +18,8 @@ export type IndeterminateCheckboxProps<T> = {
 export default class IndeterminateCheckbox<T> extends React.Component<
   IndeterminateCheckboxProps<T>
 > {
+  inputRef = createRef();
+
   constructor(props: IndeterminateCheckboxProps<T>) {
     super(props);
 
@@ -39,7 +41,7 @@ export default class IndeterminateCheckbox<T> extends React.Component<
    * @param indeterminate
    */
   setIndeterminate(indeterminate: boolean) {
-    const node = ReactDOM.findDOMNode(this) as HTMLInputElement;
+    const node = this.inputRef.current as HTMLInputElement;
     node.indeterminate = indeterminate;
   }
 

packages/libs/wdk-client/src/Components/Loading/Loading.tsx

@@ -1,6 +1,5 @@
 import { flow } from 'lodash';
-import React from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { createRef } from 'react';
 import { Spinner } from 'spin.js';
 import { delay, wrappable } from '../../Utils/ComponentUtils';
 
@@ -32,6 +31,8 @@ type Props = {
 class Loading extends React.Component<Props> {
   private spinner?: Spinner;
 
+  inputRef = createRef();
+
   componentDidMount() {
     const { radius = 8, top = '50%', left = '50%' } = this.props;
     const opts = {
@@ -52,7 +53,7 @@ class Loading extends React.Component<Props> {
       top, // Top position relative to parent
       left, // Left position relative to parent
     };
-    const node = findDOMNode(this) as HTMLElement;
+    const node = this.inputRef.current as HTMLElement;
     this.spinner = new Spinner(opts).spin(node);
   }
 

packages/libs/wdk-client/src/Controllers/LegacyParamController.tsx

@@ -1,5 +1,5 @@
 import { debounce, get } from 'lodash';
-import React from 'react';
+import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 
 import {
@@ -47,6 +47,8 @@ class LegacyParamController extends ViewController<Props> {
   static readonly PARAM_VALID_EVENT = 'param-valid';
   static readonly PARAM_INVALID_EVENT = 'param-invalid';
 
+  inputRef = createRef();
+
   paramModules = ParamModules;
 
   componentWillUnmount() {
@@ -93,7 +95,7 @@ class LegacyParamController extends ViewController<Props> {
       });
     }
 
-    const node = ReactDOM.findDOMNode(this);
+    const node = this.inputRef.current as HTMLElement;
 
     // Trigger event in case of question error
     if (

packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx

@@ -1,6 +1,5 @@
 import { debounce } from 'lodash';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { createRef } from 'react';
 import { HelpTrigger } from '@veupathdb/coreui/lib/components/Mesa';
 import { Tooltip } from '@veupathdb/coreui';
 import { wrappable } from '../../Utils/ComponentUtils';
@@ -27,6 +26,7 @@ class AnswerFilter extends React.Component {
     this.toggleTable = this.toggleTable.bind(this);
     this.selectAll = this.selectAll.bind(this);
     this.clearAll = this.clearAll.bind(this);
+    this.filterInputRef = createRef();
 
     let { filterAttributes, filterTables } = this.props;
     this.state = {
@@ -53,7 +53,8 @@ class AnswerFilter extends React.Component {
   }
 
   handleFilter() {
-    let value = ReactDOM.findDOMNode(this.refs.filterInput).value;
+    let value =
+      this.filterInputRef.current && this.filterInputRef.current.value;
     let { filterAttributes, filterTables } = this.state;
     this.props.onFilter(value, filterAttributes, filterTables);
   }
@@ -146,7 +147,7 @@ class AnswerFilter extends React.Component {
     return (
       <div className="wdk-Answer-filter">
         <input
-          ref="filterInput"
+          ref={this.filterInputRef}
           className="wdk-Answer-filterInput"
           defaultValue={filterTerm}
           placeholder={`Search ${displayNamePlural}`}

packages/libs/wdk-client/src/Views/Records/RecordUI.jsx

@@ -1,7 +1,6 @@
 import classnames from 'classnames';
 import { debounce, get } from 'lodash';
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { Component, createRef } from 'react';
 import { getId } from '../../Utils/CategoryUtils';
 import { wrappable } from '../../Utils/ComponentUtils';
 import { addScrollAnchor, findAncestorNode } from '../../Utils/DomUtils';
@@ -27,14 +26,14 @@ class RecordUI extends Component {
       100
     );
 
-    this.recordMainSectionNode = null;
+    this.recordMainSectionNode = createRef();
     this.activeSectionTop = null;
   }
 
   componentDidMount() {
     this._scrollToActiveSection();
     this.removeScrollAnchor = addScrollAnchor(
-      this.recordMainSectionNode,
+      this.recordMainSectionNode.current,
       document.getElementById(location.hash.slice(1))
     );
   }
@@ -178,7 +177,7 @@ class RecordUI extends Component {
             />
           </div>
         </div>
-        <div className="wdk-RecordMain">
+        <div className="wdk-RecordMain" ref={this.recordMainSectionNode}>
           {/* <div className="wdk-RecordMainSectionFieldToggles">
             <button type="button" title="Expand all content" className="wdk-Link"
               onClick={this.props.updateAllFieldVisibility.bind(null, true)}>Expand All</button>
@@ -187,7 +186,6 @@ class RecordUI extends Component {
               onClick={this.props.updateAllFieldVisibility.bind(null, false)}>Collapse All</button>
           </div> */}
           <RecordMainSection
-            ref={(c) => (this.recordMainSectionNode = findDOMNode(c))}
             record={this.props.record}
             recordClass={this.props.recordClass}
             categories={this.props.categoryTree.children}