@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
166 lines • 7.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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 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';
var 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') {
var appearance = lozenge.appearance,
text = lozenge.text;
var 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') {
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,
forwardedRef = _this$props.forwardedRef;
var id = mention.id,
highlight = mention.highlight,
presence = mention.presence,
name = mention.name,
mentionName = mention.mentionName,
lozenge = mention.lozenge,
accessLevel = mention.accessLevel,
isXProductUser = mention.isXProductUser;
var _ref = presence || {},
time = _ref.time;
var restricted = isRestricted(accessLevel);
var nameHighlights = highlight && highlight.name;
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,
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, 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 };
export var MentionItemWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(MentionItem, _extends({}, props, {
forwardedRef: ref
}));
});