@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
124 lines • 4.58 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";
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 { isResolvingMentionProvider } from '../../api/MentionResource';
import { isPromise, MentionNameStatus } from '../../types';
import Mention, { UNKNOWN_USER_ID } from './';
import debug from '../../util/logger';
var ResourcedMention = /*#__PURE__*/function (_React$PureComponent) {
function ResourcedMention(_props) {
var _this;
_classCallCheck(this, ResourcedMention);
_this = _callSuper(this, ResourcedMention, [_props]);
_defineProperty(_this, "handleMentionProvider", function (props) {
var id = props.id,
mentionProvider = props.mentionProvider,
text = props.text;
if (mentionProvider) {
mentionProvider.then(function (provider) {
var newState = {
isHighlighted: provider.shouldHighlightMention({
id: id
})
};
if (!text && isResolvingMentionProvider(provider)) {
var nameDetail = provider.resolveMentionName(id);
if (isPromise(nameDetail)) {
nameDetail.then(function (nameDetailResult) {
_this.setStateSafely({
resolvedMentionName: _this.processName(nameDetailResult)
});
});
} else {
newState.resolvedMentionName = _this.processName(nameDetail);
}
}
_this.setStateSafely(newState);
}).catch(function () {
_this.setStateSafely({
isHighlighted: false
});
});
} else {
_this.setStateSafely({
isHighlighted: false
});
}
});
_this._isMounted = false;
_this.state = {
isHighlighted: false
};
return _this;
}
_inherits(ResourcedMention, _React$PureComponent);
return _createClass(ResourcedMention, [{
key: "componentDidMount",
value: function componentDidMount() {
this.handleMentionProvider(this.props);
this._isMounted = true;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var props = this.props;
if (props.id !== nextProps.id || props.mentionProvider !== nextProps.mentionProvider) {
this.handleMentionProvider(nextProps);
}
}
}, {
key: "setStateSafely",
value: function setStateSafely(newState) {
if (!this._isMounted) {
debug('[ResourcedMention]: cannot setState when component is unmounted.');
return;
}
this.setState(newState);
}
}, {
key: "processName",
value: function processName(name) {
var mentionName;
switch (name.status) {
case MentionNameStatus.OK:
mentionName = name.name || '';
break;
case MentionNameStatus.SERVICE_ERROR:
case MentionNameStatus.UNKNOWN:
default:
mentionName = UNKNOWN_USER_ID;
break;
}
return "@".concat(mentionName);
}
}, {
key: "render",
value: function render() {
var props = this.props,
state = this.state;
return /*#__PURE__*/React.createElement(Mention, {
id: props.id,
text: props.text || state.resolvedMentionName || '',
isHighlighted: state.isHighlighted,
accessLevel: props.accessLevel,
localId: props.localId,
onClick: props.onClick,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
ssrPlaceholderId: props.ssrPlaceholderId
});
}
}]);
}(React.PureComponent);
export { ResourcedMention as default };