@atlaskit/editor-plugin-selection-extension/dist/cjs/ui/LegacyToolbarComponent.js

editor-plugin-selection-extension plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LegacyPrimaryToolbarComponent = exports.LegacyExtensionToolbarItem = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
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 LegacyPrimaryToolbarComponent = exports.LegacyPrimaryToolbarComponent = function LegacyPrimaryToolbarComponent(_ref) {
  var primaryToolbarItemExtensions = _ref.primaryToolbarItemExtensions;
  // NEXT PR: need to render a separator after – if there are extensions added
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, primaryToolbarItemExtensions.map(function (toolbarItemExtension, _i) {
    var toolbarItem = toolbarItemExtension.getToolbarItem();
    return /*#__PURE__*/_react.default.createElement(LegacyExtensionToolbarItem, {
      key: toolbarItem.tooltip,
      toolbarItem: toolbarItem
    });
  }));
};
var LegacyExtensionToolbarItem = exports.LegacyExtensionToolbarItem = function LegacyExtensionToolbarItem(_ref2) {
  var toolbarItem = _ref2.toolbarItem,
    getMenuItems = _ref2.getMenuItems;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var Icon = toolbarItem.icon,
    tooltip = toolbarItem.tooltip,
    isDisabled = toolbarItem.isDisabled,
    onClick = toolbarItem.onClick,
    _label = toolbarItem.label;
  if (!getMenuItems) {
    return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
      spacing: "default",
      disabled: isDisabled,
      selected: isOpen,
      title: tooltip,
      "aria-label": tooltip,
      "aria-expanded": isOpen,
      "aria-haspopup": true,
      onClick: onClick,
      iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
        label: tooltip
      })
    });
  }
  var toggleOpen = function toggleOpen() {
    setIsOpen(function (prev) {
      return !prev;
    });
  };
  var toggleOpenByKeyboard = function toggleOpenByKeyboard(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      toggleOpen();
    }
  };
  var handleItemActivated = function handleItemActivated(_ref3) {
    var _item$onClick;
    var item = _ref3.item,
      _ref3$shouldCloseMenu = _ref3.shouldCloseMenu,
      shouldCloseMenu = _ref3$shouldCloseMenu === void 0 ? true : _ref3$shouldCloseMenu;
    (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
    if (shouldCloseMenu) {
      setIsOpen(false);
    }
  };
  var handleOnOpenChange = function handleOnOpenChange(attrs) {
    setIsOpen(!!(attrs !== null && attrs !== void 0 && attrs.isOpen));
  };
  var items = isOpen ?
  // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
  getMenuItems().map(function (menuItem, i) {
    // Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
    if ('label' in menuItem && 'icon' in menuItem) {
      return {
        key: "menu-item-".concat(i),
        content: menuItem.label,
        elemBefore: /*#__PURE__*/_react.default.createElement(menuItem.icon, {
          label: menuItem.label
        }),
        onClick: function onClick() {
          var _menuItem$onClick;
          (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 || _menuItem$onClick.call(menuItem);
          // NEXT PR: here we need to set the active extension so the contentComponent can render
          // menuItem.contentComponent
        },
        isDisabled: menuItem.isDisabled,
        'aria-label': menuItem.label,
        value: {
          name: menuItem.label
        }
      };
    }
    return undefined;
  }).filter(function (item) {
    return item !== undefined;
  }) : [];
  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  , {
    arrowKeyNavigationProviderOptions: {
      type: _uiMenu.ArrowKeyNavigationType.MENU
    }
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    items: [{
      items: items
    }],
    isOpen: isOpen,
    onItemActivated: handleItemActivated,
    onOpenChange: handleOnOpenChange,
    fitWidth: 200
  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
    spacing: "default",
    disabled: isDisabled,
    selected: isOpen,
    title: tooltip,
    "aria-label": tooltip,
    "aria-expanded": isOpen,
    "aria-haspopup": true,
    onClick: toggleOpen,
    onKeyDown: toggleOpenByKeyboard,
    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
      label: tooltip
    })
  }));
};