@wordpress/components/build/ui/spinner/component.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _styles = require("./styles");

var _utils = require("./utils");

var _context = require("../context");

var _colorsValues = require("../../utils/colors-values");

/**
 * Internal dependencies
 */

/* eslint-disable jsdoc/valid-types */

/**
 * @typedef Props
 * @property {import('react').CSSProperties['color']} [color] Color of `Spinner`.
 * @property {number} [size=16] Size of `Spinner`.
 */

/* eslint-enable jsdoc/valid-types */

/**
 *
 * @param {import('../context').ViewOwnProps<Props, 'div'>} props
 * @param {import('react').Ref<any>} forwardedRef
 */
function Spinner(props, forwardedRef) {
  const {
    color = _colorsValues.COLORS.black,
    size = _utils.BASE_SIZE,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'Spinner');
  const ratio = size / _utils.BASE_SIZE;
  const scale = ratio * _utils.BASE_SIZE / _utils.WRAPPER_SIZE;
  const transform = `scale(${scale})`;
  const styles = {
    transform
  };
  return (0, _element.createElement)(_styles.ContainerView, (0, _extends2.default)({}, otherProps, {
    "aria-busy": true,
    ref: forwardedRef,
    style: {
      height: size,
      width: size
    }
  }), (0, _element.createElement)(_styles.BarsWrapperView, {
    "aria-hidden": true,
    style: styles
  }, (0, _element.createElement)(_styles.BarsView, {
    style: {
      color
    }
  }, (0, _element.createElement)("div", {
    className: "InnerBar1"
  }), (0, _element.createElement)("div", {
    className: "InnerBar2"
  }), (0, _element.createElement)("div", {
    className: "InnerBar3"
  }), (0, _element.createElement)("div", {
    className: "InnerBar4"
  }), (0, _element.createElement)("div", {
    className: "InnerBar5"
  }), (0, _element.createElement)("div", {
    className: "InnerBar6"
  }), (0, _element.createElement)("div", {
    className: "InnerBar7"
  }), (0, _element.createElement)("div", {
    className: "InnerBar8"
  }), (0, _element.createElement)("div", {
    className: "InnerBar9"
  }), (0, _element.createElement)("div", {
    className: "InnerBar10"
  }), (0, _element.createElement)("div", {
    className: "InnerBar11"
  }), (0, _element.createElement)("div", {
    className: "InnerBar12"
  }))));
}
/**
 * `Spinner` is a component that notify users that their action is being processed.
 *
 * @example
 * ```jsx
 * import { Spinner } from `@wordpress/components/ui`;
 *
 * function Example() {
 * 	return (
 * 		<Spinner />
 * 	);
 * }
 * ```
 */


var _default = (0, _context.contextConnect)(Spinner, 'Spinner');

exports.default = _default;
//# sourceMappingURL=component.js.map