D3321403 [NavigationExperimental][CleanUp]: Rename scene.navigationState to scene.route.

Summary:
[public / experimental API breaking change]

The data type of  `scene.navigationState` is `NavigationRoute`. Rename  `scene.navigationState` to
`scene.route` to avoid confusion such as treating `scene.navigationState` as the actual global navigation
state (type: NavigationState).

Reviewed By: ericvicenti

Differential Revision: D3331076

fbshipit-source-id: 3ed989cc8492d398cbeb1b12186459deb261d1fb

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -113,7 +113,7 @@ class NavigationAnimatedExample extends React.Component {
   _renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationHeader.Title>
-        {props.scene.navigationState.key}
+        {props.scene.route.key}
       </NavigationHeader.Title>
     );
   }
@@ -122,7 +122,7 @@ class NavigationAnimatedExample extends React.Component {
     return (
       <NavigationCard
         {...props}
-        key={'card_' + props.scene.navigationState.key}
+        key={'card_' + props.scene.route.key}
         renderScene={this._renderScene}
       />
     );
@@ -132,7 +132,7 @@ class NavigationAnimatedExample extends React.Component {
     return (
       <ScrollView style={styles.scrollView}>
         <NavigationExampleRow
-          text={props.scene.navigationState.key}
+          text={props.scene.route.key}
         />
         <NavigationExampleRow
           text="Push!"

Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js

@@ -118,7 +118,7 @@ class NavigationCardStackExample extends React.Component {
           onPress={this._toggleDirection}
         />
         <NavigationExampleRow
-          text={'route = ' + props.scene.navigationState.key}
+          text={'route = ' + props.scene.route.key}
         />
         <NavigationExampleRow
           text="Push Route"

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -192,7 +192,7 @@ class ExampleTabScreen extends React.Component {
   _renderTitleComponent(props: NavigationSceneRendererProps) {
     return (
       <NavigationHeader.Title>
-        {stateTypeTitleMap(props.scene.navigationState)}
+        {stateTypeTitleMap(props.scene.route)}
       </NavigationHeader.Title>
     );
   }

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -152,13 +152,13 @@ class UIExplorerApp extends React.Component {
   _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement {
     return (
       <NavigationHeader.Title>
-        {UIExplorerStateTitleMap(props.scene.navigationState)}
+        {UIExplorerStateTitleMap(props.scene.route)}
       </NavigationHeader.Title>
     );
   }
 
   _renderScene(props: NavigationSceneRendererProps): ?ReactElement {
-    const state = props.scene.navigationState;
+    const state = props.scene.route;
     if (state.key === 'AppList') {
       return (
         <UIExplorerExampleList

Examples/UIExplorer/UIExplorerStateTitleMap.js

@@ -27,11 +27,11 @@ const UIExplorerList = require('./UIExplorerList');
 
 import type {NavigationRoute} from 'NavigationTypeDefinition';
 
-function StateTitleMap(state: NavigationRoute): string {
-  if (UIExplorerList.Modules[state.key]) {
-    return UIExplorerList.Modules[state.key].title
+function StateTitleMap(route: NavigationRoute): string {
+  if (UIExplorerList.Modules[route.key]) {
+    return UIExplorerList.Modules[route.key].title;
   }
-  if (state.key === 'AppList') {
+  if (route.key === 'AppList') {
     return 'UIExplorer';
   }
   return 'Unknown';

Libraries/CustomComponents/NavigationExperimental/NavigationCard.js

@@ -69,14 +69,13 @@ class SceneView extends React.Component<any, SceneViewProps, any> {
 
   static propTypes = {
     sceneRenderer: PropTypes.func.isRequired,
-    sceneRendererProps:
-      PropTypes.shape(NavigationPropTypes.SceneRenderer).isRequired,
+    sceneRendererProps: NavigationPropTypes.SceneRenderer,
   };
 
   shouldComponentUpdate(nextProps: SceneViewProps, nextState: any): boolean {
     return (
-      nextProps.sceneRendererProps.scene.navigationState !==
-        this.props.sceneRendererProps.scene.navigationState
+      nextProps.sceneRendererProps.scene.route !==
+        this.props.sceneRendererProps.scene.route
     );
   }
 

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -89,7 +89,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
 
   static propTypes = {
     direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
-    navigationState: NavigationPropTypes.navigationParentState.isRequired,
+    navigationState: NavigationPropTypes.navigationState.isRequired,
     onNavigate: NavigationPropTypes.SceneRendererProps.onNavigate,
     renderOverlay: PropTypes.func,
     renderScene: PropTypes.func.isRequired,

Libraries/NavigationExperimental/NavigationPropTypes.js

@@ -36,15 +36,15 @@ const action =  PropTypes.shape({
 const animatedValue = PropTypes.instanceOf(Animated.Value);
 
 /* NavigationRoute  */
-const navigationState = PropTypes.shape({
+const navigationRoute = PropTypes.shape({
   key: PropTypes.string.isRequired,
 });
 
-/* NavigationState  */
-const navigationParentState = PropTypes.shape({
+/* navigationRoute  */
+const navigationState = PropTypes.shape({
   index: PropTypes.number.isRequired,
   key: PropTypes.string.isRequired,
-  children: PropTypes.arrayOf(navigationState),
+  children: PropTypes.arrayOf(navigationRoute),
 });
 
 /* NavigationLayout */
@@ -61,13 +61,13 @@ const scene = PropTypes.shape({
   index: PropTypes.number.isRequired,
   isStale: PropTypes.bool.isRequired,
   key: PropTypes.string.isRequired,
-  navigationState,
+  route: navigationRoute.isRequired,
 });
 
 /* NavigationSceneRendererProps */
 const SceneRendererProps = {
   layout: layout.isRequired,
-  navigationState: navigationParentState.isRequired,
+  navigationState: navigationState.isRequired,
   onNavigate: PropTypes.func.isRequired,
   position: animatedValue.isRequired,
   progress: animatedValue.isRequired,
@@ -118,9 +118,9 @@ module.exports = {
   SceneRendererProps,
 
   // propTypes
-  action,
-  navigationParentState,
-  navigationState,
-  panHandlers,
   SceneRenderer,
+  action,
+  navigationState,
+  navigationRoute,
+  panHandlers,
 };

Libraries/NavigationExperimental/NavigationTypeDefinition.js

@@ -26,8 +26,8 @@ export type NavigationRoute = {
 };
 
 export type NavigationState = {
-  index: number,
   key: string,
+  index: number,
   children: Array<NavigationRoute>,
 };
 
@@ -45,7 +45,7 @@ export type NavigationScene = {
   index: number,
   isStale: boolean,
   key: string,
-  navigationState: NavigationRoute,
+  route: NavigationRoute,
 };
 
 export type NavigationSceneRendererProps = {

Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js

@@ -14,8 +14,9 @@
 const invariant = require('fbjs/lib/invariant');
 
 import type {
-  NavigationState,
+  NavigationRoute,
   NavigationScene,
+  NavigationState,
 } from 'NavigationTypeDefinition';
 
 const SCENE_KEY_PREFIX = 'scene_';
@@ -62,8 +63,8 @@ function areScenesShallowEqual(
     one.key === two.key &&
     one.index === two.index &&
     one.isStale === two.isStale &&
-    one.navigationState === two.navigationState &&
-    one.navigationState.key === two.navigationState.key
+    one.route === two.route &&
+    one.route.key === two.route.key
   );
 }
 
@@ -76,9 +77,9 @@ function NavigationScenesReducer(
     return scenes;
   }
 
-  const prevScenes = new Map();
-  const freshScenes = new Map();
-  const staleScenes = new Map();
+  const prevScenes: Map<string, NavigationScene> = new Map();
+  const freshScenes: Map<string, NavigationScene> = new Map();
+  const staleScenes: Map<string, NavigationScene> = new Map();
 
   // Populate stale scenes from previous scenes marked as stale.
   scenes.forEach(scene => {
@@ -90,13 +91,13 @@ function NavigationScenesReducer(
   });
 
   const nextKeys = new Set();
-  nextState.children.forEach((navigationState, index) => {
-    const key = SCENE_KEY_PREFIX + navigationState.key;
+  nextState.children.forEach((route, index) => {
+    const key = SCENE_KEY_PREFIX + route.key;
     const scene = {
       index,
       isStale: false,
       key,
-      navigationState,
+      route,
     };
     invariant(
       !nextKeys.has(key),
@@ -115,8 +116,8 @@ function NavigationScenesReducer(
 
   if (prevState) {
     // Look at the previous children and classify any removed scenes as `stale`.
-    prevState.children.forEach((navigationState, index) => {
-      const key = SCENE_KEY_PREFIX + navigationState.key;
+    prevState.children.forEach((route: NavigationRoute, index) => {
+      const key = SCENE_KEY_PREFIX + route.key;
       if (freshScenes.has(key)) {
         return;
       }
@@ -124,7 +125,7 @@ function NavigationScenesReducer(
         index,
         isStale: true,
         key,
-        navigationState,
+        route,
       });
     });
   }

Libraries/NavigationExperimental/Reducer/__tests__/NavigationScenesReducer-test.js

@@ -17,7 +17,7 @@ const NavigationScenesReducer = require('NavigationScenesReducer');
  * Simulate scenes transtion with changes of navigation states.
  */
 function testTransition(states) {
-  const navigationStates = states.map(keys => {
+  const routes = states.map(keys => {
     return {
       children: keys.map(key => {
         return { key };
@@ -27,7 +27,7 @@ function testTransition(states) {
 
   let scenes = [];
   let prevState = null;
-  navigationStates.forEach((nextState) => {
+  routes.forEach((nextState) => {
     scenes = NavigationScenesReducer(scenes, nextState, prevState);
     prevState = nextState;
   });
@@ -47,7 +47,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': false,
         'key': 'scene_1',
-        'navigationState': {
+        'route': {
           'key': '1'
         },
       },
@@ -55,7 +55,7 @@ describe('NavigationScenesReducer', () => {
         'index': 1,
         'isStale': false,
         'key': 'scene_2',
-        'navigationState': {
+        'route': {
           'key': '2'
         },
       },
@@ -74,7 +74,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': false,
         'key': 'scene_1',
-        'navigationState': {
+        'route': {
           'key': '1'
         },
       },
@@ -82,7 +82,7 @@ describe('NavigationScenesReducer', () => {
         'index': 1,
         'isStale': false,
         'key': 'scene_2',
-        'navigationState': {
+        'route': {
           'key': '2'
         },
       },
@@ -90,7 +90,7 @@ describe('NavigationScenesReducer', () => {
         'index': 2,
         'isStale': false,
         'key': 'scene_3',
-        'navigationState': {
+        'route': {
           'key': '3'
         },
       },
@@ -109,7 +109,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': false,
         'key': 'scene_1',
-        'navigationState': {
+        'route': {
           'key': '1'
         },
       },
@@ -117,7 +117,7 @@ describe('NavigationScenesReducer', () => {
         'index': 1,
         'isStale': false,
         'key': 'scene_2',
-        'navigationState': {
+        'route': {
           'key': '2'
         },
       },
@@ -125,7 +125,7 @@ describe('NavigationScenesReducer', () => {
         'index': 2,
         'isStale': true,
         'key': 'scene_3',
-        'navigationState': {
+        'route': {
           'key': '3'
         },
       },
@@ -143,7 +143,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': true,
         'key': 'scene_1',
-        'navigationState': {
+        'route': {
           'key': '1'
         },
       },
@@ -151,7 +151,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': false,
         'key': 'scene_3',
-        'navigationState': {
+        'route': {
           'key': '3'
         },
       },
@@ -159,7 +159,7 @@ describe('NavigationScenesReducer', () => {
         'index': 1,
         'isStale': true,
         'key': 'scene_2',
-        'navigationState': {
+        'route': {
           'key': '2'
         },
       },
@@ -178,7 +178,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': true,
         'key': 'scene_1',
-        'navigationState': {
+        'route': {
           'key': '1'
         },
       },
@@ -186,7 +186,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': false,
         'key': 'scene_2',
-        'navigationState': {
+        'route': {
           'key': '2'
         },
       },
@@ -194,7 +194,7 @@ describe('NavigationScenesReducer', () => {
         'index': 0,
         'isStale': true,
         'key': 'scene_3',
-        'navigationState': {
+        'route': {
           'key': '3'
         },
       },