@atlaskit/editor-plugin-layout/dist/esm/ui/LayoutColumnMenu/InsertColumnDropdownItem.js

Layout plugin for @atlaskit/editor-core

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';
var INSERT_COLUMN_OPTIONS = {
  left: {
    Icon: TableColumnAddLeftIcon,
    label: layoutMessages.addColumnLeft,
    side: 'left'
  },
  right: {
    Icon: TableColumnAddRightIcon,
    label: layoutMessages.addColumnRight,
    side: 'right'
  }
};
export var InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
  var api = _ref.api,
    side = _ref.side;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var _INSERT_COLUMN_OPTION = INSERT_COLUMN_OPTIONS[side],
    Icon = _INSERT_COLUMN_OPTION.Icon,
    label = _INSERT_COLUMN_OPTION.label;
  var shortcut = side === 'left' ? addColumnBefore : addColumnAfter;
  var selectedLayoutColumns = useSelectedLayoutColumns(api);
  var columnCount = (_selectedLayoutColumn = selectedLayoutColumns === null || selectedLayoutColumns === void 0 || (_selectedLayoutColumn2 = selectedLayoutColumns.layoutSectionNode) === null || _selectedLayoutColumn2 === void 0 ? void 0 : _selectedLayoutColumn2.childCount) !== null && _selectedLayoutColumn !== void 0 ? _selectedLayoutColumn : 0;
  var maxColumnCount = getEffectiveMaxLayoutColumns();
  var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
  var onClick = useCallback(function () {
    var _api$layout, _api$core;
    var insertCommand = api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.insertLayoutColumn({
      side: side,
      inputMethod: INPUT_METHOD.LAYOUT_COLUMN_MENU
    });
    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (props) {
      var _api$layout2;
      var 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 || (_api$layout2 = api.layout) === null || _api$layout2 === void 0 || _api$layout2.commands.toggleLayoutColumnMenu({
        isOpen: false
      })({
        tr: 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));
};