@shopify/polaris/dist/esm/components/Spinner/Spinner.js

Shopify’s product component library

import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React$1 from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames, variationName } from '../../utilities/css.js';
import { useIsAfterInitialMount as useIsAfterInitialMount$1 } from '../../utilities/use-is-after-initial-mount.js';
import { VisuallyHidden as VisuallyHidden$1 } from '../VisuallyHidden/VisuallyHidden.js';
import styles from './Spinner.scss.js';

var COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest', 'highlight'];

var _ref = /*#__PURE__*/React$1.createElement("svg", {
  viewBox: "0 0 44 44",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React$1.createElement("path", {
  d: "M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"
}));

var _ref2 = /*#__PURE__*/React$1.createElement("svg", {
  viewBox: "0 0 20 20",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React$1.createElement("path", {
  d: "M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
}));

function Spinner({
  size = 'large',
  color = 'teal',
  accessibilityLabel,
  hasFocusableParent
}) {
  var {
    newDesignLanguage
  } = useFeatures();
  var i18n = useI18n();
  var isAfterInitialMount = useIsAfterInitialMount$1();

  if (size === 'large' && !COLORS_FOR_LARGE_SPINNER.includes(color)) {
    if (process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn(i18n.translate('Polaris.Spinner.warningMessage', {
        color,
        size,
        colors: COLORS_FOR_LARGE_SPINNER.join(', ')
      }));
    } // eslint-disable-next-line no-param-reassign


    size = 'small';
  }

  var className = classNames(styles.Spinner, color && styles[variationName('color', color)], size && styles[variationName('size', size)], newDesignLanguage && styles.newDesignLanguage);
  var spinnerSVGMarkup = size === 'large' ? _ref : _ref2;

  var spanAttributes = _objectSpread2({}, !hasFocusableParent && {
    role: 'status'
  });

  var accessibilityLabelMarkup = (isAfterInitialMount || !hasFocusableParent) && /*#__PURE__*/React$1.createElement(VisuallyHidden$1, null, accessibilityLabel);
  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("span", {
    className: className
  }, spinnerSVGMarkup), /*#__PURE__*/React$1.createElement("span", spanAttributes, accessibilityLabelMarkup));
}

export { Spinner };