@atlaskit/editor-plugin-alignment/dist/cjs/ui/Toolbar/AlignmentMenu.js

Alignment plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AlignmentMenu = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _alignment = require("@atlaskit/editor-common/alignment");
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
var _toolbarDropdownMenu = require("@atlaskit/editor-toolbar/toolbar-dropdown-menu");
var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip");
var _options = require("./options");
var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref) {
  var children = _ref.children,
    api = _ref.api;
  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['alignment'], function (states) {
      var _states$alignmentStat, _states$alignmentStat2;
      return {
        align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align,
        isEnabled: (_states$alignmentStat2 = states.alignmentState) === null || _states$alignmentStat2 === void 0 ? void 0 : _states$alignmentStat2.isEnabled
      };
    }),
    _useSharedPluginState2 = _useSharedPluginState.align,
    align = _useSharedPluginState2 === void 0 ? 'start' : _useSharedPluginState2,
    isEnabled = _useSharedPluginState.isEnabled;
  var Icon = (0, _options.alignmentOptions)()[align].icon;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var title = formatMessage(_alignment.alignmentMessages.alignment);
  return /*#__PURE__*/_react.default.createElement(_toolbarDropdownMenu.ToolbarDropdownMenu, {
    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
      label: "",
      size: "small",
      testId: "text-alignment-menu-".concat(align, "-icon")
    }),
    isDisabled: !isEnabled,
    testId: "text-alignment-menu",
    label: title,
    tooltipComponent: /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
      content: title
    })
  }, children);
};