@carbon/react/lib/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.
 */

'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({
  active = true,
  className: customClassName,
  withOverlay = true,
  small = false,
  description = 'loading',
  ...rest
}) {
  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: "42"
  }) : null, /*#__PURE__*/React__default["default"].createElement("circle", {
    className: `${prefix}--loading__stroke`,
    cx: "50%",
    cy: "50%",
    r: small ? '42' : '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;