UNPKG

@atlaskit/mention

Version:

A React component used to display user profiles in a list for 'Mention' functionality

132 lines (131 loc) 5.84 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; 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 _MentionResource = require("../../api/MentionResource"); var _types = require("../../types"); var _ = _interopRequireWildcard(require("./")); var _logger = _interopRequireDefault(require("../../util/logger")); function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); } 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 ResourcedMention = exports.default = /*#__PURE__*/function (_React$PureComponent) { function ResourcedMention(_props) { var _this; (0, _classCallCheck2.default)(this, ResourcedMention); _this = _callSuper(this, ResourcedMention, [_props]); (0, _defineProperty2.default)(_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 && (0, _MentionResource.isResolvingMentionProvider)(provider)) { var nameDetail = provider.resolveMentionName(id); if ((0, _types.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; } (0, _inherits2.default)(ResourcedMention, _React$PureComponent); return (0, _createClass2.default)(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) { (0, _logger.default)('[ResourcedMention]: cannot setState when component is unmounted.'); return; } this.setState(newState); } }, { key: "processName", value: function processName(name) { var mentionName; switch (name.status) { case _types.MentionNameStatus.OK: mentionName = name.name || ''; break; case _types.MentionNameStatus.SERVICE_ERROR: case _types.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.default.createElement(_.default, { 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.default.PureComponent);