8531212060
* add feature to add user to channel after at-mention * update per comment and update mattermost-redux * move sendAddToChannelEphemeralPost to actions folder * rebase and fix merge conflicts, do clean up a bit
554 lines
18 KiB
JavaScript
554 lines
18 KiB
JavaScript
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
import React, {PureComponent} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
Dimensions,
|
|
Platform,
|
|
Text,
|
|
TouchableHighlight,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import {intlShape} from 'react-intl';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
|
|
import FileAttachmentList from 'app/components/file_attachment_list';
|
|
import FormattedText from 'app/components/formatted_text';
|
|
import Markdown from 'app/components/markdown';
|
|
import OptionsContext from 'app/components/options_context';
|
|
import PostAddChannelMember from 'app/components/post_add_channel_member';
|
|
|
|
import PostBodyAdditionalContent from 'app/components/post_body_additional_content';
|
|
|
|
import {emptyFunction} from 'app/utils/general';
|
|
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
|
|
import {preventDoubleTap} from 'app/utils/tap';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
import Reactions from 'app/components/reactions';
|
|
|
|
export default class PostBody extends PureComponent {
|
|
static propTypes = {
|
|
actions: PropTypes.shape({
|
|
flagPost: PropTypes.func.isRequired,
|
|
unflagPost: PropTypes.func.isRequired,
|
|
}).isRequired,
|
|
canDelete: PropTypes.bool,
|
|
canEdit: PropTypes.bool,
|
|
fileIds: PropTypes.array,
|
|
hasBeenDeleted: PropTypes.bool,
|
|
hasBeenEdited: PropTypes.bool,
|
|
hasReactions: PropTypes.bool,
|
|
highlight: PropTypes.bool,
|
|
isFailed: PropTypes.bool,
|
|
isFlagged: PropTypes.bool,
|
|
isPending: PropTypes.bool,
|
|
isPostAddChannelMember: PropTypes.bool,
|
|
isPostEphemeral: PropTypes.bool,
|
|
isReplyPost: PropTypes.bool,
|
|
isSearchResult: PropTypes.bool,
|
|
isSystemMessage: PropTypes.bool,
|
|
managedConfig: PropTypes.object,
|
|
message: PropTypes.string,
|
|
navigator: PropTypes.object.isRequired,
|
|
onAddReaction: PropTypes.func,
|
|
onCopyPermalink: PropTypes.func,
|
|
onCopyText: PropTypes.func,
|
|
onFailedPostPress: PropTypes.func,
|
|
onPermalinkPress: PropTypes.func,
|
|
onPostDelete: PropTypes.func,
|
|
onPostEdit: PropTypes.func,
|
|
onPress: PropTypes.func,
|
|
postId: PropTypes.string.isRequired,
|
|
postProps: PropTypes.object,
|
|
renderReplyBar: PropTypes.func,
|
|
showLongPost: PropTypes.bool.isRequired,
|
|
theme: PropTypes.object,
|
|
toggleSelected: PropTypes.func,
|
|
};
|
|
|
|
static defaultProps = {
|
|
fileIds: [],
|
|
onAddReaction: emptyFunction,
|
|
onCopyPermalink: emptyFunction,
|
|
onCopyText: emptyFunction,
|
|
onFailedPostPress: emptyFunction,
|
|
onPostDelete: emptyFunction,
|
|
onPostEdit: emptyFunction,
|
|
onPress: emptyFunction,
|
|
renderReplyBar: emptyFunction,
|
|
toggleSelected: emptyFunction,
|
|
};
|
|
|
|
static contextTypes = {
|
|
intl: intlShape.isRequired,
|
|
};
|
|
|
|
state = {
|
|
isLongPost: false,
|
|
};
|
|
|
|
flagPost = () => {
|
|
const {actions, postId} = this.props;
|
|
actions.flagPost(postId);
|
|
};
|
|
|
|
handleHideUnderlay = () => {
|
|
this.props.toggleSelected(false);
|
|
};
|
|
|
|
handleShowUnderlay = () => {
|
|
this.props.toggleSelected(true);
|
|
};
|
|
|
|
hideOptionsContext = () => {
|
|
if (Platform.OS === 'ios' && this.refs.options) {
|
|
this.refs.options.hide();
|
|
}
|
|
};
|
|
|
|
getPostActions = () => {
|
|
const {formatMessage} = this.context.intl;
|
|
const {
|
|
canEdit,
|
|
canDelete,
|
|
hasBeenDeleted,
|
|
isPending,
|
|
isFailed,
|
|
isFlagged,
|
|
isPostEphemeral,
|
|
isSystemMessage,
|
|
managedConfig,
|
|
onCopyText,
|
|
onPostDelete,
|
|
onPostEdit,
|
|
} = this.props;
|
|
const actions = [];
|
|
const isPendingOrFailedPost = isPending || isFailed;
|
|
|
|
// we should check for the user roles and permissions
|
|
if (!isPendingOrFailedPost && !isSystemMessage && !isPostEphemeral) {
|
|
actions.push({
|
|
text: formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}),
|
|
onPress: this.props.onAddReaction,
|
|
});
|
|
|
|
if (managedConfig.copyAndPasteProtection !== 'true') {
|
|
actions.push({
|
|
text: formatMessage({id: 'mobile.post_info.copy_post', defaultMessage: 'Copy Post'}),
|
|
onPress: onCopyText,
|
|
copyPost: true,
|
|
});
|
|
}
|
|
|
|
if (isFlagged) {
|
|
actions.push({
|
|
text: formatMessage({id: 'post_info.mobile.unflag', defaultMessage: 'Unflag'}),
|
|
onPress: this.unflagPost,
|
|
});
|
|
} else {
|
|
actions.push({
|
|
text: formatMessage({id: 'post_info.mobile.flag', defaultMessage: 'Flag'}),
|
|
onPress: this.flagPost,
|
|
});
|
|
}
|
|
|
|
if (canEdit) {
|
|
actions.push({text: formatMessage({id: 'post_info.edit', defaultMessage: 'Edit'}), onPress: onPostEdit});
|
|
}
|
|
|
|
if (canDelete && !hasBeenDeleted) {
|
|
actions.push({text: formatMessage({id: 'post_info.del', defaultMessage: 'Delete'}), onPress: onPostDelete});
|
|
}
|
|
|
|
actions.push({
|
|
text: formatMessage({id: 'get_post_link_modal.title', defaultMessage: 'Copy Permalink'}),
|
|
onPress: this.props.onCopyPermalink,
|
|
});
|
|
}
|
|
|
|
return actions;
|
|
};
|
|
|
|
measurePost = (event) => {
|
|
const {height} = event.nativeEvent.layout;
|
|
const {height: deviceHeight} = Dimensions.get('window');
|
|
const {showLongPost} = this.props;
|
|
|
|
if (!showLongPost && height >= 1000) {
|
|
this.setState({
|
|
isLongPost: true,
|
|
maxHeight: (deviceHeight * 0.6),
|
|
});
|
|
}
|
|
};
|
|
|
|
openLongPost = preventDoubleTap(() => {
|
|
const {managedConfig, navigator, onAddReaction, onPermalinkPress, postId} = this.props;
|
|
const options = {
|
|
screen: 'LongPost',
|
|
animationType: 'none',
|
|
backButtonTitle: '',
|
|
overrideBackPress: true,
|
|
navigatorStyle: {
|
|
navBarHidden: true,
|
|
screenBackgroundColor: changeOpacity('#000', 0.2),
|
|
modalPresentationStyle: 'overCurrentContext',
|
|
},
|
|
passProps: {
|
|
postId,
|
|
managedConfig,
|
|
onAddReaction,
|
|
onPermalinkPress,
|
|
},
|
|
};
|
|
|
|
navigator.showModal(options);
|
|
});
|
|
|
|
unflagPost = () => {
|
|
const {actions, postId} = this.props;
|
|
actions.unflagPost(postId);
|
|
};
|
|
|
|
showOptionsContext = (additionalAction) => {
|
|
if (this.refs.options) {
|
|
this.refs.options.show(additionalAction);
|
|
}
|
|
};
|
|
|
|
renderFileAttachments() {
|
|
const {
|
|
fileIds,
|
|
isFailed,
|
|
navigator,
|
|
onPress,
|
|
postId,
|
|
showLongPost,
|
|
toggleSelected,
|
|
} = this.props;
|
|
|
|
if (showLongPost) {
|
|
return null;
|
|
}
|
|
|
|
let attachments;
|
|
if (fileIds.length > 0) {
|
|
attachments = (
|
|
<FileAttachmentList
|
|
fileIds={fileIds}
|
|
hideOptionsContext={this.hideOptionsContext}
|
|
isFailed={isFailed}
|
|
onLongPress={this.showOptionsContext}
|
|
onPress={onPress}
|
|
postId={postId}
|
|
toggleSelected={toggleSelected}
|
|
navigator={navigator}
|
|
/>
|
|
);
|
|
}
|
|
return attachments;
|
|
}
|
|
|
|
renderPostAdditionalContent = (blockStyles, messageStyle, textStyles) => {
|
|
const {isReplyPost, message, navigator, onPermalinkPress, postId, postProps} = this.props;
|
|
|
|
return (
|
|
<PostBodyAdditionalContent
|
|
baseTextStyle={messageStyle}
|
|
blockStyles={blockStyles}
|
|
navigator={navigator}
|
|
message={message}
|
|
postId={postId}
|
|
postProps={postProps}
|
|
textStyles={textStyles}
|
|
onLongPress={this.showOptionsContext}
|
|
isReplyPost={isReplyPost}
|
|
onPermalinkPress={onPermalinkPress}
|
|
/>
|
|
);
|
|
};
|
|
|
|
renderReactions = () => {
|
|
const {hasReactions, isSearchResult, postId, onAddReaction, showLongPost} = this.props;
|
|
|
|
if (!hasReactions || isSearchResult || showLongPost) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Reactions
|
|
postId={postId}
|
|
onAddReaction={onAddReaction}
|
|
/>
|
|
);
|
|
};
|
|
|
|
renderShowMoreOption = (style) => {
|
|
const {highlight, theme} = this.props;
|
|
const {isLongPost} = this.state;
|
|
|
|
if (!isLongPost) {
|
|
return null;
|
|
}
|
|
|
|
const gradientColors = [];
|
|
if (highlight) {
|
|
gradientColors.push(
|
|
changeOpacity(theme.mentionHighlightBg, 0),
|
|
changeOpacity(theme.mentionHighlightBg, 0.15),
|
|
changeOpacity(theme.mentionHighlightBg, 0.5),
|
|
);
|
|
} else {
|
|
gradientColors.push(
|
|
changeOpacity(theme.centerChannelBg, 0),
|
|
changeOpacity(theme.centerChannelBg, 0.75),
|
|
theme.centerChannelBg,
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View>
|
|
<LinearGradient
|
|
colors={gradientColors}
|
|
locations={[0, 0.7, 1]}
|
|
style={style.showMoreGradient}
|
|
/>
|
|
<View style={style.showMoreContainer}>
|
|
<View style={style.showMoreDividerLeft}/>
|
|
<TouchableOpacity
|
|
onPress={this.openLongPost}
|
|
style={style.showMoreButtonContainer}
|
|
>
|
|
<View style={style.showMoreButton}>
|
|
<Text style={style.showMorePlusSign}>
|
|
{'+'}
|
|
</Text>
|
|
<FormattedText
|
|
id='mobile.post_body.show_more'
|
|
defaultMessage='Show More'
|
|
style={style.showMoreText}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<View style={style.showMoreDividerRight}/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const {formatMessage} = this.context.intl;
|
|
const {
|
|
hasBeenDeleted,
|
|
hasBeenEdited,
|
|
isFailed,
|
|
isPending,
|
|
isPostAddChannelMember,
|
|
isSearchResult,
|
|
isSystemMessage,
|
|
message,
|
|
navigator,
|
|
onFailedPostPress,
|
|
onPermalinkPress,
|
|
onPress,
|
|
postProps,
|
|
renderReplyBar,
|
|
theme,
|
|
toggleSelected,
|
|
} = this.props;
|
|
const {isLongPost, maxHeight} = this.state;
|
|
const style = getStyleSheet(theme);
|
|
const blockStyles = getMarkdownBlockStyles(theme);
|
|
const textStyles = getMarkdownTextStyles(theme);
|
|
const messageStyle = isSystemMessage ? [style.message, style.systemMessage] : style.message;
|
|
const isPendingOrFailedPost = isPending || isFailed;
|
|
|
|
let body;
|
|
let messageComponent;
|
|
if (hasBeenDeleted) {
|
|
messageComponent = (
|
|
<TouchableHighlight
|
|
onHideUnderlay={this.handleHideUnderlay}
|
|
onPress={onPress}
|
|
onShowUnderlay={this.handleShowUnderlay}
|
|
underlayColor='transparent'
|
|
>
|
|
<View style={style.row}>
|
|
<FormattedText
|
|
style={messageStyle}
|
|
id='post_body.deleted'
|
|
defaultMessage='(message deleted)'
|
|
/>
|
|
</View>
|
|
</TouchableHighlight>
|
|
);
|
|
body = (<View>{messageComponent}</View>);
|
|
} else if (isPostAddChannelMember) {
|
|
messageComponent = (
|
|
<View style={style.row}>
|
|
<View style={style.flex}>
|
|
<PostAddChannelMember
|
|
navigator={navigator}
|
|
onLongPress={this.showOptionsContext}
|
|
onPermalinkPress={onPermalinkPress}
|
|
onPostPress={onPress}
|
|
textStyles={textStyles}
|
|
postId={postProps.add_channel_member.post_id}
|
|
userIds={postProps.add_channel_member.user_ids}
|
|
usernames={postProps.add_channel_member.usernames}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
} else if (message.length) {
|
|
messageComponent = (
|
|
<View style={style.row}>
|
|
<View
|
|
style={[style.flex, (isPendingOrFailedPost && style.pendingPost), (isLongPost && {maxHeight, overflow: 'hidden'})]}
|
|
removeClippedSubviews={isLongPost}
|
|
>
|
|
<Markdown
|
|
baseTextStyle={messageStyle}
|
|
blockStyles={blockStyles}
|
|
isEdited={hasBeenEdited}
|
|
isSearchResult={isSearchResult}
|
|
navigator={navigator}
|
|
onLongPress={this.showOptionsContext}
|
|
onPermalinkPress={onPermalinkPress}
|
|
onPostPress={onPress}
|
|
textStyles={textStyles}
|
|
value={message}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!hasBeenDeleted) {
|
|
body = (
|
|
<OptionsContext
|
|
actions={this.getPostActions()}
|
|
ref='options'
|
|
onPress={onPress}
|
|
toggleSelected={toggleSelected}
|
|
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
|
|
>
|
|
<View onLayout={this.measurePost}>
|
|
{messageComponent}
|
|
{this.renderShowMoreOption(style)}
|
|
</View>
|
|
{this.renderPostAdditionalContent(blockStyles, messageStyle, textStyles)}
|
|
{this.renderFileAttachments()}
|
|
{this.renderReactions()}
|
|
</OptionsContext>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={style.messageContainerWithReplyBar}>
|
|
{renderReplyBar()}
|
|
<View style={[style.flex, style.row]}>
|
|
<View style={style.flex}>
|
|
{body}
|
|
</View>
|
|
{isFailed &&
|
|
<TouchableOpacity
|
|
onPress={onFailedPostPress}
|
|
style={style.retry}
|
|
>
|
|
<Icon
|
|
name='ios-information-circle-outline'
|
|
size={26}
|
|
color={theme.errorTextColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
flex: {
|
|
flex: 1,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
},
|
|
retry: {
|
|
justifyContent: 'center',
|
|
marginLeft: 12,
|
|
},
|
|
message: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 15,
|
|
lineHeight: 20,
|
|
},
|
|
messageContainerWithReplyBar: {
|
|
flexDirection: 'row',
|
|
flex: 1,
|
|
},
|
|
pendingPost: {
|
|
opacity: 0.5,
|
|
},
|
|
systemMessage: {
|
|
opacity: 0.6,
|
|
},
|
|
showMoreGradient: {
|
|
flex: 1,
|
|
height: 50,
|
|
position: 'absolute',
|
|
top: -50,
|
|
width: '100%',
|
|
},
|
|
showMoreContainer: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
position: 'relative',
|
|
top: -7.5,
|
|
},
|
|
showMoreDividerLeft: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
flex: 1,
|
|
height: 1,
|
|
marginRight: 10,
|
|
},
|
|
showMoreDividerRight: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
flex: 1,
|
|
height: 1,
|
|
marginLeft: 10,
|
|
},
|
|
showMoreButtonContainer: {
|
|
backgroundColor: theme.centerChannelBg,
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
borderRadius: 4,
|
|
borderWidth: 1,
|
|
height: 37,
|
|
paddingHorizontal: 10,
|
|
},
|
|
showMoreButton: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
},
|
|
showMorePlusSign: {
|
|
color: theme.linkColor,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
marginRight: 8,
|
|
},
|
|
showMoreText: {
|
|
color: theme.linkColor,
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
},
|
|
};
|
|
});
|