// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import PostTime from 'components/post_view/post_time.jsx'; import PostFlagIcon from 'components/post_view/post_flag_icon.jsx'; import CommentIcon from 'components/common/comment_icon.jsx'; import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx'; import DotMenu from 'components/dot_menu'; import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; import {emitEmojiPosted} from 'actions/post_actions.jsx'; import Constants from 'utils/constants.jsx'; import React from 'react'; import PropTypes from 'prop-types'; import {FormattedMessage} from 'react-intl'; export default class PostInfo extends React.PureComponent { static propTypes = { /* * The post to render the info for */ post: PropTypes.object.isRequired, /* * Function called when the comment icon is clicked */ handleCommentClick: PropTypes.func.isRequired, /* * Funciton called when the post options dropdown is opened */ handleDropdownOpened: PropTypes.func.isRequired, /* * Set to display in 24 hour format */ useMilitaryTime: PropTypes.bool.isRequired, /* * Set to mark the post as flagged */ isFlagged: PropTypes.bool, /* * The number of replies in the same thread as this post */ replyCount: PropTypes.number, /* * Post identifiers for selenium tests */ lastPostCount: PropTypes.number, /** * Function to get the post list HTML element */ getPostList: PropTypes.func.isRequired, actions: PropTypes.shape({ /* * Function to remove the post */ removePost: PropTypes.func.isRequired, /* * Function to add a reaction to the post */ addReaction: PropTypes.func.isRequired }).isRequired } constructor(props) { super(props); this.removePost = this.removePost.bind(this); this.reactEmojiClick = this.reactEmojiClick.bind(this); this.state = { showEmojiPicker: false, reactionPickerOffset: 21, canEdit: PostUtils.canEditPost(props.post, this.editDisableAction) }; } toggleEmojiPicker = () => { const showEmojiPicker = !this.state.showEmojiPicker; this.setState({showEmojiPicker}); this.props.handleDropdownOpened(showEmojiPicker); } hideEmojiPicker = () => { this.setState({showEmojiPicker: false}); this.props.handleDropdownOpened(false); } removePost() { this.props.actions.removePost(this.props.post); } createRemovePostButton() { return ( {'×'} ); } reactEmojiClick(emoji) { const pickerOffset = 21; this.setState({showEmojiPicker: false, reactionPickerOffset: pickerOffset}); const emojiName = emoji.name || emoji.aliases[0]; this.props.actions.addReaction(this.props.post.id, emojiName); emitEmojiPosted(emojiName); } getDotMenu = () => { return this.refs.dotMenu; } render() { const post = this.props.post; 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); let comments = null; let react = null; if (!isEphemeral && !post.failed && !isSystemMessage) { comments = ( ); if (window.mm_config.EnableEmojiPicker === 'true') { react = ( ); } } let options; if (isEphemeral) { options = (
{this.createRemovePostButton()}
); } else if (!post.failed) { const dotMenu = ( ); if (PostUtils.shouldShowDotMenu(this.props.post)) { options = (
{dotMenu} {react} {comments}
); } } let pinnedBadge; if (post.is_pinned) { pinnedBadge = ( ); } return (
{pinnedBadge} {this.state.showEmojiPicker}
{options}
); } }