@cimpress/react-components
Version:
React components to support the MCP styleguide
60 lines • 2.98 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { cx, css } from '@emotion/css';
import React, { memo, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import cvar from './theme/cvar';
const standardDimensions = {
large: '72px',
medium: '38px',
small: '16px',
};
const pageCenterStyle = css `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;
const spinnerStyle = css `
.crc-spinner__ring-bg {
stroke: ${cvar('color-spinner-ring')};
fill: none;
stroke-width: 10;
stroke-linecap: butt;
}
.crc-spinner__ring-animated {
stroke: ${cvar('color-background-info')};
fill: none;
stroke-width: 10;
stroke-linecap: butt;
}
`;
export const Spinner = memo((_a) => {
var { className = '', duration = 2, fullPage = false, handleOffset, offset = 0, size = 'large' } = _a, rest = __rest(_a, ["className", "duration", "fullPage", "handleOffset", "offset", "size"]);
const el = useRef(null);
useEffect(() => {
const getCurrentOffset = () => (el.current.getCurrentTime() % duration) / duration;
return () => handleOffset && handleOffset(getCurrentOffset());
}, [duration, handleOffset]);
const renderSpinner = () => {
const modOffset = offset % 1;
const begin = (1 - modOffset) * duration - duration;
return (React.createElement("div", Object.assign({ className: cx(['crc-spinner', fullPage && pageCenterStyle, spinnerStyle, className]), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100 }, rest),
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: standardDimensions[size], height: standardDimensions[size], viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", className: "crc-spinner__svg", ref: el },
React.createElement("circle", { className: "crc-spinner__ring-bg", cx: "50", cy: "50", r: "40" }),
React.createElement("circle", { className: "crc-spinner__ring-animated", cx: "50", cy: "50", r: "40" },
React.createElement("animate", { attributeName: "stroke-dashoffset", dur: duration, repeatCount: "indefinite", from: "0", to: "-502", begin: begin }),
React.createElement("animate", { attributeName: "stroke-dasharray", dur: duration, repeatCount: "indefinite", values: "75.3 175.7;1 250;75.3 175.7", begin: begin })))));
};
return fullPage ? createPortal(renderSpinner(), document.body) : renderSpinner();
});
//# sourceMappingURL=Spinner.js.map