@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
108 lines • 4.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var mention_1 = require("@atlaskit/mention");
var React = require("react");
var react_1 = require("react");
var Popup_1 = require("../Popup");
var MentionPicker = (function (_super) {
tslib_1.__extends(MentionPicker, _super);
function MentionPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {};
_this.handlePluginStateChange = function (state) {
var anchorElement = state.anchorElement, query = state.query;
_this.setState({ anchorElement: anchorElement, query: query });
};
_this.handleMentionPickerRef = function (ref) {
_this.picker = ref;
};
_this.handleSelectedMention = function (mention) {
_this.pluginState.insertMention(mention);
};
_this.handleSelectPrevious = function () {
if (_this.picker) {
_this.picker.selectPrevious();
}
return true;
};
_this.handleSelectNext = function () {
if (_this.picker) {
_this.picker.selectNext();
}
return true;
};
_this.handleSelectCurrent = function () {
if (_this.getMentionsCount() > 0 && _this.picker) {
_this.picker.chooseCurrentSelection();
}
else {
_this.pluginState.dismiss();
}
return true;
};
return _this;
}
MentionPicker.prototype.componentWillMount = function () {
this.setPluginState(this.props);
};
MentionPicker.prototype.componentDidMount = function () {
this.resolveResourceProvider(this.props.mentionProvider);
};
MentionPicker.prototype.componentWillUnmount = function () {
var pluginState = this.pluginState;
if (pluginState) {
pluginState.unsubscribe(this.handlePluginStateChange);
}
};
MentionPicker.prototype.componentWillUpdate = function (nextProps) {
if (!this.pluginState) {
this.setPluginState(nextProps);
}
};
MentionPicker.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.mentionProvider !== this.props.mentionProvider) {
this.resolveResourceProvider(nextProps.mentionProvider);
}
};
MentionPicker.prototype.setPluginState = function (props) {
var editorView = props.editorView, pluginKey = props.pluginKey;
if (!editorView) {
return;
}
var pluginState = pluginKey.getState(editorView.state);
if (pluginState) {
this.pluginState = pluginState;
pluginState.subscribe(this.handlePluginStateChange);
pluginState.onSelectPrevious = this.handleSelectPrevious;
pluginState.onSelectNext = this.handleSelectNext;
pluginState.onSelectCurrent = this.handleSelectCurrent;
}
};
MentionPicker.prototype.resolveResourceProvider = function (resourceProvider) {
var _this = this;
if (resourceProvider) {
resourceProvider.then(function (mentionProvider) {
_this.setState({ mentionProvider: mentionProvider });
});
}
else {
this.setState({ mentionProvider: undefined });
}
};
MentionPicker.prototype.render = function () {
var _a = this.state, anchorElement = _a.anchorElement, query = _a.query, mentionProvider = _a.mentionProvider;
var _b = this.props, popupsBoundariesElement = _b.popupsBoundariesElement, popupsMountPoint = _b.popupsMountPoint, presenceProvider = _b.presenceProvider;
if (!anchorElement || query === undefined || !mentionProvider) {
return null;
}
return (React.createElement(Popup_1.default, { target: anchorElement, fitHeight: 300, fitWidth: 340, boundariesElement: popupsBoundariesElement, mountTo: popupsMountPoint, offset: [0, 3] },
React.createElement(mention_1.MentionPicker, { resourceProvider: mentionProvider, presenceProvider: presenceProvider, onSelection: this.handleSelectedMention, query: query, ref: this.handleMentionPickerRef })));
};
MentionPicker.prototype.getMentionsCount = function () {
return (this.picker && this.picker.mentionsCount()) || 0;
};
return MentionPicker;
}(react_1.PureComponent));
exports.default = MentionPicker;
//# sourceMappingURL=index.js.map