From 91692f78b82a9a384b677bef8e47ac5db7e20138 Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Mon, 22 Jun 2020 02:55:01 +0200 Subject: [PATCH] Automated cherry pick of #4448 (#4462) * MM-25820 prevent double tap in post options * Fix weird behavior on iOS when doble tapping on add reaction and edit in post options * Callback after close Co-authored-by: Elias Nahum --- app/screens/post_options/post_option.js | 10 ++-- app/screens/post_options/post_options.js | 64 +++++++++++------------- 2 files changed, 33 insertions(+), 41 deletions(-) diff --git a/app/screens/post_options/post_option.js b/app/screens/post_options/post_option.js index 7a05b37aa..ddb65d4d5 100644 --- a/app/screens/post_options/post_option.js +++ b/app/screens/post_options/post_option.js @@ -23,6 +23,7 @@ import reply from '@assets/images/post_menu/reply.png'; import bookmark from '@assets/images/post_menu/bookmark.png'; import {paddingLeft as padding} from '@components/safe_area_view/iphone_x_spacing'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {preventDoubleTap} from '@utils/tap'; const icons = { copy, @@ -46,12 +47,9 @@ export default class PostOption extends PureComponent { theme: PropTypes.object.isRequired, }; - handleOnPress = () => { - // Wait for the tap animation so that the user has some feedback - setTimeout(() => { - this.props.onPress(); - }, 250); - }; + handleOnPress = preventDoubleTap(() => { + this.props.onPress(); + }, 500); render() { const {destructive, icon, text, isLandscape, theme} = this.props; diff --git a/app/screens/post_options/post_options.js b/app/screens/post_options/post_options.js index 8d97d1e93..9339322e6 100644 --- a/app/screens/post_options/post_options.js +++ b/app/screens/post_options/post_options.js @@ -7,19 +7,18 @@ import {Alert, Clipboard, StyleSheet, View} from 'react-native'; import {intlShape} from 'react-intl'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; +import {showModal, dismissModal} from '@actions/navigation'; +import ReactionPicker from '@components/reaction_picker'; +import SlideUpPanel from '@components/slide_up_panel'; +import {BOTTOM_MARGIN} from '@components/slide_up_panel/slide_up_panel'; +import {REACTION_PICKER_HEIGHT} from '@constants/reaction_picker'; import EventEmitter from '@mm-redux/utils/event_emitter'; - -import SlideUpPanel from 'app/components/slide_up_panel'; -import {BOTTOM_MARGIN} from 'app/components/slide_up_panel/slide_up_panel'; -import {t} from 'app/utils/i18n'; -import {showModal, dismissModal} from 'app/actions/navigation'; - import {isSystemMessage} from '@mm-redux/utils/post_utils'; -import {OPTION_HEIGHT, getInitialPosition} from './post_options_utils'; -import {REACTION_PICKER_HEIGHT} from 'app/constants/reaction_picker'; -import ReactionPicker from 'app/components/reaction_picker'; +import {t} from '@utils/i18n'; +import {preventDoubleTap} from '@utils/tap'; import PostOption from './post_option'; +import {OPTION_HEIGHT, getInitialPosition} from './post_options_utils'; export default class PostOptions extends PureComponent { static propTypes = { @@ -60,7 +59,7 @@ export default class PostOptions extends PureComponent { dismissModal(); if (typeof cb === 'function') { - setTimeout(cb, 300); + requestAnimationFrame(cb); } }; @@ -253,17 +252,15 @@ export default class PostOptions extends PureComponent { const {theme} = this.props; const {formatMessage} = this.context.intl; - this.close(() => { - MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => { - const screen = 'AddReaction'; - const title = formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}); - const passProps = { - closeButton: source, - onEmojiPress: this.handleAddReactionToPost, - }; + MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => { + const screen = 'AddReaction'; + const title = formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}); + const passProps = { + closeButton: source, + onEmojiPress: this.handleAddReactionToPost, + }; - showModal(screen, title, passProps); - }); + this.close(() => showModal(screen, title, passProps)); }); }; @@ -274,11 +271,10 @@ export default class PostOptions extends PureComponent { }); }; - handleAddReaction = (emoji) => { - this.closeWithAnimation(() => { - this.handleAddReactionToPost(emoji); - }); - } + handleAddReaction = preventDoubleTap((emoji) => { + this.handleAddReactionToPost(emoji); + this.closeWithAnimation(); + }, 500); handleAddReactionToPost = (emoji) => { const {actions, post} = this.props; @@ -358,17 +354,15 @@ export default class PostOptions extends PureComponent { const {theme, post} = this.props; const {intl} = this.context; - this.close(() => { - MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => { - const screen = 'EditPost'; - const title = intl.formatMessage({id: 'mobile.edit_post.title', defaultMessage: 'Editing Message'}); - const passProps = { - post, - closeButton: source, - }; + MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => { + const screen = 'EditPost'; + const title = intl.formatMessage({id: 'mobile.edit_post.title', defaultMessage: 'Editing Message'}); + const passProps = { + post, + closeButton: source, + }; - showModal(screen, title, passProps); - }); + this.close(() => showModal(screen, title, passProps)); }); };