@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
122 lines • 4.75 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import Avatar from '@atlaskit/avatar';
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import { N30 } from '@atlaskit/theme/colors';
import React from 'react';
import EditorPanelIcon from '@atlaskit/icon/core/migration/status-information--editor-panel';
import { isRestricted } from '../../types';
import { NoAccessLabel } from '../../util/i18n';
import { leftClick } from '../../util/mouse';
import AsyncNoAccessTooltip from '../NoAccessTooltip';
import AsyncLockCircleIcon from '../LockCircleIcon';
import { AccessSectionStyle, AvatarStyle, FullNameStyle, InfoSectionStyle, MentionItemStyle, NameSectionStyle, RowStyle, TimeStyle } from './styles';
import { renderHighlight } from './MentionHighlightHelpers';
import MentionDescriptionByline from '../MentionDescriptionByline';
import MessagesIntlProvider from '../MessagesIntlProvider';
import { MentionAvatar } from '../MentionAvatar';
export { MENTION_ITEM_HEIGHT } from './styles';
function renderLozenge(lozenge) {
if (typeof lozenge === 'string') {
return /*#__PURE__*/React.createElement(Lozenge, null, lozenge);
}
if (typeof lozenge === 'object') {
const {
appearance,
text
} = lozenge;
return /*#__PURE__*/React.createElement(Lozenge, {
appearance: appearance
}, text);
}
return null;
}
function renderTime(time) {
if (time) {
return /*#__PURE__*/React.createElement(TimeStyle, null, time);
}
return null;
}
export default class MentionItem extends React.PureComponent {
constructor(...args) {
super(...args);
// internal, used for callbacks
_defineProperty(this, "onMentionSelected", event => {
if (leftClick(event) && this.props.onSelection) {
event.preventDefault();
this.props.onSelection(this.props.mention, event);
}
});
_defineProperty(this, "onMentionMenuItemMouseMove", event => {
if (this.props.onMouseMove) {
this.props.onMouseMove(this.props.mention, event);
}
});
_defineProperty(this, "onMentionMenuItemMouseEnter", event => {
if (this.props.onMouseEnter) {
this.props.onMouseEnter(this.props.mention, event);
}
});
}
render() {
const {
mention,
selected
} = this.props;
const {
id,
highlight,
avatarUrl,
presence,
name,
mentionName,
lozenge,
accessLevel,
isXProductUser
} = mention;
const {
status,
time
} = presence || {};
const restricted = isRestricted(accessLevel);
const nameHighlights = highlight && highlight.name;
const borderColor = selected ? `var(--ds-border, ${N30})` : undefined;
const xProductUserInfoIconColor = selected ? "var(--ds-icon-selected, #0C66E4)" : "var(--ds-icon, #44546F)";
return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(MentionItemStyle, {
selected: selected,
onMouseDown: this.onMentionSelected,
onMouseMove: this.onMentionMenuItemMouseMove,
onMouseEnter: this.onMentionMenuItemMouseEnter,
"data-mention-item": true,
"data-testid": `mention-item-${id}`,
"data-mention-id": id,
"data-mention-name": mentionName,
"data-selected": selected
}, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
restricted: restricted
}, fg('team-avatar-in-mention-picker') ? /*#__PURE__*/React.createElement(MentionAvatar, {
selected: selected,
mention: mention
}) : /*#__PURE__*/React.createElement(Avatar, {
src: avatarUrl,
size: "medium",
presence: status,
borderColor: borderColor
})), /*#__PURE__*/React.createElement(NameSectionStyle, {
restricted: restricted
}, renderHighlight(FullNameStyle, name, nameHighlights), /*#__PURE__*/React.createElement(MentionDescriptionByline, {
mention: mention
})), /*#__PURE__*/React.createElement(InfoSectionStyle, {
restricted: restricted
}, renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/React.createElement(React.Suspense, {
fallback: null
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
name: name
}, /*#__PURE__*/React.createElement(AccessSectionStyle, null, /*#__PURE__*/React.createElement(NoAccessLabel, null, text => /*#__PURE__*/React.createElement(AsyncLockCircleIcon, {
label: text
}) /* safe to cast to string given there is no value binding */)))) : null, isXProductUser && /*#__PURE__*/React.createElement(EditorPanelIcon, {
color: xProductUserInfoIconColor,
label: ''
}))));
}
}