Remove React.findDOMNode()

Author: aputinski

spec/navigation-controller.spec.jsx

@@ -31,8 +31,8 @@ describe('NavigationController', () => {
     controller = renderIntoDocument(
       <NavigationController views={views} />
     );
-    viewWrapper0 = controller['__view-wrapper-0'];
-    viewWrapper1 = controller['__view-wrapper-1'];
+    viewWrapper0 = controller.refs['view-wrapper-0'];
+    viewWrapper1 = controller.refs['view-wrapper-1'];
   });
   it('exports a component', () => {
     let controller = renderIntoDocument(
@@ -95,11 +95,6 @@ describe('NavigationController', () => {
     });
   });
   describe('#componentDidMount', () => {
-    it('caches the view wrappers', () => {
-      expect(viewWrapper0).to.be.an.instanceof(HTMLElement);
-      expect(viewWrapper1).to.be.an.instanceof(HTMLElement);
-      expect(viewWrapper0).not.to.equal(viewWrapper1);
-    });
     it('transforms the view wrappers', () => {
       expect(viewWrapper0).to.have.deep.property(`style.${transformPrefix}`);
       expect(viewWrapper1).to.have.deep.property(`style.${transformPrefix}`);
@@ -252,7 +247,7 @@ describe('NavigationController', () => {
       controller.__animateViewsComplete();
       const [prev,next] = controller.__viewIndexes;
       requestAnimationFrame(() => {
-        expect(controller[`__view-wrapper-${prev}`].style.display).to.equal('none');
+        expect(controller.refs[`view-wrapper-${prev}`].style.display).to.equal('none');
         done();
       });
     });
@@ -291,16 +286,16 @@ describe('NavigationController', () => {
     it('hides the views', (done) => {
       controller.__displayViews('none');
       requestAnimationFrame(() => {
-        expect(controller[`__view-wrapper-0`].style.display).to.equal('none');
-        expect(controller[`__view-wrapper-1`].style.display).to.equal('none');
+        expect(controller.refs[`view-wrapper-0`].style.display).to.equal('none');
+        expect(controller.refs[`view-wrapper-1`].style.display).to.equal('none');
         done();
       });
     });
     it('shows the views', (done) => {
       controller.__displayViews('block');
       requestAnimationFrame(() => {
-        expect(controller[`__view-wrapper-0`].style.display).to.equal('block');
-        expect(controller[`__view-wrapper-1`].style.display).to.equal('block');
+        expect(controller.refs[`view-wrapper-0`].style.display).to.equal('block');
+        expect(controller.refs[`view-wrapper-1`].style.display).to.equal('block');
         done();
       });
     });

src/navigation-controller.jsx

@@ -119,9 +119,6 @@ class NavigationController extends React.Component {
   }
 
   componentDidMount() {
-    // Cache the view wrappers
-    this['__view-wrapper-0'] = React.findDOMNode(this.refs[`view-wrapper-0`]);
-    this['__view-wrapper-1'] = React.findDOMNode(this.refs[`view-wrapper-1`]);
     // Position the wrappers
     this.__transformViews(0, 0, -100, 0);
     // Push the last view
@@ -132,16 +129,16 @@ class NavigationController extends React.Component {
 
   /**
    * Translate the view wrappers by a specified percentage
-   * 
+   *
    * @param {number} prevX
    * @param {number} prevY
    * @param {number} nextX
    * @param {number} nextY
    */
   __transformViews(prevX, prevY, nextX, nextY) {
     const [prev,next] = this.__viewIndexes;
-    const prevView = this[`__view-wrapper-${prev}`];
-    const nextView = this[`__view-wrapper-${next}`];
+    const prevView = this.refs[`view-wrapper-${prev}`];
+    const nextView = this.refs[`view-wrapper-${next}`];
     requestAnimationFrame(() => {
       prevView.style[transformPrefix] = `translate3d(${prevX}%,${prevY}%,0px)`;
       prevView.style.zIndex = Transition.isReveal(this.state.transition) ? 1 : 0;
@@ -213,7 +210,7 @@ class NavigationController extends React.Component {
     this.__isTransitioning = false;
     const [prev,next] = this.__viewIndexes;
     // Hide the previous view wrapper
-    const prevViewWrapper = this[`__view-wrapper-${prev}`];
+    const prevViewWrapper = this.refs[`view-wrapper-${prev}`];
           prevViewWrapper.style.display = 'none';
     // Did hide view lifecycle event
     const prevView = this.refs['view-0'];
@@ -244,8 +241,8 @@ class NavigationController extends React.Component {
    * @param {string} value
    */
   __displayViews(value) {
-    this['__view-wrapper-0'].style.display = value;
-    this['__view-wrapper-1'].style.display = value;
+    this.refs['view-wrapper-0'].style.display = value;
+    this.refs['view-wrapper-1'].style.display = value;
   }
 
   /**
@@ -310,8 +307,8 @@ class NavigationController extends React.Component {
     // Custom transition
     if (typeof transition === 'function') {
       const [prev,next] = this.__viewIndexes;
-      const prevView = this[`__view-wrapper-${prev}`];
-      const nextView = this[`__view-wrapper-${next}`];
+      const prevView = this.refs[`view-wrapper-${prev}`];
+      const nextView = this.refs[`view-wrapper-${next}`];
       transition(prevView, nextView, () => {
         this.__animateViewsComplete();
         this.__transitionViewsComplete();