@6thquake/react-material/Progress/Progress.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));

var _icons = require("@material-ui/icons");

var _colors = require("../colors");

var styles = function styles(theme) {
  return {
    lineicon: {
      display: 'flex',
      alignItems: 'center'
    },
    lineProgress: {
      flex: 1
    },
    nubProgress: {
      marginLeft: theme.spacing(2),
      width: "".concat(35, "px"),
      textAlign: 'left',
      fontSize: "".concat(1, "em"),
      verticalAlign: 'middle',
      fontAamily: 'tahoma'
    },
    icondiv: {
      width: 50
    },
    icon: {
      marginLeft: theme.spacing(2),
      '&:hover': {
        color: _colors.red[200]
      }
    }
  };
};

var Progress =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Progress, _Component);

  function Progress() {
    var _this;

    (0, _classCallCheck2.default)(this, Progress);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Progress).call(this));
    _this.timer = null;

    _this.progress = function () {
      var estimatedTime = _this.props.estimatedTime;
      var completed = _this.state.completed;
      var speed = estimatedTime > 0 ? Math.ceil(estimatedTime) : 4;
      var diff = Math.floor((100 - completed) / speed);

      _this.setState({
        completed: completed + diff
      });
    };

    _this.state = {
      completed: 0,
      show: false
    };
    return _this;
  }

  (0, _createClass2.default)(Progress, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.isPromise) {
        this.timer = setInterval(this.progress, 300);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var _this2 = this;

      if (this.props.isPromise) {
        if (this.state.completed === 100) {
          setTimeout(function () {
            return _this2.setState({
              show: false,
              completed: 0
            });
          }, 500);
        } else {
          if (this.timer) {
            clearTimeout(this.timer);
          }

          this.timer = setTimeout(this.progress, 300);
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          isPromise = _this$props.isPromise,
          baseProgress = _this$props.baseProgress,
          showPercentage = _this$props.showPercentage,
          value = _this$props.value,
          error = _this$props.error,
          others = (0, _objectWithoutProperties2.default)(_this$props, ["isPromise", "baseProgress", "showPercentage", "value", "error"]);
      var _this$state = this.state,
          completed = _this$state.completed,
          show = _this$state.show;
      var classes = this.props.classes;

      if (baseProgress) {
        return _react.default.createElement(_LinearProgress.default, this.props);
      }

      if (isPromise) {
        return show ? _react.default.createElement(_LinearProgress.default, (0, _extends2.default)({
          variant: "buffer",
          value: completed
        }, others)) : null;
      }

      if (!showPercentage) {
        return _react.default.createElement(_LinearProgress.default, (0, _extends2.default)({
          variant: "determinate",
          value: value
        }, others));
      }

      if (showPercentage) {
        var zcomplete = Math.floor(value);
        var finishOrError = zcomplete === 100 ? _react.default.createElement(_icons.Done, {
          className: classes.icon,
          color: "primary"
        }) : error ? _react.default.createElement(_icons.HighlightOff, {
          className: classes.icon,
          color: "error"
        }) : _react.default.createElement("span", {
          className: classes.nubProgress
        }, "".concat(zcomplete, "%"));
        return _react.default.createElement("div", {
          className: classes.lineicon
        }, _react.default.createElement("div", {
          className: classes.lineProgress
        }, _react.default.createElement(_LinearProgress.default, (0, _extends2.default)({
          variant: "determinate",
          color: error ? 'secondary' : 'primary',
          value: value
        }, this.props))), _react.default.createElement("div", {
          className: classes.icondiv
        }, finishOrError));
      }
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      if (!prevState.preProps || nextProps.isPromise && nextProps !== prevState.preProps && nextProps.isFinish !== prevState.preProps.isFinish) {
        return {
          show: true,
          completed: nextProps.isFinish ? 100 : 0,
          preProps: nextProps
        };
      }

      return null;
    }
  }]);
  return Progress;
}(_react.Component);

Progress.propTypes = {
  /**
   * If true, simulation progress.
   */
  baseProgress: _propTypes.default.bool,

  /**
   * 	The color of the component. It supports those theme colors that make sense for this component.
   */
  color: _propTypes.default.oneOf(['primary', 'secondary']),

  /**
   * If true, progress wrong.
   */
  error: _propTypes.default.bool,

  /**
   * Estimated time of the progress,when isPromise is true,the units is seconds.
   */
  estimatedTime: _propTypes.default.number,

  /**
   * If true, progress finish when isPromise is true.
   */
  isFinish: _propTypes.default.bool,

  /**
   * If true, it is a normal progress without percentage.
   */
  isPromise: _propTypes.default.bool,

  /**
   * 	 If true, progress with percentage.
   */
  showPercentage: _propTypes.default.bool,

  /**
   * The value for the buffer variant. Value between 0 and 100.
   */
  value: _propTypes.default.number,

  /**
   *  Progress percentage,only when isPromise is false. Value between 0 and 100.
   */
  valueBuffer: _propTypes.default.number,

  /**
   * The variant of progress indicator. Use indeterminate or query when there is no progress value.
   */
  variant: _propTypes.default.string
};
Progress.defaultProps = {
  value: 0,
  error: false,
  isFinish: false,
  estimatedTime: 2,
  valueBuffer: 10
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMProgress'
})(Progress);

exports.default = _default;