@wix/design-system/dist/cjs/MessageBoxMarketerialLayout/MessageBoxMarketerialLayout.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Text = _interopRequireDefault(require("../Text"));
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _Button = _interopRequireDefault(require("../Button"));
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _MessageBoxMarketerialLayoutSt = require("./MessageBoxMarketerialLayout.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MessageBoxMarketerialLayout/MessageBoxMarketerialLayout.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var buttonSkinByTheme = {
  blue: 'standard',
  purple: 'premium',
  white: 'dark'
};

/**
 * @deprecated MessageBoxMarketerialLayout is deprecated and will be removed in the next major version. Please use MessageModalLayout instead.
 */
var MessageBoxMarketerialLayout = /*#__PURE__*/function (_React$PureComponent) {
  function MessageBoxMarketerialLayout(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, MessageBoxMarketerialLayout);
    _this = _callSuper(this, MessageBoxMarketerialLayout, [props]);
    _this._renderButtons = function () {
      var _this$props = _this.props,
        primaryButtonLabel = _this$props.primaryButtonLabel,
        primaryButtonTheme = _this$props.primaryButtonTheme,
        primaryButtonNode = _this$props.primaryButtonNode,
        theme = _this$props.theme,
        onPrimaryButtonClick = _this$props.onPrimaryButtonClick,
        primaryButtonDisabled = _this$props.primaryButtonDisabled,
        secondaryButtonLabel = _this$props.secondaryButtonLabel,
        footerBottomChildren = _this$props.footerBottomChildren,
        onSecondaryButtonClick = _this$props.onSecondaryButtonClick;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.buttonsContainer, {
          noPadding: !primaryButtonNode && !primaryButtonLabel && !secondaryButtonLabel && !footerBottomChildren
        }),
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 125,
          columnNumber: 7
        }
      }, !!primaryButtonNode && /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": "primary-button-node",
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 135,
          columnNumber: 11
        }
      }, primaryButtonNode), !primaryButtonNode && primaryButtonLabel && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        skin: buttonSkinByTheme[primaryButtonTheme || theme],
        priority: !primaryButtonTheme && theme === 'white' ? 'secondary' : 'primary',
        onClick: onPrimaryButtonClick,
        dataHook: "primary-button",
        disabled: primaryButtonDisabled,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 138,
          columnNumber: 11
        }
      }, primaryButtonLabel), secondaryButtonLabel && !footerBottomChildren && /*#__PURE__*/_react["default"].createElement("div", {
        className: _MessageBoxMarketerialLayoutSt.classes.secondaryButtonContainer,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 151,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
        size: "small",
        onClick: onSecondaryButtonClick,
        dataHook: "secondary-button",
        weight: "normal",
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 152,
          columnNumber: 13
        }
      }, secondaryButtonLabel)));
    };
    (0, _deprecationLog["default"])('<MessageBoxMarketerialLayout/> is deprecated and will be removed in the next major version. Please use <MessageModalLayout/> instead.');
    return _this;
  }
  (0, _inherits2["default"])(MessageBoxMarketerialLayout, _React$PureComponent);
  return (0, _createClass2["default"])(MessageBoxMarketerialLayout, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        dataHook = _this$props2.dataHook,
        title = _this$props2.title,
        content = _this$props2.content,
        primaryButtonLabel = _this$props2.primaryButtonLabel,
        secondaryButtonLabel = _this$props2.secondaryButtonLabel,
        imageUrl = _this$props2.imageUrl,
        onClose = _this$props2.onClose,
        theme = _this$props2.theme,
        imageComponent = _this$props2.imageComponent,
        footerBottomChildren = _this$props2.footerBottomChildren,
        removeButtonsPadding = _this$props2.removeButtonsPadding,
        width = _this$props2.width,
        noBodyPadding = _this$props2.noBodyPadding;

      // instead of introducing a breaking change for padding removal for non buttons existence, we add this prop
      var shouldRemoveButtonsPadding = removeButtonsPadding && !primaryButtonLabel && !secondaryButtonLabel;
      var shouldDisplayBodyPadding = !noBodyPadding;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.root),
        style: {
          width: width
        },
        "data-hook": dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 51,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.header, {
          theme: theme,
          imageExists: !!imageComponent || !!imageUrl
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 52,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.close),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 58,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_CloseButton["default"], {
        dataHook: "close-button",
        size: "large",
        onClick: onClose,
        skin: "dark",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 59,
          columnNumber: 13
        }
      })), imageComponent ? /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.headerImageComponent),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 67,
          columnNumber: 13
        }
      }, imageComponent) : imageUrl ? /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.headerImage),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 71,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: imageUrl,
        "data-hook": "header-image",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 72,
          columnNumber: 15
        }
      })) : null), !title ? null : /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.title, {
          shouldDisplayBodyPadding: shouldDisplayBodyPadding
        }),
        "data-hook": "message-box-title",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 77,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
        size: "extraLarge",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 83,
          columnNumber: 13
        }
      }, title)), /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.content, {
          shouldDisplayBodyPadding: shouldDisplayBodyPadding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 86,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        size: "medium",
        weight: "thin",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 91,
          columnNumber: 11
        }
      }, content)), shouldRemoveButtonsPadding ? /*#__PURE__*/_react["default"].createElement("div", {
        className: _MessageBoxMarketerialLayoutSt.classes.emptyButtonsContainer,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 97,
          columnNumber: 11
        }
      }) : this._renderButtons(), footerBottomChildren ? /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": "footer-layout-bottom-children",
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.bottomChildren),
        children: footerBottomChildren,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 11
        }
      }) : null);
    }
  }]);
}(_react["default"].PureComponent);
MessageBoxMarketerialLayout.displayName = 'MessageBoxMarketerialLayout';
MessageBoxMarketerialLayout.defaultProps = {
  theme: 'blue',
  removeButtonsPadding: false,
  width: '600px',
  noBodyPadding: false
};
var _default = exports["default"] = MessageBoxMarketerialLayout;