@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
79 lines • 4.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var single_select_1 = require("@atlaskit/single-select");
var React = require("react");
var react_1 = require("react");
var remove_1 = require("@atlaskit/icon/glyph/editor/remove");
var styles_1 = require("./styles");
var languageList_1 = require("./languageList");
var LanguagePicker = (function (_super) {
tslib_1.__extends(LanguagePicker, _super);
function LanguagePicker(props) {
var _this = _super.call(this, props) || this;
_this.onLanguageSelectMouseDown = function (event) {
event.preventDefault();
_this.setState({
languageSelectFocused: true,
});
};
_this.resetLanguageSelectFocused = function (event) {
_this.setState({
languageSelectFocused: false,
});
};
_this.handlePluginStateChange = function (pluginState) {
var element = pluginState.element, language = pluginState.language, toolbarVisible = pluginState.toolbarVisible;
var supportedLanguages = _this.state.supportedLanguages;
var updatedLanguage = languageList_1.findMatchedLanguage(supportedLanguages, language);
_this.setState({
language: updatedLanguage,
element: element,
toolbarVisible: toolbarVisible,
});
if (language !== updatedLanguage) {
_this.props.pluginState.updateLanguage(updatedLanguage, _this.props.editorView);
}
};
_this.handleLanguageChange = function (language) {
_this.props.pluginState.updateLanguage(language.item.value, _this.props.editorView);
_this.setState({
toolbarVisible: true,
});
};
_this.handleRemoveCodeBlock = function () {
_this.props.pluginState.removeCodeBlock(_this.props.editorView);
};
_this.state = {
language: undefined,
toolbarVisible: false,
supportedLanguages: languageList_1.filterSupportedLanguages(props.pluginState.supportedLanguages)
};
return _this;
}
LanguagePicker.prototype.componentDidMount = function () {
this.props.pluginState.subscribe(this.handlePluginStateChange);
var supportedLanguages = this.state.supportedLanguages;
this.items = [{
'items': languageList_1.createLanguageList(supportedLanguages).map(function (language) { return ({ content: language, value: language }); })
}];
};
LanguagePicker.prototype.componentWillUnmount = function () {
this.props.pluginState.unsubscribe(this.handlePluginStateChange);
};
LanguagePicker.prototype.render = function () {
var _a = this.state, language = _a.language, element = _a.element, toolbarVisible = _a.toolbarVisible, languageSelectFocused = _a.languageSelectFocused;
var _b = this.props, popupsMountPoint = _b.popupsMountPoint, popupsBoundariesElement = _b.popupsBoundariesElement;
if (toolbarVisible || languageSelectFocused) {
return (React.createElement(styles_1.FloatingToolbar, { target: element, offset: [0, 3], popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement, fitHeight: 40 },
React.createElement("div", { tabIndex: 0, onMouseDown: this.onLanguageSelectMouseDown, onBlur: this.resetLanguageSelectFocused },
React.createElement(single_select_1.default, { id: "test", hasAutocomplete: true, shouldFocus: languageSelectFocused, items: this.items, onSelected: this.handleLanguageChange, defaultSelected: { content: language, value: language }, placeholder: "Select language" }),
React.createElement(styles_1.Separator, null),
React.createElement(styles_1.TrashToolbarButton, { onClick: this.handleRemoveCodeBlock, iconBefore: React.createElement(remove_1.default, { label: "Reset block type" }) }))));
}
return null;
};
return LanguagePicker;
}(react_1.PureComponent));
exports.default = LanguagePicker;
//# sourceMappingURL=index.js.map