Add action const POP_AND_REPLACE

docs/API_CONFIGURATION.md

@@ -61,6 +61,7 @@ Actions.ROUTE_NAME({type: ActionConst.RESET});
 | ActionConst.REPLACE | `string` | 'REACT_NATIVE_ROUTER_FLUX_REPLACE' | 'replace' |
 | ActionConst.BACK | `string` | 'REACT_NATIVE_ROUTER_FLUX_BACK' | 'back' |
 | ActionConst.BACK_ACTION | `string` | 'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION' | 'BackAction' |
+| ActionConst.POP_AND_REPLACE | `string` | 'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE' | 'popAndReplace' |
 | ActionConst.POP_TO | `string` | 'REACT_NATIVE_ROUTER_FLUX_POP_TO' | 'popTo' |
 | ActionConst.REFRESH | `string` | 'REACT_NATIVE_ROUTER_FLUX_REFRESH' | 'refresh' |
 | ActionConst.RESET | `string` | 'REACT_NATIVE_ROUTER_FLUX_RESET' | 'reset' |

index.d.ts

@@ -282,6 +282,7 @@ declare namespace RNRF {
     REPLACE: string,
     BACK: string,
     BACK_ACTION: string,
+    POP_AND_REPLACE: string,
     POP_TO: string,
     REFRESH: string,
     RESET: string,

src/ActionConst.js

@@ -4,6 +4,7 @@ export const PUSH_OR_POP = 'REACT_NATIVE_ROUTER_FLUX_PUSH_OR_POP';
 export const REPLACE = 'REACT_NATIVE_ROUTER_FLUX_REPLACE';
 export const BACK = 'REACT_NATIVE_ROUTER_FLUX_BACK';
 export const BACK_ACTION = 'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION';
+export const POP_AND_REPLACE = 'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE';
 export const POP_TO = 'REACT_NATIVE_ROUTER_FLUX_POP_TO';
 export const REFRESH = 'REACT_NATIVE_ROUTER_FLUX_REFRESH';
 export const RESET = 'REACT_NATIVE_ROUTER_FLUX_RESET';

src/Actions.js

@@ -16,6 +16,7 @@ export const ActionMap = {
   replace: ActionConst.REPLACE,
   back: ActionConst.BACK,
   BackAction: ActionConst.BACK_ACTION,
+  popAndReplace: ActionConst.POP_AND_REPLACE,
   popTo: ActionConst.POP_TO,
   refresh: ActionConst.REFRESH,
   reset: ActionConst.RESET,
@@ -26,6 +27,7 @@ export const ActionMap = {
   [ActionConst.REPLACE]: ActionConst.REPLACE,
   [ActionConst.BACK]: ActionConst.BACK,
   [ActionConst.BACK_ACTION]: ActionConst.BACK_ACTION,
+  [ActionConst.POP_AND_REPLACE]: ActionConst.POP_AND_REPLACE,
   [ActionConst.POP_TO]: ActionConst.POP_TO,
   [ActionConst.REFRESH]: ActionConst.REFRESH,
   [ActionConst.RESET]: ActionConst.RESET,

src/Reducer.js

@@ -121,6 +121,54 @@ function inject(state, action, props, scenes) {
         children: refreshTopChild(state.children.slice(0, -1 * popNum), action.refresh),
       };
     }
+    // This action will pop the scene stack and then replace current scene in one go
+    case ActionConst.POP_AND_REPLACE: {
+      assert(!state.tabs, 'pop() operation cannot be run on tab bar (tabs=true)');
+      assert(state.index > 0, 'You are already in the root scene.');
+
+      let popNum = 1;
+      if (action.popNum) {
+        assert(typeof(action.popNum) === 'number',
+          'The data is the number of scenes you want to pop, it must be Number');
+        popNum = action.popNum;
+        assert(popNum % 1 === 0,
+          'The data is the number of scenes you want to pop, it must be integer.');
+        assert(popNum > 1,
+          'The data is the number of scenes you want to pop, it must be bigger than 1.');
+        assert(popNum <= state.index,
+          'The data is the number of scenes you want to pop, ' +
+          "it must be smaller than scenes stack's length.");
+      }
+
+      state = {
+        ...state,
+        index: state.index - popNum,
+        from: state.children[state.children.length - popNum],
+        children: state.children.slice(0, -1 * popNum),
+      };
+
+      if (state.children[state.index].sceneKey === action.key) {
+        return state;
+      }
+
+      const newAction = {
+        duration: 0,  // do not animate
+        ...action,
+      };
+      delete newAction.popNum;
+
+      const newProps = { ...props };
+      delete newProps.popNum;
+
+      state.children[state.children.length - 1] = getInitialState(
+        newProps,
+        scenes,
+        state.index,
+        newAction
+      );
+
+      return { ...state, children: state.children };
+    }
     case ActionConst.REFRESH:
       return props.base ?
       { navBar: state.navBar,
@@ -215,7 +263,7 @@ export function findElement(state, key, type) {
   return null;
 }
 
-function getCurrent(state) {
+export function getCurrent(state) {
   if (!state.children) {
     return state;
   }
@@ -276,6 +324,7 @@ function reducer({ initialState, scenes }) {
       // set current route for pop action or refresh action
       if (ActionMap[action.type] === ActionConst.BACK_ACTION ||
           ActionMap[action.type] === ActionConst.BACK ||
+          ActionMap[action.type] === ActionConst.POP_AND_REPLACE ||
           ActionMap[action.type] === ActionConst.REFRESH ||
           ActionMap[action.type] === ActionConst.POP_TO) {
         if (!action.key && !action.parent) {
@@ -311,7 +360,8 @@ function reducer({ initialState, scenes }) {
 
       // recursive pop parent
       if (ActionMap[action.type] === ActionConst.BACK_ACTION ||
-          ActionMap[action.type] === ActionConst.BACK) {
+          ActionMap[action.type] === ActionConst.BACK ||
+          ActionMap[action.type] === ActionConst.POP_AND_REPLACE) {
         const parent = action.parent || state.scenes[action.key].parent;
         let el = findElement(state, parent, action.type);
         while (el.parent && (el.children.length <= 1 || el.tabs)) {
@@ -325,6 +375,7 @@ function reducer({ initialState, scenes }) {
     switch (ActionMap[action.type]) {
       case ActionConst.BACK:
       case ActionConst.BACK_ACTION:
+      case ActionConst.POP_AND_REPLACE:
       case ActionConst.POP_TO:
       case ActionConst.REFRESH:
       case ActionConst.PUSH:

test/Reducer.popAndReplace.test.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import Scene from '../src/Scene';
+import Actions from '../src/Actions';
+import * as ActionConst from '../src/ActionConst';
+
+import createReducer, { getCurrent, findElement } from '../src/Reducer';
+import getInitialState from '../src/State';
+
+let id = 0;
+const guid = () => id++;
+const scenesData = (
+  <Scene
+    key="root"
+    component="Modal"
+    getInitialState={() => ({ foo: guid() })}
+  >
+    <Scene key="launch" component="Launch" />
+    <Scene key="sideMenu" component="Drawer" initial>
+      <Scene component="CubeBar" key="cubeBar" type="tabs">
+        <Scene key="main" tabs>
+          <Scene key="home" component="Home" />
+          <Scene key="map" component="Map" />
+          <Scene key="myAccount" component="MyAccount" />
+        </Scene>
+        <Scene key="messaging" initial>
+          <Scene
+            key="conversations"
+            component="Conversations"
+            getInitialState={() => ({ foo: 'what', bar: guid() })}
+          />
+        </Scene>
+      </Scene>
+    </Scene>
+    <Scene key="privacyPolicy" component="PrivacyPolicy" type="modal" />
+    <Scene key="termsOfService" component="TermsOfService" type="modal" />
+    <Scene key="cloneModalComponent" component="cloneComponent" clone="true" type="modal" />
+    <Scene key="login">
+      <Scene key="loginModal1" component="Login1" />
+      <Scene key="loginModal2" component="Login2" />
+    </Scene>
+  </Scene>);
+
+describe('popAndReplace', () => {
+  let latestState;
+  let currentScene;
+  let reducer;
+
+  beforeEach(() => {
+    const scenes = Actions.create(scenesData);
+    const initialState = getInitialState(scenes);
+    reducer = createReducer({ initialState, scenes });
+    latestState = null;
+  });
+
+  it('pop and replace on root stack', () => {
+    latestState = reducer(latestState, {
+      key: 'privacyPolicy',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'termsOfService',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'termsOfService',
+      type: ActionConst.POP_AND_REPLACE,
+    });
+
+    expect(latestState.index).equal(1);
+    currentScene = getCurrent(latestState);
+    expect(currentScene.sceneKey).equal('termsOfService');
+    expect(currentScene.type).equal(ActionConst.POP_AND_REPLACE);
+  });
+
+  it('pop 2 and replace on root stack', () => {
+    latestState = reducer(latestState, {
+      key: 'privacyPolicy',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'termsOfService',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'termsOfService',
+      type: ActionConst.POP_AND_REPLACE,
+      popNum: 2,
+    });
+
+    expect(latestState.index).equal(0);
+    currentScene = getCurrent(latestState);
+    expect(currentScene.popNum).equal(undefined);
+    expect(currentScene.sceneKey).equal('termsOfService');
+    expect(currentScene.type).equal(ActionConst.POP_AND_REPLACE);
+  });
+
+  it('pop out of root stack - standing on root', () => {
+    try {
+      latestState = reducer(latestState, {
+        key: 'termsOfService',
+        type: ActionConst.POP_AND_REPLACE,
+      });
+    } catch (err) {
+      expect(err.message).equal('[react-native-router-flux] You are already in the root scene.');
+    }
+  });
+
+  it('pop out of root stack', () => {
+    try {
+      latestState = reducer(latestState, {
+        key: 'privacyPolicy',
+        type: ActionConst.PUSH,
+      });
+
+      latestState = reducer(latestState, {
+        key: 'termsOfService',
+        type: ActionConst.POP_AND_REPLACE,
+        popNum: 2,
+      });
+    } catch (err) {
+      expect(err.message).equal('[react-native-router-flux] The data is the number of scenes ' +
+        'you want to pop, it must be smaller than scenes stack\'s length.');
+    }
+  });
+
+  it('pop and replace on child stack', () => {
+    latestState = reducer(latestState, {
+      key: 'conversations',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'cloneModalComponent',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'cloneModalComponent',
+      type: ActionConst.POP_AND_REPLACE,
+    });
+
+    currentScene = getCurrent(latestState);
+    expect(findElement(latestState, currentScene.parent).index).equal(0);
+    expect(currentScene.sceneKey).equal('cloneModalComponent');
+    expect(currentScene.type).equal(ActionConst.POP_AND_REPLACE);
+  });
+
+  it('pop and replace on root stack from nested child', () => {
+    latestState = reducer(latestState, {
+      key: 'conversations',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'login',
+      type: ActionConst.PUSH,
+    });
+
+    latestState = reducer(latestState, {
+      key: 'termsOfService',
+      type: ActionConst.POP_AND_REPLACE,
+    });
+
+    expect(latestState.index).equal(0);
+    currentScene = getCurrent(latestState);
+    expect(currentScene.sceneKey).equal('termsOfService');
+    expect(currentScene.type).equal(ActionConst.POP_AND_REPLACE);
+  });
+});