react-conventions/lib/components/ProgressBar/ProgressBar.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ProgressBarLabel = require('./ProgressBarLabel');

var _ProgressBarLabel2 = _interopRequireDefault(_ProgressBarLabel);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * The ProgressBar fills from 0% to 100% to show the progress of a task.
 */
var ProgressBar = function ProgressBar(props) {
  var percentage = props.value > props.denominator ? 100 : props.value / props.denominator * 100;
  var progressStyles = (0, _classnames2.default)(_style2.default['progress-bar'], _style2.default[props.optClass]);

  return _react2.default.createElement(
    'div',
    { className: progressStyles },
    props.label ? _react2.default.createElement(_ProgressBarLabel2.default, { text: props.label, showPercentage: props.showPercentage, percentage: percentage }) : null,
    _react2.default.createElement(
      'div',
      { className: _style2.default.outer },
      _react2.default.createElement('div', { className: _style2.default.inner, style: { left: percentage - 100 + '%' } })
    )
  );
};

ProgressBar.defaultProps = {
  optClass: 'danger',
  denominator: 100,
  value: 0,
  showPercentage: false
};

ProgressBar.propTypes = {
  /**
   * The value of progress.
   */
  value: _react2.default.PropTypes.number.isRequired,
  /**
   * The max value of progress.
   */
  denominator: _react2.default.PropTypes.number.isRequired,
  /**
   * Text shown above the progress bar.
   */
  label: _react2.default.PropTypes.string,
  /**
   * Show or hide the percentage with the progress bar.
   */
  showPercentage: _react2.default.PropTypes.bool,
  /**
   * Optional styles to add to the progress bar component.
   */
  optClass: _react2.default.PropTypes.string
};

exports.default = ProgressBar;