@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
153 lines • 5.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import Tag from '@atlaskit/tag';
import React from 'react';
import EditorPanelIcon from '@atlaskit/icon/core/status-information';
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';
const lozengeAppearanceToTagColor = {
default: 'standard',
success: 'lime',
removed: 'red',
inprogress: 'blue',
new: 'purple',
moved: 'orange'
};
function renderTag(lozenge) {
if (typeof lozenge === 'string') {
return /*#__PURE__*/React.createElement(Tag, {
text: lozenge,
color: "standard",
isRemovable: false,
migration_fallback: "lozenge"
});
}
if (typeof lozenge === 'object') {
const {
appearance,
text
} = lozenge;
const color = appearance ? lozengeAppearanceToTagColor[appearance] : 'standard';
return /*#__PURE__*/React.createElement(Tag, {
text: text,
color: color,
isRemovable: false,
migration_fallback: "lozenge"
});
}
return null;
}
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,
forwardedRef
} = this.props;
const {
id,
highlight,
presence,
name,
mentionName,
lozenge,
accessLevel,
isXProductUser
} = mention;
const {
time
} = presence || {};
const restricted = isRestricted(accessLevel);
const nameHighlights = highlight && highlight.name;
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,
ref: forwardedRef
}, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
restricted: restricted
}, /*#__PURE__*/React.createElement(MentionAvatar, {
selected: selected,
mention: mention
})), /*#__PURE__*/React.createElement(NameSectionStyle, {
restricted: restricted
}, renderHighlight(FullNameStyle, name, nameHighlights), /*#__PURE__*/React.createElement(MentionDescriptionByline, {
mention: mention
})), /*#__PURE__*/React.createElement(InfoSectionStyle, {
restricted: restricted
}, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag(lozenge) : 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: ''
}))));
}
}
export const MentionItemWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(MentionItem, _extends({}, props, {
forwardedRef: ref
}));
});