@atlaskit/editor-common/dist/cjs/resizer/ResizerBreakoutModeLabel.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ResizerBreakoutModeLabel = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _primitives = require("@atlaskit/primitives");
var _messages = require("../messages");
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss

var fullWidthLabelWrapperStyles = (0, _primitives.xcss)({
  height: "var(--ds-space-400, 32px)",
  display: 'flex',
  backgroundColor: 'elevation.surface.overlay',
  borderRadius: 'radius.small',
  boxShadow: 'elevation.shadow.overlay',
  boxSizing: 'border-box',
  alignItems: 'center'
});
var fullWidthLabelStyles = (0, _primitives.xcss)({
  marginLeft: 'space.100',
  marginRight: 'space.100',
  paddingLeft: 'space.075',
  paddingRight: 'space.075',
  paddingTop: 'space.050',
  paddingBottom: 'space.050'
});
var ResizerBreakoutModeLabel = exports.ResizerBreakoutModeLabel = function ResizerBreakoutModeLabel(_ref) {
  var breakoutLayout = _ref.layout;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var message = _react.default.useMemo(function () {
    switch (breakoutLayout) {
      case 'max':
        return formatMessage(_messages.breakoutMessages.maxWidthLabel);
      case 'full-width':
        return formatMessage(_messages.breakoutMessages.fullWidthLabel);
      case 'wide':
        return formatMessage(_messages.breakoutMessages.wideWidthLabel);
      default:
        return null;
    }
  }, [breakoutLayout, formatMessage]);
  return message && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
    testId: "resizer-breakout-mode-label",
    xcss: fullWidthLabelWrapperStyles
  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
    xcss: fullWidthLabelStyles
  }, message));
};