Implement popToRootView

Author: programmarchy

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 ={

src/navigation-controller.jsx

@@ -45,6 +45,14 @@ const optionTypes = {
     ]),
     onComplete: React.PropTypes.func
   },
+  popToRootView: {
+    preserveState: React.PropTypes.bool,
+    transition: React.PropTypes.oneOfType([
+      React.PropTypes.func,
+      React.PropTypes.number
+    ]),
+    onComplete: React.PropTypes.func
+  },
   setViews: {
     views: React.PropTypes.arrayOf(
       React.PropTypes.element
@@ -427,6 +435,53 @@ 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;
+    console.log('prev', topView.props.index)
+    console.log('next', rootView.props.index)
+    // 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);
   }
@@ -435,6 +490,10 @@ class NavigationController extends React.Component {
     this.__popView.apply(this, arguments);
   }
 
+  popToRootView() {
+    this.__popToRootView.apply(this, arguments);
+  }
+
   setViews() {
     this.__setViews.apply(this, arguments);
   }