@mskcc/carbon-react/lib/components/Loading/Loading.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var usePrefix = require('../../internal/usePrefix.js');
var deprecate = require('../../prop-types/deprecate.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function Loading(_ref) {
  let {
    active = true,
    className: customClassName,
    withOverlay = true,
    small = false,
    description = 'loading',
    ...rest
  } = _ref;
  const prefix = usePrefix.usePrefix();
  const loadingClassName = cx__default["default"](customClassName, {
    [`${prefix}--loading`]: true,
    [`${prefix}--loading--small`]: small,
    [`${prefix}--loading--stop`]: !active
  });
  const overlayClassName = cx__default["default"]({
    [`${prefix}--loading-overlay`]: true,
    [`${prefix}--loading-overlay--stop`]: !active
  });
  const loading = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
    "aria-atomic": "true",
    "aria-live": active ? 'assertive' : 'off',
    className: loadingClassName
  }), /*#__PURE__*/React__default["default"].createElement("svg", {
    className: `${prefix}--loading__svg`,
    viewBox: "0 0 100 100"
  }, /*#__PURE__*/React__default["default"].createElement("title", null, description), small ? /*#__PURE__*/React__default["default"].createElement("circle", {
    className: `${prefix}--loading__background`,
    cx: "50%",
    cy: "50%",
    r: "44"
  }) : null, /*#__PURE__*/React__default["default"].createElement("circle", {
    className: `${prefix}--loading__stroke`,
    cx: "50%",
    cy: "50%",
    r: "44"
  })));
  return withOverlay ? /*#__PURE__*/React__default["default"].createElement("div", {
    className: overlayClassName
  }, loading) : loading;
}
Loading.propTypes = {
  /**
   * Specify whether you want the loading indicator to be spinning or not
   */
  active: PropTypes__default["default"].bool,
  /**
   * Provide an optional className to be applied to the containing node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify a description that would be used to best describe the loading state
   */
  description: PropTypes__default["default"].string,
  /**
   * Provide an `id` to uniquely identify the label
   */
  id: deprecate["default"](PropTypes__default["default"].string, `\nThe prop \`id\` is no longer needed.`),
  /**
   * Specify whether you would like the small variant of <Loading>
   */
  small: PropTypes__default["default"].bool,
  /**
   * Specify whether you want the loader to be applied with an overlay
   */
  withOverlay: PropTypes__default["default"].bool
};

exports["default"] = Loading;