vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
73 lines (71 loc) • 2.16 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Spinner = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _sizeToRem = require("../../utils/size-to-rem");
var _block = require("../block");
const spinnerCSS = _ref => {
let {
size,
color
} = _ref;
return _ref2 => {
let {
theme
} = _ref2;
return {
WebkitBackfaceVisibility: 'hidden',
width: (0, _sizeToRem.pxToRem)(size),
height: (0, _sizeToRem.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)
*/
const Spinner = exports.Spinner = /*#__PURE__*/_react.default.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.default.createElement(_block.Block, {
ref: ref,
as: "svg",
viewBox: `20 20 ${viewBox} ${viewBox}`,
extend: spinnerCSS({
size,
color
})
}, /*#__PURE__*/_react.default.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.default.string,
/* Set spinner size */
size: _propTypes.default.oneOf([24, 32, 40, 48])
};