@atlaskit/editor-core/dist/es2015/ui/MentionPicker/index.js

A package contains Atlassian editor core functionality

import * as tslib_1 from "tslib";
import { MentionPicker as AkMentionPicker } from '@atlaskit/mention';
import * as React from 'react';
import { PureComponent } from 'react';
import Popup from '../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, { target: anchorElement, fitHeight: 300, fitWidth: 340, boundariesElement: popupsBoundariesElement, mountTo: popupsMountPoint, offset: [0, 3] },
            React.createElement(AkMentionPicker, { 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;
}(PureComponent));
export default MentionPicker;
//# sourceMappingURL=index.js.map