rn: wait for animation before hiding SlidingView

This commit is contained in:
Saúl Ibarra Corretgé 2019-04-24 13:14:20 +02:00 committed by Zoltan Bettenbuk
parent 70dc22c107
commit 34dcbd991e
1 changed files with 37 additions and 31 deletions

View File

@ -110,7 +110,7 @@ export default class SlidingView extends PureComponent<Props, State> {
}; };
// Bind event handlers so they are only bound once per instance. // Bind event handlers so they are only bound once per instance.
this._onHideMenu = this._onHideMenu.bind(this); this._onHide = this._onHide.bind(this);
} }
/** /**
@ -158,7 +158,7 @@ export default class SlidingView extends PureComponent<Props, State> {
pointerEvents = 'box-none' pointerEvents = 'box-none'
style = { styles.sliderViewContainer } > style = { styles.sliderViewContainer } >
<TouchableWithoutFeedback <TouchableWithoutFeedback
onPress = { this._onHideMenu } > onPress = { this._onHide } >
<View style = { styles.sliderViewShadow } /> <View style = { styles.sliderViewShadow } />
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<Animated.View <Animated.View
@ -211,7 +211,7 @@ export default class SlidingView extends PureComponent<Props, State> {
return style; return style;
} }
_onHideMenu: () => void; _onHide: () => void;
/** /**
* Hides the slider. * Hides the slider.
@ -219,15 +219,16 @@ export default class SlidingView extends PureComponent<Props, State> {
* @private * @private
* @returns {void} * @returns {void}
*/ */
_onHideMenu() { _onHide() {
this._setShow(false); this._setShow(false)
.then(() => {
const { onHide } = this.props;
const { onHide } = this.props; onHide && onHide();
});
onHide && onHide();
} }
_setShow: (boolean) => void; _setShow: (boolean) => Promise<*>;
/** /**
* Shows/hides the slider menu. * Shows/hides the slider menu.
@ -235,32 +236,37 @@ export default class SlidingView extends PureComponent<Props, State> {
* @param {boolean} show - If the slider view is to be made visible, * @param {boolean} show - If the slider view is to be made visible,
* {@code true}; otherwise, {@code false}. * {@code true}; otherwise, {@code false}.
* @private * @private
* @returns {void} * @returns {Promise}
*/ */
_setShow(show) { _setShow(show) {
if (!this._mounted) { return new Promise(resolve => {
return; if (!this._mounted) {
} resolve();
const { positionOffset } = this.state; return;
const { position } = this.props; }
let toValue = positionOffset;
if (position === 'bottom' || position === 'right') { const { positionOffset } = this.state;
toValue = -positionOffset; const { position } = this.props;
} let toValue = positionOffset;
Animated if (position === 'bottom' || position === 'right') {
.timing( toValue = -positionOffset;
/* value */ this.state.sliderAnimation, }
/* config */ {
duration: 200, Animated
toValue: show ? toValue : 0, .timing(
useNativeDriver: true /* value */ this.state.sliderAnimation,
}) /* config */ {
.start(({ finished }) => { duration: 200,
finished && this._mounted && !show toValue: show ? toValue : 0,
&& this.setState({ showOverlay: false }); useNativeDriver: true
}); })
.start(({ finished }) => {
finished && this._mounted && !show
&& this.setState({ showOverlay: false });
resolve();
});
});
} }
} }