pouncejs/dist/cjs/components/Spinner/Spinner.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styled = _interopRequireDefault(require("@emotion/styled"));

var _react2 = require("@emotion/react");

var _Box = _interopRequireDefault(require("../Box"));

function _templateObject3() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\n  0% {\n    transform: rotate(0);\n  }\n  \n  100% {\n    transform: rotate(360deg);\n  }\n"]);

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

  return data;
}

var spinningKeyframes = (0, _react2.keyframes)(_templateObject());
var circleKeyframes = (0, _react2.keyframes)(_templateObject2());

var StyledCircle = _styled.default.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 = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["delay", "size", "color"]);

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

  var delayTimer = _react.default.useRef(0);

  _react.default.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.default.createElement(_Box.default, (0, _extends2.default)({
    as: "svg",
    display: "inline-block",
    verticalAlign: "sub",
    animation: spinningKeyframes + " 2s linear infinite",
    viewBox: "0 0 150 150",
    "aria-label": "Loading..."
  }, sizeProps, rest), /*#__PURE__*/_react.default.createElement(StyledCircle, {
    cx: "75",
    cy: "75",
    r: "60",
    color: color
  }));
};

var _default = /*#__PURE__*/_react.default.memo(Spinner);

exports.default = _default;