terra-overlay/lib/LoadingOverlay.js

The Overlay component is a component that creates an semi-transparent overlay screen that blocks interactions with the elements underneath the display. There are two types of overlays: fullscreen and relative to its container.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _IconSpinner = _interopRequireDefault(require("terra-icon/lib/icon/IconSpinner"));
var _reactIntl = require("react-intl");
var _Overlay = _interopRequireDefault(require("./Overlay"));
var _OverlayModule = _interopRequireDefault(require("./Overlay.module.scss"));
var _excluded = ["isAnimated", "message", "rootSelector"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
var cx = _bind.default.bind(_OverlayModule.default);
var BackgroundStyles = _Overlay.default.Opts.BackgroundStyles;
var propTypes = {
  /**
   * The visual theme to be applied to the overlay background. Accepts 'light', 'dark', and 'clear'.
   */
  backgroundStyle: _propTypes.default.oneOf(['light', 'dark', 'clear']),
  /**
   * Indicates if the icon spinner should be animated.
   */
  isAnimated: _propTypes.default.bool,
  /**
   * Indicates if the overlay is open.
   */
  isOpen: _propTypes.default.bool,
  /**
   * Indicates if the overlay is relative to the triggering container.
   */
  isRelativeToContainer: _propTypes.default.bool,
  /**
   * The message to be displayed within the overlay.
   */
  message: _propTypes.default.string,
  /**
   * Used to select the root mount DOM node. This is used to help prevent focus from shifting outside of the overlay when it is opened in a portal.
   */
  rootSelector: _propTypes.default.string,
  /**
  * Z-Index layer to apply to the ModalContent and ModalOverlay. Valid values are '100', '6000', '7000', '8000', or '9000'.
  */
  zIndex: _propTypes.default.oneOf(['100', '6000', '7000', '8000', '9000'])
};
var defaultProps = {
  isAnimated: false,
  isOpen: false,
  backgroundStyle: BackgroundStyles.LIGHT,
  isRelativeToContainer: false,
  rootSelector: '#root'
};
var LoadingOverlay = function LoadingOverlay(_ref) {
  var isAnimated = _ref.isAnimated,
    message = _ref.message,
    rootSelector = _ref.rootSelector,
    customProps = _objectWithoutProperties(_ref, _excluded);
  // eslint-disable-next-line no-param-reassign
  delete customProps.onRequestClose;
  return /*#__PURE__*/_react.default.createElement(_Overlay.default, _extends({}, customProps, {
    className: cx('loading-overlay', customProps.className),
    rootSelector: rootSelector,
    "aria-live": "polite"
  }), /*#__PURE__*/_react.default.createElement(_IconSpinner.default, {
    className: cx('icon'),
    isSpin: isAnimated,
    height: "36",
    width: "36"
  }), message !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
    className: cx('message')
  }, message) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
    id: "Terra.Overlay.loading"
  }, function (loadingMessage) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: cx('message')
    }, loadingMessage);
  }));
};
LoadingOverlay.propTypes = propTypes;
LoadingOverlay.defaultProps = defaultProps;
LoadingOverlay.Opts = _Overlay.default.Opts;
var _default = exports.default = LoadingOverlay;