From 8ce7ad48b05a836e2a5f9fbdfa40c5874da47499 Mon Sep 17 00:00:00 2001 From: Jake Murzy Date: Tue, 21 Jun 2016 15:46:20 -0700 Subject: [PATCH] Kill NavigationAnimatedView Summary: NavigationAnimatedView is deprecated. Use NavigationTransitioner. As discussed in #8262, #8189. Closes https://github.com/facebook/react-native/pull/8269 Reviewed By: hedgerwang Differential Revision: D3462087 Pulled By: ericvicenti fbshipit-source-id: 6d7504cb8533f12a3610d34ef5b35edcf79fd5b7 --- .../NavigationAnimatedView.js | 249 ------------------ .../NavigationExperimental.js | 2 - 2 files changed, 251 deletions(-) delete mode 100644 Libraries/NavigationExperimental/NavigationAnimatedView.js diff --git a/Libraries/NavigationExperimental/NavigationAnimatedView.js b/Libraries/NavigationExperimental/NavigationAnimatedView.js deleted file mode 100644 index 7b160f6b8..000000000 --- a/Libraries/NavigationExperimental/NavigationAnimatedView.js +++ /dev/null @@ -1,249 +0,0 @@ -/** - * Copyright (c) 2015-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. - * - * @providesModule NavigationAnimatedView - * @flow - */ -'use strict'; - -/** - * WARNING: NavigationAnimatedView will be deprecated soon. - * Use NavigationTransitioner instead. - */ - -const Animated = require('Animated'); -const NavigationPropTypes = require('NavigationPropTypes'); -const NavigationScenesReducer = require('NavigationScenesReducer'); -const React = require('React'); -const StyleSheet = require('StyleSheet'); -const View = require('View'); - -import type { - NavigationAnimatedValue, - NavigationAnimationSetter, - NavigationLayout, - NavigationState, - NavigationScene, - NavigationSceneRenderer, -} from 'NavigationTypeDefinition'; - -type Props = { - applyAnimation: NavigationAnimationSetter, - navigationState: NavigationState, - renderOverlay: ?NavigationSceneRenderer, - renderScene: NavigationSceneRenderer, - style: any, -}; - -type State = { - layout: NavigationLayout, - position: NavigationAnimatedValue, - progress: NavigationAnimatedValue, - scenes: Array, -}; - -const {PropTypes} = React; - -function applyDefaultAnimation( - position: NavigationAnimatedValue, - navigationState: NavigationState, -): void { - Animated.spring( - position, - { - bounciness: 0, - toValue: navigationState.index, - } - ).start(); -} - -class NavigationAnimatedView - extends React.Component { - - _onLayout: (event: any) => void; - _onProgressChange: (data: {value: number}) => void; - _positionListener: any; - - props: Props; - state: State; - - static propTypes = { - applyAnimation: PropTypes.func, - navigationState: NavigationPropTypes.navigationState.isRequired, - renderOverlay: PropTypes.func, - renderScene: PropTypes.func.isRequired, - }; - - static defaultProps = { - applyAnimation: applyDefaultAnimation, - }; - - constructor(props: Props, context: any) { - super(props, context); - - // The initial layout isn't measured. Measured layout will be only available - // when the component is mounted. - const layout = { - height: new Animated.Value(0), - initHeight: 0, - initWidth: 0, - isMeasured: false, - width: new Animated.Value(0), - }; - - this.state = { - layout, - position: new Animated.Value(this.props.navigationState.index), - // This `progress` is a adummy placeholder value to meet the values - // as `NavigationSceneRendererProps` requires. - progress: new Animated.Value(1), - scenes: NavigationScenesReducer([], this.props.navigationState), - }; - } - - componentWillMount(): void { - this._onLayout = this._onLayout.bind(this); - this._onProgressChange = this._onProgressChange.bind(this); - } - - componentDidMount(): void { - this._positionListener = - this.state.position.addListener(this._onProgressChange); - } - - componentWillReceiveProps(nextProps: Props): void { - if (nextProps.navigationState !== this.props.navigationState) { - this.setState({ - scenes: NavigationScenesReducer( - this.state.scenes, - nextProps.navigationState, - this.props.navigationState - ), - }); - } - } - - componentDidUpdate(lastProps: Props): void { - if (lastProps.navigationState.index !== this.props.navigationState.index) { - this.props.applyAnimation( - this.state.position, - this.props.navigationState, - lastProps.navigationState - ); - } - } - - componentWillUnmount(): void { - this.state.position.removeListener(this._positionListener); - } - - _onProgressChange(data: Object): void { - const delta = Math.abs(data.value - this.props.navigationState.index); - if (delta > Number.EPSILON) { - return; - } - - const scenes = this.state.scenes.filter(scene => { - return !scene.isStale; - }); - - if (scenes.length !== this.state.scenes.length) { - this.setState({ scenes }); - } - } - - render(): ReactElement { - const overlay = this._renderOverlay(); - const scenes = this._renderScenes(); - return ( - - - {scenes} - - {overlay} - - ); - } - - _renderScenes(): Array> { - return this.state.scenes.map(this._renderScene, this); - } - - _renderScene(scene: NavigationScene): ?ReactElement { - const { - navigationState, - renderScene, - } = this.props; - - const { - position, - progress, - scenes, - } = this.state; - - return renderScene({ - layout: this.state.layout, - navigationState, - position, - progress, - scene, - scenes, - }); - } - - _renderOverlay(): ?ReactElement { - if (this.props.renderOverlay) { - const { - navigationState, - renderOverlay, - } = this.props; - - const { - position, - progress, - scenes, - } = this.state; - - return renderOverlay({ - layout: this.state.layout, - navigationState, - position, - progress, - scene: scenes[navigationState.index], - scenes, - }); - } - return null; - } - - _onLayout(event: any): void { - const {height, width} = event.nativeEvent.layout; - - const layout = { - ...this.state.layout, - initHeight: height, - initWidth: width, - isMeasured: true, - }; - - layout.height.setValue(height); - layout.width.setValue(width); - - this.setState({ layout }); - } -} - -const styles = StyleSheet.create({ - scenes: { - flex: 1, - }, -}); - -module.exports = NavigationAnimatedView; diff --git a/Libraries/NavigationExperimental/NavigationExperimental.js b/Libraries/NavigationExperimental/NavigationExperimental.js index 4548b3360..4f1bb068c 100644 --- a/Libraries/NavigationExperimental/NavigationExperimental.js +++ b/Libraries/NavigationExperimental/NavigationExperimental.js @@ -11,7 +11,6 @@ */ 'use strict'; -const NavigationAnimatedView = require('NavigationAnimatedView'); const NavigationCard = require('NavigationCard'); const NavigationCardStack = require('NavigationCardStack'); const NavigationHeader = require('NavigationHeader'); @@ -24,7 +23,6 @@ const NavigationExperimental = { StateUtils: NavigationStateUtils, // Views - AnimatedView: NavigationAnimatedView, Transitioner: NavigationTransitioner, // CustomComponents: