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

Layout plugin for @atlaskit/editor-core

"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InsertColumnDropdownItem = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _actions = require("../../pm-plugins/actions");
var _useSelectedLayoutColumns = require("./useSelectedLayoutColumns");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var INSERT_COLUMN_OPTIONS = {
  left: {
    Icon: _editorToolbar.TableColumnAddLeftIcon,
    label: _messages.layoutMessages.addColumnLeft,
    side: 'left'
  },
  right: {
    Icon: _editorToolbar.TableColumnAddRightIcon,
    label: _messages.layoutMessages.addColumnRight,
    side: 'right'
  }
};
var InsertColumnDropdownItem = exports.InsertColumnDropdownItem = function InsertColumnDropdownItem(_ref) {
  var _selectedLayoutColumn, _selectedLayoutColumn2, _tooltip;
  var api = _ref.api,
    side = _ref.side;
  var _useIntl = (0, _reactIntl.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' ? _keymaps.addColumnBefore : _keymaps.addColumnAfter;
  var selectedLayoutColumns = (0, _useSelectedLayoutColumns.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 = (0, _actions.getEffectiveMaxLayoutColumns)();
  var canInsertColumn = selectedLayoutColumns !== undefined && columnCount < maxColumnCount;
  var onClick = (0, _react.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: _analytics.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut),
    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
      color: "currentColor",
      label: "",
      size: "small"
    }),
    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
      shortcut: (_tooltip = (0, _keymaps.tooltip)(shortcut)) !== null && _tooltip !== void 0 ? _tooltip : ''
    }),
    onClick: onClick
  }, formatMessage(label));
};