@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
239 lines (236 loc) • 10.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MentionPickerWithAnalytics = exports.MentionPicker = 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 _compiled = require("@atlaskit/primitives/compiled");
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
var _react = _interopRequireDefault(require("react"));
var _reactIntlNext = require("react-intl-next");
var _analytics = require("../../util/analytics");
var _id = _interopRequireDefault(require("../../util/id"));
var _logger = _interopRequireDefault(require("../../util/logger"));
var _Popup = _interopRequireDefault(require("../Popup"));
var _ResourcedMentionList = _interopRequireDefault(require("../ResourcedMentionList"));
var _styles = require("./styles");
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; })(); }
/**
* @class MentionPicker
*/
var MentionPicker = exports.MentionPicker = /*#__PURE__*/function (_React$PureComponent) {
function MentionPicker(props) {
var _this;
(0, _classCallCheck2.default)(this, MentionPicker);
_this = _callSuper(this, MentionPicker, [props]);
(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;
});
/**
* Called after the 'visible' state is changed to decide whether the onOpen or onClose
* handlers should be called.
*
* It should be noted that the visible state of the component is not considered in
* this function. Instead the old state and new state should be passed as parameters.
*/
(0, _defineProperty2.default)(_this, "onFilterVisibilityChange", function (oldVisibility, newVisibility) {
if (oldVisibility !== newVisibility) {
if (newVisibility) {
if (_this.props.onOpen) {
_this.props.onOpen();
}
} else {
if (_this.props.onClose) {
_this.props.onClose();
}
}
}
});
// internal, used for callbacks
(0, _defineProperty2.default)(_this, "filterChange", function (mentions, query, stats) {
(0, _logger.default)('ak-mention-picker.filterChange', mentions.length);
var wasVisible = _this.state.visible;
var visible = mentions.length > 0;
_this.setState({
visible: visible
});
_this.onFilterVisibilityChange(wasVisible, visible);
(0, _analytics.fireAnalyticsMentionTypeaheadEvent)(_this.props)('rendered', stats && stats.duration, mentions.map(function (mention) {
return mention.id;
}), query);
});
(0, _defineProperty2.default)(_this, "filterError", function (error) {
(0, _logger.default)('ak-mention-picker.filterError', error);
var wasVisible = _this.state.visible;
_this.setState({
visible: true,
info: undefined
});
_this.onFilterVisibilityChange(wasVisible, true);
});
(0, _defineProperty2.default)(_this, "filterInfo", function (info) {
(0, _logger.default)('ak-mention-picker.filterInfo', info);
_this.setState({
info: info
});
});
(0, _defineProperty2.default)(_this, "handleMentionListRef", function (ref) {
_this.mentionListRef = ref;
});
_this.subscriberKey = (0, _id.default)('ak-mention-picker');
_this.state = {
visible: false
};
_this.applyPropChanges({}, props);
return _this;
}
(0, _inherits2.default)(MentionPicker, _React$PureComponent);
return (0, _createClass2.default)(MentionPicker, [{
key: "componentDidMount",
value: function componentDidMount() {
this.subscribeResourceProvider(this.props.resourceProvider);
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
this.applyPropChanges(this.props, nextProps);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unsubscribeResourceProvider(this.props.resourceProvider);
}
}, {
key: "applyPropChanges",
value:
// Internal
function applyPropChanges(prevProps, nextProps) {
var oldResourceProvider = prevProps.resourceProvider;
var newResourceProvider = nextProps.resourceProvider;
var resourceProviderChanged = oldResourceProvider !== newResourceProvider;
// resource provider
if (resourceProviderChanged) {
this.unsubscribeResourceProvider(oldResourceProvider);
this.subscribeResourceProvider(newResourceProvider);
}
}
}, {
key: "subscribeResourceProvider",
value: function subscribeResourceProvider(resourceProvider) {
if (resourceProvider) {
resourceProvider.subscribe(this.subscriberKey, this.filterChange, this.filterError, this.filterInfo, undefined);
}
}
}, {
key: "unsubscribeResourceProvider",
value: function unsubscribeResourceProvider(resourceProvider) {
if (resourceProvider) {
resourceProvider.unsubscribe(this.subscriberKey);
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
resourceProvider = _this$props.resourceProvider,
presenceProvider = _this$props.presenceProvider,
onSelection = _this$props.onSelection,
query = _this$props.query,
target = _this$props.target,
position = _this$props.position,
zIndex = _this$props.zIndex,
offsetX = _this$props.offsetX,
offsetY = _this$props.offsetY,
intl = _this$props.intl;
var _this$state = this.state,
visible = _this$state.visible,
info = _this$state.info;
var resourceMentionList = /*#__PURE__*/_react.default.createElement(_ResourcedMentionList.default, {
resourceProvider: resourceProvider,
presenceProvider: presenceProvider,
onSelection: onSelection,
query: query,
ref: this.handleMentionListRef
});
var infoContent = info && !visible ? /*#__PURE__*/_react.default.createElement(_styles.MentionPickerInfoStyle, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
as: "p"
}, info)) : null;
var content;
if (position) {
(0, _logger.default)('target, position', target, position);
if (target) {
content = /*#__PURE__*/_react.default.createElement(_Popup.default, {
target: target,
relativePosition: position,
zIndex: zIndex,
offsetX: offsetX,
offsetY: offsetY
}, /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
locale: (intl === null || intl === void 0 ? void 0 : intl.locale) || 'en'
}, /*#__PURE__*/_react.default.createElement("div", null, resourceMentionList, infoContent)));
} else {
// don't show if we have a position, but no target yet
content = null;
}
} else {
content = /*#__PURE__*/_react.default.createElement("div", null, resourceMentionList, infoContent);
}
return (
/*#__PURE__*/
/* old classnames are essential for Confluence tests */
_react.default.createElement(_styles.MentionPickerStyle
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: "ak-mention-picker",
visible: visible || info
}, content)
);
}
}]);
}(_react.default.PureComponent);
(0, _defineProperty2.default)(MentionPicker, "defaultProps", {
onSelection: function onSelection() {},
onOpen: function onOpen() {},
onClose: function onClose() {}
});
var MentionPickerWithIntl = (0, _reactIntlNext.injectIntl)(MentionPicker, {
forwardRef: true
});
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
var MentionPickerWithAnalytics = exports.MentionPickerWithAnalytics = (0, _withAnalyticsEvents.default)({})(MentionPickerWithIntl);
var _default = exports.default = MentionPickerWithAnalytics;