@lyra/components/lib/progress/ProgressBar.js

Basic UX components

'use strict';

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

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _barStyle = require('part:@lyra/components/progress/bar-style');

var _barStyle2 = _interopRequireDefault(_barStyle);

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

class ProgressBar extends _react2.default.Component {

  render() {
    var _props = this.props;
    const percent = _props.percent,
          completed = _props.completed,
          text = _props.text,
          showPercent = _props.showPercent;

    const rootClasses = `
      ${completed ? _barStyle2.default.completed : _barStyle2.default.uncompleted}
      ${percent >= 100 && _barStyle2.default.hundredPercent}
    `;
    const barStyle = {
      width: `${percent}%`
    };
    return _react2.default.createElement(
      'div',
      { className: rootClasses },
      _react2.default.createElement(
        'div',
        { className: _barStyle2.default.inner },
        _react2.default.createElement(
          'div',
          { className: _barStyle2.default.barContainer },
          _react2.default.createElement('div', { className: _barStyle2.default.bar, style: barStyle })
        ),
        showPercent && _react2.default.createElement(
          'div',
          { className: _barStyle2.default.percent },
          Math.round(percent, 1),
          '%'
        ),
        text && _react2.default.createElement(
          'div',
          { className: _barStyle2.default.text },
          text
        )
      )
    );
  }
}
exports.default = ProgressBar;
ProgressBar.propTypes = {
  className: _propTypes2.default.string,
  percent: _propTypes2.default.number,
  animation: _propTypes2.default.bool,
  completed: _propTypes2.default.bool,
  text: _propTypes2.default.string,
  showPercent: _propTypes2.default.bool
};
ProgressBar.defaultProps = {
  completion: 0
};