@grafana/ui/dist/cjs/components/Spinner/Spinner.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var SVG = require('react-inlinesvg');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var icon = require('../../types/icon.cjs');
var keyframes = require('../../utils/keyframes.cjs');
var Icon = require('../Icon/Icon.cjs');
var utils = require('../Icon/utils.cjs');

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

var SVG__default = /*#__PURE__*/_interopDefaultCompat(SVG);

"use strict";
const Spinner = ({
  className,
  inline = false,
  iconClassName,
  style,
  size = "md"
}) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const deprecatedStyles = ThemeContext.useStyles2(getDeprecatedStyles, size);
  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const iconName = prefersReducedMotion ? "hourglass" : "spinner";
  if (typeof size !== "string" || !icon.isIconSize(size)) {
    const iconRoot = utils.getIconRoot();
    const subDir = utils.getIconSubDir(iconName, "default");
    const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        "data-testid": "Spinner",
        style,
        className: css.cx(
          {
            [styles.inline]: inline
          },
          deprecatedStyles.wrapper,
          className
        ),
        children: /* @__PURE__ */ jsxRuntime.jsx(
          SVG__default.default,
          {
            src: svgPath,
            width: size,
            height: size,
            className: css.cx(styles.spin, deprecatedStyles.icon, className),
            style
          }
        )
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-testid": "Spinner",
      style,
      className: css.cx(
        {
          [styles.inline]: inline
        },
        className
      ),
      children: /* @__PURE__ */ jsxRuntime.jsx(
        Icon.Icon,
        {
          className: css.cx(styles.spin, iconClassName),
          name: iconName,
          size,
          "aria-label": i18n.t("grafana-ui.spinner.aria-label", "Loading")
        }
      )
    }
  );
};
const getStyles = (theme) => ({
  inline: css.css({
    display: "inline-block",
    lineHeight: 0
  }),
  spin: css.css({
    [theme.transitions.handleMotion("no-preference")]: {
      animation: `${keyframes.spin} 2s infinite linear`
    }
  })
});
const getDeprecatedStyles = (theme, size) => ({
  wrapper: css.css({
    fontSize: typeof size === "string" ? size : `${size}px`
  }),
  icon: css.css({
    display: "inline-block",
    fill: "currentColor",
    flexShrink: 0,
    label: "Icon",
    // line-height: 0; is needed for correct icon alignment in Safari
    lineHeight: 0,
    verticalAlign: "middle"
  })
});

exports.Spinner = Spinner;
//# sourceMappingURL=Spinner.cjs.map