All files / src/px-progress-bar index.js

100% Statements 7/7
71.43% Branches 5/7
100% Functions 2/2
100% Lines 7/7
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                                1x         1x 1x   1x 1x 1x   1x                        
import React from 'react';
import classnames from 'classnames';
 
import style from './style.scss';
 
/**
 * px-progress-bar component
 */
export default ({
 
  value = 0,
  max = 100,
  min = 0,
  infinite,
  children
}) => {
  const baseClasses = classnames(
    'px-progress-bar',
    {'infinite': infinite }
  );
 
  const _computeRatio = (v) => {
    return v < 0 ? 0 : (v > 100 ? 1 : v / 100);
  };
  let transform = 'scaleX(' + _computeRatio(value) + ')';
  let fillStyle = {};
  fillStyle.transform = fillStyle.WebkitTransform = transform;
 
  return (
    <div className={baseClasses} role='progressbar'
      aria-valuemin={min}
      aria-valuemax={max}
    >
      <div id="background" className='background'>
        <div id="fill" className='fill' style={fillStyle}></div>
      </div>
      <style jsx>{style}</style>
    </div>
  );
}