wix-style-react/dist/src/MessageBoxMarketerialLayout/MessageBoxMarketerialLayout.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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 _MessageBoxMarketerialLayoutSt = require("./MessageBoxMarketerialLayout.st.css");
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/MessageBoxMarketerialLayout/MessageBoxMarketerialLayout.js";
var buttonSkinByTheme = {
  blue: 'standard',
  purple: 'premium',
  white: 'dark'
};
class MessageBoxMarketerialLayout extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._renderButtons = newColorsBranding => {
      var {
        primaryButtonLabel,
        primaryButtonTheme,
        primaryButtonNode,
        theme,
        onPrimaryButtonClick,
        primaryButtonDisabled,
        secondaryButtonLabel,
        footerBottomChildren,
        onSecondaryButtonClick
      } = this.props;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.buttonsContainer, {
          noPadding: newColorsBranding && !primaryButtonNode && !primaryButtonLabel && !secondaryButtonLabel && !footerBottomChildren,
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 134,
          columnNumber: 7
        }
      }, !!primaryButtonNode && /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": "primary-button-node",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 146,
          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: 149,
          columnNumber: 11
        }
      }, primaryButtonLabel), secondaryButtonLabel && !footerBottomChildren && /*#__PURE__*/_react.default.createElement("div", {
        className: _MessageBoxMarketerialLayoutSt.classes.secondaryButtonContainer,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 162,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
        size: "small",
        onClick: onSecondaryButtonClick,
        dataHook: "secondary-button",
        weight: newColorsBranding ? 'normal' : 'thin',
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 163,
          columnNumber: 13
        }
      }, secondaryButtonLabel)));
    };
  }
  render() {
    var {
      dataHook,
      title,
      content,
      primaryButtonLabel,
      secondaryButtonLabel,
      imageUrl,
      onClose,
      theme,
      imageComponent,
      footerBottomChildren,
      removeButtonsPadding,
      width,
      noBodyPadding
    } = this.props;

    // 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(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 41,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.root),
        style: {
          width
        },
        "data-hook": dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 43,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.header, {
          theme,
          imageExists: !!imageComponent || !!imageUrl,
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 48,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.close, {
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 55,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
        dataHook: "close-button",
        size: newColorsBranding ? 'large' : 'medium',
        onClick: onClose,
        skin: theme === 'white' || newColorsBranding ? 'dark' : 'lightFilled',
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 56,
          columnNumber: 17
        }
      })), imageComponent ? /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.headerImageComponent, {
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 68,
          columnNumber: 17
        }
      }, imageComponent) : imageUrl ? /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.headerImage, {
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 76,
          columnNumber: 17
        }
      }, /*#__PURE__*/_react.default.createElement("img", {
        src: imageUrl,
        "data-hook": "header-image",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 77,
          columnNumber: 19
        }
      })) : null), newColorsBranding && !title ? null : /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.title, {
          shouldDisplayBodyPadding,
          newColorsBranding
        }),
        "data-hook": "message-box-title",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 82,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
        size: "extraLarge",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89,
          columnNumber: 17
        }
      }, title)), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.content, {
          shouldDisplayBodyPadding,
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 92,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        size: "medium",
        weight: "thin",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 98,
          columnNumber: 15
        }
      }, content)), shouldRemoveButtonsPadding ? /*#__PURE__*/_react.default.createElement("div", {
        className: _MessageBoxMarketerialLayoutSt.classes.emptyButtonsContainer,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 104,
          columnNumber: 15
        }
      }) : this._renderButtons(newColorsBranding), footerBottomChildren ? /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": "footer-layout-bottom-children",
        className: (0, _MessageBoxMarketerialLayoutSt.st)(_MessageBoxMarketerialLayoutSt.classes.bottomChildren, {
          newColorsBranding
        }),
        children: footerBottomChildren,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 109,
          columnNumber: 15
        }
      }) : null);
    });
  }
}
MessageBoxMarketerialLayout.propTypes = {
  /** applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook: _propTypes.default.string,
  title: _propTypes.default.node.isRequired,
  content: _propTypes.default.node.isRequired,
  primaryButtonLabel: _propTypes.default.string,
  primaryButtonDisabled: _propTypes.default.bool,
  primaryButtonNode: _propTypes.default.node,
  secondaryButtonLabel: _propTypes.default.string,
  onPrimaryButtonClick: _propTypes.default.func,
  onSecondaryButtonClick: _propTypes.default.func,
  imageUrl: _propTypes.default.string,
  onClose: _propTypes.default.func.isRequired,
  imageComponent: _propTypes.default.node,
  footerBottomChildren: _propTypes.default.node,
  theme: _propTypes.default.oneOf(['blue', 'purple', 'white']),
  primaryButtonTheme: _propTypes.default.oneOf(['blue', 'purple']),
  removeButtonsPadding: _propTypes.default.bool,
  width: _propTypes.default.string,
  noBodyPadding: _propTypes.default.bool
};
MessageBoxMarketerialLayout.defaultProps = {
  theme: 'blue',
  removeButtonsPadding: false,
  width: '600px',
  noBodyPadding: false
};
var _default = exports.default = MessageBoxMarketerialLayout;
//# sourceMappingURL=MessageBoxMarketerialLayout.js.map