toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-25820 prevent double tap in post options (#4448)

Browse source 
* 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
This commit is contained in:
Elias Nahum 2020-06-20 12:28:26 -04:00 committed by GitHub
parent 9d91eabe9a
commit 6fe083672c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/screens/post_options/post_option.js
View file

@ -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;

64
app/screens/post_options/post_options.js
View file

@ -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));
});
};