@atlaskit/spinner/dist/cjs/spinner.js

A spinner is an animated spinning icon that lets users know content is being loaded.

/* spinner.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./spinner.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
var _constants = require("./constants");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * Returns the appropriate circle stroke color.
 */
function getStrokeColor(appearance) {
  return appearance === 'inherit' ? "var(--ds-icon-subtle, #505258)" : "var(--ds-icon-inverse, #FFFFFF)";
}
var rotate = null;

/**
 * There are three parts to the load in animation:
 * 1. Accelerated spin
 * 2. Stretch the spinner line
 */
var loadIn = null;
var styles = {
  rotateStyles: "_j7hqsf8s _5sag12kz _tip812c5 _1pgl2qsq _8hrz1h6o",
  loadInStyles: "_j7hq1ky6 _5sag9cwz _1pgl1ytf _1o511hrf",
  wrapperStyles: "_1e0c116y _s7n4nkob",
  circleStyles: "_lswuglyw _7ljx1dhp _1snbbs82 _jcxd7g3v _1tjm1onz"
};

/**
 * `useLayoutEffect` is being used in SSR safe form. On the server, this work doesn’t need to run.
 * `useEffect` is used in-place, because `useEffect` is not run on the server and it matches types
 * which makes things simpler than doing an `isServer` check or a `null` check.
 *
 * @see https://hello.atlassian.net/wiki/spaces/DST/pages/2081696628/DSTDACI-010+-+Interaction+Tracing+hooks+in+DS+components
 */
var useLayoutEffect = typeof window === 'undefined' ? _react.useEffect : _react.useLayoutEffect;

/**
 * __Spinner__
 *
 * A spinner is an animated spinning icon that lets users know content is being loaded.
 *
 * - [Examples](https://atlassian.design/components/spinner/examples)
 * - [Code](https://atlassian.design/components/spinner/code)
 * - [Usage](https://atlassian.design/components/spinner/usage)
 */
var Spinner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Spinner(_ref, ref) {
  var _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'inherit' : _ref$appearance,
    _ref$delay = _ref.delay,
    delay = _ref$delay === void 0 ? 0 : _ref$delay,
    interactionName = _ref.interactionName,
    label = _ref.label,
    _ref$size = _ref.size,
    providedSize = _ref$size === void 0 ? 'medium' : _ref$size,
    testId = _ref.testId;
  var size = typeof providedSize === 'number' ? providedSize : _constants.presetSizes[providedSize];
  var animationDelay = "".concat(delay, "ms");
  var stroke = getStrokeColor(appearance);
  var context = (0, _react.useContext)(_interactionContext.default);
  useLayoutEffect(function () {
    if (context != null) {
      return context.hold(interactionName);
    }
  }, [context, interactionName]);

  /**
   * The Spinner animation uses a combination of two
   * css animations on two separate elements.
   */
  return /*#__PURE__*/_react.default.createElement("span", {
    "data-testid": testId ? "".concat(testId, "-wrapper") : 'spinner-wrapper'
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: {
      animationDelay: animationDelay,
      width: size,
      height: size
    },
    className: (0, _runtime.ax)([styles.wrapperStyles, styles.rotateStyles])
  }, /*#__PURE__*/_react.default.createElement("svg", {
    height: size,
    width: size,
    viewBox: "0 0 16 16",
    xmlns: "http://www.w3.org/2000/svg",
    "data-testid": testId,
    ref: ref,
    "aria-label": label || undefined,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: {
      animationDelay: animationDelay
    },
    role: label ? 'img' : 'none',
    className: (0, _runtime.ax)([styles.loadInStyles])
  }, /*#__PURE__*/_react.default.createElement("circle", {
    cx: "8",
    cy: "8",
    r: "7",
    style: {
      stroke: stroke
    },
    className: (0, _runtime.ax)([styles.circleStyles])
  })));
}));
var _default = exports.default = Spinner;