feat: add target argument to setParams (facebook#18)

react-one · Jul 20, 2019 · 1de5494 · 1de5494
1 parent a64f402
commit 1de5494
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 87 deletions.
diff --git a/example/StackNavigator.tsx b/example/StackNavigator.tsx
@@ -8,6 +8,7 @@ import {
   CommonAction,
   ParamListBase,
   Router,
+  BaseRouter,
   createNavigator,
 } from '../src/index';
 
@@ -28,9 +29,8 @@ type Action =
   | { type: 'POP_TO_TOP' };
 
 export type StackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = NavigationProp<ParamList, RouteName> & {
+  ParamList extends ParamListBase
+> = NavigationProp<ParamList> & {
   /**
    * Push a new screen onto the stack.
    *
@@ -55,6 +55,7 @@ export type StackNavigationProp<
 };
 
 const StackRouter: Router<CommonAction | Action> = {
+  ...BaseRouter,
   getInitialState({
     routeNames,
     initialRouteName = routeNames[0],
@@ -88,14 +89,6 @@ const StackRouter: Router<CommonAction | Action> = {
     return state;
   },
 
-  getStateForRouteNamesChange(state, { routeNames }) {
-    return {
-      ...state,
-      routeNames,
-      routes: state.routes.filter(route => routeNames.includes(route.name)),
-    };
-  },
-
   getStateForRouteFocus(state, key) {
     const index = state.routes.findIndex(r => r.key === key);
 
@@ -246,18 +239,10 @@ const StackRouter: Router<CommonAction | Action> = {
       }
 
       default:
-        return null;
+        return BaseRouter.getStateForAction(state, action);
     }
   },
 
-  shouldActionPropagateToChildren(action) {
-    return action.type === 'NAVIGATE';
-  },
-
-  shouldActionChangeFocus(action) {
-    return action.type === 'NAVIGATE';
-  },
-
   actionCreators: {
     push(name: string, params?: object) {
       return { type: 'PUSH', payload: { name, params } };

diff --git a/example/TabNavigator.tsx b/example/TabNavigator.tsx
@@ -10,6 +10,7 @@ import {
   Router,
   createNavigator,
   TargetRoute,
+  BaseRouter,
 } from '../src/index';
 
 type Props = {
@@ -22,10 +23,9 @@ type Action = {
   payload: { name?: string; key?: string; params?: object };
 };
 
-export type TabNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = NavigationProp<ParamList, RouteName> & {
+export type TabNavigationProp<ParamList extends ParamListBase> = NavigationProp<
+  ParamList
+> & {
   /**
    * Jump to an existing tab.
    *
@@ -168,7 +168,7 @@ const TabRouter: Router<Action | CommonAction> = {
         return null;
 
       default:
-        return null;
+        return BaseRouter.getStateForAction(state, action);
     }
   },
 

diff --git a/example/index.tsx b/example/index.tsx
@@ -4,7 +4,7 @@ import {
   NavigationContainer,
   CompositeNavigationProp,
   PartialState,
-  NavigationHelpers,
+  NavigationProp,
   RouteProp,
 } from '../src';
 import StackNavigator, { StackNavigationProp } from './StackNavigator';
@@ -30,8 +30,8 @@ const First = ({
   route,
 }: {
   navigation: CompositeNavigationProp<
-    StackNavigationProp<StackParamList, 'first'>,
-    NavigationHelpers<TabParamList>
+    StackNavigationProp<StackParamList>,
+    NavigationProp<TabParamList>
   >;
   route: RouteProp<StackParamList, 'first'>;
 }) => (
@@ -62,8 +62,8 @@ const Second = ({
   navigation,
 }: {
   navigation: CompositeNavigationProp<
-    StackNavigationProp<StackParamList, 'second'>,
-    NavigationHelpers<TabParamList>
+    StackNavigationProp<StackParamList>,
+    NavigationProp<TabParamList>
   >;
 }) => (
   <div>
@@ -84,7 +84,7 @@ const Fourth = ({
   navigation,
 }: {
   navigation: CompositeNavigationProp<
-    TabNavigationProp<TabParamList, 'fourth'>,
+    TabNavigationProp<TabParamList>,
     StackNavigationProp<StackParamList>
   >;
 }) => (
@@ -109,7 +109,7 @@ const Fifth = ({
   navigation,
 }: {
   navigation: CompositeNavigationProp<
-    TabNavigationProp<TabParamList, 'fifth'>,
+    TabNavigationProp<TabParamList>,
     StackNavigationProp<StackParamList>
   >;
 }) => (

diff --git a/src/BaseActions.tsx b/src/BaseActions.tsx
@@ -13,24 +13,28 @@ export type Action =
   | {
       type: 'RESET';
       payload: PartialState & { key?: string };
+    }
+  | {
+      type: 'SET_PARAMS';
+      payload: { name?: string; key?: string; params?: object };
     };
 
 export function goBack(): Action {
   return { type: 'GO_BACK' };
 }
 
 export function navigate(target: TargetRoute<string>, params?: object): Action {
-  if (
-    (target.hasOwnProperty('key') && target.hasOwnProperty('name')) ||
-    (!target.hasOwnProperty('key') && !target.hasOwnProperty('name'))
-  ) {
-    throw new Error(
-      'While calling navigate you need to specify either name or key'
-    );
-  }
   if (typeof target === 'string') {
     return { type: 'NAVIGATE', payload: { name: target, params } };
   } else {
+    if (
+      (target.hasOwnProperty('key') && target.hasOwnProperty('name')) ||
+      (!target.hasOwnProperty('key') && !target.hasOwnProperty('name'))
+    ) {
+      throw new Error(
+        'While calling navigate you need to specify either name or key'
+      );
+    }
     return { type: 'NAVIGATE', payload: { ...target, params } };
   }
 }
@@ -42,3 +46,20 @@ export function replace(name: string, params?: object): Action {
 export function reset(state: PartialState & { key?: string }): Action {
   return { type: 'RESET', payload: state };
 }
+
+export function setParams(
+  params: object,
+  target: { name?: string; key?: string }
+): Action {
+  if (
+    target &&
+    ((target.hasOwnProperty('key') && target.hasOwnProperty('name')) ||
+      (!target.hasOwnProperty('key') && !target.hasOwnProperty('name')))
+  ) {
+    throw new Error(
+      'While calling setState with given second param you need to specify either name or key'
+    );
+  }
+
+  return { type: 'SET_PARAMS', payload: { params, ...target } };
+}
diff --git a/src/BaseRouter.tsx b/src/BaseRouter.tsx
@@ -0,0 +1,49 @@
+import { CommonAction, Router } from './types';
+
+const BaseRouter: Omit<
+  Omit<Router<CommonAction>, 'getInitialState'>,
+  'getRehydratedState'
+> = {
+  getStateForAction(state, action) {
+    switch (action.type) {
+      case 'SET_PARAMS':
+        return {
+          ...state,
+          routes: state.routes.map(r =>
+            r.key === action.payload.key || r.name === action.payload.name
+              ? { ...r, params: { ...r.params, ...action.payload.params } }
+              : r
+          ),
+        };
+      default:
+        return null;
+    }
+  },
+
+  getStateForRouteNamesChange(state, { routeNames }) {
+    return {
+      ...state,
+      routeNames,
+      routes: state.routes.filter(route => routeNames.includes(route.name)),
+    };
+  },
+
+  getStateForRouteFocus(state, key) {
+    const index = state.routes.findIndex(r => r.key === key);
+
+    if (index === -1 || index === state.index) {
+      return state;
+    }
+
+    return { ...state, index };
+  },
+  shouldActionPropagateToChildren(action) {
+    return action.type === 'NAVIGATE';
+  },
+
+  shouldActionChangeFocus(action) {
+    return action.type === 'NAVIGATE';
+  },
+};
+
+export default BaseRouter;
diff --git a/src/NavigationBuilderContext.tsx b/src/NavigationBuilderContext.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { NavigationHelpers, NavigationAction } from './types';
+import { NavigationProp, NavigationAction } from './types';
 
 export type ChildActionListener = (
   action: NavigationAction,
   sourceRouteKey?: string
 ) => boolean;
 
 const NavigationBuilderContext = React.createContext<{
-  navigation?: NavigationHelpers;
+  navigation?: NavigationProp;
   onAction?: (action: NavigationAction, sourceNavigatorKey?: string) => boolean;
   addActionListener?: (listener: ChildActionListener) => void;
   removeActionListener?: (listener: ChildActionListener) => void;

diff --git a/src/SceneView.tsx b/src/SceneView.tsx
@@ -4,14 +4,15 @@ import StaticContainer from './StaticContainer';
 import {
   Route,
   NavigationState,
-  NavigationHelpers,
+  NavigationProp,
   RouteConfig,
+  TargetRoute,
 } from './types';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 
 type Props = {
   screen: RouteConfig;
-  navigation: NavigationHelpers;
+  navigation: NavigationProp;
   route: Route & { state?: NavigationState };
   getState: () => NavigationState;
   setState: (state: NavigationState) => void;
@@ -24,22 +25,11 @@ export default function SceneView(props: Props) {
   const navigation = React.useMemo(
     () => ({
       ...helpers,
-      setParams: (params: object) => {
-        performTransaction(() => {
-          const state = getState();
-
-          setState({
-            ...state,
-            routes: state.routes.map(r =>
-              r.key === route.key
-                ? { ...r, params: { ...r.params, ...params } }
-                : r
-            ),
-          });
-        });
+      setParams: (params: object, target?: TargetRoute<string>) => {
+        helpers.setParams(params, target ? target : { key: route.key });
       },
     }),
-    [getState, helpers, performTransaction, route.key, setState]
+    [helpers, route.key]
   );
 
   const getCurrentState = React.useCallback(() => {

diff --git a/src/__tests__/BaseActions.test.tsx b/src/__tests__/BaseActions.test.tsx
@@ -76,3 +76,73 @@ it('throws if NAVIGATE dispatched neither both key nor name', () => {
     'While calling navigate you need to specify either name or key'
   );
 });
+
+it('throws if SET_PARAMS dispatched with both key and name', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const FooScreen = (props: any) => {
+    React.useEffect(() => {
+      props.navigation.setParams({}, { key: '1', name: '2' });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <NavigationContainer onStateChange={onStateChange}>
+      <TestNavigator initialRouteName="foo">
+        <Screen
+          name="foo"
+          component={FooScreen}
+          initialParams={{ count: 10 }}
+        />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    'While calling setState with given second param you need to specify either name or key'
+  );
+});
+
+it('throws if SET_PARAMS dispatched neither both key nor name', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const FooScreen = (props: any) => {
+    React.useEffect(() => {
+      props.navigation.setParams({}, {});
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <NavigationContainer onStateChange={onStateChange}>
+      <TestNavigator initialRouteName="foo">
+        <Screen
+          name="foo"
+          component={FooScreen}
+          initialParams={{ count: 10 }}
+        />
+      </TestNavigator>
+    </NavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    'While calling setState with given second param you need to specify either name or key'
+  );
+});