@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
73 lines • 3.23 kB
JavaScript
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { addColumnAfter, addColumnBefore, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
import { layoutMessages } from '@atlaskit/editor-common/messages';
import { TableColumnAddLeftIcon, TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
import { getEffectiveMaxLayoutColumns } from '../../pm-plugins/actions';
import { useSelectedLayoutColumns } from './useSelectedLayoutColumns';
const INSERT_COLUMN_OPTIONS = {
left: {
Icon: TableColumnAddLeftIcon,
label: layoutMessages.addColumnLeft,
side: 'left'
},
right: {
Icon: TableColumnAddRightIcon,
label: layoutMessages.addColumnRight,
side: 'right'
}
};
export const InsertColumnDropdownItem = ({
api,
side
}) => {
var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
const {
formatMessage
} = useIntl();
const {
Icon,
label
} = INSERT_COLUMN_OPTIONS[side];
const shortcut = side === 'left' ? addColumnBefore : addColumnAfter;
const selectedLayoutColumns = useSelectedLayoutColumns(api);
const columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 ? void 0 : (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
const maxColumnCount = getEffectiveMaxLayoutColumns();
const canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
const onClick = useCallback(() => {
var _api$layout, _api$core;
const insertCommand = api === null || api === void 0 ? void 0 : (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn({
side,
inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU
});
api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(props => {
var _api$layout2;
const tr = insertCommand === null || insertCommand === void 0 ? void 0 : insertCommand(props);
if (!tr) {
return tr !== null && tr !== void 0 ? tr : null;
}
api === null || api === void 0 ? void 0 : (_api$layout2 = api.layout) === null || _api$layout2 === void 0 ? void 0 : _api$layout2.commands.toggleLayoutColumnMenu({
isOpen: false
})({
tr
});
return tr;
});
}, [api, side]);
if (!canInsertColumn) {
return null;
}
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
ariaKeyshortcuts: getAriaKeyshortcuts(shortcut),
elemBefore: /*#__PURE__*/React.createElement(Icon, {
color: "currentColor",
label: "",
size: "small"
}),
elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
shortcut: (_tooltip = tooltip(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
}),
onClick: onClick
}, formatMessage(label));
};