entryComponent.tsx
TLDR
This file defines a React component called EntryComponent that renders a mention suggestion entry. It displays the mention's avatar, name, displayName, and additional badges if the mention is a bot or a guest. If the mention is not a board member, a hint is displayed as well.
Methods
None
Classes
None
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactElement} from 'react'
import {FormattedMessage} from 'react-intl'
import {EntryComponentProps} from '@draft-js-plugins/mention/lib/MentionSuggestions/Entry/Entry'
import GuestBadge from '../../../widgets/guestBadge'
import './entryComponent.scss'
const BotBadge = (window as any).Components?.BotBadge
const Entry = (props: EntryComponentProps): ReactElement => {
const {
mention,
theme,
...parentProps
} = props
return (
<div
{...parentProps}
>
<div className={`${theme?.mentionSuggestionsEntryContainer} EntryComponent`}>
<div className='EntryComponent__left'>
<img
src={mention.avatar}
className={theme?.mentionSuggestionsEntryAvatar}
role='presentation'
/>
<div className={theme?.mentionSuggestionsEntryText}>
{mention.name}
{BotBadge && mention.is_bot && <BotBadge/>}
<GuestBadge show={mention.is_guest}/>
</div>
<div className={theme?.mentionSuggestionsEntryText}>
{mention.displayName}
</div>
</div>
{!mention.isBoardMember &&
<div className={`EntryComponent__hint ${theme?.mentionSuggestionsEntryText}`}>
<FormattedMessage
id='MentionSuggestion.is-not-board-member'
defaultMessage='(not board member)'
/>
</div>}
</div>
</div>
)
}
export default Entry