IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-57715] Convert ./components/common/comment_icon.tsx from Class Component to Function Component (#26727)

Browse Source 
* [MM-57715] Convert `./components/common/comment_icon.tsx` from Class Component to Function Component

* :fix: failing types issue
This commit is contained in:
Syed Ali Abbas Zaidi 2024-04-23 15:08:35 +05:00 committed by GitHub
parent 9b227aaa28
commit 6886f389dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
webapp/channels/src/components/common/comment_icon.tsx
View File

@ -2,77 +2,77 @@
// See LICENSE.txt for license information.
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {FormattedMessage, useIntl} from 'react-intl';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import ReplyIcon from 'components/widgets/icons/reply_icon';
import type {Locations} from 'utils/constants';
import {localizeMessage} from 'utils/utils';
type Props = {
location: keyof typeof Locations;
handleCommentClick: React.EventHandler<React.MouseEvent>;
searchStyle: string;
commentCount: number;
location?: keyof typeof Locations;
handleCommentClick?: React.EventHandler<React.MouseEvent>;
searchStyle?: string;
commentCount?: number;
postId?: string;
extraClass: string;
}
export default class CommentIcon extends React.PureComponent<Props> {
public static defaultProps: Partial<Props> = {
location: 'CENTER',
searchStyle: '',
commentCount: 0,
extraClass: '',
};
const CommentIcon = ({
location = 'CENTER',
searchStyle = '',
commentCount = 0,
extraClass = '',
handleCommentClick,
postId,
}: Props) => {
const intl = useIntl();
public render(): JSX.Element {
let commentCountSpan: JSX.Element | null = null;
let iconStyle = 'post-menu__item post-menu__item--wide';
if (this.props.commentCount > 0) {
iconStyle += ' post-menu__item--show';
commentCountSpan = (
<span className='post-menu__comment-count'>
{this.props.commentCount}
</span>
);
} else if (this.props.searchStyle !== '') {
iconStyle = iconStyle + ' ' + this.props.searchStyle;
}
const tooltip = (
<Tooltip
id='comment-icon-tooltip'
className='hidden-xs'
>
<FormattedMessage
id='post_info.comment_icon.tooltip.reply'
defaultMessage='Reply'
/>
</Tooltip>
);
return (
<OverlayTrigger
delayShow={500}
placement='top'
overlay={tooltip}
>
<button
id={`${this.props.location}_commentIcon_${this.props.postId}`}
aria-label={localizeMessage('post_info.comment_icon.tooltip.reply', 'Reply').toLowerCase()}
className={iconStyle + ' ' + this.props.extraClass}
onClick={this.props.handleCommentClick}
>
<span className='d-flex align-items-center'>
<ReplyIcon className='icon icon--small'/>
{commentCountSpan}
</span>
</button>
</OverlayTrigger>
let commentCountSpan: JSX.Element | null = null;
let iconStyle = 'post-menu__item post-menu__item--wide';
if (commentCount > 0) {
iconStyle += ' post-menu__item--show';
commentCountSpan = (
<span className='post-menu__comment-count'>
{commentCount}
</span>
);
} else if (searchStyle !== '') {
iconStyle = `${iconStyle} ${searchStyle}`;
}
}
const tooltip = (
<Tooltip
id='comment-icon-tooltip'
className='hidden-xs'
>
<FormattedMessage
id='post_info.comment_icon.tooltip.reply'
defaultMessage='Reply'
/>
</Tooltip>
);
return (
<OverlayTrigger
delayShow={500}
placement='top'
overlay={tooltip}
>
<button
id={`${location}_commentIcon_${postId}`}
aria-label={intl.formatMessage({id: 'post_info.comment_icon.tooltip.reply', defaultMessage: 'Reply'}).toLowerCase()}
className={`${iconStyle} ${extraClass}`}
onClick={handleCommentClick}
>
<span className='d-flex align-items-center'>
<ReplyIcon className='icon icon--small'/>
{commentCountSpan}
</span>
</button>
</OverlayTrigger>
);
};
export default CommentIcon;