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

Split Post component into smaller components and prevent re-rendering (#740)

Browse source 
* Split Post component into smaller components and prevent re-rendering

* Feedback review

* Fix render reply bar

* Remove eslint-disable-line
This commit is contained in:
enahum 2017-07-13 17:48:45 -04:00 committed by GitHub
parent 2567c33a2f
commit 088ecad2b5
19 changed files with 859 additions and 540 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/actions/views/channel.js
View file

@ -155,13 +155,13 @@ export function loadPostsIfNecessary(channelId) {
};
}
export function loadFilesForPostIfNecessary(post) {
export function loadFilesForPostIfNecessary(postId) {
return async (dispatch, getState) => {
const {files} = getState().entities;
const fileIdsForPost = files.fileIdsByPostId[post.id];
const fileIdsForPost = files.fileIdsByPostId[postId];
if (!fileIdsForPost) {
await getFilesForPost(post.id)(dispatch, getState);
await getFilesForPost(postId)(dispatch, getState);
}
};
}

40
app/components/file_attachment_list/file_attachment_list.js
View file

@ -16,39 +16,41 @@ export default class FileAttachmentList extends Component {
static propTypes = {
actions: PropTypes.object.isRequired,
fetchCache: PropTypes.object.isRequired,
fileIds: PropTypes.array.isRequired,
files: PropTypes.array.isRequired,
hideOptionsContext: PropTypes.func.isRequired,
isFailed: PropTypes.bool,
navigator: PropTypes.object,
onLongPress: PropTypes.func,
onPress: PropTypes.func,
post: PropTypes.object.isRequired,
postId: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
toggleSelected: PropTypes.func.isRequired,
filesForPostRequest: PropTypes.object.isRequired
};
componentDidMount() {
const {post} = this.props;
this.props.actions.loadFilesForPostIfNecessary(post);
const {postId} = this.props;
this.props.actions.loadFilesForPostIfNecessary(postId);
}
componentDidUpdate() {
const {files, filesForPostRequest, post} = this.props;
const {fileIds, files, filesForPostRequest, postId} = this.props;
// Fixes an issue where files weren't loading with optimistic post
if (!files.length && post.file_ids.length > 0 && filesForPostRequest.status !== RequestStatus.STARTED) {
this.props.actions.loadFilesForPostIfNecessary(post);
if (!files.length && fileIds.length > 0 && filesForPostRequest.status !== RequestStatus.STARTED) {
this.props.actions.loadFilesForPostIfNecessary(postId);
}
}
goToImagePreview = (post, fileId) => {
goToImagePreview = (postId, fileId) => {
this.props.navigator.showModal({
screen: 'ImagePreview',
title: '',
animationType: 'none',
passProps: {
fileId,
post
postId
},
navigatorStyle: {
navBarHidden: true,
@ -67,15 +69,23 @@ export default class FileAttachmentList extends Component {
handlePreviewPress = (file) => {
this.props.hideOptionsContext();
preventDoubleTap(this.goToImagePreview, this, this.props.post, file.id);
preventDoubleTap(this.goToImagePreview, this, this.props.postId, file.id);
};
handlePressIn = () => {
this.props.toggleSelected(true);
};
handlePressOut = () => {
this.props.toggleSelected(false);
};
render() {
const {files, post} = this.props;
const {fileIds, files, isFailed} = this.props;
let fileAttachments;
if (!files.length && post.file_ids.length > 0) {
fileAttachments = post.file_ids.map((id) => (
if (!files.length && fileIds.length > 0) {
fileAttachments = fileIds.map((id) => (
<FileAttachment
key={id}
addFileToFetchCache={this.props.actions.addFileToFetchCache}
@ -89,8 +99,8 @@ export default class FileAttachmentList extends Component {
<TouchableOpacity
key={file.id}
onLongPress={this.props.onLongPress}
onPressIn={() => this.props.toggleSelected(true)}
onPressOut={() => this.props.toggleSelected(false)}
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<FileAttachment
addFileToFetchCache={this.props.actions.addFileToFetchCache}
@ -105,7 +115,7 @@ export default class FileAttachmentList extends Component {
}
return (
<View style={[{flex: 1}, (post.failed && {opacity: 0.5})]}>
<View style={[{flex: 1}, (isFailed && {opacity: 0.5})]}>
{fileAttachments}
</View>
);

2
app/components/file_attachment_list/index.js
View file

@ -17,7 +17,7 @@ function makeMapStateToProps() {
return {
...ownProps,
fetchCache: state.views.fetchCache,
files: getFilesForPost(state, ownProps.post),
files: getFilesForPost(state, ownProps.postId),
theme: getTheme(state),
filesForPostRequest: state.requests.files.getFilesForPost
};

31
app/components/options_context/options_context.android.js
View file

@ -1,14 +1,18 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {PureComponent} from 'react';
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {TouchableHighlight, View} from 'react-native';
import RNBottomSheet from 'react-native-bottom-sheet';
export default class OptionsContext extends PureComponent {
static propTypes = {
actions: PropTypes.array,
cancelText: PropTypes.string
cancelText: PropTypes.string,
children: PropTypes.node.isRequired,
onPress: PropTypes.func.isRequired,
toggleSelected: PropTypes.func.isRequired
};
static defaultProps = {
@ -34,7 +38,28 @@ export default class OptionsContext extends PureComponent {
}
};
handleHideUnderlay = () => {
this.props.toggleSelected(false);
};
handleShowUnderlay = () => {
this.props.toggleSelected(true);
};
render() {
return null;
return (
<TouchableHighlight
onHideUnderlay={this.handleHideUnderlay}
onLongPress={this.show}
onPress={this.props.onPress}
onShowUnderlay={this.handleShowUnderlay}
underlayColor='transparent'
style={{flex: 1, flexDirection: 'row'}}
>
<View style={{flex: 1}}>
{this.props.children}
</View>
</TouchableHighlight>
);
}
}

22
app/components/options_context/options_context.ios.js
View file

@ -17,13 +17,21 @@ export default class OptionsContext extends PureComponent {
actions: []
};
hide() {
this.refs.toolTip.hideMenu();
}
handleHide = () => {
this.props.toggleSelected(false);
};
show() {
handleShow = () => {
this.props.toggleSelected(true);
};
hide = () => {
this.refs.toolTip.hideMenu();
};
show = () => {
this.refs.toolTip.showMenu();
}
};
render() {
return (
@ -34,8 +42,8 @@ export default class OptionsContext extends PureComponent {
longPress={true}
onPress={this.props.onPress}
underlayColor='transparent'
onShow={() => this.props.toggleSelected(true)}
onHide={() => this.props.toggleSelected(false)}
onShow={this.handleShow}
onHide={this.handleHide}
>
{this.props.children}
</ToolTip>

28
app/components/post/index.js
View file

@ -4,12 +4,9 @@
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {createPost, deletePost, flagPost, removePost, unflagPost} from 'mattermost-redux/actions/posts';
import {getMyPreferences, getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
import {makeGetCommentCountForPost} from 'mattermost-redux/selectors/entities/posts';
import {getCurrentUserId, getCurrentUserRoles, getUser} from 'mattermost-redux/selectors/entities/users';
import {isPostFlagged} from 'mattermost-redux/utils/post_utils';
import {displayUsername} from 'mattermost-redux/utils/user_utils';
import {createPost, deletePost, removePost} from 'mattermost-redux/actions/posts';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {getCurrentUserId, getCurrentUserRoles} from 'mattermost-redux/selectors/entities/users';
import {setPostTooltipVisible} from 'app/actions/views/channel';
import {getTheme} from 'app/selectors/preferences';
@ -17,29 +14,22 @@ import {getTheme} from 'app/selectors/preferences';
import Post from './post';
function makeMapStateToProps() {
const getCommentCountForPost = makeGetCommentCountForPost();
return function mapStateToProps(state, ownProps) {
const commentedOnUser = ownProps.commentedOnPost ? getUser(state, ownProps.commentedOnPost.user_id) : null;
const user = getUser(state, ownProps.post.user_id);
const myPreferences = getMyPreferences(state);
const teammateNameDisplay = getTeammateNameDisplaySetting(state);
const post = getPost(state, ownProps.post.id);
const {config, license} = state.entities.general;
const roles = getCurrentUserId(state) ? getCurrentUserRoles(state) : '';
const {tooltipVisible} = state.views.channel;
return {
...ownProps,
post,
config,
commentCount: getCommentCountForPost(state, ownProps),
commentedOnDisplayName: displayUsername(commentedOnUser, teammateNameDisplay),
currentUserId: getCurrentUserId(state),
displayName: displayUsername(user, teammateNameDisplay),
isFlagged: isPostFlagged(ownProps.post.id, myPreferences),
license,
roles,
theme: getTheme(state),
tooltipVisible,
user
tooltipVisible
};
};
}
@ -49,10 +39,8 @@ function mapDispatchToProps(dispatch) {
actions: bindActionCreators({
createPost,
deletePost,
flagPost,
removePost,
setPostTooltipVisible,
unflagPost
setPostTooltipVisible
}, dispatch)
};
}

551
app/components/post/post.js
View file

@ -5,73 +5,50 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Alert,
Image,
Platform,
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View,
ViewPropTypes
} from 'react-native';
import {injectIntl, intlShape} from 'react-intl';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import PostBody from 'app/components/post_body';
import PostHeader from 'app/components/post_header';
import PostProfilePicture from 'app/components/post_profile_picture';
import {NavigationTypes} from 'app/constants';
import FileAttachmentList from 'app/components/file_attachment_list';
import FormattedText from 'app/components/formatted_text';
import FormattedTime from 'app/components/formatted_time';
import MattermostIcon from 'app/components/mattermost_icon';
import Markdown from 'app/components/markdown';
import OptionsContext from 'app/components/options_context';
import ProfilePicture from 'app/components/profile_picture';
import ReplyIcon from 'app/components/reply_icon';
import SlackAttachments from 'app/components/slack_attachments';
import {emptyFunction} from 'app/utils/general';
import {preventDoubleTap} from 'app/utils/tap';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import webhookIcon from 'assets/images/icons/webhook.jpg';
import {Posts} from 'mattermost-redux/constants';
import DelayedAction from 'mattermost-redux/utils/delayed_action';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import {canDeletePost, canEditPost, isPostEphemeral, isPostPendingOrFailed, isSystemMessage} from 'mattermost-redux/utils/post_utils';
import {isAdmin, isSystemAdmin} from 'mattermost-redux/utils/user_utils';
const BOT_NAME = 'BOT';
class Post extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
createPost: PropTypes.func.isRequired,
deletePost: PropTypes.func.isRequired,
removePost: PropTypes.func.isRequired,
setPostTooltipVisible: PropTypes.func.isRequired
}).isRequired,
config: PropTypes.object.isRequired,
commentCount: PropTypes.number.isRequired,
currentUserId: PropTypes.string.isRequired,
intl: intlShape.isRequired,
style: ViewPropTypes.style,
post: PropTypes.object.isRequired,
user: PropTypes.object,
displayName: PropTypes.string,
renderReplies: PropTypes.bool,
isFirstReply: PropTypes.bool,
isFlagged: PropTypes.bool,
isLastReply: PropTypes.bool,
commentedOnDisplayName: PropTypes.string,
commentedOnPost: PropTypes.object,
license: PropTypes.object.isRequired,
navigator: PropTypes.object,
roles: PropTypes.string,
tooltipVisible: PropTypes.bool,
theme: PropTypes.object.isRequired,
onPress: PropTypes.func,
actions: PropTypes.shape({
createPost: PropTypes.func.isRequired,
deletePost: PropTypes.func.isRequired,
flagPost: PropTypes.func.isRequired,
removePost: PropTypes.func.isRequired,
setPostTooltipVisible: PropTypes.func.isRequired,
unflagPost: PropTypes.func.isRequired
}).isRequired
onPress: PropTypes.func
};
constructor(props) {
@ -97,15 +74,15 @@ class Post extends PureComponent {
this.editDisableAction.cancel();
}
goToUserProfile = (userId) => {
const {intl, navigator, theme} = this.props;
goToUserProfile = () => {
const {intl, navigator, post, theme} = this.props;
navigator.push({
screen: 'UserProfile',
title: intl.formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'}),
animated: true,
backButtonTitle: '',
passProps: {
userId
userId: post.user_id
},
navigatorStyle: {
navBarTextColor: theme.sidebarHeaderTextColor,
@ -224,258 +201,41 @@ class Post extends PureComponent {
}
};
hideOptionsContext = () => {
if (Platform.OS === 'ios') {
this.refs.tooltip.hide();
}
};
onRemovePost = (post) => {
const {removePost} = this.props.actions;
removePost(post);
};
showOptionsContext = () => {
if (Platform.OS === 'ios') {
return this.refs.tooltip.show();
}
renderReplyBar = () => {
const {
commentedOnPost,
isFirstReply,
isLastReply,
post,
renderReplies,
theme
} = this.props;
return this.refs.bottomSheet.show();
};
renderCommentedOnMessage = (style) => {
if (!this.props.renderReplies || !this.props.commentedOnPost) {
return null;
}
const displayName = this.props.commentedOnDisplayName;
let name;
if (displayName) {
name = displayName;
} else {
name = (
<FormattedText
id='channel_loader.someone'
defaultMessage='Someone'
/>
);
}
let apostrophe;
if (displayName && displayName.slice(-1) === 's') {
apostrophe = '\'';
} else {
apostrophe = '\'s';
}
return (
<FormattedText
id='post_body.commentedOn'
defaultMessage='Commented on {name}{apostrophe} message: '
values={{
name,
apostrophe
}}
style={style.commentedOn}
/>
);
};
renderReplyBar = (style) => {
if (!this.props.renderReplies || !this.props.post.root_id) {
if (!renderReplies || !post.root_id) {
return null;
}
const style = getStyleSheet(theme);
const replyBarStyle = [style.replyBar];
if (this.props.isFirstReply || this.props.commentedOnPost) {
if (isFirstReply || commentedOnPost) {
replyBarStyle.push(style.replyBarFirst);
}
if (this.props.isLastReply) {
if (isLastReply) {
replyBarStyle.push(style.replyBarLast);
}
return <View style={replyBarStyle}/>;
};
renderFileAttachments() {
const {navigator, post} = this.props;
const fileIds = post.file_ids || [];
let attachments;
if (fileIds.length > 0) {
attachments = (
<FileAttachmentList
hideOptionsContext={this.hideOptionsContext}
onLongPress={this.showOptionsContext}
onPress={this.handlePress}
post={post}
toggleSelected={this.toggleSelected}
navigator={navigator}
/>
);
}
return attachments;
}
renderSlackAttachments = (baseStyle, blockStyles, textStyles) => {
const {post, theme} = this.props;
if (post.props) {
const {attachments} = post.props;
if (attachments && attachments.length) {
return (
<SlackAttachments
attachments={attachments}
baseTextStyle={baseStyle}
blockStyles={blockStyles}
textStyles={textStyles}
theme={theme}
/>
);
}
}
return null;
};
renderMessage = (style, messageStyle, blockStyles, textStyles, replyBar = false) => {
const {formatMessage} = this.props.intl;
const {isFlagged, post, theme, navigator} = this.props;
const {flagPost, unflagPost} = this.props.actions;
const actions = [];
// we should check for the user roles and permissions
if (!isPostPendingOrFailed(post)) {
if (isFlagged) {
actions.push({
text: formatMessage({id: 'post_info.mobile.unflag', defaultMessage: 'Unflag'}),
onPress: () => unflagPost(post.id)
});
} else {
actions.push({
text: formatMessage({id: 'post_info.mobile.flag', defaultMessage: 'Flag'}),
onPress: () => flagPost(post.id)
});
}
if (this.state.canEdit) {
actions.push({text: formatMessage({id: 'post_info.edit', defaultMessage: 'Edit'}), onPress: () => this.handlePostEdit()});
}
if (this.state.canDelete && post.state !== Posts.POST_DELETED) {
actions.push({text: formatMessage({id: 'post_info.del', defaultMessage: 'Delete'}), onPress: () => this.handlePostDelete()});
}
}
let messageContainer;
let message;
if (post.state === Posts.POST_DELETED) {
message = (
<FormattedText
style={messageStyle}
id='post_body.deleted'
defaultMessage='(message deleted)'
/>
);
} else if (this.props.post.message.length) {
message = (
<View style={{flexDirection: 'row'}}>
<View style={[{flex: 1}, (isPostPendingOrFailed(post) && style.pendingPost)]}>
<Markdown
baseTextStyle={messageStyle}
textStyles={textStyles}
blockStyles={blockStyles}
value={post.message}
onLongPress={this.showOptionsContext}
navigator={navigator}
/>
</View>
</View>
);
}
if (Platform.OS === 'ios') {
messageContainer = (
<View style={style.messageContainerWithReplyBar}>
{replyBar && this.renderReplyBar(style)}
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{flex: 1}}>
<OptionsContext
actions={actions}
ref='tooltip'
onPress={this.handlePress}
toggleSelected={this.toggleSelected}
>
{message}
{this.renderSlackAttachments(messageStyle, blockStyles, textStyles)}
{this.renderFileAttachments()}
</OptionsContext>
</View>
{post.failed &&
<TouchableOpacity
onPress={this.handleFailedPostPress}
style={{justifyContent: 'center', marginLeft: 12}}
>
<Icon
name='ios-information-circle-outline'
size={26}
color={theme.errorTextColor}
/>
</TouchableOpacity>
}
</View>
</View>
);
} else {
messageContainer = (
<View style={style.messageContainerWithReplyBar}>
{replyBar && this.renderReplyBar(style)}
<TouchableHighlight
onHideUnderlay={() => this.toggleSelected(false)}
onLongPress={this.showOptionsContext}
onPress={this.handlePress}
onShowUnderlay={() => this.toggleSelected(true)}
underlayColor='transparent'
style={{flex: 1, flexDirection: 'row'}}
>
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 1}}>
{message}
<OptionsContext
ref='bottomSheet'
actions={actions}
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
/>
{this.renderSlackAttachments(messageStyle, blockStyles, textStyles)}
{this.renderFileAttachments()}
</View>
{post.failed &&
<TouchableOpacity
onPress={this.handleFailedPostPress}
style={{justifyContent: 'center', marginLeft: 12}}
>
<Icon
name='ios-information-circle-outline'
size={26}
color={theme.errorTextColor}
/>
</TouchableOpacity>
}
</View>
</TouchableHighlight>
</View>
);
}
return messageContainer;
};
viewUserProfile = () => {
preventDoubleTap(this.goToUserProfile, null, this.props.user.id);
preventDoubleTap(this.goToUserProfile, this);
};
toggleSelected = (selected) => {
@ -485,176 +245,51 @@ class Post extends PureComponent {
render() {
const {
commentCount,
config,
commentedOnPost,
isLastReply,
post,
renderReplies,
theme
} = this.props;
const style = getStyleSheet(theme);
const PROFILE_PICTURE_SIZE = 32;
let profilePicture;
let displayName;
let messageStyle;
if (isSystemMessage(post)) {
profilePicture = (
<View style={style.profilePicture}>
<MattermostIcon
color={theme.centerChannelColor}
height={PROFILE_PICTURE_SIZE}
width={PROFILE_PICTURE_SIZE}
/>
</View>
);
displayName = (
<FormattedText
id='post_info.system'
defaultMessage='System'
style={style.displayName}
/>
);
messageStyle = [style.message, style.systemMessage];
} else if (post.props && post.props.from_webhook) {
if (config.EnablePostIconOverride === 'true') {
const icon = post.props.override_icon_url ? {uri: post.props.override_icon_url} : webhookIcon;
profilePicture = (
<View style={style.profilePicture}>
<Image
source={icon}
style={{
height: PROFILE_PICTURE_SIZE,
width: PROFILE_PICTURE_SIZE,
borderRadius: PROFILE_PICTURE_SIZE / 2
}}
/>
</View>
);
} else {
profilePicture = (
<ProfilePicture
user={this.props.user}
size={PROFILE_PICTURE_SIZE}
/>
);
}
let name = this.props.displayName;
if (post.props.override_username && config.EnablePostUsernameOverride === 'true') {
name = post.props.override_username;
}
displayName = (
<View style={style.botContainer}>
<Text style={style.displayName}>
{name}
</Text>
<Text style={style.bot}>
{BOT_NAME}
</Text>
</View>
);
messageStyle = style.message;
} else {
profilePicture = (
<TouchableOpacity onPress={this.viewUserProfile}>
<ProfilePicture
user={this.props.user}
size={PROFILE_PICTURE_SIZE}
/>
</TouchableOpacity>
);
if (this.props.displayName) {
displayName = (
<TouchableOpacity onPress={this.viewUserProfile}>
<Text style={style.displayName}>
{this.props.displayName}
</Text>
</TouchableOpacity>
);
} else {
displayName = (
<FormattedText
id='channel_loader.someone'
defaultMessage='Someone'
style={style.displayName}
/>
);
}
messageStyle = style.message;
}
const blockStyles = getMarkdownBlockStyles(theme);
const textStyles = getMarkdownTextStyles(theme);
const selected = this.state && this.state.selected ? style.selected : null;
let contents;
if (this.props.commentedOnPost) {
contents = (
<View style={[style.container, this.props.style, selected]}>
<View style={[style.profilePictureContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
{profilePicture}
</View>
<View style={style.rightColumn}>
<View style={[style.postInfoContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
{displayName}
<View style={style.timeContainer}>
<Text style={style.time}>
<FormattedTime value={this.props.post.create_at}/>
</Text>
</View>
</View>
<View>
{this.renderCommentedOnMessage(style)}
</View>
{this.renderMessage(style, messageStyle, blockStyles, textStyles, true)}
return (
<View style={[style.container, this.props.style, selected]}>
<View style={[style.profilePictureContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
<PostProfilePicture
onViewUserProfile={this.viewUserProfile}
postId={post.id}
/>
</View>
<View style={style.messageContainerWithReplyBar}>
{!commentedOnPost && this.renderReplyBar()}
<View style={[style.rightColumn, (commentedOnPost && isLastReply && style.rightColumnPadding)]}>
<PostHeader
postId={post.id}
commentedOnUserId={commentedOnPost && commentedOnPost.user_id}
createAt={post.create_at}
onPress={this.handlePress}
onViewUserProfile={this.viewUserProfile}
renderReplies={renderReplies}
theme={theme}
/>
<PostBody
canDelete={this.state.canDelete}
canEdit={this.state.canEdit}
navigator={this.props.navigator}
onFailedPostPress={this.handleFailedPostPress}
onPostDelete={this.handlePostDelete}
onPostEdit={this.handlePostEdit}
onPress={this.handlePress}
postId={post.id}
renderReplyBar={commentedOnPost ? this.renderReplyBar : emptyFunction}
toggleSelected={this.toggleSelected}
/>
</View>
</View>
);
} else {
contents = (
<View style={[style.container, this.props.style, selected]}>
<View style={[style.profilePictureContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
{profilePicture}
</View>
<View style={style.messageContainerWithReplyBar}>
{this.renderReplyBar(style)}
<View style={[style.rightColumn, (this.props.isLastReply && style.rightColumnPadding)]}>
<View style={[style.postInfoContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
<View style={{flexDirection: 'row', flex: 1}}>
{displayName}
<View style={style.timeContainer}>
<Text style={style.time}>
<FormattedTime value={this.props.post.create_at}/>
</Text>
</View>
</View>
{(commentCount > 0 && renderReplies) &&
<TouchableOpacity
onPress={this.handlePress}
style={style.replyIconContainer}
>
<ReplyIcon
height={15}
width={15}
color={theme.linkColor}
/>
<Text style={style.replyText}>{commentCount}</Text>
</TouchableOpacity>
}
</View>
{this.renderMessage(style, messageStyle, blockStyles, textStyles)}
</View>
</View>
</View>
);
}
return contents;
</View>
);
}
}
@ -676,11 +311,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
rightColumnPadding: {
paddingBottom: 3
},
postInfoContainer: {
alignItems: 'center',
flexDirection: 'row',
marginTop: 10
},
messageContainerWithReplyBar: {
flexDirection: 'row',
flex: 1
@ -704,61 +334,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
replyBarLast: {
paddingBottom: 10
},
displayName: {
color: theme.centerChannelColor,
fontSize: 15,
fontWeight: '600',
marginRight: 5,
marginBottom: 3
},
botContainer: {
flexDirection: 'row'
},
bot: {
alignSelf: 'center',
backgroundColor: changeOpacity(theme.centerChannelColor, 0.15),
borderRadius: 2,
color: theme.centerChannelColor,
fontSize: 10,
fontWeight: '600',
marginRight: 5,
paddingVertical: 2,
paddingHorizontal: 4
},
time: {
color: theme.centerChannelColor,
fontSize: 13,
marginLeft: 5,
marginBottom: 1,
opacity: 0.5
},
timeContainer: {
justifyContent: 'center'
},
commentedOn: {
color: changeOpacity(theme.centerChannelColor, 0.65),
marginBottom: 3,
lineHeight: 21
},
message: {
color: theme.centerChannelColor,
fontSize: 15
},
systemMessage: {
opacity: 0.6
},
selected: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1)
},
replyIconContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
replyText: {
fontSize: 15,
marginLeft: 3,
color: theme.linkColor
}
});
});

44
app/components/post_body/index.js Normal file
View file

@ -0,0 +1,44 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {flagPost, unflagPost} from 'mattermost-redux/actions/posts';
import {Posts} from 'mattermost-redux/constants';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {getMyPreferences} from 'mattermost-redux/selectors/entities/preferences';
import {isPostFlagged, isSystemMessage} from 'mattermost-redux/utils/post_utils';
import {getTheme} from 'app/selectors/preferences';
import PostBody from './post_body';
function mapStateToProps(state, ownProps) {
const post = getPost(state, ownProps.postId);
const myPreferences = getMyPreferences(state);
return {
...ownProps,
attachments: post.props && post.props.attachments,
fileIds: post.file_ids,
hasBeenDeleted: post.state === Posts.POST_DELETED,
isFailed: post.failed,
isFlagged: isPostFlagged(post.id, myPreferences),
isPending: post.id === post.pending_post_id,
isSystemMessage: isSystemMessage(post),
message: post.message,
theme: getTheme(state)
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
flagPost,
unflagPost
}, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(PostBody);

261
app/components/post_body/post_body.js Normal file
View file

@ -0,0 +1,261 @@
// 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 {
Platform,
StyleSheet,
TouchableOpacity,
View
} from 'react-native';
import {injectIntl, intlShape} from 'react-intl';
import Icon from 'react-native-vector-icons/Ionicons';
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 SlackAttachments from 'app/components/slack_attachments';
import {emptyFunction} from 'app/utils/general';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
class PostBody extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
flagPost: PropTypes.func.isRequired,
unflagPost: PropTypes.func.isRequired
}).isRequired,
attachments: PropTypes.array,
canDelete: PropTypes.bool,
canEdit: PropTypes.bool,
fileIds: PropTypes.array,
hasBeenDeleted: PropTypes.bool,
intl: intlShape.isRequired,
isFailed: PropTypes.bool,
isFlagged: PropTypes.bool,
isPending: PropTypes.bool,
isSystemMessage: PropTypes.bool,
message: PropTypes.string,
navigator: PropTypes.object.isRequired,
onFailedPostPress: PropTypes.func,
onPostDelete: PropTypes.func,
onPostEdit: PropTypes.func,
onPress: PropTypes.func,
postId: PropTypes.string.isRequired,
renderReplyBar: PropTypes.func,
theme: PropTypes.object,
toggleSelected: PropTypes.func
};
static defaultProps = {
fileIds: [],
onFailedPostPress: emptyFunction,
onPostDelete: emptyFunction,
onPostEdit: emptyFunction,
onPress: emptyFunction,
renderReplyBar: emptyFunction,
toggleSelected: emptyFunction
};
hideOptionsContext = () => {
if (Platform.OS === 'ios') {
this.refs.options.hide();
}
};
flagPost = () => {
const {actions, postId} = this.props;
actions.flagPost(postId);
};
unflagPost = () => {
const {actions, postId} = this.props;
actions.unflagPost(postId);
};
showOptionsContext = () => {
return this.refs.options.show();
};
renderFileAttachments() {
const {
fileIds,
isFailed,
navigator,
onPress,
postId,
toggleSelected
} = this.props;
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;
}
renderSlackAttachments = (baseStyle, blockStyles, textStyles) => {
const {attachments, navigator, theme} = this.props;
if (attachments && attachments.length) {
return (
<SlackAttachments
attachments={attachments}
baseTextStyle={baseStyle}
blockStyles={blockStyles}
navigator={navigator}
textStyles={textStyles}
theme={theme}
/>
);
}
return null;
};
render() {
const {
canDelete,
canEdit,
hasBeenDeleted,
isFailed,
isFlagged,
isPending,
isSystemMessage,
intl,
message,
navigator,
onFailedPostPress,
onPostDelete,
onPostEdit,
onPress,
renderReplyBar,
theme,
toggleSelected
} = this.props;
const {formatMessage} = intl;
const actions = [];
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;
// we should check for the user roles and permissions
if (!isPendingOrFailedPost) {
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});
}
}
let messageComponent;
if (hasBeenDeleted) {
messageComponent = (
<FormattedText
style={messageStyle}
id='post_body.deleted'
defaultMessage='(message deleted)'
/>
);
} else if (message.length) {
messageComponent = (
<View style={{flexDirection: 'row'}}>
<View style={[{flex: 1}, (isPendingOrFailedPost && style.pendingPost)]}>
<Markdown
baseTextStyle={messageStyle}
textStyles={textStyles}
blockStyles={blockStyles}
value={message}
onLongPress={this.showOptionsContext}
navigator={navigator}
/>
</View>
</View>
);
}
return (
<View style={style.messageContainerWithReplyBar}>
{renderReplyBar()}
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{flex: 1}}>
<OptionsContext
actions={actions}
ref='options'
onPress={onPress}
toggleSelected={toggleSelected}
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
>
{messageComponent}
{this.renderSlackAttachments(messageStyle, blockStyles, textStyles)}
{this.renderFileAttachments()}
</OptionsContext>
</View>
{isFailed &&
<TouchableOpacity
onPress={onFailedPostPress}
style={{justifyContent: 'center', marginLeft: 12}}
>
<Icon
name='ios-information-circle-outline'
size={26}
color={theme.errorTextColor}
/>
</TouchableOpacity>
}
</View>
</View>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
message: {
color: theme.centerChannelColor,
fontSize: 15
},
messageContainerWithReplyBar: {
flexDirection: 'row',
flex: 1
},
pendingPost: {
opacity: 0.5
},
systemMessage: {
opacity: 0.6
}
});
});
export default injectIntl(PostBody);

41
app/components/post_header/index.js Normal file
View file

@ -0,0 +1,41 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {getPost, makeGetCommentCountForPost} from 'mattermost-redux/selectors/entities/posts';
import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
import {getUser} from 'mattermost-redux/selectors/entities/users';
import {isPostPendingOrFailed, isSystemMessage} from 'mattermost-redux/utils/post_utils';
import {displayUsername} from 'mattermost-redux/utils/user_utils';
import {getTheme} from 'app/selectors/preferences';
import PostHeader from './post_header';
function makeMapStateToProps() {
const getCommentCountForPost = makeGetCommentCountForPost();
return function mapStateToProps(state, ownProps) {
const {config} = state.entities.general;
const post = getPost(state, ownProps.postId);
const commentedOnUser = getUser(state, ownProps.commentedOnUserId);
const user = getUser(state, post.user_id);
const teammateNameDisplay = getTeammateNameDisplaySetting(state);
return {
...ownProps,
commentedOnDisplayName: displayUsername(commentedOnUser, teammateNameDisplay),
commentCount: getCommentCountForPost(state, {post}),
createAt: post.create_at,
displayName: displayUsername(user, teammateNameDisplay),
enablePostUsernameOverride: config.EnablePostUsernameOverride === 'true',
fromWebHook: post.props && post.props.from_webhook === 'true',
isPendingOrFailedPost: isPostPendingOrFailed(post),
isSystemMessage: isSystemMessage(post),
overrideUsername: post.props && post.props.override_username,
theme: getTheme(state)
};
};
}
export default connect(makeMapStateToProps)(PostHeader);

239
app/components/post_header/post_header.js Normal file
View file

@ -0,0 +1,239 @@
// 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 {
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import FormattedTime from 'app/components/formatted_time';
import ReplyIcon from 'app/components/reply_icon';
import {emptyFunction} from 'app/utils/general';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
const BOT_NAME = 'BOT';
export default class PostHeader extends PureComponent {
static propTypes = {
commentCount: PropTypes.number,
commentedOnDisplayName: PropTypes.string,
createAt: PropTypes.number.isRequired,
displayName: PropTypes.string.isRequired,
enablePostUsernameOverride: PropTypes.bool,
fromWebHook: PropTypes.bool,
isPendingOrFailedPost: PropTypes.bool,
isSystemMessage: PropTypes.bool,
onPress: PropTypes.func,
onViewUserProfile: PropTypes.func,
overrideUsername: PropTypes.string,
renderReplies: PropTypes.bool,
theme: PropTypes.object.isRequired
};
static defaultProps = {
commentCount: 0,
onPress: emptyFunction,
onViewUserProfile: emptyFunction
};
getDisplayName = (style) => {
const {
enablePostUsernameOverride,
fromWebHook,
isSystemMessage,
onViewUserProfile,
overrideUsername
} = this.props;
if (isSystemMessage) {
return (
<FormattedText
id='post_info.system'
defaultMessage='System'
style={style.displayName}
/>
);
} else if (fromWebHook) {
let name = this.props.displayName;
if (overrideUsername && enablePostUsernameOverride) {
name = overrideUsername;
}
return (
<View style={style.botContainer}>
<Text style={style.displayName}>
{name}
</Text>
<Text style={style.bot}>
{BOT_NAME}
</Text>
</View>
);
} else if (this.props.displayName) {
return (
<TouchableOpacity onPress={onViewUserProfile}>
<Text style={style.displayName}>
{this.props.displayName}
</Text>
</TouchableOpacity>
);
}
return (
<FormattedText
id='channel_loader.someone'
defaultMessage='Someone'
style={style.displayName}
/>
);
};
renderCommentedOnMessage = (style) => {
if (!this.props.renderReplies || !this.props.commentedOnDisplayName) {
return null;
}
const displayName = this.props.commentedOnDisplayName;
let name;
if (displayName) {
name = displayName;
} else {
name = (
<FormattedText
id='channel_loader.someone'
defaultMessage='Someone'
/>
);
}
let apostrophe;
if (displayName && displayName.slice(-1) === 's') {
apostrophe = '\'';
} else {
apostrophe = '\'s';
}
return (
<FormattedText
id='post_body.commentedOn'
defaultMessage='Commented on {name}{apostrophe} message: '
values={{
name,
apostrophe
}}
style={style.commentedOn}
/>
);
};
render() {
const {
commentedOnDisplayName,
commentCount,
createAt,
isPendingOrFailedPost,
onPress,
renderReplies,
theme
} = this.props;
const style = getStyleSheet(theme);
return (
<View>
<View style={[style.postInfoContainer, (isPendingOrFailedPost && style.pendingPost)]}>
<View style={{flexDirection: 'row', flex: 1}}>
{this.getDisplayName(style)}
<View style={style.timeContainer}>
<Text style={style.time}>
<FormattedTime value={createAt}/>
</Text>
</View>
</View>
{(!commentedOnDisplayName && commentCount > 0 && renderReplies) &&
<TouchableOpacity
onPress={onPress}
style={style.replyIconContainer}
>
<ReplyIcon
height={15}
width={15}
color={theme.linkColor}
/>
<Text style={style.replyText}>{commentCount}</Text>
</TouchableOpacity>
}
</View>
{commentedOnDisplayName !== '' &&
<View>
{this.renderCommentedOnMessage(style)}
</View>
}
</View>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
commentedOn: {
color: changeOpacity(theme.centerChannelColor, 0.65),
marginBottom: 3,
lineHeight: 21
},
postInfoContainer: {
alignItems: 'center',
flexDirection: 'row',
marginTop: 10
},
pendingPost: {
opacity: 0.5
},
timeContainer: {
justifyContent: 'center'
},
time: {
color: theme.centerChannelColor,
fontSize: 13,
marginLeft: 5,
marginBottom: 1,
opacity: 0.5
},
replyIconContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
replyText: {
fontSize: 15,
marginLeft: 3,
color: theme.linkColor
},
botContainer: {
flexDirection: 'row'
},
bot: {
alignSelf: 'center',
backgroundColor: changeOpacity(theme.centerChannelColor, 0.15),
borderRadius: 2,
color: theme.centerChannelColor,
fontSize: 10,
fontWeight: '600',
marginRight: 5,
paddingVertical: 2,
paddingHorizontal: 4
},
displayName: {
color: theme.centerChannelColor,
fontSize: 15,
fontWeight: '600',
marginRight: 5,
marginBottom: 3
}
});
});

30
app/components/post_profile_picture/index.js Normal file
View file

@ -0,0 +1,30 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {getUser} from 'mattermost-redux/selectors/entities/users';
import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
import {getTheme} from 'app/selectors/preferences';
import PostProfilePicture from './post_profile_picture';
function mapStateToProps(state, ownProps) {
const {config} = state.entities.general;
const post = getPost(state, ownProps.postId);
const user = getUser(state, post.user_id);
return {
...ownProps,
enablePostIconOverride: config.EnablePostIconOverride === 'true',
fromWebHook: post.props && post.props.from_webhook === 'true',
isSystemMessage: isSystemMessage(post),
overrideIconUrl: post.props && post.props.override_icon_url,
user,
theme: getTheme(state)
};
}
export default connect(mapStateToProps)(PostProfilePicture);

84
app/components/post_profile_picture/post_profile_picture.js Normal file
View file

@ -0,0 +1,84 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import PropTypes from 'prop-types';
import {Image, TouchableOpacity, View} from 'react-native';
import MattermostIcon from 'app/components/mattermost_icon';
import ProfilePicture from 'app/components/profile_picture';
import {emptyFunction} from 'app/utils/general';
import webhookIcon from 'assets/images/icons/webhook.jpg';
const PROFILE_PICTURE_SIZE = 32;
function PostProfilePicture(props) {
const {
enablePostIconOverride,
fromWebHook,
isSystemMessage,
onViewUserProfile,
overrideIconUrl,
theme,
user
} = props;
if (isSystemMessage) {
return (
<View>
<MattermostIcon
color={theme.centerChannelColor}
height={PROFILE_PICTURE_SIZE}
width={PROFILE_PICTURE_SIZE}
/>
</View>
);
} else if (fromWebHook) {
if (enablePostIconOverride) {
const icon = overrideIconUrl ? {uri: overrideIconUrl} : webhookIcon;
return (
<View>
<Image
source={icon}
style={{
height: PROFILE_PICTURE_SIZE,
width: PROFILE_PICTURE_SIZE,
borderRadius: PROFILE_PICTURE_SIZE / 2
}}
/>
</View>
);
}
return (
<ProfilePicture
user={user}
size={PROFILE_PICTURE_SIZE}
/>
);
}
return (
<TouchableOpacity onPress={onViewUserProfile}>
<ProfilePicture
user={user}
size={PROFILE_PICTURE_SIZE}
/>
</TouchableOpacity>
);
}
PostProfilePicture.propTypes = {
enablePostIconOverride: PropTypes.bool,
fromWebHook: PropTypes.bool,
isSystemMessage: PropTypes.bool,
overrideIconUrl: PropTypes.string,
onViewUserProfile: PropTypes.func,
theme: PropTypes.object,
user: PropTypes.object
};
PostProfilePicture.defaultProps = {
onViewUserProfile: emptyFunction
};
export default PostProfilePicture;

2
app/components/root/index.js
View file

@ -23,7 +23,7 @@ function mapStateToProps(state, ownProps) {
}
Client.setLocale(locale);
Client4.setLocale(locale);
Client4.setAcceptLanguage(locale);
return {
...ownProps,

4
app/components/slack_attachments/index.js
View file

@ -15,11 +15,12 @@ export default class SlackAttachments extends PureComponent {
baseTextStyle: CustomPropTypes.Style,
blockStyles: PropTypes.object,
textStyles: PropTypes.object,
navigator: PropTypes.object.isRequired,
theme: PropTypes.object
};
render() {
const {attachments, baseTextStyle, blockStyles, textStyles, theme} = this.props;
const {attachments, baseTextStyle, blockStyles, navigator, textStyles, theme} = this.props;
const content = [];
attachments.forEach((attachment, i) => {
@ -30,6 +31,7 @@ export default class SlackAttachments extends PureComponent {
blockStyles={blockStyles}
key={'att_' + i}
textStyles={textStyles}
navigator={navigator}
theme={theme}
/>
);

6
app/components/slack_attachments/slack_attachment.js
View file

@ -21,6 +21,7 @@ export default class SlackAttachment extends PureComponent {
attachment: PropTypes.object.isRequired,
baseTextStyle: CustomPropTypes.Style,
blockStyles: PropTypes.object,
navigator: PropTypes.object.isRequired,
textStyles: PropTypes.object,
theme: PropTypes.object
};
@ -61,6 +62,7 @@ export default class SlackAttachment extends PureComponent {
attachment,
baseTextStyle,
blockStyles,
navigator,
textStyles
} = this.props;
const fields = attachment.fields;
@ -115,6 +117,7 @@ export default class SlackAttachment extends PureComponent {
textStyles={textStyles}
blockStyles={blockStyles}
value={(field.value || '')}
navigator={navigator}
/>
</View>
</View>
@ -167,6 +170,7 @@ export default class SlackAttachment extends PureComponent {
baseTextStyle,
blockStyles,
textStyles,
navigator,
theme
} = this.props;
@ -181,6 +185,7 @@ export default class SlackAttachment extends PureComponent {
textStyles={textStyles}
blockStyles={blockStyles}
value={attachment.pretext}
navigator={navigator}
/>
</View>
);
@ -288,6 +293,7 @@ export default class SlackAttachment extends PureComponent {
textStyles={textStyles}
blockStyles={blockStyles}
value={this.state.text}
navigator={navigator}
/>
{moreLess}
</View>

2
app/screens/image_preview/index.js
View file

@ -19,7 +19,7 @@ function makeMapStateToProps() {
return {
...ownProps,
fetchCache: state.views.fetchCache,
files: getFilesForPost(state, ownProps.post),
files: getFilesForPost(state, ownProps.postId),
theme: getTheme(state),
statusBarHeight: Platform.OS === 'ios' ? state.views.root.statusBarHeight : STATUSBAR_HEIGHT
};

4
app/utils/general.js
View file

@ -10,3 +10,7 @@ export function alertErrorWithFallback(intl, error, fallback, values) {
}
Alert.alert('', msg);
}
export function emptyFunction() {
return;
}

2
yarn.lock
View file

@ -3645,7 +3645,7 @@ makeerror@1.0.x:
mattermost-redux@mattermost/mattermost-redux#master:
version "0.0.1"
resolved "https://codeload.github.com/mattermost/mattermost-redux/tar.gz/26b897a943a2095bdc793f28c10415441859ad6f"
resolved "https://codeload.github.com/mattermost/mattermost-redux/tar.gz/e3b029e3df3d894485a27a9ca3cc7cbe7711ddb9"
dependencies:
deep-equal "1.0.1"
harmony-reflect "1.5.1"