All files / src/components/ProgressBar index.jsx

100% Statements 11/11
100% Branches 5/5
100% Functions 4/4
100% Lines 11/11
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56                1x 8x   8x                   8x 4x     4x 1x     4x       8x           8x             1x                  
import styles from './style.postcss';
 
import React from 'react';
import pure from 'recompose/pure';
import is from 'is_js';
import classnames from 'classnames';
import PropTypes from 'prop-types';
 
export const ProgressBar = (props) => {
  const { value, max } = props;
 
  return <div className={classnames(styles.ProgressBar, {
    [styles.__rounded]: !! props.rounded,
    [styles.__larger]: !! props.larger,
  }, props.className)}>
    <div className={styles.ProgressBar_progress}
        style={{ width: percentage(value, max) }} />
  </div>;
};
 
function fraction(value = 0, max) {
  if (is.number(max)) {
    return value / max;
  }
 
  if (value > 100) {
    value = 100;  // eslint-disable-line
  }
 
  return value / 100;
}
 
function clamp(fract) {
  return Math.min(1,
    Math.max(0, fract)
  );
}
 
function percentage(value, max) {
  return Math.round(  // eslint-disable-line
    clamp(
      fraction(value, max)
    ) * 100
  ) + '%';
}
 
ProgressBar.propTypes = {
  className: PropTypes.string,
  value: PropTypes.number,
  max: PropTypes.number,
  rounded: PropTypes.bool,
  larger: PropTypes.bool,
};
 
export default pure(ProgressBar);