ProgressBarCircle Indicator.js

80% Statements 4/5

71.42% Branches 5/7

100% Functions 1/1

100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33  
 
 
 
 
 
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
  import cx from 'classnames'
import PropTypes from 'prop-types'
 
import {SIZES, STATUS, COLORS} from '../settings.js'
import {INDICATOR_CLASS_NAME} from './settings.js'
 
const Indicator = ({percentage, status, errorIcon, size, children, color}) => {
  Iif (status === STATUS.LOADING) return null
  return (
    <div
      className={cx(INDICATOR_CLASS_NAME, `${INDICATOR_CLASS_NAME}--${status}`, `${INDICATOR_CLASS_NAME}--${size}`, {
        [`${INDICATOR_CLASS_NAME}--color-${color}`]: color
      })}
    >
      <span>
        {status === STATUS.PROGRESS && (children || `${percentage}%`)}
        {status === STATUS.ERROR && errorIcon}
      </span>
    </div>
  )
}
 
Indicator.propTypes = {
  percentage: PropTypes.number.isRequired,
  status: PropTypes.oneOf(Object.values(STATUS)),
  errorIcon: PropTypes.node,
  size: PropTypes.oneOf(Object.values(SIZES)),
  color: PropTypes.oneOf(Object.values(COLORS)),
  children: PropTypes.node
}
 
export default Indicator