Merge pull request #798 from rseemann/feature/multiplePops

[Feature/Action] Enable the popping of multiple scenes

Author: aksonov

Example/Example.js

@@ -4,6 +4,7 @@ import Launch from './components/Launch'
 import Register from './components/Register'
 import Login from './components/Login'
 import Login2 from './components/Login2'
+import Login3 from './components/Login3'
 import {Scene, Reducer, Router, Switch, TabBar, Modal, Schema, Actions} from 'react-native-router-flux'
 import Error from './components/Error'
 import Home from './components/Home'
@@ -108,6 +109,7 @@ export default class Example extends React.Component {
                     <Scene key="login" direction="vertical"  >
                         <Scene key="loginModal" direction="vertical" component={Login} title="Login"/>
                         <Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
+                        <Scene key="loginModal3" hideNavBar={true} component={Login3} title="Login3" panHandlers={null} duration={1}/>
                     </Scene>
                     <Scene key="tabbar" component={NavigationDrawer}>
                         <Scene key="main" tabs={true} >

Example/components/Login2.js

@@ -12,14 +12,13 @@ const styles = StyleSheet.create({
     },
 });
 
-
 export default class extends React.Component {
     render(){
-
         return (
             <View style={styles.container}>
                 <Text>Login2 page: {this.props.data}</Text>
                 <Button onPress={Actions.pop}>Back</Button>
+                <Button onPress={Actions.loginModal3}>Login 3</Button>
             </View>
         );
     }

Example/components/Login3.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import {View, Text, StyleSheet} from "react-native";
+import Button from "react-native-button";
+import {Actions} from "react-native-router-flux";
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#F5FCFF",
+    },
+});
+
+const popToRoot = () => {
+  Actions.popTo("root");
+}
+
+const popToLogin1 = () => {
+  Actions.popTo("loginModal");
+}
+
+const popToLogin2 = () => {
+  Actions.popTo("loginModal2");
+}
+
+export default class extends React.Component {
+    render(){
+        return (
+            <View style={styles.container}>
+                <Text>Login2 page: {this.props.data}</Text>
+                <Button onPress={Actions.pop}>Back</Button>
+                <Button onPress={popToLogin1}>To Login</Button>
+                <Button onPress={popToLogin2}>To Login2</Button>
+                <Button onPress={popToRoot}>To Root</Button>
+            </View>
+        );
+    }
+}

src/Actions.js

@@ -13,6 +13,7 @@ export const PUSH_ACTION = 'push';
 export const REPLACE_ACTION = 'replace';
 export const POP_ACTION2 = 'back';
 export const POP_ACTION = 'BackAction';
+export const POP_TO = 'popTo';
 export const REFRESH_ACTION = 'refresh';
 export const RESET_ACTION = 'reset';
 export const FOCUS_ACTION = 'focus';
@@ -32,6 +33,7 @@ function filterParam(data) {
 const reservedKeys = [
   POP_ACTION,
   POP_ACTION2,
+  POP_TO,
   REFRESH_ACTION,
   REPLACE_ACTION,
   JUMP_ACTION,
@@ -162,6 +164,10 @@ class Actions {
     return res;
   }
 
+  popTo(props = {}) {
+    return this.callback({ ...filterParam(props), type: POP_TO });
+  }
+
   pop(props = {}) {
     return this.callback({ ...filterParam(props), type: POP_ACTION });
   }

src/Reducer.js

@@ -12,6 +12,7 @@
 import {
   PUSH_ACTION,
   POP_ACTION2,
+  POP_TO,
   JUMP_ACTION,
   REPLACE_ACTION,
   RESET_ACTION,
@@ -56,18 +57,30 @@ function inject(state, action, props, scenes) {
     return state;
   }
   let ind;
+
   switch (action.type) {
+    case POP_TO: {
+      const targetIndex = action.targetIndex;
+
+      return {
+        ...state,
+        index: targetIndex,
+        children: state.children.slice(0, (targetIndex + 1)),
+      };
+    }
+
     case POP_ACTION2:
     case POP_ACTION:
       assert(!state.tabs, 'pop() operation cannot be run on tab bar (tabs=true)');
       if (state.index === 0) {
         return state;
       }
+
       return {
         ...state,
         index: state.index - 1,
         from: state.children[state.children.length - 1],
-        children: state.children.slice(0, -1),
+        children: state.children.slice(0, - 1),
       };
     case REFRESH_ACTION:
       return props.base ?
@@ -203,11 +216,38 @@ function reducer({ initialState, scenes }) {
     } else {
       // set current route for pop action or refresh action
       if (action.type === POP_ACTION || action.type === POP_ACTION2 ||
-        action.type === REFRESH_ACTION) {
+        action.type === REFRESH_ACTION || action.type === POP_TO) {
         if (!action.key && !action.parent) {
           action = { ...getCurrent(state), ...action };
         }
       }
+
+      // Find the parent and index of the future state
+      if (action.type === POP_TO) {
+        const target = action.data;
+        assert(target, 'PopTo() must be called with scene name');
+
+        const targetEl = findElement(state, target, action.type);
+        assert(targetEl, `Cannot find element name named ${target} within current state`);
+
+        // target is a node
+        let parent = targetEl.sceneKey;
+        let targetIndex = 0;
+
+        // target is child of a node
+        if (!targetEl.children) {
+          const targetParent = findElement(state, targetEl.parent, action.type);
+          assert(targetParent, `Cannot find parent for target ${target}`);
+          parent = targetParent.sceneKey;
+
+          targetIndex = targetParent.children.indexOf(targetEl);
+          assert(targetIndex > -1, `${target} does not belong to ${targetParent.sceneKey}`);
+        }
+
+        action.parent = parent;
+        action.targetIndex = targetIndex;
+      }
+
       // recursive pop parent
       if (action.type === POP_ACTION || action.type === POP_ACTION2) {
         const parent = action.parent || state.scenes[action.key].parent;
@@ -219,9 +259,11 @@ function reducer({ initialState, scenes }) {
         action.parent = el.sceneKey;
       }
     }
+
     switch (action.type) {
       case POP_ACTION2:
       case POP_ACTION:
+      case POP_TO:
       case REFRESH_ACTION:
       case PUSH_ACTION:
       case JUMP_ACTION: