Use the first props change while a transition is occuring as the basis of the queued transition

- Subsequent changes are essentially all ignored except for the last one, which is the target
This commit is contained in:
Brent Vatne 2018-10-29 23:24:47 -07:00
parent 41af8e1451
commit 250950d920
1 changed files with 11 additions and 21 deletions

View File

@ -51,6 +51,7 @@ class Transitioner extends React.Component {
this._prevTransitionProps = null; this._prevTransitionProps = null;
this._transitionProps = buildTransitionProps(props, this.state); this._transitionProps = buildTransitionProps(props, this.state);
this._isMounted = false; this._isMounted = false;
this._isTransitionRunning = false; this._isTransitionRunning = false;
this._queuedTransition = null; this._queuedTransition = null;
@ -68,8 +69,8 @@ class Transitioner extends React.Component {
// eslint-disable-next-line react/no-deprecated // eslint-disable-next-line react/no-deprecated
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this._isTransitionRunning) { if (this._isTransitionRunning && !this._queuedTransition) {
this._queuedTransition = { nextProps, props: this.props }; this._queuedTransition = { prevProps: this.props };
return; return;
} }
@ -113,15 +114,6 @@ class Transitioner extends React.Component {
}; };
_startTransition(nextProps, nextScenes, indexHasChanged) { _startTransition(nextProps, nextScenes, indexHasChanged) {
if (!nextScenes) {
console.log({
nextScenes,
scenes: this.state.scenes.map(s => s.descriptor.navigation.state.routeName),
state: nextProps.navigation.state.routes.length,
indexHasChanged,
})
nextScenes = this.state.scenes;
}
const nextState = { const nextState = {
...this.state, ...this.state,
scenes: nextScenes, scenes: nextScenes,
@ -143,6 +135,7 @@ class Transitioner extends React.Component {
// compute transitionProps // compute transitionProps
this._prevTransitionProps = this._transitionProps; this._prevTransitionProps = this._transitionProps;
this._transitionProps = buildTransitionProps(nextProps, nextState); this._transitionProps = buildTransitionProps(nextProps, nextState);
let { isTransitioning } = this._transitionProps.navigation.state; let { isTransitioning } = this._transitionProps.navigation.state;
// if the state isn't transitioning that is meant to signal that we should // if the state isn't transitioning that is meant to signal that we should
@ -291,22 +284,19 @@ class Transitioner extends React.Component {
if (this._queuedTransition) { if (this._queuedTransition) {
const indexHasChanged = const indexHasChanged =
this._queuedTransition.nextProps.navigation.state.index !== this.props.navigation.state.index !==
this._queuedTransition.props.navigation.state.index; this._queuedTransition.prevProps.navigation.state.index;
let nextScenes = this._computeScenes( let nextScenes = this._computeScenes(
this._queuedTransition.props, this._queuedTransition.prevProps,
this._queuedTransition.nextProps this.props
); );
if (nextScenes) { if (nextScenes) {
this._startTransition( this._startTransition(this.props, nextScenes, indexHasChanged);
this._queuedTransition.nextProps, } else {
nextScenes, this._isTransitionRunning = false;
indexHasChanged
);
} }
this._queuedTransition = null; this._queuedTransition = null;
this._isTransitionRunning = false;
} else { } else {
this._isTransitionRunning = false; this._isTransitionRunning = false;
} }