pouncejs/dist/esm/components/Spinner/Spinner.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n  stroke-dashoffset: 600;\n  stroke-dasharray: 300;\n  stroke-width: 13;\n  stroke-miterlimit: 10;\n  stroke-linecap: round;\n  animation: ", " 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  stroke: ", ";\n  fill: transparent;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  0% {\n    stroke-dashoffset: 600;\n  }\n  \n  100% {\n    stroke-dashoffset: 0;\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: rotate(0);\n  }\n  \n  100% {\n    transform: rotate(360deg);\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React from 'react';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/react';
import Box from '../Box';
var spinningKeyframes = keyframes(_templateObject());
var circleKeyframes = keyframes(_templateObject2());
var StyledCircle = styled.circle(_templateObject3(), circleKeyframes, function (_ref) {
  var theme = _ref.theme,
      color = _ref.color;
  return theme.colors[color];
});
/**
 *
 * Extends Box.
 *
 * A simple spinner component that allows you to display that something is loading
 */

var Spinner = function Spinner(_ref2) {
  var _ref2$delay = _ref2.delay,
      delay = _ref2$delay === void 0 ? 0 : _ref2$delay,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
      _ref2$color = _ref2.color,
      color = _ref2$color === void 0 ? 'current' : _ref2$color,
      rest = _objectWithoutPropertiesLoose(_ref2, ["delay", "size", "color"]);

  var _React$useState = React.useState(delay === 0),
      isVisible = _React$useState[0],
      setVisibility = _React$useState[1];

  var delayTimer = React.useRef(0);
  React.useEffect(function () {
    if (delay && delay > 0) {
      delayTimer.current = window.setTimeout(function () {
        return setVisibility(true);
      }, delay);
    }

    return function () {
      return clearTimeout(delayTimer.current);
    };
  }, []);

  if (!isVisible) {
    return null;
  }

  var sizeProps = function () {
    switch (size) {
      case 'small':
        return {
          width: '18px',
          height: '18px'
        };

      case 'medium':
        return {
          width: '36px',
          height: '36px'
        };

      case 'large':
      default:
        return {
          width: '54px',
          height: '54px'
        };
    }
  }();

  return /*#__PURE__*/React.createElement(Box, _extends({
    as: "svg",
    display: "inline-block",
    verticalAlign: "sub",
    animation: spinningKeyframes + " 2s linear infinite",
    viewBox: "0 0 150 150",
    "aria-label": "Loading..."
  }, sizeProps, rest), /*#__PURE__*/React.createElement(StyledCircle, {
    cx: "75",
    cy: "75",
    r: "60",
    color: color
  }));
};

export default /*#__PURE__*/React.memo(Spinner);