@atlaskit/editor-plugin-card/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js

Card plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback, useRef, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl-next';
import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import EditIcon from '@atlaskit/icon/core/edit';
import { ButtonItem } from '@atlaskit/menu';
import { Flex } from '@atlaskit/primitives/compiled';
import { focusEditorView } from '../../pm-plugins/utils';
import { editDatasource } from '../editDatasourceAction';
var dropdownExpandContainer = css({
  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
});
var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref) {
  var datasourceId = _ref.datasourceId,
    currentAppearance = _ref.currentAppearance,
    editorAnalyticsApi = _ref.editorAnalyticsApi,
    editVariant = _ref.editVariant,
    editorView = _ref.editorView,
    extensionKey = _ref.extensionKey,
    onLinkEditClick = _ref.onLinkEditClick,
    intl = _ref.intl,
    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var containerRef = useRef();
  var toggleOpen = function toggleOpen() {
    return setIsOpen(function (open) {
      return !open;
    });
  };
  var onClose = function onClose() {
    return setIsOpen(false);
  };
  var onEditLink = useCallback(function () {
    if (editorView) {
      onLinkEditClick(editorView.state, editorView.dispatch);
      focusEditorView(editorView);
    }
  }, [editorView, onLinkEditClick]);
  var onEditDatasource = useCallback(function () {
    if (editorView && datasourceId) {
      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
      focusEditorView(editorView);
    }
  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
  var icon = areAnyNewToolbarFlagsEnabled ? jsx(EditIcon, {
    label: ""
  }) : undefined;
  var tooltipContent = areAnyNewToolbarFlagsEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
  switch (editVariant) {
    case 'edit-link':
      {
        return jsx(Flex, {
          gap: "space.050"
        }, jsx(Button, {
          testId: "edit-link",
          onClick: onEditLink,
          icon: icon,
          tooltipContent: tooltipContent,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, !areAnyNewToolbarFlagsEnabled && jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , linkToolbarMessages.editLink)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-datasource':
      {
        return jsx(Flex, {
          gap: "space.050"
        }, jsx(Button, {
          testId: "edit-datasource",
          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
          onClick: onEditDatasource,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , linkToolbarMessages.editDatasourceStandalone)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-dropdown':
      {
        var trigger = jsx(Flex, {
          gap: "space.050"
        }, jsx(Button, {
          testId: "edit-dropdown-trigger",
          iconAfter: jsx("span", {
            css: dropdownExpandContainer
          }, jsx(ChevronDownIcon, {
            label: intl.formatMessage(messages.editDropdownTriggerTitle),
            size: "small"
          })),
          onClick: toggleOpen,
          selected: isOpen,
          disabled: false,
          ariaHasPopup: true,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , messages.editDropdownTriggerTitle)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
          areAnyNewToolbarFlagsEnabled: false
        }));
        return jsx(Flex, {
          ref: containerRef
        }, jsx(UiDropdown, {
          mountTo: containerRef.current,
          isOpen: isOpen,
          handleClickOutside: onClose,
          handleEscapeKeydown: onClose,
          trigger: trigger,
          scrollableElement: containerRef.current
          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
          ,
          arrowKeyNavigationProviderOptions: {
            type: ArrowKeyNavigationType.MENU
          }
        }, jsx(ButtonItem, {
          key: "edit.link",
          onClick: onEditLink,
          testId: "edit-dropdown-edit-link-item"
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
          key: "edit.datasource",
          onClick: onEditDatasource,
          testId: "edit-dropdown-edit-datasource-item"
        }, jsx(FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , messages.editDropdownEditDatasourceTitle))));
      }
    case 'none':
    default:
      return null;
  }
};
export default EditToolbarButtonPresentation;