{"size": 1622, "ext": "js", "max_stars_repo_path": "src/components/ProgressBarLine.js", "max_stars_repo_name": "brijesh-pant/react-progressbar-line", "max_stars_repo_stars_event_min_datetime": "2021-05-13T13:56:45.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-13T13:56:45.000Z", "max_issues_repo_path": "src/components/ProgressBarLine.js", "max_issues_repo_name": "brijesh-pant/react-progressbar-line", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ProgressBarLine.js", "max_forks_repo_name": "brijesh-pant/react-progressbar-line", "max_forks_repo_forks_event_min_datetime": "2021-05-06T01:09:45.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-06T01:09:45.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 21.3421052632, "max_line_length": 76, "alphanum_fraction": 0.6220715166}
import React from 'react'
import PropTypes from 'prop-types'
import { ThemeProvider } from 'styled-components'

import { VIEWBOX_X2 } from '../constants'

import baseStyles from '../config/theme'
import { calculateSafeValue } from '../utils'

import Svg from './Svg'
import Path from './Path'
import Text from './Text'

const ProgressBarLine = ({
  value: propValue,
  min,
  max,
  strokeWidth,
  trailWidth,
  text,
  flip,
  styles
}) => {
  const [value, setValue] = React.useState(max)

  React.useEffect(() => {
    const safeValue = calculateSafeValue({ min, max, propValue })
    setValue(((safeValue - min) * VIEWBOX_X2) / (max - min))
  }, [propValue])

  const theme = Object.assign({}, baseStyles, styles)

  return (
    <ThemeProvider theme={theme}>
      <Text text={text} value={value} />
      <Svg strokeWidth={strokeWidth}>
        <Path
          trail
          value={VIEWBOX_X2}
          min={min}
          max={max}
          strokeWidth={strokeWidth}
          trailWidth={trailWidth}
        />
        <Path
          value={value}
          min={min}
          max={max}
          strokeWidth={strokeWidth}
          trailWidth={trailWidth}
          flip={flip}
        />
      </Svg>
    </ThemeProvider>
  )
}

ProgressBarLine.defaultProps = {
  value: 50,
  min: 0,
  max: 100,
  strokeWidth: 5,
  trailWidth: 5
}

ProgressBarLine.propTypes = {
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.PropTypes.number])
    .isRequired,
  min: PropTypes.number,
  max: PropTypes.number,
  strokeWidth: PropTypes.number,
  trailWidth: PropTypes.number
}

export default ProgressBarLine
