terra-abstract-modal/lib/_ModalOverlay.js

The abstract modal is a structural component that provides the ability to display portal'd content in a layer above the app.

"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ModalOverlayModule = _interopRequireDefault(require("./ModalOverlay.module.scss"));
var _excluded = ["zIndex"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var cx = _bind.default.bind(_ModalOverlayModule.default);
var zIndexes = ['6000', '7000', '8000', '9000'];
var propTypes = {
  /**
   * Z-Index layer to apply to the ModalContent and ModalOverlay.
   */
  zIndex: _propTypes.default.oneOf(zIndexes)
};
var ModalOverlay = function ModalOverlay(props) {
  (0, _react.useEffect)(function () {
    var overflow = document.documentElement.style.overflow;
    // Disable scrolling on the page when Overlay is displayed
    document.documentElement.style.overflow = 'hidden';
    return function () {
      // Enable scrolling on the page since Overlay has gone away
      document.documentElement.style.overflow = overflow;
    };
  }, []);
  var zIndex = props.zIndex,
    customProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var theme = _react.default.useContext(_terraThemeContext.default);
  var overlayClassName = (0, _classnames.default)(cx('overlay', "layer-".concat(zIndex), theme.className), customProps.className);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, customProps, {
    className: overlayClassName
  }));
};
ModalOverlay.propTypes = propTypes;
var _default = exports.default = ModalOverlay;