// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import UserProfile from './user_profile.jsx'; import FileAttachmentListContainer from 'components/file_attachment_list'; import PostMessageContainer from 'components/post_view/post_message_view'; import ProfilePicture from 'components/profile_picture.jsx'; import ReactionListContainer from 'components/post_view/reaction_list'; import PostFlagIcon from 'components/post_view/post_flag_icon.jsx'; import FailedPostOptions from 'components/post_view/failed_post_options'; import DotMenu from 'components/dot_menu'; import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import {addReaction} from 'actions/post_actions.jsx'; import TeamStore from 'stores/team_store.jsx'; import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; import Constants from 'utils/constants.jsx'; import React from 'react'; import PropTypes from 'prop-types'; import {Link} from 'react-router/es6'; import {FormattedMessage} from 'react-intl'; export default class RhsComment extends React.Component { constructor(props) { super(props); this.removePost = this.removePost.bind(this); this.reactEmojiClick = this.reactEmojiClick.bind(this); this.handleDropdownOpened = this.handleDropdownOpened.bind(this); this.state = { currentTeamDisplayName: TeamStore.getCurrent().name, width: '', height: '', showEmojiPicker: false, dropdownOpened: false }; } componentDidMount() { window.addEventListener('resize', () => { Utils.updateWindowDimensions(this); }); } componentWillUnmount() { window.removeEventListener('resize', () => { Utils.updateWindowDimensions(this); }); } removePost() { GlobalActions.emitRemovePost(this.props.post); } createRemovePostButton() { return ( {'×'} ); } 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 (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } if (!Utils.areObjectsEqual(nextProps.currentUser, this.props.currentUser)) { return true; } if (this.state.showEmojiPicker !== nextState.showEmojiPicker) { return true; } if (nextProps.lastPostCount !== this.props.lastPostCount) { return true; } if (this.state.dropdownOpened !== nextState.dropdownOpened) { return true; } return false; } timeTag(post, timeOptions) { return ( ); } renderTimeTag(post, timeOptions) { return Utils.isMobile() ? this.timeTag(post, timeOptions) : ( {this.timeTag(post, timeOptions)} ); } toggleEmojiPicker = () => { const showEmojiPicker = !this.state.showEmojiPicker; this.setState({ showEmojiPicker, dropdownOpened: showEmojiPicker }); } reactEmojiClick(emoji) { this.setState({showEmojiPicker: false}); const emojiName = emoji.name || emoji.aliases[0]; addReaction(this.props.post.channel_id, this.props.post.id, emojiName); } getClassName = (post, isSystemMessage) => { let className = 'post post--thread'; if (this.props.currentUser.id === post.user_id) { className += ' current--user'; } if (isSystemMessage) { className += ' post--system'; } if (this.props.compactDisplay) { className += ' post--compact'; } if (post.is_pinned) { className += ' post--pinned'; } if (this.state.dropdownOpened) { className += ' post--hovered'; } return className; } handleDropdownOpened(isOpened) { this.setState({ dropdownOpened: isOpened }); } render() { const post = this.props.post; const mattermostLogo = Constants.MATTERMOST_ICON_SVG; let idCount = -1; if (this.props.lastPostCount >= 0 && this.props.lastPostCount < Constants.TEST_ID_COUNT) { idCount = this.props.lastPostCount; } const isEphemeral = Utils.isPostEphemeral(post); const isSystemMessage = PostUtils.isSystemMessage(post); var timestamp = this.props.currentUser.last_picture_update; let status = this.props.status; if (post.props && post.props.from_webhook === 'true') { status = null; } let botIndicator; let userProfile = ( ); 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 (isSystemMessage) { userProfile = ( } overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE} disablePopover={true} /> ); } let failedPostOptions; let postClass = ''; if (post.failed) { postClass += ' post-failed'; failedPostOptions = ; } if (PostUtils.isEdited(this.props.post)) { postClass += ' post--edited'; } let profilePic = ( ); if (post.props && post.props.from_webhook) { profilePic = ( ); } if (isSystemMessage) { profilePic = ( ); } if (this.props.compactDisplay) { if (post.props && post.props.from_webhook) { profilePic = ( ); } else { profilePic = ( ); } } const profilePicContainer = (
{profilePic}
); let fileAttachment = null; if (post.file_ids && post.file_ids.length > 0) { fileAttachment = ( ); } let react; if (!isEphemeral && !post.failed && !isSystemMessage && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { react = ( this.refs.dotMenu} container={this.props.getPostList} onEmojiClick={this.reactEmojiClick} /> ); } let options; if (isEphemeral) { options = (
{this.createRemovePostButton()}
); } else if (!isSystemMessage) { const dotMenu = ( ); options = (
{dotMenu} {react}
); } let pinnedBadge; if (post.is_pinned) { pinnedBadge = ( ); } const timeOptions = { hour: '2-digit', minute: '2-digit', hour12: !this.props.useMilitaryTime }; return (
{profilePicContainer}
{userProfile}
{botIndicator}
{this.renderTimeTag(post, timeOptions)} {pinnedBadge}
{options}
{failedPostOptions}
{fileAttachment}
); } } RhsComment.propTypes = { post: PropTypes.object, lastPostCount: PropTypes.number, user: PropTypes.object.isRequired, currentUser: PropTypes.object.isRequired, compactDisplay: PropTypes.bool, useMilitaryTime: PropTypes.bool.isRequired, isFlagged: PropTypes.bool, status: PropTypes.string, isBusy: PropTypes.bool, getPostList: PropTypes.func.isRequired };