diff --git a/src/ui/YooForumTopicUI.js b/src/ui/YooForumTopicUI.js index 2e31704..8011976 100644 --- a/src/ui/YooForumTopicUI.js +++ b/src/ui/YooForumTopicUI.js @@ -36,15 +36,22 @@ export default class YooForumTopicUI extends Component { }; this.topicHeaderRef = createRef(); this.onPress = this.onPress.bind(this); + this.onAnimationFinished = this.onAnimationFinished.bind(this); + } + + onAnimationFinished() { + this.setState({detailShowing: !this.state.detailShowing}); } onPress() { if (!this.state.detailShowing) { - this.setState({detailShowing: true}); - this.props.showDetail(this); + this.props.showDetail( + this.state.translate, + this.state.layoutY, + this.onAnimationFinished, + ); } else { - this.setState({detailShowing: false}); - this.props.hideDetail(this); + this.props.hideDetail(this.state.translate, this.onAnimationFinished); } } diff --git a/src/ui/YooForumUI.js b/src/ui/YooForumUI.js index d1760b4..dc37342 100644 --- a/src/ui/YooForumUI.js +++ b/src/ui/YooForumUI.js @@ -49,13 +49,13 @@ export default class YooForumUI extends Component { this.hideDetail = this.hideDetail.bind(this); } - showDetail(topicRef) { + showDetail(translate, layoutY, onAnimationFinished) { this.setState({scrollEnabled: false}); Animated.parallel([ - Animated.timing(topicRef.state.translate, { + Animated.timing(translate, { toValue: { x: screenWidth, - y: this.state.currentPosition - topicRef.state.layoutY + 8, + y: this.state.currentPosition - layoutY + 8, }, duration: 250, useNativeDriver: true, @@ -65,13 +65,13 @@ export default class YooForumUI extends Component { duration: 250, useNativeDriver: true, }), - ]).start(); + ]).start(onAnimationFinished); } - hideDetail(topicRef) { + hideDetail(translate, onAnimationFinished) { this.setState({scrollEnabled: true}); Animated.parallel([ - Animated.timing(topicRef.state.translate, { + Animated.timing(translate, { toValue: { x: 0, y: 0, @@ -84,7 +84,7 @@ export default class YooForumUI extends Component { duration: 250, useNativeDriver: true, }), - ]).start(); + ]).start(onAnimationFinished); } render() {