vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
66 lines (65 loc) • 1.81 kB
JavaScript
import PropTypes from 'prop-types';
import React from 'react';
import { pxToRem } from '../../utils/size-to-rem';
import { Block } from '../block';
const spinnerCSS = _ref => {
let {
size,
color
} = _ref;
return _ref2 => {
let {
theme
} = _ref2;
return {
WebkitBackfaceVisibility: 'hidden',
width: pxToRem(size),
height: pxToRem(size),
stroke: color || theme.color.foreground.primary,
animation: '700ms cubic-bezier(0.62, 0.63, 0, 0.53) infinite',
transformOrigin: 'center',
strokeDasharray: 50,
strokeDashoffset: 0,
animationName: {
'100%': {
// we explicitly want to keep the rotation, so we have to invert it for the plugin to correctly transform it
transform: theme.direction === 'rtl' ? 'rotate(-360deg)' : 'rotate(360deg)'
}
}
};
};
};
/**
* @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
*/
export const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
let {
color,
size = 40
} = _ref3;
const viewBox = 40;
// Maintain 2px rendered stroke width regardless of size
const strokeWidth = Number((viewBox * 2 / size).toFixed(2));
return /*#__PURE__*/React.createElement(Block, {
ref: ref,
as: "svg",
viewBox: `20 20 ${viewBox} ${viewBox}`,
extend: spinnerCSS({
size,
color
})
}, /*#__PURE__*/React.createElement("circle", {
cx: "40",
cy: "40",
r: "18",
strokeWidth: strokeWidth,
fill: "none"
}));
});
Spinner.displayName = 'Spinner';
Spinner.propTypes = {
/* Pick a color for the spinner */
color: PropTypes.string,
/* Set spinner size */
size: PropTypes.oneOf([24, 32, 40, 48])
};