@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
169 lines • 7.06 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";
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 React from 'react';
import FocusRing from '@atlaskit/focus-ring';
import { fg } from '@atlaskit/platform-feature-flags';
import MessagesIntlProvider from '../MessagesIntlProvider';
import PrimitiveMention from './PrimitiveMention';
import AsyncNoAccessTooltip from '../NoAccessTooltip';
import { isRestricted, MentionType } from '../../types';
import { fireAnalyticsMentionEvent } from '../../util/analytics';
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
import { UFOExperienceState } from '@atlaskit/ufo';
import { UnknownUserError } from '../../util/i18n';
import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
export var ANALYTICS_HOVER_DELAY = 1000;
export var UNKNOWN_USER_ID = '_|unknown|_';
export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
function MentionInternal(props) {
var _this;
_classCallCheck(this, MentionInternal);
_this = _callSuper(this, MentionInternal, [props]);
_defineProperty(_this, "handleOnClick", function (e) {
var _this$props = _this.props,
id = _this$props.id,
text = _this$props.text,
onClick = _this$props.onClick;
if (onClick) {
onClick(id, text, e);
}
});
_defineProperty(_this, "handleOnMouseEnter", function (e) {
var _this$props2 = _this.props,
id = _this$props2.id,
text = _this$props2.text,
onMouseEnter = _this$props2.onMouseEnter,
onHover = _this$props2.onHover;
if (onMouseEnter) {
onMouseEnter(id, text, e);
}
_this.hoverTimeout = window.setTimeout(function () {
if (onHover) {
onHover();
}
_this.hoverTimeout = undefined;
}, ANALYTICS_HOVER_DELAY);
});
_defineProperty(_this, "handleOnMouseLeave", function (e) {
var _this$props3 = _this.props,
id = _this$props3.id,
text = _this$props3.text,
onMouseLeave = _this$props3.onMouseLeave;
if (onMouseLeave) {
onMouseLeave(id, text, e);
}
if (_this.hoverTimeout) {
clearTimeout(_this.hoverTimeout);
}
});
_defineProperty(_this, "getMentionType", function () {
var _this$props4 = _this.props,
accessLevel = _this$props4.accessLevel,
isHighlighted = _this$props4.isHighlighted;
if (isHighlighted) {
return MentionType.SELF;
}
if (isRestricted(accessLevel)) {
return MentionType.RESTRICTED;
}
return MentionType.DEFAULT;
});
mentionRenderedUfoExperience.getInstance(props.id).start();
return _this;
}
_inherits(MentionInternal, _React$PureComponent);
return _createClass(MentionInternal, [{
key: "componentDidMount",
value: function componentDidMount() {
mentionRenderedUfoExperience.getInstance(this.props.id).success();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout);
}
var ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
ufoInstance.abort();
}
}
}, {
key: "renderUnknownUserError",
value: function renderUnknownUserError(id) {
return /*#__PURE__*/React.createElement(UnknownUserError, {
values: {
userId: id.slice(-5)
}
}, function (message) {
return /*#__PURE__*/React.createElement(React.Fragment, null, "@".concat(message));
});
}
}, {
key: "render",
value: function render() {
var handleOnClick = this.handleOnClick,
handleOnMouseEnter = this.handleOnMouseEnter,
handleOnMouseLeave = this.handleOnMouseLeave,
props = this.props;
var text = props.text,
id = props.id,
accessLevel = props.accessLevel,
localId = props.localId;
var mentionType = this.getMentionType();
var failedMention = text === "@".concat(UNKNOWN_USER_ID);
var showTooltip = mentionType === MentionType.RESTRICTED;
var mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, {
mentionType: mentionType,
onClick: handleOnClick,
onMouseEnter: handleOnMouseEnter,
onMouseLeave: handleOnMouseLeave,
spellCheck: false,
"data-testid": "mention-".concat(id),
"data-mention-type": mentionType,
"data-mention-tooltip": showTooltip
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
var ssrPlaceholderProp = fg('cc_mention_ssr_placeholder') ? {
'data-ssr-placeholder': props.ssrPlaceholderId
} : {};
return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
id: id
}, /*#__PURE__*/React.createElement("span", _extends({
id: localId,
"data-mention-id": id,
"data-local-id": localId,
"data-access-level": accessLevel,
spellCheck: false
}, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, showTooltip ? /*#__PURE__*/React.createElement(React.Suspense, {
fallback: mentionComponent
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
name: text
}, mentionComponent)) : mentionComponent)));
}
}]);
}(React.PureComponent);
var MentionWithAnalytics = withAnalyticsEvents({
onClick: function onClick(createEvent, props) {
var id = props.id,
text = props.text,
accessLevel = props.accessLevel;
var event = fireAnalyticsMentionEvent(createEvent)('mention', 'selected', text, id, accessLevel);
return event;
},
onHover: function onHover(createEvent, props) {
var id = props.id,
text = props.text,
accessLevel = props.accessLevel;
var event = fireAnalyticsMentionEvent(createEvent)('mention', 'hovered', text, id, accessLevel);
return event;
}
})(MentionInternal);
var Mention = MentionWithAnalytics;
export default Mention;