Replace string ref attributes with callbacks

js/components/dialog.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ReactDOM = require('react-dom')
 const ImmutableComponent = require('./immutableComponent')
 const KeyCodes = require('../constants/keyCodes')
 
@@ -13,7 +12,7 @@ const KeyCodes = require('../constants/keyCodes')
 export default class Dialog extends ImmutableComponent {
   componentDidMount () {
     window.addEventListener('keydown', this.onKeyDown.bind(this))
-    ReactDOM.findDOMNode(this.refs.dialog).focus()
+    this.dialog.focus()
   }
 
   onClick () {
@@ -33,7 +32,7 @@ export default class Dialog extends ImmutableComponent {
   render () {
     return <div className={'dialog ' + (this.props.className || '')}
       tabIndex='-1'
-      ref='dialog'
+      ref={node => this.dialog = node}
       onKeyDown={this.onKeyDown.bind(this)}
       onClick={this.onClick.bind(this)}>
         {this.props.children}

js/components/findbar.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ReactDOM = require('react-dom')
 const ImmutableComponent = require('./immutableComponent')
 const Immutable = require('immutable')
 const keyCodes = require('../constants/keyCodes')
@@ -45,7 +44,7 @@ export default class FindBar extends ImmutableComponent {
    * Focus the find in page input and select the text
    */
   focus () {
-    const input = ReactDOM.findDOMNode(this.refs.searchInput)
+    const input = this.searchInput
     input.focus()
     input.select()
   }
@@ -137,7 +136,7 @@ export default class FindBar extends ImmutableComponent {
     return <div className='findBar'>
       <span className='searchStringContainer'>
         <input type='text'
-          ref='searchInput'
+          ref={node => this.searchInput = node}
           onKeyDown={this.onKeyDown.bind(this)}
           onChange={this.onChange.bind(this)}
           value={this.searchString}/>

js/components/frame.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ReactDOM = require('react-dom')
 const urlParse = require('url').parse
 const WindowActions = require('../actions/windowActions')
 const AppActions = require('../actions/appActions')
@@ -23,10 +22,6 @@ class Frame extends ImmutableComponent {
     super()
   }
 
-  get webviewContainer () {
-    return ReactDOM.findDOMNode(this.refs.webviewContainer)
-  }
-
   updateWebview () {
     // Create the webview dynamically because React doesn't whitelist all
     // of the attributes we need.
@@ -293,7 +288,7 @@ class Frame extends ImmutableComponent {
         frame={this.props.frame}
         findDetail={this.props.frame.get('findDetail')}
       />
-      <div ref='webviewContainer'
+      <div ref={node => this.webviewContainer = node}
         className={cx({
           webviewContainer: true,
           isPreview: this.props.isPreview

js/components/main.js

@@ -87,7 +87,7 @@ class Main extends ImmutableComponent {
   }
 
   get activeFrame () {
-    return this.refs[`frame${this.props.windowState.get('activeFrameKey')}`]
+    return this.frames[this.props.windowState.get('activeFrameKey')]
   }
 
   onBack () {
@@ -134,6 +134,9 @@ class Main extends ImmutableComponent {
     const sortedFrames = this.props.windowState.get('frames').sort(comparatorByKeyAsc)
 
     const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
+
+    this.frames = {}
+
     return <div id='window'>
       <div className='top'>
         <div className='backforward'>
@@ -188,7 +191,7 @@ class Main extends ImmutableComponent {
         {
           sortedFrames.map(frame =>
             <Frame
-              ref={`frame${frame.get('key')}`}
+              ref={node => this.frames[frame.get('key')] = node}
               frames={this.props.windowState.get('frames')}
               frame={frame}
               key={frame.get('key')}

js/components/tab.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ReactDOM = require('react-dom')
 
 const ImmutableComponent = require('./immutableComponent')
 
@@ -63,7 +62,7 @@ class Tab extends ImmutableComponent {
       return
     }
 
-    const rect = ReactDOM.findDOMNode(this.refs.tab).getBoundingClientRect()
+    const rect = this.tab.getBoundingClientRect()
     if (e.clientX > rect.left && e.clientX < rect.left + rect.width / 2 &&
       !this.props.frameProps.get('tabIsDraggingOverLeftHalf')) {
       WindowActions.tabDragDraggingOverLeftHalf(this.props.frameProps)
@@ -187,7 +186,7 @@ class Tab extends ImmutableComponent {
           this.props.frameProps.get('tabIsDraggingOverRightHalf')
       })}
       data-frame-key={this.props.frameProps.get('key')}
-      ref='tab'
+      ref={node => this.tab = node}
       draggable='true'
       title={this.props.frameProps.get('title')}
       onMouseEnter={this.onMouseEnter.bind(this)}

js/components/urlBar.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ReactDOM = require('react-dom')
 const urlParse = require('url').parse
 
 const ImmutableComponent = require('./immutableComponent')
@@ -40,7 +39,7 @@ class UrlBar extends ImmutableComponent {
   }
 
   updateDOMInputFocus (focused) {
-    const urlInput = ReactDOM.findDOMNode(this.refs.urlInput)
+    const urlInput = this.urlInput
     if (focused) {
       urlInput.focus()
     } else {
@@ -50,8 +49,7 @@ class UrlBar extends ImmutableComponent {
 
   updateDOMInputSelected (selected) {
     if (selected) {
-      const urlInput = ReactDOM.findDOMNode(this.refs.urlInput)
-      urlInput.select()
+      this.urlInput.select()
     }
   }
 
@@ -67,7 +65,7 @@ class UrlBar extends ImmutableComponent {
 
   // Whether the suggestions box is visible
   get suggestionsShown () {
-    return this.refs.urlBarSuggestions.shouldRender()
+    return this.urlBarSuggestions.shouldRender()
   }
 
   onKeyDown (e) {
@@ -79,10 +77,10 @@ class UrlBar extends ImmutableComponent {
           this.restore()
           WindowActions.setUrlBarSelected(true)
         } else {
-          const selectedIndex = this.refs.urlBarSuggestions.activeIndex
+          const selectedIndex = this.urlBarSuggestions.activeIndex
           if (this.suggestionsShown && selectedIndex > 0) {
             // load the selected suggestion
-            this.refs.urlBarSuggestions.clickSelected()
+            this.urlBarSuggestions.clickSelected()
           } else if (!isUrl(location)) {
             // do search.
             WindowActions.loadUrl(this.props.activeFrameProps, this.searchDetail.get('searchURL').replace('{searchTerms}', location))
@@ -96,13 +94,13 @@ class UrlBar extends ImmutableComponent {
         break
       case KeyCodes.UP:
         if (this.suggestionsShown) {
-          this.refs.urlBarSuggestions.previousSuggestion()
+          this.urlBarSuggestions.previousSuggestion()
           e.preventDefault()
         }
         break
       case KeyCodes.DOWN:
         if (this.suggestionsShown) {
-          this.refs.urlBarSuggestions.nextSuggestion()
+          this.urlBarSuggestions.nextSuggestion()
           e.preventDefault()
         }
         break
@@ -235,11 +233,11 @@ class UrlBar extends ImmutableComponent {
         })}
         id='urlInput'
         readOnly={this.props.titleMode}
-        ref='urlInput'/>
+        ref={node => this.urlInput = node}/>
         { !this.props.titleMode
           ? <span className='loadTime'>{this.loadTime}</span> : null }
         <UrlBarSuggestions
-          ref='urlBarSuggestions'
+          ref={node => this.urlBarSuggestions = node}
           suggestions={this.props.urlbar.get('suggestions')}
           sites={this.props.sites}
           frames={this.props.frames}