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

Card plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _Button = _interopRequireDefault(require("@atlaskit/editor-common/FloatingToolbar/Button"));
var _Separator = _interopRequireDefault(require("@atlaskit/editor-common/FloatingToolbar/Separator"));
var _card = require("@atlaskit/editor-common/messages/card");
var _linkToolbar = require("@atlaskit/editor-common/messages/link-toolbar");
var _types = require("@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider/types");
var _DropdownContainer = require("@atlaskit/editor-common/ui-menu/DropdownContainer");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
var _flex = require("@atlaskit/primitives/compiled/flex");
var _utils = require("../../pm-plugins/utils");
var _editDatasourceAction = require("../editDatasourceAction");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var dropdownExpandContainer = (0, _react2.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 = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var containerRef = (0, _react.useRef)();
  var toggleOpen = function toggleOpen() {
    return setIsOpen(function (open) {
      return !open;
    });
  };
  var onClose = function onClose() {
    return setIsOpen(false);
  };
  var onEditLink = (0, _react.useCallback)(function () {
    if (editorView) {
      onLinkEditClick(editorView.state, editorView.dispatch);
      (0, _utils.focusEditorView)(editorView);
    }
  }, [editorView, onLinkEditClick]);
  var onEditDatasource = (0, _react.useCallback)(function () {
    if (editorView && datasourceId) {
      (0, _editDatasourceAction.editDatasource)(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
      (0, _utils.focusEditorView)(editorView);
    }
  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
  var icon = areAnyNewToolbarFlagsEnabled ? (0, _react2.jsx)(_edit.default, {
    label: ""
  }) : undefined;
  var tooltipContent = areAnyNewToolbarFlagsEnabled ? intl.formatMessage(_linkToolbar.linkToolbarMessages.editLink) : undefined;
  switch (editVariant) {
    case 'edit-link':
      {
        return (0, _react2.jsx)(_flex.Flex, {
          gap: "space.050"
        }, (0, _react2.jsx)(_Button.default, {
          testId: "edit-link",
          onClick: onEditLink,
          icon: icon,
          ariaLabel: areAnyNewToolbarFlagsEnabled ? intl.formatMessage(_linkToolbar.linkToolbarMessages.editLink) : undefined,
          tooltipContent: tooltipContent,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, !areAnyNewToolbarFlagsEnabled && (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _linkToolbar.linkToolbarMessages.editLink)), !areAnyNewToolbarFlagsEnabled && (0, _react2.jsx)(_Separator.default, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-datasource':
      {
        return (0, _react2.jsx)(_flex.Flex, {
          gap: "space.050"
        }, (0, _react2.jsx)(_Button.default, {
          testId: "edit-datasource",
          tooltipContent: intl.formatMessage(_linkToolbar.linkToolbarMessages.editDatasourceStandaloneTooltip),
          onClick: onEditDatasource,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _linkToolbar.linkToolbarMessages.editDatasourceStandalone)), !areAnyNewToolbarFlagsEnabled && (0, _react2.jsx)(_Separator.default, {
          areAnyNewToolbarFlagsEnabled: false
        }));
      }
    case 'edit-dropdown':
      {
        var trigger = (0, _react2.jsx)(_flex.Flex, {
          gap: "space.050"
        }, (0, _react2.jsx)(_Button.default, {
          testId: "edit-dropdown-trigger",
          iconAfter: (0, _react2.jsx)("span", {
            css: dropdownExpandContainer
          }, (0, _react2.jsx)(_chevronDown.default, {
            label: intl.formatMessage(_card.messages.editDropdownTriggerTitle),
            size: "small"
          })),
          onClick: toggleOpen,
          selected: isOpen,
          disabled: false,
          ariaHasPopup: true,
          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _card.messages.editDropdownTriggerTitle)), !areAnyNewToolbarFlagsEnabled && (0, _react2.jsx)(_Separator.default, {
          areAnyNewToolbarFlagsEnabled: false
        }));
        return (0, _react2.jsx)(_flex.Flex, {
          ref: containerRef
        }, (0, _react2.jsx)(_DropdownContainer.DropdownContainer, {
          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: _types.ArrowKeyNavigationType.MENU
          }
        }, (0, _react2.jsx)(_buttonItem.default, {
          key: "edit.link",
          onClick: onEditLink,
          testId: "edit-dropdown-edit-link-item"
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _card.messages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_buttonItem.default, {
          key: "edit.datasource",
          onClick: onEditDatasource,
          testId: "edit-dropdown-edit-datasource-item"
        }, (0, _react2.jsx)(_reactIntl.FormattedMessage
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
        , _card.messages.editDropdownEditDatasourceTitle))));
      }
    case 'none':
    default:
      return null;
  }
};
var _default = exports.default = EditToolbarButtonPresentation;