react-native-komect-uikit/src/Progress/Shapes/Arc.js

React Native UI Toolkit

/* eslint new-cap: ["error", { "capIsNew": false }] */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ART } from 'react-native';

const CIRCLE = Math.PI * 2;

function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) {
  let startAngle = startAngleArg;
  let endAngle = endAngleArg;
  if (endAngle - startAngle >= CIRCLE) {
    endAngle = CIRCLE + (endAngle % CIRCLE);
  } else {
    endAngle = endAngle % CIRCLE;
  }
  startAngle = startAngle % CIRCLE;
  const angle = startAngle > endAngle ? CIRCLE - startAngle + endAngle : endAngle - startAngle;

  if (angle >= CIRCLE) {
    return ART.Path()
      .moveTo(x + radius, y)
      .arc(0, radius * 2, radius, radius)
      .arc(0, radius * -2, radius, radius)
      .close();
  }

  const directionFactor = direction === 'counter-clockwise' ? -1 : 1;
  endAngle *= directionFactor;
  startAngle *= directionFactor;
  const startSine = Math.sin(startAngle);
  const startCosine = Math.cos(startAngle);
  const endSine = Math.sin(endAngle);
  const endCosine = Math.cos(endAngle);

  const arcFlag = angle > Math.PI ? 1 : 0;
  const reverseFlag = direction === 'counter-clockwise' ? 0 : 1;

  return `M${x + (radius * (1 + startSine))} ${y + radius - (radius * startCosine)}
          A${radius} ${radius} 0 ${arcFlag} ${reverseFlag} ${x + (radius * (1 + endSine))} ${y + radius - (radius * endCosine)}`;
}

export default class Arc extends Component {
  static propTypes = {
    startAngle: PropTypes.number.isRequired, // in radians
    endAngle: PropTypes.number.isRequired, // in radians
    radius: PropTypes.number.isRequired,
    offset: PropTypes.shape({
      top: PropTypes.number,
      left: PropTypes.number,
    }),
    strokeWidth: PropTypes.number,
    direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']),
  };

  static defaultProps = {
    startAngle: 0,
    offset: { top: 0, left: 0 },
    strokeWidth: 0,
    direction: 'clockwise',
  };

  render() {
    const {
      startAngle,
      endAngle,
      radius,
      offset,
      direction,
      strokeWidth,
      ...restProps
    } = this.props;

    const path = makeArcPath(
      (offset.left || 0) + (strokeWidth / 2),
      (offset.top || 0) + (strokeWidth / 2),
      startAngle,
      endAngle,
      radius - (strokeWidth / 2),
      direction
    );

    return (
      <ART.Shape
        d={path}
        strokeCap="butt"
        strokeWidth={strokeWidth}
        {...restProps}
      />
    );
  }
}