@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
104 lines • 5.31 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { PureComponent } from 'react';
import tableCommands from '../../plugins/table/commands';
import ToolbarButton from '../ToolbarButton';
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
import Popup from '../Popup';
import { Toolbar } from './styles';
import DropdownMenu from '../DropdownMenu';
import { cut, copy, paste } from '../../keymaps';
import AdvanceMenuItem from './AdvanceMenuItem';
import { getShortcut } from './utils';
import { analyticsService as analytics } from '../../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', getShortcut(cut));
_this.addRecordToItems(items, 'Copy', getShortcut(copy));
_this.addRecordToItems(items, 'Paste', getShortcut(paste));
return [{ items: items }];
};
_this.addRecordToItems = function (items, content, shortcut) {
var value = content.toLowerCase();
items.push({
content: React.createElement(AdvanceMenuItem, { 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.trackEvent('atlassian.editor.format.table.cut.button');
tableCommands.cut()(editorView.state, editorView.dispatch);
break;
case 'copy':
analytics.trackEvent('atlassian.editor.format.table.copy.button');
tableCommands.copy()(editorView.state, editorView.dispatch);
break;
case 'paste':
analytics.trackEvent('atlassian.editor.format.table.paste.button');
tableCommands.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, { target: cellElement, offset: [0, 3], mountTo: popupsMountPoint, boundariesElement: popupsBoundariesElement, alignY: "top" },
React.createElement(Toolbar, null,
React.createElement(ToolbarButton, { onClick: this.handleRemove, iconBefore: React.createElement(RemoveIcon, { label: "Remove selected cells" }) }),
!advancedMenuDisabled && items[0].items.length > 0 &&
React.createElement(DropdownMenu, { items: items, isOpen: isOpen, onOpenChange: this.handleOpenChange, onItemActivated: this.onItemActivated, mountTo: popupsMountPoint, boundariesElement: popupsBoundariesElement, fitHeight: 188, fitWidth: 136 },
React.createElement(ToolbarButton, { selected: isOpen, onClick: this.toggleAdvancedMenu, iconBefore: React.createElement(EditorMoreIcon, { label: "Open or close advance menu" }) })))));
}
return null;
};
return TableFloatingToolbar;
}(PureComponent));
export default TableFloatingToolbar;
//# sourceMappingURL=index.js.map