@catho/quantum/CircularLoader/CircularLoader.js

Catho react components

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _theme = require("../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var getSizePixels = function getSizePixels(size, gutter) {
  var sizes = {
    medium: gutter * 2,
    // 16
    large: gutter * 3,
    // 24
    xlarge: gutter * 4,
    // 32
    xxlarge: gutter * 5,
    // 40
    xxxlarge: gutter * 6 // 48
  };
  return sizes[size];
};
var Content = _styledComponents["default"].svg.withConfig({
  displayName: "CircularLoader__Content",
  componentId: "sc-eiglhs-0"
})(["left:50%;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;", ""], function (_ref) {
  var color = _ref.color;
  return "\n    color: ".concat(color, ";\n  ");
});
var circularRotate = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg);}"]);
var circularDash = (0, _styledComponents.keyframes)(["0%{stroke-dasharray:1px,200px;stroke-dashoffset:0px;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-125px;}"]);
var circleProps = {
  cx: 44,
  cy: 44,
  r: 20.2,
  strokeWidth: 3.6
};
var Circle = _styledComponents["default"].circle.withConfig({
  displayName: "CircularLoader__Circle",
  componentId: "sc-eiglhs-1"
})(["animation:", " 1.4s ease-in-out infinite;cx:", "px;cy:", "px;fill:none;line-height:1;r:", "px;stroke-dasharray:80px,200px;stroke-dashoffset:0px;stroke-width:", "px;stroke:currentColor;", ""], circularDash, circleProps.cx, circleProps.cy, circleProps.r, circleProps.strokeWidth, function (_ref2) {
  var color = _ref2.color;
  return "\n    color: ".concat(color, ";\n  ");
});
var Wrapper = _styledComponents["default"].div.withConfig({
  displayName: "CircularLoader__Wrapper",
  componentId: "sc-eiglhs-2"
})(["animation:", " 1.4s linear infinite;position:relative;", ""], circularRotate, function (_ref3) {
  var size = _ref3.size,
    gutter = _ref3.gutter;
  return "\n    height: ".concat(getSizePixels(size, gutter), "px;\n    width: ").concat(getSizePixels(size, gutter), "px; \n  ");
});
var CircularLoader = function CircularLoader(_ref4) {
  var _ref4$size = _ref4.size,
    size = _ref4$size === void 0 ? 'medium' : _ref4$size,
    _ref4$skin = _ref4.skin,
    skin = _ref4$skin === void 0 ? 'primary' : _ref4$skin,
    _ref4$theme = _ref4.theme,
    theme = _ref4$theme === void 0 ? {
      colors: _theme.colors,
      gutter: _theme.gutter
    } : _ref4$theme;
  var color = theme.colors[skin][700],
    gutter = theme.gutter;
  var cx = circleProps.cx,
    cy = circleProps.cy,
    r = circleProps.r,
    strokeWidth = circleProps.strokeWidth;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
    size: size,
    gutter: gutter,
    role: "progressbar",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
      color: color,
      viewBox: "22 22 44 44",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, {
        strokeWidth: strokeWidth,
        cx: cx,
        cy: cy,
        r: r,
        color: color
      })
    })
  });
};
CircularLoader.propTypes = {
  size: _propTypes["default"].oneOf(['medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge']),
  skin: _propTypes["default"].oneOf(['primary', 'secondary']),
  /** Edit only for themification */
  theme: _propTypes["default"].shape({
    colors: _propTypes["default"].object,
    gutter: _propTypes["default"].number
  })
};
var _default = exports["default"] = CircularLoader;