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

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

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

function Loading({
  active = true,
  className: customClassName,
  withOverlay = true,
  small = false,
  description = 'loading',
  ...rest
}) {
  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.createElement("div", _extends({}, rest, {
    "aria-atomic": "true",
    "aria-live": active ? 'assertive' : 'off',
    className: loadingClassName
  }), /*#__PURE__*/React.createElement("svg", {
    className: `${prefix}--loading__svg`,
    viewBox: "0 0 100 100"
  }, /*#__PURE__*/React.createElement("title", null, description), small ? /*#__PURE__*/React.createElement("circle", {
    className: `${prefix}--loading__background`,
    cx: "50%",
    cy: "50%",
    r: "42"
  }) : null, /*#__PURE__*/React.createElement("circle", {
    className: `${prefix}--loading__stroke`,
    cx: "50%",
    cy: "50%",
    r: small ? '42' : '44'
  })));
  return withOverlay ? /*#__PURE__*/React.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 };