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
This commit is contained in:
Hedger Wang 2016-05-20 14:24:24 -07:00 committed by Facebook Github Bot 4
parent 3977d0f5b9
commit 807726bcb4
12 changed files with 61 additions and 54 deletions

View File

@ -42,7 +42,7 @@ const {
import type { import type {
NavigationParentState, NavigationState,
NavigationSceneRenderer, NavigationSceneRenderer,
NavigationSceneRendererProps, NavigationSceneRendererProps,
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
@ -225,7 +225,7 @@ class ExampleTabScreen extends React.Component {
} }
class NavigationCompositionExample extends React.Component { class NavigationCompositionExample extends React.Component {
state: NavigationParentState; state: NavigationState;
constructor() { constructor() {
super(); super();
this.state = ExampleAppReducer(undefined, {}); this.state = ExampleAppReducer(undefined, {});

View File

@ -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 * The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only. * evaluation purposes only.
* *
@ -18,9 +25,9 @@
// $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS? // $FlowFixMe : This is a platform-forked component, and flow seems to only run on iOS?
const UIExplorerList = require('./UIExplorerList'); 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]) { if (UIExplorerList.Modules[state.key]) {
return UIExplorerList.Modules[state.key].title return UIExplorerList.Modules[state.key].title
} }

View File

@ -48,7 +48,7 @@ const {Directions} = NavigationCardStackPanResponder;
import type { import type {
NavigationActionCaller, NavigationActionCaller,
NavigationParentState, NavigationState,
NavigationSceneRenderer, NavigationSceneRenderer,
NavigationSceneRendererProps, NavigationSceneRendererProps,
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
@ -59,7 +59,7 @@ import type {
type Props = { type Props = {
direction: NavigationGestureDirection, direction: NavigationGestureDirection,
navigationState: NavigationParentState, navigationState: NavigationState,
onNavigate: NavigationActionCaller, onNavigate: NavigationActionCaller,
renderOverlay: ?NavigationSceneRenderer, renderOverlay: ?NavigationSceneRenderer,
renderScene: NavigationSceneRenderer, renderScene: NavigationSceneRenderer,

View File

@ -28,14 +28,14 @@ import type {
NavigationAnimatedValue, NavigationAnimatedValue,
NavigationAnimationSetter, NavigationAnimationSetter,
NavigationLayout, NavigationLayout,
NavigationParentState, NavigationState,
NavigationScene, NavigationScene,
NavigationSceneRenderer, NavigationSceneRenderer,
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
type Props = { type Props = {
applyAnimation: NavigationAnimationSetter, applyAnimation: NavigationAnimationSetter,
navigationState: NavigationParentState, navigationState: NavigationState,
onNavigate: NavigationActionCaller, onNavigate: NavigationActionCaller,
renderOverlay: ?NavigationSceneRenderer, renderOverlay: ?NavigationSceneRenderer,
renderScene: NavigationSceneRenderer, renderScene: NavigationSceneRenderer,
@ -53,7 +53,7 @@ const {PropTypes} = React;
function applyDefaultAnimation( function applyDefaultAnimation(
position: NavigationAnimatedValue, position: NavigationAnimatedValue,
navigationState: NavigationParentState, navigationState: NavigationState,
): void { ): void {
Animated.spring( Animated.spring(
position, position,

View File

@ -35,12 +35,12 @@ const action = PropTypes.shape({
/* NavigationAnimatedValue */ /* NavigationAnimatedValue */
const animatedValue = PropTypes.instanceOf(Animated.Value); const animatedValue = PropTypes.instanceOf(Animated.Value);
/* NavigationState */ /* NavigationRoute */
const navigationState = PropTypes.shape({ const navigationState = PropTypes.shape({
key: PropTypes.string.isRequired, key: PropTypes.string.isRequired,
}); });
/* NavigationParentState */ /* NavigationState */
const navigationParentState = PropTypes.shape({ const navigationParentState = PropTypes.shape({
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
key: PropTypes.string.isRequired, key: PropTypes.string.isRequired,

View File

@ -14,11 +14,11 @@
const invariant = require('fbjs/lib/invariant'); const invariant = require('fbjs/lib/invariant');
import type { import type {
NavigationRoute,
NavigationState, NavigationState,
NavigationParentState,
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
function getParent(state: NavigationState): ?NavigationParentState { function getParent(state: NavigationRoute): ?NavigationState {
if ( if (
(state instanceof Object) && (state instanceof Object) &&
(state.children instanceof Array) && (state.children instanceof Array) &&
@ -31,7 +31,7 @@ function getParent(state: NavigationState): ?NavigationParentState {
return null; return null;
} }
function get(state: NavigationState, key: string): ?NavigationState { function get(state: NavigationRoute, key: string): ?NavigationRoute {
const parentState = getParent(state); const parentState = getParent(state);
if (!parentState) { if (!parentState) {
return null; return null;
@ -40,7 +40,7 @@ function get(state: NavigationState, key: string): ?NavigationState {
return childState || null; return childState || null;
} }
function indexOf(state: NavigationState, key: string): ?number { function indexOf(state: NavigationRoute, key: string): ?number {
const parentState = getParent(state); const parentState = getParent(state);
if (!parentState) { if (!parentState) {
return null; return null;
@ -52,8 +52,8 @@ function indexOf(state: NavigationState, key: string): ?number {
return index; return index;
} }
function push(state: NavigationParentState, newChildState: NavigationState): NavigationParentState { function push(state: NavigationState, newChildState: NavigationRoute): NavigationState {
var lastChildren: Array<NavigationState> = state.children; var lastChildren: Array<NavigationRoute> = state.children;
return { return {
...state, ...state,
children: [ 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; const lastChildren = state.children;
return { return {
...state, ...state,
@ -73,7 +73,7 @@ function pop(state: NavigationParentState): NavigationParentState {
}; };
} }
function reset(state: NavigationState, nextChildren: ?Array<NavigationState>, nextIndex: ?number): NavigationState { function reset(state: NavigationRoute, nextChildren: ?Array<NavigationRoute>, nextIndex: ?number): NavigationRoute {
const parentState = getParent(state); const parentState = getParent(state);
if (!parentState) { if (!parentState) {
return state; return state;
@ -90,7 +90,7 @@ function reset(state: NavigationState, nextChildren: ?Array<NavigationState>, ne
}; };
} }
function set(state: ?NavigationState, key: string, nextChildren: Array<NavigationState>, nextIndex: number): NavigationState { function set(state: ?NavigationRoute, key: string, nextChildren: Array<NavigationRoute>, nextIndex: number): NavigationRoute {
if (!state) { if (!state) {
return { return {
children: nextChildren, children: nextChildren,
@ -117,7 +117,7 @@ function set(state: ?NavigationState, key: string, nextChildren: Array<Navigatio
}; };
} }
function jumpToIndex(state: NavigationState, index: number): NavigationState { function jumpToIndex(state: NavigationRoute, index: number): NavigationRoute {
const parentState = getParent(state); const parentState = getParent(state);
if (parentState && parentState.index === index) { if (parentState && parentState.index === index) {
return parentState; return parentState;
@ -128,7 +128,7 @@ function jumpToIndex(state: NavigationState, index: number): NavigationState {
}; };
} }
function jumpTo(state: NavigationState, key: string): NavigationState { function jumpTo(state: NavigationRoute, key: string): NavigationRoute {
const parentState = getParent(state); const parentState = getParent(state);
if (!parentState) { if (!parentState) {
return state; return state;
@ -136,7 +136,7 @@ function jumpTo(state: NavigationState, key: string): NavigationState {
const index = parentState.children.indexOf(parentState.children.find(child => child.key === key)); const index = parentState.children.indexOf(parentState.children.find(child => child.key === key));
invariant( invariant(
index !== -1, index !== -1,
'Cannot find child with matching key in this NavigationState' 'Cannot find child with matching key in this NavigationRoute'
); );
return { return {
...parentState, ...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); const parentState = getParent(state);
if (!parentState) { if (!parentState) {
return state; 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)); const index = parentState.children.indexOf(parentState.children.find(child => child.key === key));
invariant( invariant(
index !== -1, index !== -1,
'Cannot find child with matching key in this NavigationState' 'Cannot find child with matching key in this NavigationRoute'
); );
children[index] = newState; children[index] = newState;
return { 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); const parentState = getParent(state);
if (!parentState) { if (!parentState) {
return state; return state;

View File

@ -23,7 +23,7 @@ import type {
NavigationActionCaller, NavigationActionCaller,
NavigationAnimatedValue, NavigationAnimatedValue,
NavigationLayout, NavigationLayout,
NavigationParentState, NavigationState,
NavigationScene, NavigationScene,
NavigationSceneRenderer, NavigationSceneRenderer,
NavigationTransitionConfigurator, NavigationTransitionConfigurator,
@ -31,7 +31,7 @@ import type {
type Props = { type Props = {
configureTransition: NavigationTransitionConfigurator, configureTransition: NavigationTransitionConfigurator,
navigationState: NavigationParentState, navigationState: NavigationState,
onNavigate: NavigationActionCaller, onNavigate: NavigationActionCaller,
onTransitionEnd: () => void, onTransitionEnd: () => void,
onTransitionStart: () => void, onTransitionStart: () => void,

View File

@ -21,14 +21,14 @@ export type NavigationAnimatedValue = Animated.Value;
export type NavigationGestureDirection = 'horizontal' | 'vertical'; export type NavigationGestureDirection = 'horizontal' | 'vertical';
export type NavigationState = { export type NavigationRoute = {
key: string, key: string,
}; };
export type NavigationParentState = { export type NavigationState = {
index: number, index: number,
key: string, key: string,
children: Array<NavigationState>, children: Array<NavigationRoute>,
}; };
export type NavigationAction = any; export type NavigationAction = any;
@ -45,7 +45,7 @@ export type NavigationScene = {
index: number, index: number,
isStale: boolean, isStale: boolean,
key: string, key: string,
navigationState: NavigationState, navigationState: NavigationRoute,
}; };
export type NavigationSceneRendererProps = { export type NavigationSceneRendererProps = {
@ -53,7 +53,7 @@ export type NavigationSceneRendererProps = {
layout: NavigationLayout, layout: NavigationLayout,
// The navigation state of the containing view. // The navigation state of the containing view.
navigationState: NavigationParentState, navigationState: NavigationState,
// Callback to navigation with an action. // Callback to navigation with an action.
onNavigate: NavigationActionCaller, onNavigate: NavigationActionCaller,
@ -102,19 +102,19 @@ export type NavigationActionCaller = Function;
export type NavigationAnimationSetter = ( export type NavigationAnimationSetter = (
position: NavigationAnimatedValue, position: NavigationAnimatedValue,
newState: NavigationParentState, newState: NavigationState,
lastState: NavigationParentState, lastState: NavigationState,
) => void; ) => void;
export type NavigationRenderer = ( export type NavigationRenderer = (
navigationState: ?NavigationState, navigationState: ?NavigationRoute,
onNavigate: NavigationActionCaller, onNavigate: NavigationActionCaller,
) => ReactElement; ) => ReactElement;
export type NavigationReducer = ( export type NavigationReducer = (
state: ?NavigationState, state: ?NavigationRoute,
action: ?NavigationAction, action: ?NavigationAction,
) => NavigationState; ) => NavigationRoute;
export type NavigationSceneRenderer = ( export type NavigationSceneRenderer = (
props: NavigationSceneRendererProps, props: NavigationSceneRendererProps,

View File

@ -18,15 +18,15 @@
*/ */
import type { import type {
NavigationState, NavigationRoute,
NavigationReducer NavigationReducer
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
function NavigationFindReducer( function NavigationFindReducer(
reducers: Array<NavigationReducer>, reducers: Array<NavigationReducer>,
defaultState: NavigationState, defaultState: NavigationRoute,
): NavigationReducer { ): NavigationReducer {
return function(lastState: ?NavigationState, action: ?any): NavigationState { return function(lastState: ?NavigationRoute, action: ?any): NavigationRoute {
for (let i = 0; i < reducers.length; i++) { for (let i = 0; i < reducers.length; i++) {
let reducer = reducers[i]; let reducer = reducers[i];
let newState = reducer(lastState, action); let newState = reducer(lastState, action);

View File

@ -14,7 +14,7 @@
const invariant = require('fbjs/lib/invariant'); const invariant = require('fbjs/lib/invariant');
import type { import type {
NavigationParentState, NavigationState,
NavigationScene, NavigationScene,
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
@ -69,8 +69,8 @@ function areScenesShallowEqual(
function NavigationScenesReducer( function NavigationScenesReducer(
scenes: Array<NavigationScene>, scenes: Array<NavigationScene>,
nextState: NavigationParentState, nextState: NavigationState,
prevState: ?NavigationParentState, prevState: ?NavigationState,
): Array<NavigationScene> { ): Array<NavigationScene> {
if (prevState === nextState) { if (prevState === nextState) {
return scenes; return scenes;

View File

@ -14,19 +14,19 @@
const NavigationStateUtils = require('NavigationStateUtils'); const NavigationStateUtils = require('NavigationStateUtils');
import type { import type {
NavigationRoute,
NavigationState, NavigationState,
NavigationParentState,
NavigationReducer, NavigationReducer,
} from 'NavigationTypeDefinition'; } 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 = { export type StackReducerConfig = {
/* /*
* The initialState is that the reducer will use when there is no previous state. * The initialState is that the reducer will use when there is no previous state.
* Must be a NavigationParentState: * Must be a NavigationState:
* *
* { * {
* children: [ * children: [
@ -37,7 +37,7 @@ export type StackReducerConfig = {
* key: 'navStackKey' * key: 'navStackKey'
* } * }
*/ */
initialState: NavigationParentState; initialState: NavigationState;
/* /*
* Returns the sub-reducer for a particular state to handle. This will be called * 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 { function NavigationStackReducer({initialState, getReducerForState, getPushedReducerForAction}: StackReducerConfig): NavigationReducer {
const getReducerForStateWithDefault = getReducerForState || defaultGetReducerForState; const getReducerForStateWithDefault = getReducerForState || defaultGetReducerForState;
return function (lastState: ?NavigationState, action: any): NavigationState { return function (lastState: ?NavigationRoute, action: any): NavigationRoute {
if (!lastState) { if (!lastState) {
return initialState; return initialState;
} }

View File

@ -16,7 +16,7 @@ const NavigationStateUtils = require('NavigationStateUtils');
import type { import type {
NavigationReducer, NavigationReducer,
NavigationState, NavigationRoute,
} from 'NavigationTypeDefinition'; } from 'NavigationTypeDefinition';
const ActionTypes = { const ActionTypes = {
@ -41,7 +41,7 @@ type TabsReducerConfig = {
}; };
function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConfig): NavigationReducer { function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConfig): NavigationReducer {
return function(lastNavState: ?NavigationState, action: ?any): NavigationState { return function(lastNavState: ?NavigationRoute, action: ?any): NavigationRoute {
if (!lastNavState) { if (!lastNavState) {
lastNavState = { lastNavState = {
children: tabReducers.map(reducer => reducer(null, null)), children: tabReducers.map(reducer => reducer(null, null)),
@ -63,7 +63,7 @@ function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConf
); );
} }
const subReducers = tabReducers.map((tabReducer, tabIndex) => { const subReducers = tabReducers.map((tabReducer, tabIndex) => {
return function(navState: ?NavigationState, tabAction: any): NavigationState { return function(navState: ?NavigationRoute, tabAction: any): NavigationRoute {
if (!navState) { if (!navState) {
return lastParentNavState; return lastParentNavState;
} }
@ -83,7 +83,7 @@ function NavigationTabsReducer({key, initialIndex, tabReducers}: TabsReducerConf
}; };
}); });
let selectedTabReducer = subReducers.splice(lastParentNavState.index, 1)[0]; 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') { if (navState && action.type === 'BackAction') {
return NavigationStateUtils.jumpToIndex( return NavigationStateUtils.jumpToIndex(
lastParentNavState, lastParentNavState,