Merge pull request #2 from programmarchy/pop-to-root

Pop to root view

Author: aputinski

README.md

@@ -156,6 +156,20 @@ Addtional options - see [pushView()](#push-options)
 
 ***
 
+### `popToRootView([options])`
+
+Pop the all the views off the stack except the first (root) view
+
+**Arguments**
+
+##### `options` `{object}`
+
+Addtional options - see [pushView()](#push-options)
+
+##### `options.transiton` `{number|function}` `default=Transition.type.PUSH_RIGHT`
+
+***
+
 ### `setViews(views, [options])`
 
 Replaces the views currently managed by the navigationController

examples/src/view.jsx

@@ -48,6 +48,11 @@ class View extends React.Component {
       transition: Transition.type.COVER_UP
     });
   }
+  onPopToRoot() {
+    this.props.navigationController.popToRootView({
+      transition: this.props.modal ? Transition.type.REVEAL_DOWN : Transition.type.PUSH_RIGHT
+    });
+  }
   render() {
     return (
       <div
@@ -65,6 +70,7 @@ class View extends React.Component {
           <button onClick={this.onModal.bind(this)}>
             Show Modal
           </button>
+          {this.renderPopToRootButton()}
         </section>
       </div>
     );
@@ -80,6 +86,11 @@ class View extends React.Component {
       ? <div />
       : <button onClick={this.onNext.bind(this)}>Next</button>;
   }
+  renderPopToRootButton() {
+    return this.props.index === 1
+      ? <div />
+      : <button onClick={this.onPopToRoot.bind(this)}>Pop To Root</button>;
+  }
 }
 
 View.defaultProps ={

spec/navigation-controller.spec.jsx

@@ -20,6 +20,7 @@ const transformPrefix = getVendorPrefix('transform');
 const View = require('../examples/src/view');
 class ViewA extends View { }
 class ViewB extends View { }
+class ViewC extends View { }
 
 describe('NavigationController', () => {
   const views = [
@@ -594,6 +595,145 @@ describe('NavigationController', () => {
       });
     });
   });
+  describe('#__popToRootView', () => {
+    beforeEach(done => {
+      controller = renderIntoDocument(
+        <NavigationController views={[<ViewA />,<ViewB />,<ViewC />]} />
+      );
+      requestAnimationFrame(() => {
+        done();
+      });
+    });
+    it('throws an error if an only one view is in the stack', () => {
+      controller.state.views = [<ViewA />];
+      expect(() => {
+        controller.__popToRootView()
+      }).to.throw(/stack/);
+    });
+    it('returns early if the controller is already transitioning', () => {
+      const spy = sinon.spy(controller, 'setState');
+      controller.__isTransitioning = true;
+      controller.__popToRootView();
+      expect(spy.called).not.to.be.true;
+    });
+    it('shows the view wrappers', () => {
+      const spy = sinon.spy(controller, '__displayViews');
+      controller.__popToRootView();
+      expect(spy.calledWith('block')).to.be.true;
+    });
+    it('removes all but the root view from state.views', (done) => {
+      controller.__popToRootView({
+        onComplete() {
+          expect(controller.state.views).to.have.length(1);
+          expect(controller.state.views[0].type).to.equal(ViewA);
+          done();
+        },
+        transition: Transition.type.NONE
+      });
+    });
+    it('sets state.transition', (done) => {
+      controller.__popToRootView({
+        transition: Transition.type.NONE,
+        onComplete() {
+          done();
+        }
+      });
+      requestAnimationFrame(() => {
+        expect(controller.state.transition).to.equal(Transition.type.NONE);
+      });
+    });
+    it('sets state.mountedViews', (done) => {
+      const [prev,next] = controller.__viewIndexes;
+      controller.__popToRootView({
+        transition: Transition.type.PUSH_RIGHT,
+        onComplete() {
+          done();
+        }
+      });
+      requestAnimationFrame(() => {
+        expect(controller.state.mountedViews[prev].type).to.equal(ViewC);
+        expect(controller.state.mountedViews[next].type).to.equal(ViewA);
+      });
+    });
+    it('transitions the views', (done) => {
+      const spy = sinon.spy(controller, '__transitionViews');
+      controller.__popToRootView({ transition: Transition.type.NONE });
+      requestAnimationFrame(() => {
+        expect(spy.calledOnce).to.be.true;
+        done();
+      });
+    });
+    it('sets __isTransitioning=true', () => {
+      controller.__popToRootView({ transition: Transition.type.NONE });
+      expect(controller.__isTransitioning).to.be.true;
+    });
+    it('calls the onComplete callback', (done) => {
+      controller.__popToRootView({
+        onComplete() {
+          expect(true).to.be.true;
+          done();
+        }
+      });
+    });
+    it('does not rehydrate the state', (done) => {
+      controller = renderIntoDocument(
+        <NavigationController views={[<ViewA />]} preserveState={false} />
+      );
+      requestAnimationFrame(() => {
+        var rootView = controller.refs[`view-${controller.__viewIndexes[0]}`];
+        rootView.setState({
+          foo: 'bar'
+        });
+        controller.pushView(<ViewB />, {
+          transition: Transition.type.NONE,
+          onComplete() {
+            controller.pushView(<ViewC />, {
+              transition: Transition.type.NONE,
+              onComplete() {
+                controller.popToRootView({
+                  transition: Transition.type.NONE,
+                 onComplete() {
+                    rootView = controller.refs[`view-${controller.__viewIndexes[1]}`];
+                    expect(rootView.state)
+                      .not.to.have.property('foo');
+                    done();
+                  }
+                });
+              }
+            })
+          }
+        });
+      });
+    });
+    it('rehydrates the state', (done) => {
+      controller = renderIntoDocument(
+        <NavigationController views={[<ViewA />]} preserveState={true} />
+      );
+      requestAnimationFrame(() => {
+        controller.refs[`view-${controller.__viewIndexes[0]}`].setState({
+          foo: 'bar'
+        });
+        controller.pushView(<ViewB />, {
+          transition: Transition.type.NONE,
+          onComplete() {
+            controller.pushView(<ViewC />, {
+              transition: Transition.type.NONE,
+              onComplete() {
+                controller.popToRootView({
+                  transition: Transition.type.NONE,
+                 onComplete() {
+                    expect(controller.refs[`view-${controller.__viewIndexes[1]}`].state)
+                      .to.have.property('foo');
+                    done();
+                  }
+                });
+              }
+            })
+          }
+        });
+      });
+    });
+  });
   describe('#__setViews', () => {
     beforeEach(done => {
       requestAnimationFrame(() => {

src/navigation-controller.jsx

@@ -45,6 +45,13 @@ const optionTypes = {
     ]),
     onComplete: React.PropTypes.func
   },
+  popToRootView: {
+    transition: React.PropTypes.oneOfType([
+      React.PropTypes.func,
+      React.PropTypes.number
+    ]),
+    onComplete: React.PropTypes.func
+  },
   setViews: {
     views: React.PropTypes.arrayOf(
       React.PropTypes.element
@@ -448,6 +455,51 @@ class NavigationController extends React.Component {
     this.__pushView(last(views), options);
   }
 
+  __popToRootView(options) {
+    options = typeof options === 'object' ? options : {};
+    const defaults = {
+      transition: Transition.type.PUSH_RIGHT
+    };
+    options = assign({}, defaults, options);
+    checkOptions('popToRootView', options);
+    if (this.state.views.length === 1) {
+      throw new Error('popToRootView() can only be called with two or more views in the stack')
+    };
+    if (this.__isTransitioning) return;
+    const {transition} = options;
+    const [prev,next] = this.__viewIndexes;
+    const rootView = this.state.views[0];
+    const topView = last(this.state.views);
+    const mountedViews = [];
+          mountedViews[prev] = topView;
+          mountedViews[next] = rootView;
+    // Display only the root view
+    const views = [rootView];
+    // Show the wrappers
+    this.__displayViews('block');
+    // Pop from the top view, all the way to the root view
+    this.setState({
+      transition,
+      views,
+      mountedViews
+    }, () => {
+      // The view that will be shown
+      const rootView = this.refs[`view-1`];
+      if (rootView && this.state.preserveState) {
+        const state = this.__viewStates[0];
+        // Rehydrate the state
+        if (state) {
+          rootView.setState(state);  
+        }
+      }
+      // Clear view states
+      this.__viewStates.length = 0;
+      // Transition
+      this.__transitionViews(options);
+    });
+    this.__isTransitioning = true;
+  }
+
   pushView() {
     this.__pushView.apply(this, arguments);
   }
@@ -456,6 +508,10 @@ class NavigationController extends React.Component {
     this.__popView.apply(this, arguments);
   }
 
+  popToRootView() {
+    this.__popToRootView.apply(this, arguments);
+  }
+
   setViews() {
     this.__setViews.apply(this, arguments);
   }