move propTypes, defaultProps, and childContextTypes into class.

Summary: This will make the code more readable.

Reviewed By: ericvicenti

Differential Revision: D3096663

fb-gh-sync-id: 540d2107ea3cd4c60aabdf7a6503c8c22bc4a985
fbshipit-source-id: 540d2107ea3cd4c60aabdf7a6503c8c22bc4a985

Author: Hedger Wang

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -32,7 +32,6 @@
  */
 'use strict';
 
-const Animated = require('Animated');
 const NavigationAnimatedView = require('NavigationAnimatedView');
 const NavigationCard = require('NavigationCard');
 const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
@@ -49,7 +48,6 @@ const {PropTypes} = React;
 const {Directions} = NavigationCardStackPanResponder;
 
 import type {
-  NavigationAnimatedValue,
   NavigationParentState,
   NavigationSceneRenderer,
   NavigationSceneRendererProps,
@@ -66,18 +64,6 @@ type Props = {
   renderScene: NavigationSceneRenderer,
 };
 
-const propTypes = {
-  direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
-  navigationState: NavigationPropTypes.navigationParentState.isRequired,
-  renderOverlay: PropTypes.func,
-  renderScene: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-  direction: Directions.HORIZONTAL,
-  renderOverlay: emptyFunction.thatReturnsNull,
-};
-
 /**
  * A controlled navigation view that renders a stack of cards.
  *
@@ -95,6 +81,18 @@ const defaultProps = {
 class NavigationCardStack extends React.Component {
   _renderScene : NavigationSceneRenderer;
 
+  static propTypes = {
+    direction: PropTypes.oneOf([Directions.HORIZONTAL, Directions.VERTICAL]),
+    navigationState: NavigationPropTypes.navigationParentState.isRequired,
+    renderOverlay: PropTypes.func,
+    renderScene: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    direction: Directions.HORIZONTAL,
+    renderOverlay: emptyFunction.thatReturnsNull,
+  };
+
   constructor(props: Props, context: any) {
     super(props, context);
   }
@@ -145,9 +143,6 @@ class NavigationCardStack extends React.Component {
   }
 }
 
-NavigationCardStack.propTypes = propTypes;
-NavigationCardStack.defaultProps = defaultProps;
-
 const styles = StyleSheet.create({
   animatedView: {
     flex: 1,

Libraries/NavigationExperimental/NavigationAnimatedView.js

@@ -44,28 +44,18 @@ type State = {
 
 const {PropTypes} = React;
 
-const propTypes = {
-  applyAnimation: PropTypes.func,
-  navigationState: NavigationPropTypes.navigationState.isRequired,
-  onNavigate: PropTypes.func.isRequired,
-  renderOverlay: PropTypes.func,
-  renderScene: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-  applyAnimation: (
-    position: NavigationAnimatedValue,
-    navigationState: NavigationParentState,
-  ) => {
-    Animated.spring(
-      position,
-      {
-        bounciness: 0,
-        toValue: navigationState.index,
-      }
-    ).start();
-  },
-};
+function applyDefaultAnimation(
+  position: NavigationAnimatedValue,
+  navigationState: NavigationParentState,
+): void {
+  Animated.spring(
+    position,
+    {
+      bounciness: 0,
+      toValue: navigationState.index,
+    }
+  ).start();
+}
 
 class NavigationAnimatedView
   extends React.Component<any, Props, State> {
@@ -78,6 +68,18 @@ class NavigationAnimatedView
   props: Props;
   state: State;
 
+  static propTypes = {
+    applyAnimation: PropTypes.func,
+    navigationState: NavigationPropTypes.navigationState.isRequired,
+    onNavigate: PropTypes.func.isRequired,
+    renderOverlay: PropTypes.func,
+    renderScene: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    applyAnimation: applyDefaultAnimation,
+  };
+
   constructor(props: Props, context: any) {
     super(props, context);
 
@@ -233,9 +235,6 @@ const styles = StyleSheet.create({
   },
 });
 
-NavigationAnimatedView.propTypes = propTypes;
-NavigationAnimatedView.defaultProps = defaultProps;
-
 NavigationAnimatedView = NavigationContainer.create(NavigationAnimatedView);
 
 module.exports = NavigationAnimatedView;

Libraries/NavigationExperimental/NavigationRootContainer.js

@@ -13,12 +13,14 @@
 
 const AsyncStorage = require('AsyncStorage');
 const Linking = require('Linking');
+const NavigationPropTypes = require('NavigationPropTypes');
+const NavigationStateUtils = require('NavigationStateUtils');
 const Platform = require('Platform');
 const React = require('React');
-const NavigationPropTypes = require('NavigationPropTypes');
 
 import type {
   NavigationAction,
+  NavigationParentState,
   NavigationReducer,
   NavigationRenderer,
 } from 'NavigationTypeDefinition';
@@ -27,10 +29,6 @@ export type BackAction = {
   type: 'BackAction',
 };
 
-function getBackAction(): BackAction {
-  return { type: 'BackAction' };
-}
-
 type Props = {
   /*
    * The default action to be passed into the reducer when getting the first
@@ -65,39 +63,56 @@ type Props = {
   renderNavigation: NavigationRenderer,
 };
 
-const {PropTypes} = React;
-
-const propTypes = {
-  initialAction: NavigationPropTypes.action.isRequired,
-  linkingActionMap: PropTypes.func,
-  persistenceKey: PropTypes.string,
-  reducer: PropTypes.func.isRequired,
-  renderNavigation: PropTypes.func.isRequired,
+type State = {
+  navState: ?NavigationParentState,
 };
 
-const defaultProps = {
-  initialAction: {
-    type: 'RootContainerInitialAction',
-  },
-};
+function getBackAction(): BackAction {
+  return { type: 'BackAction' };
+}
+
+const {PropTypes} = React;
 
-class NavigationRootContainer extends React.Component {
+class NavigationRootContainer extends React.Component<any, Props, State> {
   _handleOpenURLEvent: Function;
 
   props: Props;
+  state: State;
+
+  static propTypes = {
+    initialAction: NavigationPropTypes.action.isRequired,
+    linkingActionMap: PropTypes.func,
+    persistenceKey: PropTypes.string,
+    reducer: PropTypes.func.isRequired,
+    renderNavigation: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    initialAction: { type: 'RootContainerInitialAction' },
+  };
+
+  static childContextTypes = {
+    onNavigate: PropTypes.func,
+  };
 
   constructor(props: Props) {
     super(props);
-    this.handleNavigation = this.handleNavigation.bind(this);
-    this._handleOpenURLEvent = this._handleOpenURLEvent.bind(this);
+
     let navState = null;
     if (!this.props.persistenceKey) {
-      navState = this.props.reducer(null, props.initialAction);
+      navState = NavigationStateUtils.getParent(
+        this.props.reducer(null, props.initialAction)
+      );
     }
     this.state = { navState };
   }
 
-  componentDidMount() {
+  componentWillMount(): void {
+    this.handleNavigation = this.handleNavigation.bind(this);
+    this._handleOpenURLEvent = this._handleOpenURLEvent.bind(this);
+  }
+
+  componentDidMount(): void {
     if (this.props.LinkingActionMap) {
       Linking.getInitialURL().then(this._handleOpenURL.bind(this));
       Platform.OS === 'ios' && Linking.addEventListener('url', this._handleOpenURLEvent);
@@ -117,15 +132,17 @@ class NavigationRootContainer extends React.Component {
     }
   }
 
-  componentWillUnmount() {
-    Platform.OS === 'ios' && Linking.removeEventListener('url', this._handleOpenURLEvent);
+  componentWillUnmount(): void {
+    if (Platform.OS === 'ios') {
+      Linking.removeEventListener('url', this._handleOpenURLEvent);
+    }
   }
 
-  _handleOpenURLEvent(event: {url: string}) {
+  _handleOpenURLEvent(event: {url: string}): void {
     this._handleOpenURL(event.url);
   }
 
-  _handleOpenURL(url: ?string) {
+  _handleOpenURL(url: ?string): void {
     if (!this.props.LinkingActionMap) {
       return;
     }
@@ -166,12 +183,6 @@ class NavigationRootContainer extends React.Component {
   }
 }
 
-NavigationRootContainer.childContextTypes = {
-  onNavigate: PropTypes.func,
-};
-
-NavigationRootContainer.propTypes = propTypes;
-NavigationRootContainer.defaultProps = defaultProps;
 NavigationRootContainer.getBackAction = getBackAction;
 
 module.exports = NavigationRootContainer;

Libraries/NavigationExperimental/NavigationTypeDefinition.js

@@ -95,7 +95,7 @@ export type NavigationAnimationSetter = (
 ) => void;
 
 export type NavigationRenderer = (
-  navigationState: NavigationState,
+  navigationState: ?NavigationState,
   onNavigate: NavigationActionCaller,
 ) => ReactElement;