Fix 'replace' action (#2189) (#2213)

* Fix 'replace' action (#2189) * Fix issues when replace within deep container * Compiled sources
aksonov · Aug 10, 2017 · 5f9d0c7 · 5f9d0c7
1 parent 9566c3d
commit 5f9d0c7
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 31 deletions.
diff --git a/Example/Example.js b/Example/Example.js
@@ -64,7 +64,7 @@ const Example = () => {
               <Scene key="register" back>
                 <Scene key="_register" component={Register} title="Register"/>
                 <Scene key="register2" component={Register} title="Register2"/>
-                <Scene key="home" component={Home} title="Replace" type={ActionConst.POP_AND_PUSH}/>
+                <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE}/>
               </Scene>
               <Scene key="launch" component={Launch} title="Launch" initial/>
               <Scene key="drawer" drawer contentComponent={TabView}>

diff --git a/dist/ActionConst.js b/dist/ActionConst.js
@@ -4,11 +4,9 @@ var PUSH_OR_POP=exports.PUSH_OR_POP='REACT_NATIVE_ROUTER_FLUX_PUSH_OR_POP';
 var REPLACE=exports.REPLACE='REACT_NATIVE_ROUTER_FLUX_REPLACE';
 var BACK=exports.BACK='REACT_NATIVE_ROUTER_FLUX_BACK';
 var BACK_ACTION=exports.BACK_ACTION='REACT_NATIVE_ROUTER_FLUX_BACK_ACTION';
-var POP_AND_REPLACE=exports.POP_AND_REPLACE='REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE';
 var POP_TO=exports.POP_TO='REACT_NATIVE_ROUTER_FLUX_POP_TO';
 var REFRESH=exports.REFRESH='REACT_NATIVE_ROUTER_FLUX_REFRESH';
 var RESET=exports.RESET='REACT_NATIVE_ROUTER_FLUX_RESET';
 var FOCUS=exports.FOCUS='REACT_NATIVE_ROUTER_FLUX_FOCUS';
 var BLUR=exports.BLUR='REACT_NATIVE_ROUTER_FLUX_BLUR';
-var ANDROID_BACK=exports.ANDROID_BACK='REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK';
-var POP_AND_PUSH=exports.POP_AND_PUSH='REACT_NATIVE_ROUTER_FLUX_POP_AND_PUSH';
+var ANDROID_BACK=exports.ANDROID_BACK='REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK';
diff --git a/dist/Reducer.js b/dist/Reducer.js
@@ -16,7 +16,6 @@ Object.defineProperty(exports,"__esModule",{value:true});exports.supportedAction
 
 
 
-
 reducer=reducer;exports.default=
 
 
@@ -77,6 +76,6 @@ reducer=reducer;exports.default=
 
 
 
-createReducer;var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);var _reactNavigation=require('react-navigation');var _State=require('./State');function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}var supportedActions=exports.supportedActions=(_supportedActions={},_defineProperty(_supportedActions,ActionConst.PUSH,_reactNavigation.NavigationActions.NAVIGATE),_defineProperty(_supportedActions,ActionConst.BACK,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.REFRESH,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.RESET,_reactNavigation.NavigationActions.RESET),_defineProperty(_supportedActions,ActionConst.REPLACE,_reactNavigation.NavigationActions.RESET),_supportedActions);var createAction=function createAction(type){return function(){var payload=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return _extends({type:type},payload);};};function reducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_navigationStore2.default.state;var action=arguments[1];var type=action.type;var routeName=action.routeName;if(supportedActions[type]){var newState=_navigationStore2.default.router.getStateForAction(createAction(supportedActions[type])({routeName:routeName,params:action.params}),state);return newState||state;}if(type===ActionConst.JUMP){var _newState=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);var activeState=(0,_State.getActiveState)(state);if(activeState.routeName==='DrawerOpen'){activeState=(0,_State.getActiveStateExceptDrawer)(state);if((0,_State.isActiveRoute)(state,routeName)){return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:'DrawerClose'}),state);}}if((0,_State.isActiveRoute)(state,routeName)){return state;}var key=(0,_State.getActiveState)(_newState).key;return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.setParams({key:key,params:action.params}),_newState);}else if(type===ActionConst.POP_TO){var nextScene='';var _newState2=state;var currentState=state;var currentScene=(0,_State.getActiveState)(state).routeName;while(nextScene!==currentScene&&_newState2&&nextScene!==routeName){_newState2=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.back(),currentState);if(_newState2){nextScene=(0,_State.getActiveState)(_newState2).routeName;if(nextScene!==routeName){currentState=_newState2;}}}return nextScene===routeName?_newState2:state;}else if(type===ActionConst.POP_AND_PUSH){var _newState3=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.back(),state);return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),_newState3);}if(routeName==='DrawerClose'){var _key=(0,_State.getActiveState)(state).parent.key;return(0,_State.inject)(state,_key,0);}return _navigationStore2.default.router.getStateForAction(action,state)||state;}function createReducer(){
+createReducer;var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);var _reactNavigation=require('react-navigation');var _State=require('./State');function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}var supportedActions=exports.supportedActions=(_supportedActions={},_defineProperty(_supportedActions,ActionConst.PUSH,_reactNavigation.NavigationActions.NAVIGATE),_defineProperty(_supportedActions,ActionConst.BACK,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.REFRESH,_reactNavigation.NavigationActions.BACK),_defineProperty(_supportedActions,ActionConst.RESET,_reactNavigation.NavigationActions.RESET),_supportedActions);var createAction=function createAction(type){return function(){var payload=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return _extends({type:type},payload);};};function reducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_navigationStore2.default.state;var action=arguments[1];var type=action.type;var routeName=action.routeName;if(supportedActions[type]){var newState=_navigationStore2.default.router.getStateForAction(createAction(supportedActions[type])({routeName:routeName,params:action.params}),state);return newState||state;}if(type===ActionConst.JUMP){var _newState=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);var activeState=(0,_State.getActiveState)(state);if(activeState.routeName==='DrawerOpen'){activeState=(0,_State.getActiveStateExceptDrawer)(state);if((0,_State.isActiveRoute)(state,routeName)){return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:'DrawerClose'}),state);}}if((0,_State.isActiveRoute)(state,routeName)){return state;}var key=(0,_State.getActiveState)(_newState).key;return _navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.setParams({key:key,params:action.params}),_newState);}else if(type===ActionConst.POP_TO){var nextScene='';var _newState2=state;var currentState=state;var currentScene=(0,_State.getActiveState)(state).routeName;while(nextScene!==currentScene&&_newState2&&nextScene!==routeName){_newState2=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.back(),currentState);if(_newState2){nextScene=(0,_State.getActiveState)(_newState2).routeName;if(nextScene!==routeName){currentState=_newState2;}}}return nextScene===routeName?_newState2:state;}else if(type===ActionConst.REPLACE){var _newState3=_navigationStore2.default.router.getStateForAction(_reactNavigation.NavigationActions.navigate({routeName:routeName,params:action.params}),state);return(0,_State.popPrevious)(_newState3);}if(routeName==='DrawerClose'){var _key=(0,_State.getActiveState)(state).parent.key;return(0,_State.inject)(state,_key,0);}return _navigationStore2.default.router.getStateForAction(action,state)||state;}function createReducer(){
 return reducer;
 }
diff --git a/dist/State.js b/dist/State.js
@@ -30,12 +30,27 @@ getActiveState=getActiveState;exports.
 
 
 
-inject=inject;function getActiveStateExceptDrawer(param){var state=param;if(!state.routes){return state;}if(state.routes[state.index].routeName==='DrawerOpen'){return getActiveState(state.routes[0]);}return getActiveState(state.routes[state.index]);}function isActiveRoute(state,routeName){if(state.routeName===routeName){return true;}if(!state.routes){return state.routeName===routeName;}if(state.routes[state.index].routeName==='DrawerOpen'){return isActiveRoute(state.routes[0],routeName);}return isActiveRoute(state.routes[state.index],routeName);}function getActiveState(param,parent){var state=param;if(!state.routes){return _extends({},state,{parent:parent});}return getActiveState(state.routes[state.index],state);}function inject(state,key,index){
-if(!state.routes){
-return state;
-}
-if(state.key===key){
-return _extends({},state,{index:index});
+inject=inject;exports.
+
+
+
+
+
+
+
+
+
+
+
+
+popPrevious=popPrevious;function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}function getActiveStateExceptDrawer(param){var state=param;if(!state.routes){return state;}if(state.routes[state.index].routeName==='DrawerOpen'){return getActiveState(state.routes[0]);}return getActiveState(state.routes[state.index]);}function isActiveRoute(state,routeName){if(state.routeName===routeName){return true;}if(!state.routes){return state.routeName===routeName;}if(state.routes[state.index].routeName==='DrawerOpen'){return isActiveRoute(state.routes[0],routeName);}return isActiveRoute(state.routes[state.index],routeName);}function getActiveState(param,parent){var state=param;if(!state.routes){return _extends({},state,{parent:parent});}return getActiveState(state.routes[state.index],state);}function inject(state,key,index,routes){if(!state.routes){return state;}if(state.key===key){if(routes){return _extends({},state,{routes:routes,index:index});}return _extends({},state,{index:index});}return _extends({},state,{routes:state.routes.map(function(x){return inject(x,key,index,routes);})});}function popPrevious(state){
+var activeState=getActiveState(state);
+if(activeState.parent&&activeState.parent.index){
+var parent=activeState.parent;
+var key=parent.key;
+var routes=[].concat(_toConsumableArray(parent.routes.slice(0,parent.index-1)),_toConsumableArray(parent.routes.slice(parent.index)));
+var newState=inject(state,key,parent.index-1,routes);
+return newState;
 }
-return _extends({},state,{routes:state.routes.map(function(x){return inject(x,key,index);})});
+return state;
 }
diff --git a/dist/navigationStore.js b/dist/navigationStore.js
@@ -480,10 +480,7 @@ _this.dispatch({type:ActionConst.POP_AND_PUSH,routeName:routeName,params:params}
 
 replace=function(routeName,data){
 var params=filterParam(data);
-_this.dispatch(_reactNavigation.NavigationActions.reset({key:routeName,index:0,actions:[_reactNavigation.NavigationActions.navigate({
-routeName:routeName,
-params:params})]}));
-
+_this.dispatch({type:ActionConst.REPLACE,routeName:routeName,params:params});
 };this.
 
 reset=function(routeName,data){

diff --git a/src/ActionConst.js b/src/ActionConst.js
@@ -4,11 +4,9 @@ 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';
 export const FOCUS = 'REACT_NATIVE_ROUTER_FLUX_FOCUS';
 export const BLUR = 'REACT_NATIVE_ROUTER_FLUX_BLUR';
 export const ANDROID_BACK = 'REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK';
-export const POP_AND_PUSH = 'REACT_NATIVE_ROUTER_FLUX_POP_AND_PUSH';
diff --git a/src/Reducer.js b/src/Reducer.js
@@ -1,14 +1,13 @@
 import navigationStore from './navigationStore';
 import * as ActionConst from './ActionConst';
 import { NavigationActions } from 'react-navigation';
-import { getActiveState, inject, isActiveRoute, getActiveStateExceptDrawer } from './State';
+import { getActiveState, popPrevious, inject, isActiveRoute, getActiveStateExceptDrawer } from './State';
 
 export const supportedActions = {
   [ActionConst.PUSH]: NavigationActions.NAVIGATE,
   [ActionConst.BACK]: NavigationActions.BACK,
   [ActionConst.REFRESH]: NavigationActions.BACK,
   [ActionConst.RESET]: NavigationActions.RESET,
-  [ActionConst.REPLACE]: NavigationActions.RESET,
 };
 
 const createAction = (type: string) => (payload: Object = {}) => ({
@@ -62,12 +61,12 @@ export function reducer(state = navigationStore.state, action) {
       }
     }
     return nextScene === routeName ? newState : state;
-  } else if (type === ActionConst.POP_AND_PUSH) {
-    const newState = navigationStore.router.getStateForAction(NavigationActions.back(), state);
-    return navigationStore.router.getStateForAction(NavigationActions.navigate({
+  } else if (type === ActionConst.REPLACE) {
+    const newState = navigationStore.router.getStateForAction(NavigationActions.navigate({
       routeName,
       params: action.params,
-    }), newState);
+    }), state);
+    return popPrevious(newState);
   }
   // fix react-navigation bug with DrawerClose - it pushes new underlying scene instead of just switching index!
   if (routeName === 'DrawerClose') {

diff --git a/src/State.js b/src/State.js
@@ -30,12 +30,27 @@ export function getActiveState(param, parent) {
   return getActiveState(state.routes[state.index], state);
 }
 
-export function inject(state, key, index) {
+export function inject(state, key, index, routes) {
   if (!state.routes) {
     return state;
   }
   if (state.key === key) {
+    if (routes) {
+      return { ...state, routes, index };
+    }
     return { ...state, index };
   }
-  return { ...state, routes: state.routes.map(x => inject(x, key, index)) };
+  return { ...state, routes: state.routes.map(x => inject(x, key, index, routes)) };
+}
+
+export function popPrevious(state) {
+  const activeState = getActiveState(state);
+  if (activeState.parent && activeState.parent.index) {
+    const parent = activeState.parent;
+    const key = parent.key;
+    const routes = [...parent.routes.slice(0, parent.index - 1), ...parent.routes.slice(parent.index)];
+    const newState = inject(state, key, parent.index - 1, routes);
+    return newState;
+  }
+  return state;
 }
diff --git a/src/navigationStore.js b/src/navigationStore.js
@@ -480,10 +480,7 @@ class NavigationStore {
 
   replace = (routeName, data) => {
     const params = filterParam(data);
-    this.dispatch(NavigationActions.reset({ key: routeName, index: 0, actions: [NavigationActions.navigate({
-      routeName,
-      params,
-    })] }));
+    this.dispatch({ type: ActionConst.REPLACE, routeName, params });
   };
 
   reset = (routeName, data) => {