// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import UserProfile from './user_profile.jsx'; import PostBodyAdditionalContent from 'components/post_view/components/post_body_additional_content.jsx'; import PostMessageContainer from 'components/post_view/components/post_message_container.jsx'; import FileAttachmentListContainer from './file_attachment_list_container.jsx'; import ProfilePicture from 'components/profile_picture.jsx'; import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx'; import RhsDropdown from 'components/rhs_dropdown.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx'; import ReactDOM from 'react-dom'; import Constants from 'utils/constants.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import React from 'react'; import {Link} from 'react-router/es6'; export default class RhsRootPost extends React.Component { constructor(props) { super(props); this.handlePermalink = this.handlePermalink.bind(this); this.flagPost = this.flagPost.bind(this); this.unflagPost = this.unflagPost.bind(this); this.pinPost = this.pinPost.bind(this); this.unpinPost = this.unpinPost.bind(this); this.reactEmojiClick = this.reactEmojiClick.bind(this); this.emojiPickerClick = this.emojiPickerClick.bind(this); this.canEdit = false; this.canDelete = false; this.editDisableAction = new DelayedAction(this.handleEditDisable); this.state = { currentTeamDisplayName: TeamStore.getCurrent().name, width: '', height: '', showRHSEmojiPicker: false, testStateObj: true }; } componentDidMount() { window.addEventListener('resize', () => { Utils.updateWindowDimensions(this); }); } componentWillUnmount() { window.removeEventListener('resize', () => { Utils.updateWindowDimensions(this); }); } handlePermalink(e) { e.preventDefault(); GlobalActions.showGetPostLinkModal(this.props.post); } handleEditDisable() { this.canEdit = false; } shouldComponentUpdate(nextProps, nextState) { if (nextProps.status !== this.props.status) { return true; } if (nextProps.isBusy !== this.props.isBusy) { return true; } if (nextProps.compactDisplay !== this.props.compactDisplay) { return true; } if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) { return true; } if (nextProps.isFlagged !== this.props.isFlagged) { return true; } if (nextProps.previewCollapsed !== this.props.previewCollapsed) { return true; } if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { return true; } if (!Utils.areObjectsEqual(nextProps.currentUser, this.props.currentUser)) { return true; } if (this.state.showRHSEmojiPicker !== nextState.showRHSEmojiPicker) { return true; } return false; } flagPost(e) { e.preventDefault(); flagPost(this.props.post.id); } unflagPost(e) { e.preventDefault(); unflagPost(this.props.post.id); } timeTag(post, timeOptions) { return ( ); } renderTimeTag(post, timeOptions) { return Utils.isMobile() ? this.timeTag(post, timeOptions) : ( {this.timeTag(post, timeOptions)} ); } pinPost(e) { e.preventDefault(); pinPost(this.props.post.channel_id, this.props.post.id); } unpinPost(e) { e.preventDefault(); unpinPost(this.props.post.channel_id, this.props.post.id); } emojiPickerClick() { this.setState({showRHSEmojiPicker: !this.state.showRHSEmojiPicker}); } reactEmojiClick(emoji) { const emojiName = emoji.name || emoji.aliases[0]; addReaction(this.props.post.channel_id, this.props.post.id, emojiName); this.setState({showRHSEmojiPicker: false}); } render() { const post = this.props.post; const user = this.props.user; const mattermostLogo = Constants.MATTERMOST_ICON_SVG; var timestamp = user ? user.last_picture_update : 0; var channel = ChannelStore.get(post.channel_id); let canReact = false; const flagIcon = Constants.FLAG_ICON_SVG; if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && !Utils.isPostEphemeral(post) && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { canReact = true; } this.canDelete = PostUtils.canDeletePost(post); this.canEdit = PostUtils.canEditPost(post, this.editDisableAction); var type = 'Post'; if (post.root_id.length > 0) { type = 'Comment'; } var userCss = ''; if (UserStore.getCurrentId() === post.user_id) { userCss = 'current--user'; } var systemMessageClass = ''; if (PostUtils.isSystemMessage(post)) { systemMessageClass = 'post--system'; } var channelName; if (channel) { if (channel.type === 'D') { channelName = ( ); } else { channelName = channel.display_name; } } let react; let reactOverlay; if (canReact) { react = ( ); reactOverlay = ( this.setState({showRHSEmojiPicker: false})} target={() => ReactDOM.findDOMNode(this.refs.rhs_root_reacticon)} > ); } var dropdownContents = []; if (Utils.isMobile()) { if (this.props.isFlagged) { dropdownContents.push(
  • ); } else { dropdownContents.push(
  • ); } } dropdownContents.push(
  • ); if (post.is_pinned) { dropdownContents.push(
  • ); } else { dropdownContents.push(
  • ); } if (this.canDelete) { dropdownContents.push(
  • GlobalActions.showDeletePostModal(post, this.props.commentCount)} >
  • ); } if (this.canEdit) { dropdownContents.push(
  • ); } var rootOptions = ''; if (dropdownContents.length > 0) { rootOptions = ( ); } let fileAttachment = null; if (post.file_ids && post.file_ids.length > 0) { fileAttachment = ( ); } let userProfile = ( ); let botIndicator; if (post.props && post.props.from_webhook) { if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') { userProfile = ( ); } else { userProfile = ( ); } botIndicator =
  • {'BOT'}
  • ; } else if (PostUtils.isSystemMessage(post)) { userProfile = ( } overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE} disablePopover={true} /> ); } let status = this.props.status; if (post.props && post.props.from_webhook === 'true') { status = null; } let profilePic = ( ); if (post.props && post.props.from_webhook) { profilePic = ( ); } if (PostUtils.isSystemMessage(post)) { profilePic = ( ); } let compactClass = ''; let postClass = ''; if (this.props.compactDisplay) { compactClass = 'post--compact'; if (post.props && post.props.from_webhook) { profilePic = ( ); } else { profilePic = ( ); } } if (PostUtils.isEdited(this.props.post)) { postClass += ' post--edited'; } const profilePicContainer = (
    {profilePic}
    ); let flag; let flagFunc; let flagVisible = ''; let flagTooltip = ( ); if (this.props.isFlagged) { flagVisible = 'visible'; flag = ( ); flagFunc = this.unflagPost; flagTooltip = ( ); } else { flag = ( ); flagFunc = this.flagPost; } let pinnedBadge; if (post.is_pinned) { pinnedBadge = ( ); } const timeOptions = { hour: '2-digit', minute: '2-digit', hour12: !this.props.useMilitaryTime }; return (
    {channelName}
    {profilePicContainer}
    • {userProfile}
    • {botIndicator}
    • {this.renderTimeTag(post, timeOptions)} {pinnedBadge} {flag}
    • {reactOverlay} {rootOptions} {react}
    } previewCollapsed={this.props.previewCollapsed} />
    {fileAttachment}
    ); } } RhsRootPost.defaultProps = { commentCount: 0 }; RhsRootPost.propTypes = { post: React.PropTypes.object.isRequired, user: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object.isRequired, commentCount: React.PropTypes.number, compactDisplay: React.PropTypes.bool, useMilitaryTime: React.PropTypes.bool.isRequired, isFlagged: React.PropTypes.bool, status: React.PropTypes.string, previewCollapsed: React.PropTypes.string, isBusy: React.PropTypes.bool };