@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
106 lines • 5.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var commands_1 = require("../../plugins/table/commands");
var ToolbarButton_1 = require("../ToolbarButton");
var remove_1 = require("@atlaskit/icon/glyph/editor/remove");
var more_1 = require("@atlaskit/icon/glyph/editor/more");
var Popup_1 = require("../Popup");
var styles_1 = require("./styles");
var DropdownMenu_1 = require("../DropdownMenu");
var keymaps_1 = require("../../keymaps");
var AdvanceMenuItem_1 = require("./AdvanceMenuItem");
var utils_1 = require("./utils");
var analytics_1 = require("../../analytics");
var TableFloatingToolbar = (function (_super) {
tslib_1.__extends(TableFloatingToolbar, _super);
function TableFloatingToolbar() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: false,
cutDisabled: false,
copyDisabled: false,
pasteDisabled: false,
// disabled for the first version of tables
advancedMenuDisabled: true
};
_this.toggleAdvancedMenu = function () {
_this.handleOpenChange({ isOpen: !_this.state.isOpen });
};
_this.handleOpenChange = function (_a) {
var isOpen = _a.isOpen;
_this.setState({ isOpen: isOpen });
};
_this.createItems = function () {
var items = [];
_this.addRecordToItems(items, 'Cut', utils_1.getShortcut(keymaps_1.cut));
_this.addRecordToItems(items, 'Copy', utils_1.getShortcut(keymaps_1.copy));
_this.addRecordToItems(items, 'Paste', utils_1.getShortcut(keymaps_1.paste));
return [{ items: items }];
};
_this.addRecordToItems = function (items, content, shortcut) {
var value = content.toLowerCase();
items.push({
content: React.createElement(AdvanceMenuItem_1.default, { content: content, elemAfter: shortcut }),
isDisabled: _this.state[value + "Disabled"],
value: value,
});
};
_this.onItemActivated = function (_a) {
var item = _a.item;
var editorView = _this.props.editorView;
switch (item.value) {
case 'cut':
analytics_1.analyticsService.trackEvent('atlassian.editor.format.table.cut.button');
commands_1.default.cut()(editorView.state, editorView.dispatch);
break;
case 'copy':
analytics_1.analyticsService.trackEvent('atlassian.editor.format.table.copy.button');
commands_1.default.copy()(editorView.state, editorView.dispatch);
break;
case 'paste':
analytics_1.analyticsService.trackEvent('atlassian.editor.format.table.paste.button');
commands_1.default.paste()(editorView.state, editorView.dispatch);
break;
}
};
_this.handlePluginStateChange = function (pluginState) {
var cellElement = pluginState.cellElement, cellSelection = pluginState.cellSelection;
_this.setState({ cellElement: cellElement, cellSelection: cellSelection });
};
_this.handleRemove = function () {
_this.props.pluginState.remove();
};
return _this;
}
TableFloatingToolbar.prototype.componentDidMount = function () {
this.props.pluginState.subscribe(this.handlePluginStateChange);
};
TableFloatingToolbar.prototype.componentWillUnmount = function () {
this.props.pluginState.unsubscribe(this.handlePluginStateChange);
};
TableFloatingToolbar.prototype.componentDidUpdate = function () {
if (!this.state.cellElement) {
this.handleOpenChange({ isOpen: false });
}
};
TableFloatingToolbar.prototype.render = function () {
var _a = this.state, cellElement = _a.cellElement, isOpen = _a.isOpen, advancedMenuDisabled = _a.advancedMenuDisabled;
var _b = this.props, popupsMountPoint = _b.popupsMountPoint, popupsBoundariesElement = _b.popupsBoundariesElement;
var items = this.createItems();
if (cellElement) {
return (React.createElement(Popup_1.default, { target: cellElement, offset: [0, 3], mountTo: popupsMountPoint, boundariesElement: popupsBoundariesElement, alignY: "top" },
React.createElement(styles_1.Toolbar, null,
React.createElement(ToolbarButton_1.default, { onClick: this.handleRemove, iconBefore: React.createElement(remove_1.default, { label: "Remove selected cells" }) }),
!advancedMenuDisabled && items[0].items.length > 0 &&
React.createElement(DropdownMenu_1.default, { items: items, isOpen: isOpen, onOpenChange: this.handleOpenChange, onItemActivated: this.onItemActivated, mountTo: popupsMountPoint, boundariesElement: popupsBoundariesElement, fitHeight: 188, fitWidth: 136 },
React.createElement(ToolbarButton_1.default, { selected: isOpen, onClick: this.toggleAdvancedMenu, iconBefore: React.createElement(more_1.default, { label: "Open or close advance menu" }) })))));
}
return null;
};
return TableFloatingToolbar;
}(react_1.PureComponent));
exports.default = TableFloatingToolbar;
//# sourceMappingURL=index.js.map