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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { ArrowKeyNavigationType, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
export var LegacyPrimaryToolbarComponent = function LegacyPrimaryToolbarComponent(_ref) {
  var primaryToolbarItemExtensions = _ref.primaryToolbarItemExtensions;
  // NEXT PR: need to render a separator after – if there are extensions added
  return /*#__PURE__*/React.createElement(React.Fragment, null, primaryToolbarItemExtensions.map(function (toolbarItemExtension, _i) {
    var toolbarItem = toolbarItemExtension.getToolbarItem();
    return /*#__PURE__*/React.createElement(LegacyExtensionToolbarItem, {
      key: toolbarItem.tooltip,
      toolbarItem: toolbarItem
    });
  }));
};
export var LegacyExtensionToolbarItem = function LegacyExtensionToolbarItem(_ref2) {
  var toolbarItem = _ref2.toolbarItem,
    getMenuItems = _ref2.getMenuItems;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_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.createElement(ToolbarButton, {
      spacing: "default",
      disabled: isDisabled,
      selected: isOpen,
      title: tooltip,
      "aria-label": tooltip,
      "aria-expanded": isOpen,
      "aria-haspopup": true,
      onClick: onClick,
      iconBefore: /*#__PURE__*/React.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.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.createElement(DropdownMenu
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  , {
    arrowKeyNavigationProviderOptions: {
      type: 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.createElement(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.createElement(Icon, {
      label: tooltip
    })
  }));
};