@gssfed/vital-ui-kit-react/dist/ProgressBar/ProgressBar.js

Vital UI Kit for React!

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _templateObject = _taggedTemplateLiteral(['\n  display: block;\n  margin-bottom: 14px;\n'], ['\n  display: block;\n  margin-bottom: 14px;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: space-between;\n  position: absolute;\n  top: ', ';\n  border: 1px solid transparent;\n  line-height: 2em;\n  width: 100%;\n  height: 100%;\n  left: -1px;\n  right: auto;\n  text-align: right;\n'], ['\n  display: flex;\n  justify-content: space-between;\n  position: absolute;\n  top: ', ';\n  border: 1px solid transparent;\n  line-height: 2em;\n  width: 100%;\n  height: 100%;\n  left: -1px;\n  right: auto;\n  text-align: right;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  min-width: 10px;\n  white-space: nowrap;\n  color: ', ';\n'], ['\n  min-width: 10px;\n  white-space: nowrap;\n  color: ', ';\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  font-size: 12px;\n'], ['\n  font-size: 12px;\n']);

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/**
 * 
 * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
 * MIT license
 */

import * as React from 'react';
import styled from 'styled-components';
import ResizeObserver from 'resize-observer-polyfill';

import Track from '../Track';
import { stateColor } from '../utils';

var Root = styled.div(_templateObject);

var StatusWrapper = styled.div(_templateObject2, function (props) {
  return props.size === 'large' ? '8px' : '4px';
});

var Status = styled.div(_templateObject3, function (props) {
  return stateColor(props, props.theme.progressBar.defaultColor);
});

var Label = styled(Status)(_templateObject4);

/**
 * @render react
 * @name ProgressBar
 * @description show the progress with percentage of current status
 * @example
 * <ProgressBar
 *  value={60}
 *  showStatus
 *  textLabel="File uploading"
 * />
 */
var ProgressBar = function (_React$Component) {
  _inherits(ProgressBar, _React$Component);

  function ProgressBar() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ProgressBar);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      width: 0
    }, _this.getPositionFromValue = function () {
      _this.setState({
        width: Math.round(_this.props.value / 100 * _this.node.offsetWidth)
      });
    }, _this.handleUpdate = function () {
      if (!_this.node) {
        return;
      }
      _this.getPositionFromValue();
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(ProgressBar, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.handleUpdate();
      var resizeObserver = new ResizeObserver(this.handleUpdate);
      resizeObserver.observe(this.node);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(prevProps, newProps) {
      if (prevProps.value !== newProps.value) {
        this.getPositionFromValue();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          alarm = _props.alarm,
          warning = _props.warning,
          success = _props.success,
          textLabel = _props.textLabel,
          size = _props.size,
          value = _props.value,
          showStatus = _props.showStatus;

      return React.createElement(
        Root,
        null,
        showStatus && React.createElement(
          StatusWrapper,
          { size: size },
          React.createElement(
            Label,
            { alarm: alarm, warning: warning, success: success },
            textLabel && textLabel
          ),
          React.createElement(
            Status,
            null,
            value,
            '%'
          )
        ),
        React.createElement(Track, {
          alarm: alarm,
          warning: warning,
          success: success,
          trackRef: function trackRef(s) {
            _this2.node = s;
          },
          size: size,
          selectionWidth: this.state.width
        })
      );
    }
  }]);

  return ProgressBar;
}(React.Component);

ProgressBar.defaultProps = {
  size: 'medium',
  showStatus: false,
  textLabel: null,
  alarm: false,
  warning: false,
  success: false
};


export default ProgressBar;