From a28e59bd97396eb0866978d98ae1843433bf7781 Mon Sep 17 00:00:00 2001 From: Hedger Wang Date: Mon, 28 Mar 2016 16:45:18 -0700 Subject: [PATCH] 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 --- .../NavigationCardStack.js | 29 +++---- .../NavigationAnimatedView.js | 49 ++++++------ .../NavigationRootContainer.js | 79 +++++++++++-------- .../NavigationTypeDefinition.js | 2 +- 4 files changed, 82 insertions(+), 77 deletions(-) diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js index 9fd2918eb..72978cebc 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js +++ b/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, diff --git a/Libraries/NavigationExperimental/NavigationAnimatedView.js b/Libraries/NavigationExperimental/NavigationAnimatedView.js index ca017cdca..ac5293373 100644 --- a/Libraries/NavigationExperimental/NavigationAnimatedView.js +++ b/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 { @@ -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; diff --git a/Libraries/NavigationExperimental/NavigationRootContainer.js b/Libraries/NavigationExperimental/NavigationRootContainer.js index 1cefdc6d8..2323fda0c 100644 --- a/Libraries/NavigationExperimental/NavigationRootContainer.js +++ b/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, }; +type State = { + navState: ?NavigationParentState, +}; + +function getBackAction(): BackAction { + return { type: 'BackAction' }; +} + const {PropTypes} = React; -const propTypes = { - initialAction: NavigationPropTypes.action.isRequired, - linkingActionMap: PropTypes.func, - persistenceKey: PropTypes.string, - reducer: PropTypes.func.isRequired, - renderNavigation: PropTypes.func.isRequired, -}; - -const defaultProps = { - initialAction: { - type: 'RootContainerInitialAction', - }, -}; - -class NavigationRootContainer extends React.Component { +class NavigationRootContainer extends React.Component { _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; diff --git a/Libraries/NavigationExperimental/NavigationTypeDefinition.js b/Libraries/NavigationExperimental/NavigationTypeDefinition.js index 907c361a9..687194e54 100644 --- a/Libraries/NavigationExperimental/NavigationTypeDefinition.js +++ b/Libraries/NavigationExperimental/NavigationTypeDefinition.js @@ -95,7 +95,7 @@ export type NavigationAnimationSetter = ( ) => void; export type NavigationRenderer = ( - navigationState: NavigationState, + navigationState: ?NavigationState, onNavigate: NavigationActionCaller, ) => ReactElement;