refactor: use object refs instead of deprecated string refs (#1866)

Author: visualfanatic

src/components/BooleanEditor/BooleanEditor.react.js

@@ -20,6 +20,7 @@ export default class BooleanEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
   }
 
   componentDidMount() {
@@ -33,7 +34,7 @@ export default class BooleanEditor extends React.Component {
   }
 
   checkExternalClick(e) {
-    if (!hasAncestor(e.target, this.refs.input)) {
+    if (!hasAncestor(e.target, this.inputRef.current)) {
       this.props.onCommit(this.state.value);
     }
   }
@@ -46,7 +47,7 @@ export default class BooleanEditor extends React.Component {
 
   render() {
     return (
-      <div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
+      <div ref={this.inputRef} style={{ minWidth: this.props.width }} className={styles.editor}>
         <Toggle
           type={Toggle.Types.TRUE_FALSE}
           value={this.state.value}

src/components/CategoryList/CategoryList.react.js

@@ -7,13 +7,17 @@
  */
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/CategoryList/CategoryList.scss';
 import { Link }  from 'react-router-dom';
 
 export default class CategoryList extends React.Component {
+  constructor() {
+    super();
+    this.listWrapperRef = React.createRef();
+  }
+
   componentDidMount() {
-    let listWrapper = ReactDOM.findDOMNode(this.refs.listWrapper);
+    let listWrapper = this.listWrapperRef.current;
     if (listWrapper) {
       this.highlight = document.createElement('div');
       this.highlight.className = styles.highlight;
@@ -52,7 +56,7 @@ export default class CategoryList extends React.Component {
       return null;
     }
     return (
-      <div ref='listWrapper' className={styles.class_list}>
+      <div ref={this.listWrapperRef} className={styles.class_list}>
         {this.props.categories.map((c) => {
           let id = c.id || c.name;
           let count = c.count;

src/components/CodeSnippet/CodeSnippet.react.js

@@ -13,6 +13,11 @@ import './CodeSnippet.css';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 
 export default class CodeSnippet extends React.Component {
+  constructor() {
+    super();
+    this.codeRef = React.createRef();
+  }
+
   componentDidMount() {
     this._highlight();
   }
@@ -22,7 +27,7 @@ export default class CodeSnippet extends React.Component {
   }
 
   _highlight() {
-    Prism.highlightElement(this.refs.code);
+    Prism.highlightElement(this.codeRef.current);
   }
 
   render() {
@@ -34,7 +39,7 @@ export default class CodeSnippet extends React.Component {
     let pageStyle = fullPage ? { minHeight: 'calc(100vh - 96px)'} : {};
     return (
       <pre style={{ margin: 0, ...pageStyle}} className={classes.join(' ')}>
-        <code style={pageStyle} ref='code'>{this.props.source}</code>
+        <code style={pageStyle} ref={this.codeRef}>{this.props.source}</code>
       </pre>
     );
   }

src/components/DateTimeEditor/DateTimeEditor.react.js

@@ -23,6 +23,8 @@ export default class DateTimeEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
+    this.editorRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -31,16 +33,16 @@ export default class DateTimeEditor extends React.Component {
 
   componentDidMount() {
     document.body.addEventListener('click', this.checkExternalClick);
-    this.refs.input.addEventListener('keypress', this.handleKey);
+    this.inputRef.current.addEventListener('keypress', this.handleKey);
   }
 
   componentWillUnmount() {
     document.body.removeEventListener('click', this.checkExternalClick);
-    this.refs.input.removeEventListener('keypress', this.handleKey);
+    this.inputRef.current.removeEventListener('keypress', this.handleKey);
   }
 
   checkExternalClick(e) {
-    if (!hasAncestor(e.target, this.refs.editor)) {
+    if (!hasAncestor(e.target, this.editorRef.current)) {
       this.props.onCommit(this.state.value);
     }
   }
@@ -100,11 +102,11 @@ export default class DateTimeEditor extends React.Component {
     }
 
     return (
-      <div ref='editor' style={{ width: this.props.width }} className={styles.editor}>
+      <div ref={this.editorRef} style={{ width: this.props.width }} className={styles.editor}>
         <input
           autoFocus
           type='text'
-          ref='input'
+          ref={this.inputRef}
           value={this.state.text}
           onFocus={e => e.target.select()}
           onClick={this.toggle.bind(this)}

src/components/FileEditor/FileEditor.react.js

@@ -21,6 +21,8 @@ export default class FileEditor extends React.Component {
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
     this.removeFile = this.removeFile.bind(this);
+    this.inputRef = React.createRef();
+    this.fileInputRef = React.createRef();
   }
 
   componentDidMount() {
@@ -31,15 +33,15 @@ export default class FileEditor extends React.Component {
       fileInputElement.click();
     }
   }
-  
+
   componentWillUnmount() {
     document.body.removeEventListener('click', this.checkExternalClick);
     document.body.removeEventListener('keypress', this.handleKey);
   }
 
   checkExternalClick(e) {
     const { onCancel } = this.props;
-    if (!hasAncestor(e.target, this.refs.input) && onCancel) {
+    if (!hasAncestor(e.target, this.inputRef.current) && onCancel) {
       onCancel();
     }
   }
@@ -61,7 +63,7 @@ export default class FileEditor extends React.Component {
   }
 
   removeFile() {
-    this.refs.fileInput.value = '';
+    this.fileInputRef.current.value = '';
     this.props.onCommit(undefined);
   }
 
@@ -76,9 +78,9 @@ export default class FileEditor extends React.Component {
   render() {
     const file = this.props.value;
     return (
-      <div ref='input' style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
+      <div ref={this.inputRef.current} style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
         <a className={styles.upload}>
-          <input ref='fileInput' id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
+          <input ref={this.fileInputRef} id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
           <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
       </div>

src/components/GeoPointEditor/GeoPointEditor.react.js

@@ -22,15 +22,18 @@ export default class GeoPointEditor extends React.Component {
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKeyLatitude = this.handleKeyLatitude.bind(this);
     this.handleKeyLongitude = this.handleKeyLongitude.bind(this);
+
+    this.latitudeRef = React.createRef();
+    this.longitudeRef = React.createRef();
   }
 
   componentDidMount() {
     if (!this.props.disableAutoFocus) {
-      this.refs.latitude.focus();
+      this.latitudeRef.current.focus();
     }
-    this.refs.latitude.setSelectionRange(0, String(this.state.latitude).length);
-    this.refs.latitude.addEventListener('keypress', this.handleKeyLatitude);
-    this.refs.longitude.addEventListener('keypress', this.handleKeyLongitude);
+    this.latitudeRef.current.setSelectionRange(0, String(this.state.latitude).length);
+    this.latitudeRef.current.addEventListener('keypress', this.handleKeyLatitude);
+    this.longitudeRef.current.addEventListener('keypress', this.handleKeyLongitude);
   }
 
   componentWillReceiveProps(props) {
@@ -45,8 +48,8 @@ export default class GeoPointEditor extends React.Component {
   }
 
   componentWillUnmount() {
-    this.refs.latitude.removeEventListener('keypress', this.handleKeyLatitude);
-    this.refs.longitude.removeEventListener('keypress', this.handleKeyLongitude);
+    this.latitudeRef.current.removeEventListener('keypress', this.handleKeyLatitude);
+    this.longitudeRef.current.removeEventListener('keypress', this.handleKeyLongitude);
   }
 
   checkExternalClick() {
@@ -55,8 +58,8 @@ export default class GeoPointEditor extends React.Component {
       // check if activeElement is something else from input fields,
       // to avoid commiting new value on every switch of focus beetween latitude and longitude fields
       if (
-        document.activeElement !== this.refs.latitude &&
-        document.activeElement !== this.refs.longitude
+        document.activeElement !== this.latitudeRef.current &&
+        document.activeElement !== this.longitudeRef.current
       ) {
         this.commitValue();
       }
@@ -65,8 +68,8 @@ export default class GeoPointEditor extends React.Component {
 
   handleKeyLatitude(e) {
     if (e.keyCode === 13 || e.keyCode === 44) {
-      this.refs.longitude.focus();
-      this.refs.longitude.setSelectionRange(0, String(this.state.longitude).length);
+      this.longitudeRef.current.focus();
+      this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
     }
   }
 
@@ -112,15 +115,15 @@ export default class GeoPointEditor extends React.Component {
 
             if (values[1].length <= 0 || !validateNumeric(values[1])) {
               this.setState({ latitude: values[0] });
-              this.refs.longitude.focus();
-              this.refs.longitude.setSelectionRange(0, String(this.state.longitude).length);
+              this.longitudeRef.current.focus();
+              this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
               return;
             }
 
             if (validateNumeric(values[1])) {
               this.setState({ latitude: values[0] });
               this.setState({ longitude: values[1] });
-              this.refs.longitude.focus();
+              this.longitudeRef.current.focus();
               return;
             }
           }
@@ -130,14 +133,14 @@ export default class GeoPointEditor extends React.Component {
       this.setState({ [target]: validateNumeric(value) ? value : this.state[target] });
     };
     return (
-      <div ref='input' style={{ width: this.props.width, ...this.props.style }} className={styles.editor}>
+      <div style={{ width: this.props.width, ...this.props.style }} className={styles.editor}>
         <input
-          ref='latitude'
+          ref={this.latitudeRef}
           value={this.state.latitude}
           onBlur={this.checkExternalClick}
           onChange={onChange.bind(this, 'latitude')} />
         <input
-          ref='longitude'
+          ref={this.longitudeRef}
           value={this.state.longitude}
           onBlur={this.checkExternalClick}
           onChange={onChange.bind(this, 'longitude')} />

src/components/Loader/Loader.react.js

@@ -52,6 +52,13 @@ function getPosition(t) {
 }
 
 export default class Loader extends React.Component {
+  constructor() {
+    super();
+    this.dot0Ref = React.createRef();
+    this.dot1Ref = React.createRef();
+    this.dot2Ref = React.createRef();
+  }
+
   componentDidMount() {
     this.mounted = true;
     this.mountTime = new Date().getTime();
@@ -69,21 +76,21 @@ export default class Loader extends React.Component {
     let delta = new Date() - this.mountTime;
     let t = (delta / DURATION) % 1;
     let pos = getPosition(t);
-    let style = this.refs.dot0.style;
+    let style = this.dot0Ref.current.style;
     style.left = pos.x + 'px';
     style.top = pos.y + 'px';
     style.width = style.height = getRadius(t) + 'px';
 
     t = (delta / DURATION + 0.4) % 1;
     pos = getPosition(t);
-    style = this.refs.dot1.style;
+    style = this.dot1Ref.current.style;
     style.left = pos.x + 'px';
     style.top = pos.y + 'px';
     style.width = style.height = getRadius(t) + 'px';
 
     t = (delta / DURATION + 0.8) % 1;
     pos = getPosition(t);
-    style = this.refs.dot2.style;
+    style = this.dot2Ref.current.style;
     style.left = pos.x + 'px';
     style.top = pos.y + 'px';
     style.width = style.height = getRadius(t) + 'px';
@@ -98,9 +105,9 @@ export default class Loader extends React.Component {
     }
     return (
       <div className={classes}>
-        <div ref='dot0' />
-        <div ref='dot1' />
-        <div ref='dot2' />
+        <div ref={this.dot0Ref} />
+        <div ref={this.dot1Ref} />
+        <div ref={this.dot2Ref} />
       </div>
     );
   }

src/components/LoginForm/LoginForm.react.js

@@ -13,11 +13,15 @@ import { verticalCenter } from 'stylesheets/base.scss';
 
 // Class-style component, because we need refs
 export default class LoginForm extends React.Component {
+  constructor() {
+    super();
+    this.formRef = React.createRef();
+  }
   render() {
     return (
       <div className={styles.login} style={{ marginTop: this.props.marginTop || '-220px' }}>
         <Icon width={80} height={80} name='infinity' fill='#093A59' />
-        <form method='post' ref='form' action={this.props.endpoint} className={styles.form}>
+        <form method='post' ref={this.formRef} action={this.props.endpoint} className={styles.form}>
           <CSRFInput />
           <div className={styles.header}>{this.props.header}</div>
           {this.props.children}
@@ -34,7 +38,7 @@ export default class LoginForm extends React.Component {
                 return;
               }
               this.props.formSubmit();
-              this.refs.form.submit()
+              this.formRef.current.submit()
             }}
             className={styles.submit}
             value={this.props.action} />

src/components/NumberEditor/NumberEditor.react.js

@@ -19,10 +19,11 @@ export default class NumberEditor extends React.Component {
 
     this.checkExternalClick = this.checkExternalClick.bind(this);
     this.handleKey = this.handleKey.bind(this);
+    this.inputRef = React.createRef();
   }
 
   componentDidMount() {
-    this.refs.input.setSelectionRange(0, String(this.state.value).length);
+    this.inputRef.current.setSelectionRange(0, String(this.state.value).length);
     document.body.addEventListener('click', this.checkExternalClick);
     document.body.addEventListener('keypress', this.handleKey);
   }
@@ -33,7 +34,7 @@ export default class NumberEditor extends React.Component {
   }
 
   checkExternalClick(e) {
-    if (e.target !== this.refs.input) {
+    if (e.target !== this.inputRef.current) {
       this.commitValue()
     }
   }
@@ -64,7 +65,7 @@ export default class NumberEditor extends React.Component {
     return (
       <div style={{ width: this.props.width }} className={styles.editor}>
         <input
-          ref='input'
+          ref={this.inputRef}
           value={this.state.value}
           onChange={onChange} />
       </div>