wix-style-react/dist/es/src/Loader/Arc.js

wix-style-react

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 = '-' + viewBoxSize / 2 + ' -' + viewBoxSize / 2 + ' ' + viewBoxSize + ' ' + viewBoxSize;
  return React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      viewBox: viewBox,
      className: className
    },
    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;