{"size": 1381, "ext": "js", "max_stars_repo_path": "src/components/Icon/Oval.component.js", "max_stars_repo_name": "Abdilar/react-spinner", "max_stars_repo_stars_event_min_datetime": "2021-03-19T19:19:09.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-18T12:00:51.000Z", "max_issues_repo_path": "src/components/Icon/Oval.component.js", "max_issues_repo_name": "Abdilar/react-spinner", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Icon/Oval.component.js", "max_forks_repo_name": "Abdilar/react-spinner", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.1162790698, "max_line_length": 135, "alphanum_fraction": 0.6249094859}
import React from 'react';
import PropTypes from 'prop-types';
import {isColorProp, isEmptyString} from "../../utils/functions";

import style from '../index.module.scss';

const Oval = (props) => {
  const strokeRate = props.ratio > 1 ?
    props.ratio < 3 ?
      1 + Math.floor(props.ratio) :
      3 :
    2 * props.ratio;
  const strokeWidth = `${strokeRate / props.ratio}px`;
  const size = 30 * props.ratio;
  const color = isEmptyString(props.color) ? 'currentColor' : props.color;
  const {spinner = ''} = props.className;

  return (
    <span className={`${style.display_inline_block} ${spinner}`} style={{width: `${size}px`, height: `${size}px`}}>
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} stroke={color} viewBox="0 0 38 38">
        <g fill="none" fillRule="evenodd" style={{strokeWidth}} transform="translate(1 1)">
          <circle cx="18" cy="18" r="18" strokeOpacity="0.5"/>
          <path d="M36 18c0-9.94-8.06-18-18-18">
            <animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/>
          </path>
        </g>
      </svg>
    </span>
  )
};

Oval.defaultProps = {
  color: '',
  ratio: 1
}

Oval.propTypes = {
  color: (props, propName, componentName) => isColorProp(props, propName, componentName),
  ratio: PropTypes.number
}

export default Oval;
