wix-style-react
Version:
48 lines (42 loc) • 1.56 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types'; // taken from https://stackoverflow.com/a/18473154
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + radius * Math.cos(angleInRadians),
y: centerY + radius * Math.sin(angleInRadians)
};
}
/* eslint-disable max-params */
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
var d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y].join(' ');
return d;
}
/* eslint-enable */
var Arc = function Arc(_ref) {
var className = _ref.className,
strokeWidth = _ref.strokeWidth,
viewBoxSize = _ref.viewBoxSize,
angle = _ref.angle;
var d = describeArc(0, 0, (viewBoxSize - strokeWidth) / 2, 0, angle);
var viewBox = "-".concat(viewBoxSize / 2, " -").concat(viewBoxSize / 2, " ").concat(viewBoxSize, " ").concat(viewBoxSize);
return /*#__PURE__*/React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: viewBox,
className: className
}, /*#__PURE__*/React.createElement("path", {
strokeWidth: strokeWidth,
d: d
}));
};
Arc.propTypes = {
angle: PropTypes.number,
className: PropTypes.string,
strokeWidth: PropTypes.number,
viewBoxSize: PropTypes.number
};
Arc.displayName = 'Arc';
export default Arc;