diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/common/comment_icon.jsx | 55 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_info.jsx | 30 | ||||
-rw-r--r-- | webapp/components/search_results_item.jsx | 17 |
3 files changed, 69 insertions, 33 deletions
diff --git a/webapp/components/common/comment_icon.jsx b/webapp/components/common/comment_icon.jsx new file mode 100644 index 000000000..e8be773e5 --- /dev/null +++ b/webapp/components/common/comment_icon.jsx @@ -0,0 +1,55 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; +import Constants from 'utils/constants.jsx'; +import * as Utils from 'utils/utils.jsx'; + +export default function CommentIcon(props) { + let commentCountSpan = ''; + let iconStyle = 'comment-icon__container'; + if (props.commentCount > 0) { + iconStyle += ' icon--show'; + commentCountSpan = ( + <span className='comment-count'> + {props.commentCount} + </span> + ); + } else if (props.searchStyle !== '') { + iconStyle = iconStyle + ' ' + props.searchStyle; + } + + let commentIconId = props.idPrefix; + if (props.idCount > -1) { + commentIconId += props.idCount; + } + + return ( + <a + id={Utils.createSafeId(commentIconId)} + href='#' + className={iconStyle} + onClick={props.handleCommentClick} + > + <span + className='comment-icon' + dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}} + /> + {commentCountSpan} + </a> + ); +} + +CommentIcon.propTypes = { + idPrefix: React.PropTypes.string.isRequired, + idCount: React.PropTypes.number, + handleCommentClick: React.PropTypes.func.isRequired, + searchStyle: React.PropTypes.string, + commentCount: React.PropTypes.number +}; + +CommentIcon.defaultProps = { + idCount: -1, + searchStyle: '', + commentCount: 0 +};
\ No newline at end of file diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 1496429b3..3833f5058 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -9,6 +9,7 @@ import PostFlagIcon from 'components/common/post_flag_icon.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import * as PostActions from 'actions/post_actions.jsx'; +import CommentIcon from 'components/common/comment_icon.jsx'; import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; @@ -342,30 +343,13 @@ export default class PostInfo extends React.Component { let comments = null; let react = null; if (!isEphemeral && !isPending && !isSystemMessage) { - let showCommentClass; - let commentCountText; - if (this.props.commentCount >= 1) { - showCommentClass = ' icon--show'; - commentCountText = this.props.commentCount; - } else { - showCommentClass = ''; - commentCountText = ''; - } - comments = ( - <a - href='#' - className={'comment-icon__container' + showCommentClass} - onClick={this.props.handleCommentClick} - > - <span - className='comment-icon' - dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}} - /> - <span className='comment-count'> - {commentCountText} - </span> - </a> + <CommentIcon + idPrefix={'commentIcon'} + idCount={idCount} + handleCommentClick={this.props.handleCommentClick} + commentCount={this.props.commentCount} + /> ); if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index 9e0eb51b0..d3b7cfe00 100644 --- a/webapp/components/search_results_item.jsx +++ b/webapp/components/search_results_item.jsx @@ -6,6 +6,7 @@ import PostMessageContainer from 'components/post_view/components/post_message_c import UserProfile from './user_profile.jsx'; import FileAttachmentListContainer from './file_attachment_list_container.jsx'; import ProfilePicture from './profile_picture.jsx'; +import CommentIcon from 'components/common/comment_icon.jsx'; import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; @@ -200,16 +201,12 @@ export default class SearchResultsItem extends React.Component { rhsControls = ( <li className='col__controls'> - <a - href='#' - className='comment-icon__container search-item__comment' - onClick={this.handleFocusRHSClick} - > - <span - className='comment-icon' - dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}} - /> - </a> + <CommentIcon + idPrefix={'searchCommentIcon'} + idCount={idCount} + handleCommentClick={this.handleFocusRHSClick} + searchStyle={'search-item__comment'} + /> <a onClick={ () => { |