From 807726bcb47ef5b17860c5969a661bee1f8fc651 Mon Sep 17 00:00:00 2001 From: Hedger Wang Date: Fri, 20 May 2016 14:24:24 -0700 Subject: [PATCH] Rename `NavigationState` to `NavigationRoute`, rename `NavigationParentState` to `NavigationState`. Summary: This is the first step to clarify and simplify the type definations about navigation state. For now, `NavigationParentState` is actually used as the real navigation state and `NavigationState` is used as a route in navigation, which has been confusion among the APIs. To be clear, our APIs has no intention and interest in dealing with nested or hierarchical navigation states, and we should avoid have the name like `ParentState` or `children`. To fully migrate the types, theer will be a lot of code changes and this is just the first step to rename. = What's Next? 1. rename `navigationState.children` to `navigationState.routes` (breaking change!) 2. remove `navigationState.key` from its type defination. Reviewed By: ericvicenti Differential Revision: D3321403 fbshipit-source-id: 3e39b60f736c1135bc85d8bf2b89027d665e28d4 --- .../NavigationCompositionExample.js | 4 +-- .../UIExplorer/UIExplorerStateTitleMap.js | 11 +++++-- .../NavigationCardStack.js | 4 +-- .../NavigationAnimatedView.js | 6 ++-- .../NavigationPropTypes.js | 4 +-- .../NavigationStateUtils.js | 30 +++++++++---------- .../NavigationTransitioner.js | 4 +-- .../NavigationTypeDefinition.js | 20 ++++++------- .../Reducer/NavigationFindReducer.js | 6 ++-- .../Reducer/NavigationScenesReducer.js | 6 ++-- .../Reducer/NavigationStackReducer.js | 12 ++++---- .../Reducer/NavigationTabsReducer.js | 8 ++--- 12 files changed, 61 insertions(+), 54 deletions(-) diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js index 049b1f6e06d..60c573250ae 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js @@ -42,7 +42,7 @@ const { import type { - NavigationParentState, + NavigationState, NavigationSceneRenderer, NavigationSceneRendererProps, } from 'NavigationTypeDefinition'; @@ -225,7 +225,7 @@ class ExampleTabScreen extends React.Component { } class NavigationCompositionExample extends React.Component { - state: NavigationParentState; + state: NavigationState; constructor() { super(); this.state = ExampleAppReducer(undefined, {}); diff --git a/Examples/UIExplorer/UIExplorerStateTitleMap.js b/Examples/UIExplorer/UIExplorerStateTitleMap.js index a7facd838e6..37e4bcd72a4 100644 --- a/Examples/UIExplorer/UIExplorerStateTitleMap.js +++ b/Examples/UIExplorer/UIExplorerStateTitleMap.js @@ -1,4 +1,11 @@ /** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * * The examples provided by Facebook are for non-commercial testing and * evaluation purposes only. * @@ -18,9 +25,9 @@ // $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS? const UIExplorerList = require('./UIExplorerList'); -import type {NavigationState} from 'NavigationTypeDefinition'; +import type {NavigationRoute} from 'NavigationTypeDefinition'; -function StateTitleMap(state: NavigationState): string { +function StateTitleMap(state: NavigationRoute): string { if (UIExplorerList.Modules[state.key]) { return UIExplorerList.Modules[state.key].title } diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js index d167af6fa86..4a535311099 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js @@ -48,7 +48,7 @@ const {Directions} = NavigationCardStackPanResponder; import type { NavigationActionCaller, - NavigationParentState, + NavigationState, NavigationSceneRenderer, NavigationSceneRendererProps, } from 'NavigationTypeDefinition'; @@ -59,7 +59,7 @@ import type { type Props = { direction: NavigationGestureDirection, - navigationState: NavigationParentState, + navigationState: NavigationState, onNavigate: NavigationActionCaller, renderOverlay: ?NavigationSceneRenderer, renderScene: NavigationSceneRenderer, diff --git a/Libraries/NavigationExperimental/NavigationAnimatedView.js b/Libraries/NavigationExperimental/NavigationAnimatedView.js index 5f307850640..3661612951d 100644 --- a/Libraries/NavigationExperimental/NavigationAnimatedView.js +++ b/Libraries/NavigationExperimental/NavigationAnimatedView.js @@ -28,14 +28,14 @@ import type { NavigationAnimatedValue, NavigationAnimationSetter, NavigationLayout, - NavigationParentState, + NavigationState, NavigationScene, NavigationSceneRenderer, } from 'NavigationTypeDefinition'; type Props = { applyAnimation: NavigationAnimationSetter, - navigationState: NavigationParentState, + navigationState: NavigationState, onNavigate: NavigationActionCaller, renderOverlay: ?NavigationSceneRenderer, renderScene: NavigationSceneRenderer, @@ -53,7 +53,7 @@ const {PropTypes} = React; function applyDefaultAnimation( position: NavigationAnimatedValue, - navigationState: NavigationParentState, + navigationState: NavigationState, ): void { Animated.spring( position, diff --git a/Libraries/NavigationExperimental/NavigationPropTypes.js b/Libraries/NavigationExperimental/NavigationPropTypes.js index bdbab9474c5..e3e72ec77b4 100644 --- a/Libraries/NavigationExperimental/NavigationPropTypes.js +++ b/Libraries/NavigationExperimental/NavigationPropTypes.js @@ -35,12 +35,12 @@ const action = PropTypes.shape({ /* NavigationAnimatedValue */ const animatedValue = PropTypes.instanceOf(Animated.Value); -/* NavigationState */ +/* NavigationRoute */ const navigationState = PropTypes.shape({ key: PropTypes.string.isRequired, }); -/* NavigationParentState */ +/* NavigationState */ const navigationParentState = PropTypes.shape({ index: PropTypes.number.isRequired, key: PropTypes.string.isRequired, diff --git a/Libraries/NavigationExperimental/NavigationStateUtils.js b/Libraries/NavigationExperimental/NavigationStateUtils.js index 63da07faf4c..50470957ddc 100644 --- a/Libraries/NavigationExperimental/NavigationStateUtils.js +++ b/Libraries/NavigationExperimental/NavigationStateUtils.js @@ -14,11 +14,11 @@ const invariant = require('fbjs/lib/invariant'); import type { + NavigationRoute, NavigationState, - NavigationParentState, } from 'NavigationTypeDefinition'; -function getParent(state: NavigationState): ?NavigationParentState { +function getParent(state: NavigationRoute): ?NavigationState { if ( (state instanceof Object) && (state.children instanceof Array) && @@ -31,7 +31,7 @@ function getParent(state: NavigationState): ?NavigationParentState { return null; } -function get(state: NavigationState, key: string): ?NavigationState { +function get(state: NavigationRoute, key: string): ?NavigationRoute { const parentState = getParent(state); if (!parentState) { return null; @@ -40,7 +40,7 @@ function get(state: NavigationState, key: string): ?NavigationState { return childState || null; } -function indexOf(state: NavigationState, key: string): ?number { +function indexOf(state: NavigationRoute, key: string): ?number { const parentState = getParent(state); if (!parentState) { return null; @@ -52,8 +52,8 @@ function indexOf(state: NavigationState, key: string): ?number { return index; } -function push(state: NavigationParentState, newChildState: NavigationState): NavigationParentState { - var lastChildren: Array = state.children; +function push(state: NavigationState, newChildState: NavigationRoute): NavigationState { + var lastChildren: Array = state.children; return { ...state, children: [ @@ -64,7 +64,7 @@ function push(state: NavigationParentState, newChildState: NavigationState): Nav }; } -function pop(state: NavigationParentState): NavigationParentState { +function pop(state: NavigationState): NavigationState { const lastChildren = state.children; return { ...state, @@ -73,7 +73,7 @@ function pop(state: NavigationParentState): NavigationParentState { }; } -function reset(state: NavigationState, nextChildren: ?Array, nextIndex: ?number): NavigationState { +function reset(state: NavigationRoute, nextChildren: ?Array, nextIndex: ?number): NavigationRoute { const parentState = getParent(state); if (!parentState) { return state; @@ -90,7 +90,7 @@ function reset(state: NavigationState, nextChildren: ?Array, ne }; } -function set(state: ?NavigationState, key: string, nextChildren: Array, nextIndex: number): NavigationState { +function set(state: ?NavigationRoute, key: string, nextChildren: Array, nextIndex: number): NavigationRoute { if (!state) { return { children: nextChildren, @@ -117,7 +117,7 @@ function set(state: ?NavigationState, key: string, nextChildren: Array child.key === key)); invariant( index !== -1, - 'Cannot find child with matching key in this NavigationState' + 'Cannot find child with matching key in this NavigationRoute' ); return { ...parentState, @@ -144,7 +144,7 @@ function jumpTo(state: NavigationState, key: string): NavigationState { }; } -function replaceAt(state: NavigationState, key: string, newState: NavigationState): NavigationState { +function replaceAt(state: NavigationRoute, key: string, newState: NavigationRoute): NavigationRoute { const parentState = getParent(state); if (!parentState) { return state; @@ -153,7 +153,7 @@ function replaceAt(state: NavigationState, key: string, newState: NavigationStat const index = parentState.children.indexOf(parentState.children.find(child => child.key === key)); invariant( index !== -1, - 'Cannot find child with matching key in this NavigationState' + 'Cannot find child with matching key in this NavigationRoute' ); children[index] = newState; return { @@ -162,7 +162,7 @@ function replaceAt(state: NavigationState, key: string, newState: NavigationStat }; } -function replaceAtIndex(state: NavigationState, index: number, newState: NavigationState): NavigationState { +function replaceAtIndex(state: NavigationRoute, index: number, newState: NavigationRoute): NavigationRoute { const parentState = getParent(state); if (!parentState) { return state; diff --git a/Libraries/NavigationExperimental/NavigationTransitioner.js b/Libraries/NavigationExperimental/NavigationTransitioner.js index 04776afa0be..65d573c1a55 100644 --- a/Libraries/NavigationExperimental/NavigationTransitioner.js +++ b/Libraries/NavigationExperimental/NavigationTransitioner.js @@ -23,7 +23,7 @@ import type { NavigationActionCaller, NavigationAnimatedValue, NavigationLayout, - NavigationParentState, + NavigationState, NavigationScene, NavigationSceneRenderer, NavigationTransitionConfigurator, @@ -31,7 +31,7 @@ import type { type Props = { configureTransition: NavigationTransitionConfigurator, - navigationState: NavigationParentState, + navigationState: NavigationState, onNavigate: NavigationActionCaller, onTransitionEnd: () => void, onTransitionStart: () => void, diff --git a/Libraries/NavigationExperimental/NavigationTypeDefinition.js b/Libraries/NavigationExperimental/NavigationTypeDefinition.js index 8ee36194ac1..05646548614 100644 --- a/Libraries/NavigationExperimental/NavigationTypeDefinition.js +++ b/Libraries/NavigationExperimental/NavigationTypeDefinition.js @@ -21,14 +21,14 @@ export type NavigationAnimatedValue = Animated.Value; export type NavigationGestureDirection = 'horizontal' | 'vertical'; -export type NavigationState = { +export type NavigationRoute = { key: string, }; -export type NavigationParentState = { +export type NavigationState = { index: number, key: string, - children: Array, + children: Array, }; export type NavigationAction = any; @@ -45,7 +45,7 @@ export type NavigationScene = { index: number, isStale: boolean, key: string, - navigationState: NavigationState, + navigationState: NavigationRoute, }; export type NavigationSceneRendererProps = { @@ -53,7 +53,7 @@ export type NavigationSceneRendererProps = { layout: NavigationLayout, // The navigation state of the containing view. - navigationState: NavigationParentState, + navigationState: NavigationState, // Callback to navigation with an action. onNavigate: NavigationActionCaller, @@ -102,19 +102,19 @@ export type NavigationActionCaller = Function; export type NavigationAnimationSetter = ( position: NavigationAnimatedValue, - newState: NavigationParentState, - lastState: NavigationParentState, + newState: NavigationState, + lastState: NavigationState, ) => void; export type NavigationRenderer = ( - navigationState: ?NavigationState, + navigationState: ?NavigationRoute, onNavigate: NavigationActionCaller, ) => ReactElement; export type NavigationReducer = ( - state: ?NavigationState, + state: ?NavigationRoute, action: ?NavigationAction, -) => NavigationState; +) => NavigationRoute; export type NavigationSceneRenderer = ( props: NavigationSceneRendererProps, diff --git a/Libraries/NavigationExperimental/Reducer/NavigationFindReducer.js b/Libraries/NavigationExperimental/Reducer/NavigationFindReducer.js index d7e2d1afa5f..fd9e74bda9a 100644 --- a/Libraries/NavigationExperimental/Reducer/NavigationFindReducer.js +++ b/Libraries/NavigationExperimental/Reducer/NavigationFindReducer.js @@ -18,15 +18,15 @@ */ import type { - NavigationState, + NavigationRoute, NavigationReducer } from 'NavigationTypeDefinition'; function NavigationFindReducer( reducers: Array, - defaultState: NavigationState, + defaultState: NavigationRoute, ): NavigationReducer { - return function(lastState: ?NavigationState, action: ?any): NavigationState { + return function(lastState: ?NavigationRoute, action: ?any): NavigationRoute { for (let i = 0; i < reducers.length; i++) { let reducer = reducers[i]; let newState = reducer(lastState, action); diff --git a/Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js b/Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js index 450e28b5cb6..ca6617c0461 100644 --- a/Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js +++ b/Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js @@ -14,7 +14,7 @@ const invariant = require('fbjs/lib/invariant'); import type { - NavigationParentState, + NavigationState, NavigationScene, } from 'NavigationTypeDefinition'; @@ -69,8 +69,8 @@ function areScenesShallowEqual( function NavigationScenesReducer( scenes: Array, - nextState: NavigationParentState, - prevState: ?NavigationParentState, + nextState: NavigationState, + prevState: ?NavigationState, ): Array { if (prevState === nextState) { return scenes; diff --git a/Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js b/Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js index 6fd3ac39d1a..681b0acc0d0 100644 --- a/Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js +++ b/Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js @@ -14,19 +14,19 @@ const NavigationStateUtils = require('NavigationStateUtils'); import type { + NavigationRoute, NavigationState, - NavigationParentState, NavigationReducer, } from 'NavigationTypeDefinition'; -export type ReducerForStateHandler = (state: NavigationState) => NavigationReducer; +export type ReducerForStateHandler = (state: NavigationRoute) => NavigationReducer; -export type PushedReducerForActionHandler = (action: any, lastState: NavigationParentState) => ?NavigationReducer; +export type PushedReducerForActionHandler = (action: any, lastState: NavigationState) => ?NavigationReducer; export type StackReducerConfig = { /* * The initialState is that the reducer will use when there is no previous state. - * Must be a NavigationParentState: + * Must be a NavigationState: * * { * children: [ @@ -37,7 +37,7 @@ export type StackReducerConfig = { * key: 'navStackKey' * } */ - initialState: NavigationParentState; + initialState: NavigationState; /* * Returns the sub-reducer for a particular state to handle. This will be called @@ -57,7 +57,7 @@ const defaultGetReducerForState = (initialState) => (state) => state || initialS function NavigationStackReducer({initialState, getReducerForState, getPushedReducerForAction}: StackReducerConfig): NavigationReducer { const getReducerForStateWithDefault = getReducerForState || defaultGetReducerForState; - return function (lastState: ?NavigationState, action: any): NavigationState { + return function (lastState: ?NavigationRoute, action: any): NavigationRoute { if (!lastState) { return initialState; } diff --git a/Libraries/NavigationExperimental/Reducer/NavigationTabsReducer.js b/Libraries/NavigationExperimental/Reducer/NavigationTabsReducer.js index 5063b72bb07..b4241f43fa0 100644 --- a/Libraries/NavigationExperimental/Reducer/NavigationTabsReducer.js +++ b/Libraries/NavigationExperimental/Reducer/NavigationTabsReducer.js @@ -16,7 +16,7 @@ const NavigationStateUtils = require('NavigationStateUtils'); import type { NavigationReducer, - NavigationState, + NavigationRoute, } from 'NavigationTypeDefinition'; const ActionTypes = { @@ -41,7 +41,7 @@ type TabsReducerConfig = { }; function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConfig): NavigationReducer { - return function(lastNavState: ?NavigationState, action: ?any): NavigationState { + return function(lastNavState: ?NavigationRoute, action: ?any): NavigationRoute { if (!lastNavState) { lastNavState = { children: tabReducers.map(reducer => reducer(null, null)), @@ -63,7 +63,7 @@ function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConf ); } const subReducers = tabReducers.map((tabReducer, tabIndex) => { - return function(navState: ?NavigationState, tabAction: any): NavigationState { + return function(navState: ?NavigationRoute, tabAction: any): NavigationRoute { if (!navState) { return lastParentNavState; } @@ -83,7 +83,7 @@ function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConf }; }); let selectedTabReducer = subReducers.splice(lastParentNavState.index, 1)[0]; - subReducers.unshift(function(navState: ?NavigationState, action: any): NavigationState { + subReducers.unshift(function(navState: ?NavigationRoute, action: any): NavigationRoute { if (navState && action.type === 'BackAction') { return NavigationStateUtils.jumpToIndex( lastParentNavState,