diff --git a/app/components/post/post.js b/app/components/post/post.js index 750e1a0b1..32e060bcd 100644 --- a/app/components/post/post.js +++ b/app/components/post/post.js @@ -7,10 +7,11 @@ import { Alert, Clipboard, Platform, + TouchableHighlight, View, ViewPropTypes, } from 'react-native'; -import {injectIntl, intlShape} from 'react-intl'; +import {intlShape} from 'react-intl'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import PostBody from 'app/components/post_body'; @@ -30,7 +31,7 @@ import {isAdmin, isSystemAdmin} from 'mattermost-redux/utils/user_utils'; import Config from 'assets/config'; -class Post extends PureComponent { +export default class Post extends PureComponent { static propTypes = { actions: PropTypes.shape({ addReaction: PropTypes.func.isRequired, @@ -44,7 +45,6 @@ class Post extends PureComponent { currentUserId: PropTypes.string.isRequired, deviceWidth: PropTypes.number.isRequired, highlight: PropTypes.bool, - intl: intlShape.isRequired, style: ViewPropTypes.style, post: PropTypes.object, postId: PropTypes.string.isRequired, // Used by container // eslint-disable-line no-unused-prop-types @@ -70,6 +70,10 @@ class Post extends PureComponent { isSearchResult: false, }; + static contextTypes = { + intl: intlShape.isRequired, + }; + constructor(props) { super(props); @@ -108,7 +112,8 @@ class Post extends PureComponent { } goToUserProfile = () => { - const {intl, navigator, post, theme} = this.props; + const {intl} = this.context; + const {navigator, post, theme} = this.props; const options = { screen: 'UserProfile', title: intl.formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'}), @@ -143,7 +148,7 @@ class Post extends PureComponent { }; handlePostDelete = () => { - const {formatMessage} = this.props.intl; + const {formatMessage} = this.context.intl; const {actions, currentUserId, post} = this.props; Alert.alert( @@ -167,7 +172,8 @@ class Post extends PureComponent { }; handlePostEdit = () => { - const {intl, navigator, post, theme} = this.props; + const {intl} = this.context; + const {navigator, post, theme} = this.props; MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => { navigator.showModal({ screen: 'EditPost', @@ -193,7 +199,8 @@ class Post extends PureComponent { } handleAddReaction = preventDoubleTap(() => { - const {intl, navigator, post, theme} = this.props; + const {intl} = this.context; + const {navigator, post, theme} = this.props; MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor). then((source) => { @@ -278,6 +285,9 @@ class Post extends PureComponent { } else if (isPostEphemeral(post) || post.state === Posts.POST_DELETED) { this.onRemovePost(post); } + } else if (this.refs.postBody) { + this.refs.postBody.getWrappedInstance().hideOptionsContext(); + this.handleHideUnderlay(); } }); @@ -352,7 +362,21 @@ class Post extends PureComponent { const permalink = `${currentTeamUrl}/pl/${postId}`; Clipboard.setString(permalink); - } + }; + + handleHideUnderlay = () => { + this.toggleSelected(false); + }; + + handleShowUnderlay = () => { + this.toggleSelected(true); + }; + + showOptionsContext = () => { + if (this.refs.postBody) { + this.refs.postBody.getWrappedInstance().showOptionsContext(); + } + }; render() { const { @@ -386,12 +410,19 @@ class Post extends PureComponent { return ( - + - + {!commentedOnPost && this.renderReplyBar()} @@ -410,6 +441,7 @@ class Post extends PureComponent { /> { }, }; }); - -export default injectIntl(Post); diff --git a/app/components/post_body/index.js b/app/components/post_body/index.js index e051b453a..6cdd9fb9a 100644 --- a/app/components/post_body/index.js +++ b/app/components/post_body/index.js @@ -50,4 +50,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect(mapStateToProps, mapDispatchToProps)(PostBody); +export default connect(mapStateToProps, mapDispatchToProps, null, {withRef: true})(PostBody); diff --git a/app/components/post_body/post_body.js b/app/components/post_body/post_body.js index 733834afa..6683ec713 100644 --- a/app/components/post_body/post_body.js +++ b/app/components/post_body/post_body.js @@ -9,7 +9,7 @@ import { TouchableOpacity, View, } from 'react-native'; -import {injectIntl, intlShape} from 'react-intl'; +import {intlShape} from 'react-intl'; import Icon from 'react-native-vector-icons/Ionicons'; import FileAttachmentList from 'app/components/file_attachment_list'; @@ -24,7 +24,7 @@ import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown' import {makeStyleSheetFromTheme} from 'app/utils/theme'; import Reactions from 'app/components/reactions'; -class PostBody extends PureComponent { +export default class PostBody extends PureComponent { static propTypes = { actions: PropTypes.shape({ flagPost: PropTypes.func.isRequired, @@ -36,7 +36,6 @@ class PostBody extends PureComponent { hasBeenDeleted: PropTypes.bool, hasBeenEdited: PropTypes.bool, hasReactions: PropTypes.bool, - intl: intlShape.isRequired, isFailed: PropTypes.bool, isFlagged: PropTypes.bool, isPending: PropTypes.bool, @@ -75,6 +74,10 @@ class PostBody extends PureComponent { toggleSelected: emptyFunction, }; + static contextTypes = { + intl: intlShape.isRequired, + }; + handleHideUnderlay = () => { this.props.toggleSelected(false); }; @@ -134,6 +137,7 @@ class PostBody extends PureComponent { } render() { // eslint-disable-line complexity + const {formatMessage} = this.context.intl; const { canDelete, canEdit, @@ -147,7 +151,6 @@ class PostBody extends PureComponent { isReplyPost, isSearchResult, isSystemMessage, - intl, managedConfig, message, navigator, @@ -162,7 +165,6 @@ class PostBody extends PureComponent { theme, toggleSelected, } = this.props; - const {formatMessage} = intl; const actions = []; const style = getStyleSheet(theme); const blockStyles = getMarkdownBlockStyles(theme); @@ -329,5 +331,3 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, }; }); - -export default injectIntl(PostBody);