@helpscout/hsds-react/components/Modal/Modal.Body.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Scrollable = _interopRequireDefault(require("../Scrollable"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Modal = require("./Modal.css");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var ModalBody = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(ModalBody, _React$PureComponent);

  function ModalBody() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.node = void 0;
    _this.scrollableNode = void 0;

    _this.positionCloseNode = function () {
      if (_this.context.positionCloseNode) {
        _this.context.positionCloseNode(_this.scrollableNode);
      }
    };

    _this.setScrollableRef = function (node) {
      _this.scrollableNode = node;

      _this.props.scrollableRef(node);
    };

    _this.setNodeRef = function (node) {
      _this.node = node;

      _this.props.innerRef(node);
    };

    return _this;
  }

  var _proto = ModalBody.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.positionCloseNode();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.scrollableNode = null;
  };

  _proto.render = function render() {
    var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        isScrollLocked = _this$props.isScrollLocked,
        isSeamless = _this$props.isSeamless,
        onScroll = _this$props.onScroll,
        scrollable = _this$props.scrollable,
        scrollFade = _this$props.scrollFade,
        scrollableRef = _this$props.scrollableRef,
        version = _this$props.version,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "children", "isScrollLocked", "isSeamless", "onScroll", "scrollable", "scrollFade", "scrollableRef", "version"]); // version 2 should always render seamlessly
    // and allow a bottom fade for overflow content

    var v2 = version === 2;
    var seamless = isSeamless || v2;
    var fadeBottom = v2;
    var componentClassName = (0, _classnames.default)('c-ModalBody', v2 && 'v2', seamless && 'is-seamless', scrollable ? 'is-scrollable' : 'is-not-scrollable', className);
    var childrenContent = scrollable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollable.default, {
      className: "c-ModalBody__scrollable",
      contentClassName: "c-ModalBody__scrollableContent",
      fade: scrollFade,
      fadeBottom: fadeBottom,
      isScrollLocked: isScrollLocked,
      rounded: true,
      onScroll: onScroll,
      scrollableRef: this.setScrollableRef,
      children: children
    }) : children;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.BodyUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      ref: this.setNodeRef,
      children: childrenContent
    }));
  };

  return ModalBody;
}(_react.default.PureComponent);

ModalBody.displayName = 'ModalBody';
ModalBody.defaultProps = {
  'data-cy': 'ModalBody',
  innerRef: noop,
  isScrollLocked: true,
  isSeamless: false,
  onScroll: noop,
  scrollable: true,
  scrollableRef: noop,
  scrollFade: true,
  version: 1
};
ModalBody.contextTypes = {
  positionCloseNode: noop
};
ModalBody.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Whether to use `ScrollLock` or not. Default `true` */
  isScrollLocked: _propTypes.default.bool,

  /** Applies seamless styles to the component. */
  isSeamless: _propTypes.default.bool,

  /** Callback function when inner Scrollable is scrolled. */
  onScroll: _propTypes.default.func,

  /** Whether the content should be scrollable */
  scrollable: _propTypes.default.bool,

  /** Enables the upper fade-to-white styles. Default `true`. */
  scrollFade: _propTypes.default.bool,

  /** Retrieves the scrollable node. */
  scrollableRef: _propTypes.default.func,
  innerRef: _propTypes.default.func,

  /** Version of the Modal styles to apply (version 2 is the new standard, version 1 is legacy). */
  version: _propTypes.default.number,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = ModalBody;
exports.default = _default;