refactor: use ref API instead of findDOMNode

src/components/Autocomplete/Autocomplete.react.js

@@ -8,7 +8,6 @@
 import Position             from 'lib/Position';
 import PropTypes            from 'prop-types'
 import React, { Component } from 'react';
-import ReactDOM             from 'react-dom';
 import styles               from 'components/Autocomplete/Autocomplete.scss';
 import SuggestionsList      from 'components/SuggestionsList/SuggestionsList.react';
 
@@ -32,8 +31,9 @@ export default class Autocomplete extends Component {
     this.getPosition = this.getPosition.bind(this);
     this.recalculatePosition = this.recalculatePosition.bind(this);
 
-    this.inputRef = React.createRef(null);
-    this.dropdownRef = React.createRef(null);
+    this.inputRef = React.createRef();
+    this.dropdownRef = React.createRef();
+    this.fieldRef = React.createRef();
 
     this.handleScroll = () => {
       const pos = this.getPosition();
@@ -57,23 +57,24 @@ export default class Autocomplete extends Component {
 
   componentDidMount() {
     window.addEventListener('resize', this.handleResize);
-    this.node = ReactDOM.findDOMNode(this);
-    this.node.addEventListener('scroll', this.handleScroll);
+    this.fieldRef.current.addEventListener('scroll', this.handleScroll);
     this.recalculatePosition();
     this._ignoreBlur = false;
   }
 
   componentWillUnmount() {
-    this.node.removeEventListener('scroll', this.handleScroll);
+    this.fieldRef.current.removeEventListener('scroll', this.handleScroll);
     window.removeEventListener('resize', this.handleResize);
   }
 
   getPosition() {
+    const node = this.fieldRef.current;
+
     let newPosition = this.props.fixed
-      ? Position.inWindow(this.node)
-      : Position.inDocument(this.node);
+      ? Position.inWindow(node)
+      : Position.inDocument(node);
 
-    newPosition.y += this.node.offsetHeight;
+    newPosition.y += node.offsetHeight;
 
     return newPosition;
   }
@@ -321,7 +322,7 @@ export default class Autocomplete extends Component {
 
     return (
       <React.Fragment>
-        <div className={fieldClassName}>
+        <div className={fieldClassName} ref={this.fieldRef}>
           <input
             id={1}
             role={'combobox'}

src/components/BrowserFilter/BrowserFilter.react.js

@@ -13,7 +13,6 @@ import Icon          from 'components/Icon/Icon.react';
 import Popover       from 'components/Popover/Popover.react';
 import Position      from 'lib/Position';
 import React         from 'react';
-import ReactDOM      from 'react-dom';
 import styles        from 'components/BrowserFilter/BrowserFilter.scss';
 import { List, Map } from 'immutable';
 
@@ -29,10 +28,7 @@ export default class BrowserFilter extends React.Component {
       blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
     };
     this.toggle = this.toggle.bind(this);
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -93,9 +89,10 @@ export default class BrowserFilter extends React.Component {
   render() {
     let popover = null;
     let buttonStyle = [styles.entry];
+    const node = this.wrapRef.current;
 
     if (this.state.open) {
-      let position = Position.inDocument(this.node);
+      let position = Position.inDocument(node);
       let popoverStyle = [styles.popover];
       buttonStyle.push(styles.title);
 
@@ -109,7 +106,7 @@ export default class BrowserFilter extends React.Component {
       popover = (
         <Popover fixed={true} position={position} onExternalClick={this.toggle} contentId={POPOVER_CONTENT_ID}>
           <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)} id={POPOVER_CONTENT_ID}>
-            <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
+            <div onClick={this.toggle} style={{ cursor: 'pointer', width: node.clientWidth, height: node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
                 className={this.props.className}
@@ -157,7 +154,7 @@ export default class BrowserFilter extends React.Component {
       buttonStyle.push(styles.disabled);
     }
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         <div className={buttonStyle.join(' ')} onClick={this.toggle}>
           <Icon name="filter-solid" width={14} height={14} />
           <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>

src/components/BrowserFilter/FilterRow.react.js

@@ -12,7 +12,6 @@ import Icon            from 'components/Icon/Icon.react';
 import Parse           from 'parse';
 import PropTypes       from 'lib/PropTypes';
 import React           from 'react';
-import ReactDOM        from 'react-dom';
 import styles          from 'components/BrowserFilter/BrowserFilter.scss';
 import validateNumeric from 'lib/validateNumeric';
 
@@ -23,7 +22,7 @@ for (let c in Constraints) {
 
 let setFocus = (input) => {
   if (input !== null) {
-    ReactDOM.findDOMNode(input).focus();
+    input.focus();
   }
 }
 

src/components/BrowserMenu/BrowserMenu.react.js

@@ -10,24 +10,20 @@ import Icon         from 'components/Icon/Icon.react';
 import Position     from 'lib/Position';
 import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
-import ReactDOM     from 'react-dom';
 import styles       from 'components/BrowserMenu/BrowserMenu.scss';
 
 export default class BrowserMenu extends React.Component {
   constructor() {
     super();
 
     this.state = { open: false };
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   render() {
     let menu = null;
     if (this.state.open) {
-      let position = Position.inDocument(this.node);
+      let position = Position.inDocument(this.wrapRef.current);
       let titleStyle = [styles.title];
       if (this.props.active) {
         titleStyle.push(styles.active);
@@ -39,7 +35,7 @@ export default class BrowserMenu extends React.Component {
               <Icon name={this.props.icon} width={14} height={14} />
               <span>{this.props.title}</span>
             </div>
-            <div className={styles.body} style={{ minWidth: this.node.clientWidth }}>
+            <div className={styles.body} style={{ minWidth: this.wrapRef.current.clientWidth }}>
               {React.Children.map(this.props.children, (child) => (
                 React.cloneElement(child, { ...child.props, onClick: () => {
                   this.setState({ open: false });
@@ -66,7 +62,7 @@ export default class BrowserMenu extends React.Component {
       };
     }
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         <div className={classes.join(' ')} onClick={onClick}>
           <Icon name={this.props.icon} width={14} height={14} />
           <span>{this.props.title}</span>

src/components/ChromeDatePicker/ChromeDatePicker.react.js

@@ -15,7 +15,6 @@ import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import PropTypes      from 'lib/PropTypes';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import styles         from 'components/ChromeDatePicker/ChromeDatePicker.scss';
 
 export default class ChromeDatePicker extends React.Component {
@@ -26,20 +25,18 @@ export default class ChromeDatePicker extends React.Component {
       open: false,
       position: null,
     };
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef()
   }
 
   toggle() {
     this.setState(() => {
       if (this.state.open) {
         return { open: false };
       }
-      let pos = Position.inWindow(this.node);
+      let pos = Position.inWindow(this.wrapRef.current);
       if (this.props.align === Directions.RIGHT) {
-        pos.x += this.node.clientWidth;
+        pos.x += this.wrapRef.current.clientWidth;
       }
       return {
         open: true,
@@ -92,7 +89,7 @@ export default class ChromeDatePicker extends React.Component {
     }
 
     return (
-      <div className={styles.wrap} onClick={this.toggle.bind(this)}>
+      <div className={styles.wrap} onClick={this.toggle.bind(this)} ref={this.wrapRef}>
         {content}
         {popover}
       </div>

src/components/ChromeDropdown/ChromeDropdown.react.js

@@ -9,7 +9,6 @@ import Popover   from 'components/Popover/Popover.react';
 import PropTypes from 'lib/PropTypes';
 import Position  from 'lib/Position';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/ChromeDropdown/ChromeDropdown.scss';
 
 export default class ChromeDropdown extends React.Component {
@@ -20,6 +19,8 @@ export default class ChromeDropdown extends React.Component {
       open: false,
       selected: false,
     };
+
+    this.dropdownRef = React.createRef();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -38,10 +39,6 @@ export default class ChromeDropdown extends React.Component {
     this.styles = this.props.styles || styles;
   }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
-  }
-
   select(value, e) {
     e.stopPropagation();
     this.setState({
@@ -72,8 +69,8 @@ export default class ChromeDropdown extends React.Component {
     );
 
     if (this.state.open) {
-      let position = Position.inWindow(this.node);
-      let measuredWidth = parseFloat(this.node.offsetWidth);
+      let position = Position.inWindow(this.dropdownRef.current);
+      let measuredWidth = parseFloat(this.dropdownRef.current.offsetWidth);
       widthStyle = { width: measuredWidth };
       content = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
@@ -93,7 +90,7 @@ export default class ChromeDropdown extends React.Component {
     }
 
     return (
-      <div style={widthStyle} className={styles.dropdown}>
+      <div style={widthStyle} className={styles.dropdown} ref={this.dropdownRef}>
         {content}
       </div>
     );

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { DndProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
-import ReactDOM from 'react-dom';
 
 import Button from 'components/Button/Button.react';
 import ColumnConfigurationItem from 'components/ColumnsConfiguration/ColumnConfigurationItem.react';
@@ -19,10 +18,8 @@ export default class ColumnsConfiguration extends React.Component {
     this.state = {
       open: false
     };
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.entryRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -73,12 +70,16 @@ export default class ColumnsConfiguration extends React.Component {
 
   render() {
     const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
-    let [ title, entry ] = [styles.title, styles.entry ].map(className => (
-      <div className={className} onClick={this.toggle.bind(this)}>
-        <Icon name='manage-columns' width={14} height={14} />
-        <span>Manage Columns</span>
-      </div>
-    ));
+    const title = <div className={styles.title} onClick={this.toggle.bind(this)}>
+      <Icon name='manage-columns' width={14} height={14} />
+      <span>Manage Columns</span>
+    </div>
+
+    let entry = <div className={styles.entry} onClick={this.toggle.bind(this)} ref={this.entryRef}>
+      <Icon name='manage-columns' width={14} height={14} />
+      <span>Manage Columns</span>
+    </div>
+
     if (disabled) {
       entry = <div className={styles.entry + ' ' + styles.disabled} onClick={null}>
         <Icon name='manage-columns' width={14} height={14} />
@@ -89,7 +90,7 @@ export default class ColumnsConfiguration extends React.Component {
     let popover = null;
     if (this.state.open) {
       popover = (
-        <Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
+        <Popover fixed={true} position={Position.inDocument(this.entryRef.current)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
           <div className={styles.popover} id={POPOVER_CONTENT_ID}>
             {title}
             <div className={styles.body}>

src/components/CreditCardInput/CreditCardInput.react.js

@@ -7,7 +7,6 @@
  */
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/CreditCardInput/CreditCardInput.scss';
 
 const VALID_REGEX = /^[\d ]*$/;
@@ -18,10 +17,12 @@ class CreditCardInput extends React.Component {
     this.state = {
       cursorPosition: 0,
     };
+
+    this.inputRef = React.createRef();
   }
 
   componentDidUpdate() {
-    ReactDOM.findDOMNode(this).setSelectionRange(this.state.cursorPosition, this.state.cursorPosition);
+    this.inputRef.current.setSelectionRange(this.state.cursorPosition, this.state.cursorPosition);
   }
 
   render() {
@@ -33,6 +34,7 @@ class CreditCardInput extends React.Component {
     }
     return (
       <input
+        ref={this.inputRef}
         type='text'
         className={styles.input}
         value={value}

src/components/DatePicker/DatePicker.react.js

@@ -11,7 +11,6 @@ import { MONTHS }     from 'lib/DateUtils';
 import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import SliderWrap     from 'components/SliderWrap/SliderWrap.react';
 import styles         from 'components/DatePicker/DatePicker.scss';
 
@@ -22,10 +21,7 @@ export default class DatePicker extends React.Component {
       open: false,
       position: null
     }
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.inputRef = React.createRef()
   }
 
   toggle() {
@@ -35,7 +31,7 @@ export default class DatePicker extends React.Component {
       }
       return {
         open: true,
-        position: Position.inDocument(this.node)
+        position: Position.inDocument(this.inputRef.current)
       };
     });
   }
@@ -49,7 +45,7 @@ export default class DatePicker extends React.Component {
   render() {
     let popover = null;
     if (this.state.open) {
-      let width = this.node.clientWidth;
+      let width = this.inputRef.current.clientWidth;
       popover = (
         <Popover position={this.state.position} onExternalClick={this.close.bind(this)}>
           <SliderWrap direction={Directions.DOWN} expanded={true}>
@@ -75,7 +71,7 @@ export default class DatePicker extends React.Component {
     }
 
     return (
-      <div className={styles.input} onClick={this.toggle.bind(this)}>
+      <div className={styles.input} onClick={this.toggle.bind(this)} ref={this.inputRef}>
         {content}
         {popover}
       </div>