@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
177 lines (176 loc) • 8.47 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MENTION_ITEM_HEIGHT", {
enumerable: true,
get: function get() {
return _styles.MENTION_ITEM_HEIGHT;
}
});
exports.default = exports.MentionItemWithRef = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _tag = _interopRequireDefault(require("@atlaskit/tag"));
var _react = _interopRequireDefault(require("react"));
var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
var _types = require("../../types");
var _i18n = require("../../util/i18n");
var _mouse = require("../../util/mouse");
var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
var _LockCircleIcon = _interopRequireDefault(require("../LockCircleIcon"));
var _styles = require("./styles");
var _MentionHighlightHelpers = require("./MentionHighlightHelpers");
var _MentionDescriptionByline = _interopRequireDefault(require("../MentionDescriptionByline"));
var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
var _MentionAvatar = require("../MentionAvatar");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
var lozengeAppearanceToTagColor = {
default: 'standard',
success: 'lime',
removed: 'red',
inprogress: 'blue',
new: 'purple',
moved: 'orange'
};
function renderTag(lozenge) {
if (typeof lozenge === 'string') {
return /*#__PURE__*/_react.default.createElement(_tag.default, {
text: lozenge,
color: "standard",
isRemovable: false,
migration_fallback: "lozenge"
});
}
if ((0, _typeof2.default)(lozenge) === 'object') {
var appearance = lozenge.appearance,
text = lozenge.text;
var color = appearance ? lozengeAppearanceToTagColor[appearance] : 'standard';
return /*#__PURE__*/_react.default.createElement(_tag.default, {
text: text,
color: color,
isRemovable: false,
migration_fallback: "lozenge"
});
}
return null;
}
function renderLozenge(lozenge) {
if (typeof lozenge === 'string') {
return /*#__PURE__*/_react.default.createElement(_lozenge.default, null, lozenge);
}
if ((0, _typeof2.default)(lozenge) === 'object') {
var appearance = lozenge.appearance,
text = lozenge.text;
return /*#__PURE__*/_react.default.createElement(_lozenge.default, {
appearance: appearance
}, text);
}
return null;
}
function renderTime(time) {
if (time) {
return /*#__PURE__*/_react.default.createElement(_styles.TimeStyle, null, time);
}
return null;
}
var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent) {
function MentionItem() {
var _this;
(0, _classCallCheck2.default)(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
(0, _defineProperty2.default)(_this, "onMentionSelected", function (event) {
if ((0, _mouse.leftClick)(event) && _this.props.onSelection) {
event.preventDefault();
_this.props.onSelection(_this.props.mention, event);
}
});
(0, _defineProperty2.default)(_this, "onMentionMenuItemMouseMove", function (event) {
if (_this.props.onMouseMove) {
_this.props.onMouseMove(_this.props.mention, event);
}
});
(0, _defineProperty2.default)(_this, "onMentionMenuItemMouseEnter", function (event) {
if (_this.props.onMouseEnter) {
_this.props.onMouseEnter(_this.props.mention, event);
}
});
return _this;
}
(0, _inherits2.default)(MentionItem, _React$PureComponent);
return (0, _createClass2.default)(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 = (0, _types.isRestricted)(accessLevel);
var nameHighlights = highlight && highlight.name;
var xProductUserInfoIconColor = selected ? "var(--ds-icon-selected, #0C66E4)" : "var(--ds-icon, #44546F)";
return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_styles.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.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, {
restricted: restricted
}, /*#__PURE__*/_react.default.createElement(_MentionAvatar.MentionAvatar, {
selected: selected,
mention: mention
})), /*#__PURE__*/_react.default.createElement(_styles.NameSectionStyle, {
restricted: restricted
}, (0, _MentionHighlightHelpers.renderHighlight)(_styles.FullNameStyle, name, nameHighlights), /*#__PURE__*/_react.default.createElement(_MentionDescriptionByline.default, {
mention: mention
})), /*#__PURE__*/_react.default.createElement(_styles.InfoSectionStyle, {
restricted: restricted
}, (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag(lozenge) : renderLozenge(lozenge), renderTime(time)), restricted ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
fallback: null
}, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
name: name
}, /*#__PURE__*/_react.default.createElement(_styles.AccessSectionStyle, null, /*#__PURE__*/_react.default.createElement(_i18n.NoAccessLabel, null, function (text) {
return /*#__PURE__*/_react.default.createElement(_LockCircleIcon.default, {
label: text
});
} /* safe to cast to string given there is no value binding */)))) : null, isXProductUser && /*#__PURE__*/_react.default.createElement(_statusInformation.default, {
color: xProductUserInfoIconColor,
label: ''
}))));
}
}]);
}(_react.default.PureComponent);
var MentionItemWithRef = exports.MentionItemWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
return /*#__PURE__*/_react.default.createElement(MentionItem, (0, _extends2.default)({}, props, {
forwardedRef: ref
}));
});