@atlaskit/editor-plugin-toolbar-lists-indentation/dist/cjs/ui/Toolbar.js

Toolbar lists and indentation plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toolbar = Toolbar;
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _listBulletedEditorBulletList = _interopRequireDefault(require("@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list"));
var _listNumberedEditorNumberList = _interopRequireDefault(require("@atlaskit/icon/core/migration/list-numbered--editor-number-list"));
var _textIndentLeftEditorOutdent = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-indent-left--editor-outdent"));
var _textIndentRightEditorIndent = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-indent-right--editor-indent"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

function Toolbar(props) {
  var _useIntl = (0, _reactIntlNext.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var indentButtonRef = (0, _react.useRef)(null);
  var outdentButtonRef = (0, _react.useRef)(null);
  var disabled = props.disabled,
    isReducedSpacing = props.isReducedSpacing,
    bulletListActive = props.bulletListActive,
    bulletListDisabled = props.bulletListDisabled,
    orderedListActive = props.orderedListActive,
    orderedListDisabled = props.orderedListDisabled,
    showIndentationButtons = props.showIndentationButtons,
    indentDisabled = props.indentDisabled,
    outdentDisabled = props.outdentDisabled,
    onItemActivated = props.onItemActivated,
    pluginInjectionApi = props.pluginInjectionApi;
  var labelUnorderedList = formatMessage(_messages.listMessages.unorderedList);
  var labelOrderedList = formatMessage(_messages.listMessages.orderedList);
  var labelListsFormat = formatMessage(_messages.listMessages.listsFormat);
  var indentMessage = formatMessage(_messages.indentationMessages.indent);
  var outdentMessage = formatMessage(_messages.indentationMessages.outdent);
  var isIndentButtonFocused = document.activeElement === indentButtonRef.current;
  var isOutdentButtonFocused = document.activeElement === outdentButtonRef.current;
  var handleOnItemActivated = function handleOnItemActivated(buttonName) {
    return function (event) {
      return onItemActivated({
        editorView: props.editorView,
        buttonName: buttonName
      });
    };
  };
  (0, _react.useEffect)(function () {
    if (isIndentButtonFocused && indentDisabled && outdentButtonRef.current) {
      outdentButtonRef.current.focus();
    }
  }, [indentButtonRef, indentDisabled, isIndentButtonFocused]);
  (0, _react.useEffect)(function () {
    if (isOutdentButtonFocused && outdentDisabled && indentButtonRef.current) {
      indentButtonRef.current.focus();
    }
  }, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
  return (
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    (0, _react2.jsx)("span", {
      css:
      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
      _styles.buttonGroupStyle :
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
      _styles.buttonGroupStyleBeforeVisualRefresh
    }, (0, _react2.jsx)("div", {
      role: "group",
      "aria-label": labelListsFormat
    }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
      buttonId: _uiMenu.TOOLBAR_BUTTON.BULLET_LIST,
      testId: labelUnorderedList,
      spacing: isReducedSpacing ? 'none' : 'default',
      onClick: handleOnItemActivated('bullet_list'),
      selected: bulletListActive,
      "aria-pressed": bulletListActive,
      "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleBulletList, labelUnorderedList),
      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleBulletList),
      disabled: bulletListDisabled || disabled,
      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
        description: labelUnorderedList,
        keymap: _keymaps.toggleBulletList
      }),
      iconBefore: (0, _react2.jsx)(_listBulletedEditorBulletList.default, {
        label: "",
        color: "currentColor",
        spacing: "spacious"
      })
    }), (0, _react2.jsx)(_uiMenu.ToolbarButton, {
      buttonId: _uiMenu.TOOLBAR_BUTTON.ORDERED_LIST,
      testId: labelOrderedList,
      spacing: isReducedSpacing ? 'none' : 'default',
      onClick: handleOnItemActivated('ordered_list'),
      selected: orderedListActive,
      "aria-pressed": orderedListActive,
      "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleOrderedList, labelOrderedList),
      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleOrderedList),
      disabled: orderedListDisabled || disabled,
      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
        description: labelOrderedList,
        keymap: _keymaps.toggleOrderedList
      }),
      iconBefore: (0, _react2.jsx)(_listNumberedEditorNumberList.default, {
        color: "currentColor",
        spacing: "spacious",
        label: ""
      })
    }), showIndentationButtons && (0, _react2.jsx)(_uiMenu.ToolbarButton, {
      buttonId: _uiMenu.TOOLBAR_BUTTON.OUTDENT,
      testId: _uiMenu.TOOLBAR_BUTTON.OUTDENT,
      ref: outdentButtonRef,
      spacing: isReducedSpacing ? 'none' : 'default',
      onClick: handleOnItemActivated('outdent'),
      iconBefore: (0, _react2.jsx)(_textIndentLeftEditorOutdent.default, {
        color: "currentColor",
        spacing: "spacious",
        label: ""
      }),
      disabled: outdentDisabled || disabled,
      "aria-label": (0, _keymaps.tooltip)(_keymaps.outdent, outdentMessage),
      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.outdent),
      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
        description: outdentMessage,
        keymap: _keymaps.outdent
      })
    }), showIndentationButtons && (0, _react2.jsx)(_uiMenu.ToolbarButton, {
      buttonId: _uiMenu.TOOLBAR_BUTTON.INDENT,
      testId: _uiMenu.TOOLBAR_BUTTON.INDENT,
      ref: indentButtonRef,
      spacing: isReducedSpacing ? 'none' : 'default',
      onClick: handleOnItemActivated('indent'),
      iconBefore: (0, _react2.jsx)(_textIndentRightEditorIndent.default, {
        color: "currentColor",
        spacing: "spacious",
        label: ""
      }),
      disabled: indentDisabled || disabled,
      "aria-label": (0, _keymaps.tooltip)(_keymaps.indent, indentMessage),
      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.indent),
      title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
        description: indentMessage,
        keymap: _keymaps.indent
      })
    })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    (0, _react2.jsx)("span", {
      css: _styles.separatorStyles
    }))
  );
}