@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
137 lines • 6.46 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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') {
var appearance = lozenge.appearance,
text = lozenge.text;
return /*#__PURE__*/React.createElement(Lozenge, {
appearance: appearance
}, text);
}
return null;
}
function renderTime(time) {
if (time) {
return /*#__PURE__*/React.createElement(TimeStyle, null, time);
}
return null;
}
var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
function MentionItem() {
var _this;
_classCallCheck(this, MentionItem);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, MentionItem, [].concat(args));
// internal, used for callbacks
_defineProperty(_this, "onMentionSelected", function (event) {
if (leftClick(event) && _this.props.onSelection) {
event.preventDefault();
_this.props.onSelection(_this.props.mention, event);
}
});
_defineProperty(_this, "onMentionMenuItemMouseMove", function (event) {
if (_this.props.onMouseMove) {
_this.props.onMouseMove(_this.props.mention, event);
}
});
_defineProperty(_this, "onMentionMenuItemMouseEnter", function (event) {
if (_this.props.onMouseEnter) {
_this.props.onMouseEnter(_this.props.mention, event);
}
});
return _this;
}
_inherits(MentionItem, _React$PureComponent);
return _createClass(MentionItem, [{
key: "render",
value: function render() {
var _this$props = this.props,
mention = _this$props.mention,
selected = _this$props.selected;
var id = mention.id,
highlight = mention.highlight,
avatarUrl = mention.avatarUrl,
presence = mention.presence,
name = mention.name,
mentionName = mention.mentionName,
lozenge = mention.lozenge,
accessLevel = mention.accessLevel,
isXProductUser = mention.isXProductUser;
var _ref = presence || {},
status = _ref.status,
time = _ref.time;
var restricted = isRestricted(accessLevel);
var nameHighlights = highlight && highlight.name;
var borderColor = selected ? "var(--ds-border, ".concat(N30, ")") : undefined;
var 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-".concat(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, function (text) {
return /*#__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: ''
}))));
}
}]);
}(React.PureComponent);
export { MentionItem as default };