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

wix-style-react

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

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

var _MessageModalLayoutSt = require("./MessageModalLayout.st.css");

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

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

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

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/** MessageModalLayout */
var MessageModalLayout = function MessageModalLayout(_ref) {
  var children = _ref.children,
      className = _ref.className,
      restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var illustration = restProps.illustration;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      showFooterDivider = _useState2[0],
      setShowFooterDivider = _useState2[1];

  var onContentScrollAreaChanged = (0, _react.useCallback)(function (_ref2) {
    var area = _ref2.area;
    var scrollArea = area.y;
    var newShowDivider = scrollArea === 'top' || scrollArea === 'middle';
    setShowFooterDivider(newShowDivider);
  }, []);
  var hasIllustration = !!illustration;
  return /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"], (0, _extends2["default"])({}, restProps, {
    className: (0, _MessageModalLayoutSt.st)(_MessageModalLayoutSt.classes.root, {
      hasIllustration: hasIllustration
    }, className)
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: _MessageModalLayoutSt.classes.topAreaContainer
  }, /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Illustration, null), /*#__PURE__*/_react["default"].createElement("div", {
    className: _MessageModalLayoutSt.classes.contentAreaContainer
  }, /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Header, null), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Content, {
    hideTopScrollDivider: hasIllustration,
    hideBottomScrollDivider: hasIllustration,
    scrollProps: {
      onScrollAreaChanged: hasIllustration && onContentScrollAreaChanged || null
    }
  }, children))), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Footer, {
    showFooterDivider: hasIllustration && showFooterDivider
  }), /*#__PURE__*/_react["default"].createElement(_BaseModalLayout["default"].Footnote, null));
};

MessageModalLayout.displayName = 'MessageModalLayout';
MessageModalLayout.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', 'destructive']),

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

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

  /** ...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])
};
MessageModalLayout.defaultProps = {
  theme: 'standard',
  actionsSize: 'small'
};
var _default = MessageModalLayout;
exports["default"] = _default;