@procore/core-react/dist/Spinner/Spinner.js

React library of Procore Design Guidelines

var _excluded = ["children", "className", "color", "label", "loading", "size", "variant", "centered"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { useId } from '@react-aria/utils';
import React from 'react';
import { useI18nContext } from '../_hooks/I18n';
import { StyledCircle, StyledSpinnerContainer, StyledSpinnerContainerWithLabel, StyledSpinnerOverlay, StyledSpinnerOverlayContainer, StyledSpinnerOverlayLabel, StyledSpinnerSVG } from './Spinner.styles';
var radiusMap = {
  xs: 18.5,
  sm: 18,
  md: 20,
  lg: 20.5
};
var smallSizes = ['xs', 'sm'];
export var defaultSpinnerSize = 'lg';
var Circle = /*#__PURE__*/React.forwardRef(function Circle(_ref, ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    color = _ref.color,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    mountTime = _ref.mountTime,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? defaultSpinnerSize : _ref$size,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
    label = _ref.label,
    labelId = _ref.labelId,
    _ref$ariaHidden = _ref.ariaHidden,
    ariaHidden = _ref$ariaHidden === void 0 ? false : _ref$ariaHidden;
  var i18n = useI18nContext();
  return /*#__PURE__*/React.createElement(StyledSpinnerContainer, {
    "aria-labelledby": labelId,
    className: className,
    $color: color,
    $size: size,
    $variant: variant,
    ref: ref,
    role: "progressbar"
  }, /*#__PURE__*/React.createElement(StyledSpinnerSVG, {
    "aria-hidden": ariaHidden || undefined,
    "aria-label": label || i18n.t('core.spinner.loading', {
      defaultValue: 'Loading'
    }),
    id: ariaHidden ? undefined : labelId,
    role: "img",
    viewBox: "0 0 48 48",
    xmlns: "http://www.w3.org/2000/svg",
    $animate: loading,
    $mountTime: mountTime
  }, /*#__PURE__*/React.createElement(StyledCircle, {
    cx: "24",
    cy: "24",
    r: radiusMap[size],
    $animate: loading,
    $mountTime: mountTime
  })));
});

/**

 Spinners indicate a loading state on either a full page or smaller component,
 like a menu, select or button.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-spinner--demo)

 @see [Design Guidelines](https://design.procore.com/spinner)

 */
export var Spinner = /*#__PURE__*/React.forwardRef(function Spinner(props, ref) {
  var children = props.children,
    _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    color = props.color,
    label = props.label,
    _props$loading = props.loading,
    loading = _props$loading === void 0 ? false : _props$loading,
    _props$size = props.size,
    size = _props$size === void 0 ? defaultSpinnerSize : _props$size,
    _props$variant = props.variant,
    variant = _props$variant === void 0 ? 'default' : _props$variant,
    _props$centered = props.centered,
    centered = _props$centered === void 0 ? false : _props$centered,
    rest = _objectWithoutProperties(props, _excluded);
  var labelId = useId();
  var mountTime = React.useRef(Date.now());
  var hasVisibleLabel = Boolean(children && label && !smallSizes.includes(size));
  if (!children) {
    // We are preserving the current behavior of the Spinner component,
    // where the loading prop does not apply when no children are passed.
    return /*#__PURE__*/React.createElement(Circle, _extends({}, props, {
      labelId: labelId,
      loading: true,
      mountTime: mountTime.current,
      ref: ref
    }));
  }
  return /*#__PURE__*/React.createElement(StyledSpinnerOverlayContainer, _extends({
    $loading: loading,
    className: className,
    $centered: centered
  }, rest), /*#__PURE__*/React.createElement(StyledSpinnerOverlay, null), /*#__PURE__*/React.createElement(StyledSpinnerContainerWithLabel, {
    "aria-hidden": !loading
  }, /*#__PURE__*/React.createElement(Circle, _extends({}, props, {
    ariaHidden: hasVisibleLabel,
    className: "",
    labelId: labelId,
    mountTime: mountTime.current,
    ref: ref
  })), !smallSizes.includes(size) && /*#__PURE__*/React.createElement(StyledSpinnerOverlayLabel, {
    id: hasVisibleLabel ? labelId : undefined
  }, label)), children);
});
Spinner.displayName = 'Spinner';
//# sourceMappingURL=Spinner.js.map