Replace findDOMNode calls with refs

src/components/RangeSelector.js

@@ -1,5 +1,4 @@
 const React = require('react');
-const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
 const Radium = require('radium');
 const _throttle = require('lodash/throttle');
@@ -56,6 +55,8 @@ class RangeSelector extends React.Component {
       upperValue,
       trackClicked: false
     };
+
+    this.rangeSelectorRef = React.createRef();
   }
 
   componentDidMount () {
@@ -81,7 +82,7 @@ class RangeSelector extends React.Component {
   };
 
   _setDefaultRangeValues = () => {
-    const component = ReactDOM.findDOMNode(this.rangeSelectorRef);
+    const component = this.rangeSelectorRef.current;
     const width = component ? component.offsetWidth : 0;
 
     //convert our values to a 0-based scale
@@ -129,7 +130,7 @@ class RangeSelector extends React.Component {
 
   _handleTrackMouseDown = (e) => {
     const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    const newPixels = clientX - ReactDOM.findDOMNode(this.rangeSelectorRef).getBoundingClientRect().left;
+    const newPixels = clientX - this.rangeSelectorRef.current.getBoundingClientRect().left;
     const updatedState = {
       trackClicked: true
     };
@@ -158,7 +159,7 @@ class RangeSelector extends React.Component {
         selectedLabel: null
       };
 
-      let newPixels = clientX - ReactDOM.findDOMNode(this.rangeSelectorRef).getBoundingClientRect().left;
+      let newPixels = clientX - this.rangeSelectorRef.current.getBoundingClientRect().left;
 
       //make sure we don't go past the end of the track
       newPixels = Math.min(newPixels, this.state.width);
@@ -257,9 +258,7 @@ class RangeSelector extends React.Component {
           onMouseUp={this._handleDragEnd}
           onTouchEnd={this._handleDragEnd}
           onTouchMove={this._handleDragging}
-          ref={(ref) => {
-            this.rangeSelectorRef = ref;
-          }}
+          ref={this.rangeSelectorRef}
           style={styles.range}
         >
           {this.props.presets.length ? (

src/components/Select.js

@@ -4,7 +4,6 @@ const keycode = require('keycode');
 const PropTypes = require('prop-types');
 const Radium = require('radium');
 const React = require('react');
-const ReactDOM = require('react-dom');
 
 import { css } from 'glamor'
 import { withTheme } from './Theme';
@@ -63,6 +62,8 @@ class Select extends React.Component {
       selected: props.selected,
       searchTerm: "",
     };
+
+    this.optionListRef = React.createRef();
   }
 
   componentWillReceiveProps (newProps) {
@@ -105,7 +106,7 @@ class Select extends React.Component {
   };
 
   _scrollListDown = (nextIndex) => {
-    const ul = ReactDOM.findDOMNode(this.optionList);
+    const ul = this.optionList.current;
     const activeLi = ul.children[nextIndex];
     const heightFromTop = nextIndex * activeLi.clientHeight;
 
@@ -115,7 +116,7 @@ class Select extends React.Component {
   };
 
   _scrollListUp = (prevIndex) => {
-    const ul = ReactDOM.findDOMNode(this.optionList);
+    const ul = this.optionList.current;
     const activeLi = ul.children[prevIndex];
     const heightFromBottom = (this.props.options.length - prevIndex) * activeLi.clientHeight;
 
@@ -155,7 +156,7 @@ class Select extends React.Component {
           <Listbox
             aria-label={this.props.placeholderText}
             className='mx-select-options'
-            ref={(ref) => this.optionList = ref}
+            ref={this.optionListRef}
             style={styles.options}
             withSearch={this.props.withSearch}
           >

src/components/SimpleSlider.js

@@ -1,5 +1,4 @@
 const React = require('react');
-const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
 const Radium = require('radium');
 const _merge = require('lodash/merge');
@@ -24,14 +23,19 @@ class SimpleSlider extends React.Component {
     disabled: false
   };
 
+  constructor(props) {
+    super(props);
+    this.rangeSelectorRef = React.createRef();
+  }
+
   state = {
     dragging: false,
     leftPixels: 0,
     width: 0
   };
 
   componentDidMount () {
-    const component = ReactDOM.findDOMNode(this.rangeSelectorRef);
+    const component = this.rangeSelectorRef.current;
     const width = component.clientWidth;
     const leftPixels = this.props.percent * width;
 
@@ -58,7 +62,7 @@ class SimpleSlider extends React.Component {
 
   _handleMouseEvents = (e) => {
     const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-    const leftSpace = ReactDOM.findDOMNode(this.rangeSelectorRef).getBoundingClientRect().left;
+    const leftSpace = this.rangeSelectorRef.current.getBoundingClientRect().left;
     let currentPercent = (clientX - leftSpace) / this.state.width;
 
     if (currentPercent < 0) {
@@ -101,9 +105,7 @@ class SimpleSlider extends React.Component {
           onMouseUp={disabled ? null : this._handleDragEnd}
           onTouchEnd={disabled ? null : this._handleDragEnd}
           onTouchMove={disabled ? null : this._handleDragging}
-          ref={(ref) => {
-            this.rangeSelectorRef = ref;
-          }}
+          ref={this.rangeSelectorRef}
           style={styles.range}
         >
           <div

src/components/Spin.js

@@ -1,6 +1,5 @@
 const PropTypes = require('prop-types');
 const React = require('react');
-const ReactDOM = require('react-dom');
 
 class Spin extends React.Component {
   static propTypes = {
@@ -14,8 +13,13 @@ class Spin extends React.Component {
     speed: 1000
   };
 
+  constructor(props) {
+    super(props);
+    this.spinRef = React.createRef();
+  }
+
   componentDidMount() {
-    const el = ReactDOM.findDOMNode(this);
+    const el = this.spinRef.current
     const speed = this.props.speed;
     const spinDirection = this.props.direction === 'clockwise' ? 1 : -1;
     let rotation = 0;
@@ -37,7 +41,7 @@ class Spin extends React.Component {
 
   render() {
     return (
-      <div className='mx-spin' style={{ display: 'inline-block' }}>
+      <div className='mx-spin' ref={this.spinRef} style={{ display: 'inline-block' }}>
         {this.props.children}
       </div>
     );

src/components/TypeAhead.js

@@ -1,5 +1,4 @@
 const React = require('react');
-const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
 const Radium = require('radium');
 
@@ -29,6 +28,12 @@ class TypeAhead extends React.Component {
     preSelectedItems: []
   };
 
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+    this.optionListRef = React.createRef();
+  }
+
   state = {
     highlightedValue: null,
     isOpen: false,
@@ -56,7 +61,7 @@ class TypeAhead extends React.Component {
       isOpen: true
     });
 
-    ReactDOM.findDOMNode(this.input).focus();
+    this.inputRef.current.focus();
   };
 
   _handleItemMouseOver = () => {
@@ -99,7 +104,7 @@ class TypeAhead extends React.Component {
       selectedItems
     });
 
-    ReactDOM.findDOMNode(this.input).focus();
+    this.inputRef.current.focus();
   };
 
   _handleItemRemove = (item) => {
@@ -113,7 +118,7 @@ class TypeAhead extends React.Component {
       selectedItems
     });
 
-    ReactDOM.findDOMNode(this.input).focus();
+    this.inputRef.current.focus();
   };
 
   _handleInputKeyDown = (e) => {
@@ -188,13 +193,13 @@ class TypeAhead extends React.Component {
         highlightedValue: null
       });
 
-      ReactDOM.findDOMNode(this.input).blur();
+      this.inputRef.current.blur();
     }
   };
 
   _scrollList = (nextIndex, scrollDirection) => {
     const filteredItems = this._getFilteredItems();
-    const ul = ReactDOM.findDOMNode(this.optionList);
+    const ul = this.optionListRef.current;
     const skipClearSelectAll = 2;
     const activeLi = ul.children[nextIndex + skipClearSelectAll];
 
@@ -244,7 +249,7 @@ class TypeAhead extends React.Component {
     return (
       <div
         className='mx-typeahead-option-list'
-        ref={(ref) => this.optionList = ref}
+        ref={this.optionListRef}
         style={styles.itemList}
       >
         {this.state.selectedItems.length !== this.props.items.length ? (
@@ -313,7 +318,7 @@ class TypeAhead extends React.Component {
           onChange={this._handleInputChange}
           onKeyDown={this._handleInputKeyDown}
           placeholder={!this.state.selectedItems.length ? this.props.placeholderText : null}
-          ref={(ref) => this.input = ref}
+          ref={this.inputRef}
           style={styles.input}
           type='text'
           value={this.state.searchString}