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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className"],
    _excluded2 = ["dataHook"],
    _excluded3 = ["dataHook"];
import React, { useState, useCallback } from 'react';
import { st, classes } from './MessageModalLayout.st.css';
import BaseModalLayout from '../BaseModalLayout';
import PropTypes from 'prop-types';
import Button from '../Button';
/** MessageModalLayout */

var MessageModalLayout = function MessageModalLayout(_ref) {
  var children = _ref.children,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, _excluded);

  var illustration = restProps.illustration;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      showFooterDivider = _useState2[0],
      setShowFooterDivider = _useState2[1];

  var onContentScrollAreaChanged = 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.createElement(BaseModalLayout, _extends({}, restProps, {
    className: st(classes.root, {
      hasIllustration: hasIllustration
    }, className)
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.topAreaContainer
  }, /*#__PURE__*/React.createElement(BaseModalLayout.Illustration, null), /*#__PURE__*/React.createElement("div", {
    className: classes.contentAreaContainer
  }, /*#__PURE__*/React.createElement(BaseModalLayout.Header, null), /*#__PURE__*/React.createElement(BaseModalLayout.Content, {
    hideTopScrollDivider: hasIllustration,
    hideBottomScrollDivider: hasIllustration,
    scrollProps: {
      onScrollAreaChanged: hasIllustration && onContentScrollAreaChanged || null
    }
  }, children))), /*#__PURE__*/React.createElement(BaseModalLayout.Footer, {
    showFooterDivider: hasIllustration && showFooterDivider
  }), /*#__PURE__*/React.createElement(BaseModalLayout.Footnote, null));
};

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

  /** additional css classes */
  className: PropTypes.string,

  /** data hook for testing */
  dataHook: PropTypes.string,

  /** callback for when the close button is clicked */
  onCloseButtonClick: PropTypes.func,

  /** callback for when the help button is clicked */
  onHelpButtonClick: PropTypes.func,

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

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

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

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

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

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

  /** will determine the action buttons size*/
  actionsSize: Button.propTypes.size,

  /** a text for the primary action button */
  primaryButtonText: PropTypes.string,

  /** a callback for when the primary action button is clicked */
  primaryButtonOnClick: PropTypes.func,

  /** Passed to the primary action button as props without any filter / mutation */
  primaryButtonProps: function () {
    var _Button$propTypes = Button.propTypes,
        dataHook = _Button$propTypes.dataHook,
        buttonProps = _objectWithoutProperties(_Button$propTypes, _excluded2);

    return PropTypes.shape(buttonProps);
  }(),

  /** a text for the secondary action button */
  secondaryButtonText: PropTypes.string,

  /** callback for when the secondary action button is clicked */
  secondaryButtonOnClick: PropTypes.func,

  /** Passed to the secondary button as props without any filter / mutation */
  secondaryButtonProps: function () {
    var _Button$propTypes2 = Button.propTypes,
        dataHook = _Button$propTypes2.dataHook,
        buttonProps = _objectWithoutProperties(_Button$propTypes2, _excluded3);

    return PropTypes.shape(buttonProps);
  }(),

  /** side actions node, to be rendered as the first element on the same row as the action buttons */
  sideActions: PropTypes.node,

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

  /** a footnote node, to be rendered at the very bottom of the modal */
  footnote: PropTypes.node,

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

  /** The illustration src or the illustration node itself */
  illustration: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};
MessageModalLayout.defaultProps = {
  theme: 'standard',
  actionsSize: 'small'
};
export default MessageModalLayout;