ProgressBarLine Line.js

100% Statements 4/4

60% Branches 6/10

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  
 
 
 
 
1x
5x
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
  import cx from 'classnames'
import PropTypes from 'prop-types'
 
import {BASE_CLASS_EXTRA_LINE, BASE_CLASS_EXTRA_LINE_ANIMATED, BASE_CLASS_LINE, CLASS_BAR_ANIMATED} from './settings.js'
 
const Line = ({isAnimatedOnChange, percentage, className, isExtra}) => (
  <span
    className={cx(
      !isExtra && BASE_CLASS_LINE,
      isExtra && BASE_CLASS_EXTRA_LINE,
      className,
      isAnimatedOnChange && !isExtra && CLASS_BAR_ANIMATED,
      isAnimatedOnChange && isExtra && BASE_CLASS_EXTRA_LINE_ANIMATED
    )}
    style={{width: `${percentage}%`}}
  />
)
 
Line.displayName = 'ProgressBarLine'
 
Line.propTypes = {
  isAnimatedOnChange: PropTypes.bool,
  percentage: PropTypes.number,
  className: PropTypes.string,
  isExtra: PropTypes.bool
}
 
export default Line