@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
176 lines (175 loc) • 8.18 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.UNKNOWN_USER_ID = exports.MentionInternal = exports.ANALYTICS_HOVER_DELAY = 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 _react = _interopRequireDefault(require("react"));
var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
var _PrimitiveMention = _interopRequireDefault(require("./PrimitiveMention"));
var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
var _types = require("../../types");
var _analytics = require("../../util/analytics");
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
var _ufo = require("@atlaskit/ufo");
var _i18n = require("../../util/i18n");
var _ufoExperiences = require("./ufoExperiences");
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 ANALYTICS_HOVER_DELAY = exports.ANALYTICS_HOVER_DELAY = 1000;
var UNKNOWN_USER_ID = exports.UNKNOWN_USER_ID = '_|unknown|_';
var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
function MentionInternal(props) {
var _this;
(0, _classCallCheck2.default)(this, MentionInternal);
_this = _callSuper(this, MentionInternal, [props]);
(0, _defineProperty2.default)(_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);
}
});
(0, _defineProperty2.default)(_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);
});
(0, _defineProperty2.default)(_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);
}
});
(0, _defineProperty2.default)(_this, "getMentionType", function () {
var _this$props4 = _this.props,
accessLevel = _this$props4.accessLevel,
isHighlighted = _this$props4.isHighlighted;
if (isHighlighted) {
return _types.MentionType.SELF;
}
if ((0, _types.isRestricted)(accessLevel)) {
return _types.MentionType.RESTRICTED;
}
return _types.MentionType.DEFAULT;
});
_ufoExperiences.mentionRenderedUfoExperience.getInstance(props.id).start();
return _this;
}
(0, _inherits2.default)(MentionInternal, _React$PureComponent);
return (0, _createClass2.default)(MentionInternal, [{
key: "componentDidMount",
value: function componentDidMount() {
_ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id).success();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout);
}
var ufoInstance = _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id);
if ([_ufo.UFOExperienceState['STARTED'], _ufo.UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
ufoInstance.abort();
}
}
}, {
key: "renderUnknownUserError",
value: function renderUnknownUserError(id) {
return /*#__PURE__*/_react.default.createElement(_i18n.UnknownUserError, {
values: {
userId: id.slice(-5)
}
}, function (message) {
return /*#__PURE__*/_react.default.createElement(_react.default.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 === _types.MentionType.RESTRICTED;
var mentionComponent = /*#__PURE__*/_react.default.createElement(_focusRing.default, null, /*#__PURE__*/_react.default.createElement(_PrimitiveMention.default, {
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 = (0, _platformFeatureFlags.fg)('cc_mention_ssr_placeholder') ? {
'data-ssr-placeholder': props.ssrPlaceholderId
} : {};
return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
id: id
}, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
id: localId,
"data-mention-id": id,
"data-local-id": localId,
"data-access-level": accessLevel,
spellCheck: false
}, ssrPlaceholderProp), /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, showTooltip ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
fallback: mentionComponent
}, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
name: text
}, mentionComponent)) : mentionComponent)));
}
}]);
}(_react.default.PureComponent);
var MentionWithAnalytics = (0, _withAnalyticsEvents.default)({
onClick: function onClick(createEvent, props) {
var id = props.id,
text = props.text,
accessLevel = props.accessLevel;
var event = (0, _analytics.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 = (0, _analytics.fireAnalyticsMentionEvent)(createEvent)('mention', 'hovered', text, id, accessLevel);
return event;
}
})(MentionInternal);
var Mention = MentionWithAnalytics;
var _default = exports.default = Mention;