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

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

import React, { useState } from 'react';
import { ArrowKeyNavigationType, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
export const LegacyPrimaryToolbarComponent = ({
  primaryToolbarItemExtensions
}) => {
  // NEXT PR: need to render a separator after – if there are extensions added
  return /*#__PURE__*/React.createElement(React.Fragment, null, primaryToolbarItemExtensions.map((toolbarItemExtension, _i) => {
    const toolbarItem = toolbarItemExtension.getToolbarItem();
    return /*#__PURE__*/React.createElement(LegacyExtensionToolbarItem, {
      key: toolbarItem.tooltip,
      toolbarItem: toolbarItem
    });
  }));
};
export const LegacyExtensionToolbarItem = ({
  toolbarItem,
  getMenuItems
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const {
    icon: Icon,
    tooltip,
    isDisabled,
    onClick,
    label: _label
  } = toolbarItem;
  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
      })
    });
  }
  const toggleOpen = () => {
    setIsOpen(prev => !prev);
  };
  const toggleOpenByKeyboard = event => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      toggleOpen();
    }
  };
  const handleItemActivated = ({
    item,
    shouldCloseMenu = true
  }) => {
    var _item$onClick;
    (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
    if (shouldCloseMenu) {
      setIsOpen(false);
    }
  };
  const handleOnOpenChange = attrs => {
    setIsOpen(!!(attrs !== null && attrs !== void 0 && attrs.isOpen));
  };
  const items = isOpen ?
  // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
  getMenuItems().map((menuItem, i) => {
    // Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
    if ('label' in menuItem && 'icon' in menuItem) {
      return {
        key: `menu-item-${i}`,
        content: menuItem.label,
        elemBefore: /*#__PURE__*/React.createElement(menuItem.icon, {
          label: menuItem.label
        }),
        onClick: () => {
          var _menuItem$onClick;
          (_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 ? 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(item => 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
    }],
    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
    })
  }));
};