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
This commit is contained in:
Jake Murzy
Facebook Github Bot 3
parent
47a728907f
commit
8ce7ad48b0
|
|
@ -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<NavigationScene>,
|
|
||||||
};
|
|
||||||
|
|
||||||
const {PropTypes} = React;
|
|
||||||
|
|
||||||
function applyDefaultAnimation(
|
|
||||||
position: NavigationAnimatedValue,
|
|
||||||
navigationState: NavigationState,
|
|
||||||
): void {
|
|
||||||
Animated.spring(
|
|
||||||
position,
|
|
||||||
{
|
|
||||||
bounciness: 0,
|
|
||||||
toValue: navigationState.index,
|
|
||||||
}
|
|
||||||
).start();
|
|
||||||
}
|
|
||||||
|
|
||||||
class NavigationAnimatedView
|
|
||||||
extends React.Component<any, Props, State> {
|
|
||||||
|
|
||||||
_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<any> {
|
|
||||||
const overlay = this._renderOverlay();
|
|
||||||
const scenes = this._renderScenes();
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
onLayout={this._onLayout}
|
|
||||||
style={this.props.style}>
|
|
||||||
<View style={styles.scenes} key="scenes">
|
|
||||||
{scenes}
|
|
||||||
</View>
|
|
||||||
{overlay}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
_renderScenes(): Array<?ReactElement<any>> {
|
|
||||||
return this.state.scenes.map(this._renderScene, this);
|
|
||||||
}
|
|
||||||
|
|
||||||
_renderScene(scene: NavigationScene): ?ReactElement<any> {
|
|
||||||
const {
|
|
||||||
navigationState,
|
|
||||||
renderScene,
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
const {
|
|
||||||
position,
|
|
||||||
progress,
|
|
||||||
scenes,
|
|
||||||
} = this.state;
|
|
||||||
|
|
||||||
return renderScene({
|
|
||||||
layout: this.state.layout,
|
|
||||||
navigationState,
|
|
||||||
position,
|
|
||||||
progress,
|
|
||||||
scene,
|
|
||||||
scenes,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_renderOverlay(): ?ReactElement<any> {
|
|
||||||
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;
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
*/
|
*/
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const NavigationAnimatedView = require('NavigationAnimatedView');
|
|
||||||
const NavigationCard = require('NavigationCard');
|
const NavigationCard = require('NavigationCard');
|
||||||
const NavigationCardStack = require('NavigationCardStack');
|
const NavigationCardStack = require('NavigationCardStack');
|
||||||
const NavigationHeader = require('NavigationHeader');
|
const NavigationHeader = require('NavigationHeader');
|
||||||
|
|
@ -24,7 +23,6 @@ const NavigationExperimental = {
|
||||||
StateUtils: NavigationStateUtils,
|
StateUtils: NavigationStateUtils,
|
||||||
|
|
||||||
// Views
|
// Views
|
||||||
AnimatedView: NavigationAnimatedView,
|
|
||||||
Transitioner: NavigationTransitioner,
|
Transitioner: NavigationTransitioner,
|
||||||
|
|
||||||
// CustomComponents:
|
// CustomComponents:
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue