@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
230 lines (227 loc) • 9.95 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ResourcedMentionListWithoutAnalytics = 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 _analyticsNext = require("@atlaskit/analytics-next");
var _id = _interopRequireDefault(require("../../util/id"));
var _logger = _interopRequireDefault(require("../../util/logger"));
var _MentionList = _interopRequireDefault(require("../MentionList"));
var _analytics = require("../../util/analytics");
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; })(); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function applyPresence(mentions, presences) {
var updatedMentions = [];
for (var i = 0; i < mentions.length; i++) {
// Shallow copy
var mention = _objectSpread({}, mentions[i]);
var presence = presences[mention.id];
if (presence) {
mention.presence = presence;
}
updatedMentions.push(mention);
}
return updatedMentions;
}
function extractPresences(mentions) {
var presences = {};
for (var i = 0; i < mentions.length; i++) {
var mention = mentions[i];
if (mention.presence) {
presences[mention.id] = mention.presence;
}
}
return presences;
}
var ResourcedMentionListWithoutAnalytics = exports.ResourcedMentionListWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
function ResourcedMentionListWithoutAnalytics(props) {
var _this;
(0, _classCallCheck2.default)(this, ResourcedMentionListWithoutAnalytics);
_this = _callSuper(this, ResourcedMentionListWithoutAnalytics, [props]);
// API
(0, _defineProperty2.default)(_this, "selectNext", function () {
if (_this.mentionListRef) {
_this.mentionListRef.selectNext();
}
});
(0, _defineProperty2.default)(_this, "selectPrevious", function () {
if (_this.mentionListRef) {
_this.mentionListRef.selectPrevious();
}
});
(0, _defineProperty2.default)(_this, "selectIndex", function (index, callback) {
if (_this.mentionListRef) {
_this.mentionListRef.selectIndex(index, callback);
}
});
(0, _defineProperty2.default)(_this, "selectId", function (id, callback) {
if (_this.mentionListRef) {
_this.mentionListRef.selectId(id, callback);
}
});
(0, _defineProperty2.default)(_this, "chooseCurrentSelection", function () {
if (_this.mentionListRef) {
_this.mentionListRef.chooseCurrentSelection();
}
});
(0, _defineProperty2.default)(_this, "mentionsCount", function () {
if (_this.mentionListRef) {
return _this.mentionListRef.mentionsCount();
}
return 0;
});
// internal, used for callbacks
(0, _defineProperty2.default)(_this, "filterChange", function (mentions) {
// Retain known presence
var currentPresences = extractPresences(_this.state.mentions);
_this.setState({
resourceError: undefined,
mentions: applyPresence(mentions, currentPresences)
});
_this.refreshPresences(mentions);
});
(0, _defineProperty2.default)(_this, "sendAnalytics", function (event, actionSubject, action) {
if (event === _analytics.SLI_EVENT_TYPE) {
(0, _analytics.fireSliAnalyticsEvent)(_this.props)(actionSubject, action);
}
});
(0, _defineProperty2.default)(_this, "filterError", function (error) {
(0, _logger.default)('ak-resourced-mentions-list._filterError', error);
_this.setState({
resourceError: error
});
});
(0, _defineProperty2.default)(_this, "presenceUpdate", function (presences) {
_this.setState({
mentions: applyPresence(_this.state.mentions, presences)
});
});
(0, _defineProperty2.default)(_this, "notifySelection", function (mention) {
_this.props.resourceProvider.recordMentionSelection(mention);
if (_this.props.onSelection) {
_this.props.onSelection(mention);
}
});
(0, _defineProperty2.default)(_this, "handleMentionListRef", function (ref) {
_this.mentionListRef = ref;
});
_this.subscriberKey = (0, _id.default)('ak-resourced-mention-list');
_this.state = {
resourceError: undefined,
mentions: []
};
_this.applyPropChanges({}, props);
return _this;
}
(0, _inherits2.default)(ResourcedMentionListWithoutAnalytics, _React$PureComponent);
return (0, _createClass2.default)(ResourcedMentionListWithoutAnalytics, [{
key: "componentDidMount",
value: function componentDidMount() {
this.subscribeMentionProvider(this.props.resourceProvider);
this.subscribePresenceProvider(this.props.presenceProvider);
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
this.applyPropChanges(this.props, nextProps);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unsubscribeMentionProvider(this.props.resourceProvider);
this.unsubscribePresenceProvider(this.props.presenceProvider);
}
}, {
key: "subscribeMentionProvider",
value:
// internal
function subscribeMentionProvider(mentionProvider) {
if (mentionProvider) {
mentionProvider.subscribe(this.subscriberKey, this.filterChange, this.filterError, undefined, undefined, this.sendAnalytics);
}
}
}, {
key: "subscribePresenceProvider",
value: function subscribePresenceProvider(presenceProvider) {
if (presenceProvider) {
presenceProvider.subscribe(this.subscriberKey, this.presenceUpdate);
}
}
}, {
key: "unsubscribeMentionProvider",
value: function unsubscribeMentionProvider(mentionProvider) {
if (mentionProvider) {
mentionProvider.unsubscribe(this.subscriberKey);
}
}
}, {
key: "unsubscribePresenceProvider",
value: function unsubscribePresenceProvider(presenceProvider) {
if (presenceProvider) {
presenceProvider.unsubscribe(this.subscriberKey);
}
}
}, {
key: "applyPropChanges",
value: function applyPropChanges(prevProps, nextProps) {
var oldResourceProvider = prevProps.resourceProvider;
var oldPresenceProvider = prevProps.presenceProvider;
var oldQuery = prevProps.query;
var newResourceProvider = nextProps.resourceProvider;
var newPresenceProvider = nextProps.presenceProvider;
var newQuery = nextProps.query;
var resourceProviderChanged = oldResourceProvider !== newResourceProvider;
var queryChanged = oldQuery !== newQuery;
var canFilter = !!(typeof newQuery === 'string' && newResourceProvider);
var shouldFilter = canFilter && (queryChanged || resourceProviderChanged);
// resource provider
if (resourceProviderChanged) {
this.unsubscribeMentionProvider(oldResourceProvider);
this.subscribeMentionProvider(newResourceProvider);
}
// presence provider
if (oldPresenceProvider !== newPresenceProvider) {
this.unsubscribePresenceProvider(oldPresenceProvider);
this.subscribePresenceProvider(newPresenceProvider);
}
if (shouldFilter) {
newResourceProvider.filter(newQuery);
}
}
}, {
key: "refreshPresences",
value: function refreshPresences(mentions) {
if (this.props.presenceProvider) {
var ids = mentions.map(function (mention) {
return mention.id;
});
this.props.presenceProvider.refreshPresence(ids);
}
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
mentions = _this$state.mentions,
resourceError = _this$state.resourceError;
return /*#__PURE__*/_react.default.createElement(_MentionList.default, {
mentions: mentions,
resourceError: resourceError,
onSelection: this.notifySelection,
ref: this.handleMentionListRef
});
}
}]);
}(_react.default.PureComponent);
var ResourcedMentionList = (0, _analyticsNext.withAnalyticsEvents)({})(ResourcedMentionListWithoutAnalytics);
var _default = exports.default = ResourcedMentionList;