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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default from 'react';
import { usePrefix } from '../../internal/usePrefix.js';
import deprecate from '../../prop-types/deprecate.js';

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

export { Loading as default };