All files / lib/ProgressBar index.js

88.46% Statements 23/26
75% Branches 15/20
100% Functions 3/3
88.46% Lines 23/26
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120                  89x 9x   9x 9x 9x   9x 9x 1x 8x 1x     7x     9x 9x 1x 8x 1x   1x   1x       1x       9x                                               89x                                     89x                 89x                                                  
import React from 'react';
import PropTypes from 'prop-types';
 
/**
 * @category communication
 * @component progress-bar
 * @variations collab-ui-react
 */
 
const ProgressBar = props => {
  const { label, min, max, value, dynamic, displayFormat, color } = props;
 
  const adjustedValue = max - value < 0 ? max : value;
  const valueFraction = adjustedValue / max * 100 || 0;
  const meterWidth = valueFraction + '%';
 
  const getDisplayFormat = () => {
    if (displayFormat === 'none') {
      return null;
    } else if (displayFormat === 'percentage') {
      return meterWidth;
    }
 
    return `${adjustedValue} / ${max}`;
  };
 
  const getColor = () => {
    if (color) {
      return color;
    } else if (dynamic) {
      Iif (valueFraction < 25) {
        return 'success';
      } else Iif (valueFraction < 50) {
        return 'info';
      } else Iif (valueFraction < 75) {
        return 'warning';
      }
 
      return 'danger';
    }
  };
 
  return (
    <span>
      <div className={`progressbar-info`} key={0}>
        <span className={`progressbar-label`}>{label}</span>
        <span className={`progressbar-progress`}>{getDisplayFormat()}</span>
      </div>
      <div className={`progress` + ` ${getColor() || ''}`} key={1}>
        <span
          className={`meter`}
          role="progressbar"
          aria-labelledby="progressbar"
          aria-valuenow={adjustedValue}
          aria-valuemin={min}
          aria-valuemax={max}
          aria-valuetext={meterWidth}
          style={{
            width: meterWidth,
          }}
        />
      </div>
    </span>
  );
};
 
ProgressBar.propTypes = {
  /** @prop Color class optional that will overwrite dynamic | '' */
  color: PropTypes.string,
  /** @prop Format of dyanmic number | 'fraction' */
  displayFormat: PropTypes.oneOf(['none', 'fraction', 'percentage']),
  /** @prop Determines if the ProgressBar is dynamic | false */
  dynamic: PropTypes.bool,
  /** @prop Label text */
  label: PropTypes.string.isRequired,
  /** @prop Maximum number for progressBar | 100 */
  max: PropTypes.number,
  /** @prop Minimum number for progressBar | 0 */
  min: PropTypes.number,
  /** @prop Type of ProgressBar | 'determinate' */
  type: PropTypes.oneOf(['determinate', 'indeterminate']),
  /** @prop Number value */
  value: PropTypes.number.isRequired,
};
 
ProgressBar.defaultProps = {
  color: '',
  displayFormat: 'fraction',
  dynamic: false,
  max: 100,
  min: 0,
  type: 'determinate',
};
 
ProgressBar.displayName = 'ProgressBar';
 
export default ProgressBar;
 
/**
* @component progress-bar
* @section default
* @react
import { ProgressBar } from '@collab-ui/react';
 
export default ProgressBarDefault() {
  return (
    <div className='columns small-6'>
      <ProgressBar
        label='ProgressBar Default'
        min={0}
        max={100}
        value={50}
      />
    </div>
  );
}
 
**/