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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _AnnouncementModalLayoutSt = require("./AnnouncementModalLayout.st.css");

var _TextButton = _interopRequireDefault(require("../TextButton"));

var _constants = require("./constants");

var _BaseModalLayout = _interopRequireDefault(require("../BaseModalLayout"));

var _Button = _interopRequireDefault(require("../Button"));

var _excluded = ["children", "className"],
    _excluded2 = ["dataHook"],
    _excluded3 = ["dataHook"];

/** A layout for announcement modals, to be used inside a <Modal /> */
var AnnouncementModalLayout = function AnnouncementModalLayout(_ref) {
  var children = _ref.children,
      className = _ref.className,
      restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"], (0, _extends2["default"])({
    className: (0, _AnnouncementModalLayoutSt.st)(_AnnouncementModalLayoutSt.classes.announcementModalLayout, className)
  }, restProps), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Illustration, null), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Header, {
    titleAppearance: 'H2'
  }), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Content, {
    hideTopScrollDivider: true,
    hideBottomScrollDivider: true
  }, children), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Footer, null), /*#__PURE__*/_react["default"].createElement(Link, restProps), /*#__PURE__*/_react["default"].createElement("div", {
    className: _AnnouncementModalLayoutSt.classes.bottomSpacing
  }), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Footnote, null));
};

var Link = function Link(_ref2) {
  var linkText = _ref2.linkText,
      linkOnClick = _ref2.linkOnClick,
      theme = _ref2.theme;
  return (linkText || linkOnClick) && /*#__PURE__*/_react["default"].createElement("div", {
    className: _AnnouncementModalLayoutSt.classes.link
  }, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
    size: "small",
    weight: "normal",
    dataHook: _constants.dataHooks.link,
    onClick: linkOnClick,
    skin: theme
  }, linkText)) || null;
};

AnnouncementModalLayout.displayName = 'AnnouncementModalLayout';
AnnouncementModalLayout.propTypes = {
  /** ...BaseModalLayout.propTypes, */

  /** additional css classes */
  className: _propTypes["default"].string,

  /** data hook for testing */
  dataHook: _propTypes["default"].string,

  /** callback for when the close button is clicked */
  onCloseButtonClick: _propTypes["default"].func,

  /** callback for when the help button is clicked */
  onHelpButtonClick: _propTypes["default"].func,

  /** a global theme for the modal, will be applied as stylable state and will affect footer buttons skin */
  theme: _propTypes["default"].oneOf(['standard', 'premium']),

  /** ...Header.propTypes, */

  /** The modal's title */
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** The modal's subtitle */
  subtitle: _propTypes["default"].string,

  /** ...Content.propTypes, */

  /** the content you want to render in the modal, children passed directly will be treated as `content` as well */
  content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** ...Footer.propTypes, */

  /** will determine the action buttons size*/
  actionsSize: _Button["default"].propTypes.size,

  /** a text for the primary action button */
  primaryButtonText: _propTypes["default"].string,

  /** a callback for when the primary action button is clicked */
  primaryButtonOnClick: _propTypes["default"].func,

  /** Passed to the primary action button as props without any filter / mutation */
  primaryButtonProps: function () {
    var _Button$propTypes = _Button["default"].propTypes,
        dataHook = _Button$propTypes.dataHook,
        buttonProps = (0, _objectWithoutProperties2["default"])(_Button$propTypes, _excluded2);
    return _propTypes["default"].shape(buttonProps);
  }(),

  /** a text for the secondary action button */
  secondaryButtonText: _propTypes["default"].string,

  /** callback for when the secondary action button is clicked */
  secondaryButtonOnClick: _propTypes["default"].func,

  /** Passed to the secondary button as props without any filter / mutation */
  secondaryButtonProps: function () {
    var _Button$propTypes2 = _Button["default"].propTypes,
        dataHook = _Button$propTypes2.dataHook,
        buttonProps = (0, _objectWithoutProperties2["default"])(_Button$propTypes2, _excluded3);
    return _propTypes["default"].shape(buttonProps);
  }(),

  /** side actions node, to be rendered as the first element on the same row as the action buttons */
  sideActions: _propTypes["default"].node,

  /** ...Footnote.propTypes, */

  /** a footnote node, to be rendered at the very bottom of the modal */
  footnote: _propTypes["default"].node,

  /** ...Illustration.propTypes, */

  /** The illustration src or the illustration node itself */
  illustration: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** AnnouncementModalLayout */

  /** When not provided, the primary link will not be rendered */
  linkText: _propTypes["default"].string,

  /** callback for when the link is clicked */
  linkOnClick: _propTypes["default"].func
};
AnnouncementModalLayout.defaultProps = {
  theme: 'standard',
  actionsSize: 'medium'
};
var _default = AnnouncementModalLayout;
exports["default"] = _default;