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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import LinearProgress from '@material-ui/core/LinearProgress';
import { Done, HighlightOff } from '@material-ui/icons';
import { red } from '../colors';

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

class Progress extends Component {
  constructor() {
    super();
    this.timer = null;

    this.progress = () => {
      const {
        estimatedTime
      } = this.props;
      const {
        completed
      } = this.state;
      const speed = estimatedTime > 0 ? Math.ceil(estimatedTime) : 4;
      const diff = Math.floor((100 - completed) / speed);
      this.setState({
        completed: completed + diff
      });
    };

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

  componentDidMount() {
    if (this.props.isPromise) {
      this.timer = setInterval(this.progress, 300);
    }
  }

  static 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;
  }

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

        this.timer = setTimeout(this.progress, 300);
      }
    }
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  render() {
    const _this$props = this.props,
          {
      isPromise,
      baseProgress,
      showPercentage,
      value,
      error
    } = _this$props,
          others = _objectWithoutPropertiesLoose(_this$props, ["isPromise", "baseProgress", "showPercentage", "value", "error"]);

    const {
      completed,
      show
    } = this.state;
    const {
      classes
    } = this.props;

    if (baseProgress) {
      return React.createElement(LinearProgress, this.props);
    }

    if (isPromise) {
      return show ? React.createElement(LinearProgress, _extends({
        variant: "buffer",
        value: completed
      }, others)) : null;
    }

    if (!showPercentage) {
      return React.createElement(LinearProgress, _extends({
        variant: "determinate",
        value: value
      }, others));
    }

    if (showPercentage) {
      const zcomplete = Math.floor(value);
      const finishOrError = zcomplete === 100 ? React.createElement(Done, {
        className: classes.icon,
        color: "primary"
      }) : error ? React.createElement(HighlightOff, {
        className: classes.icon,
        color: "error"
      }) : React.createElement("span", {
        className: classes.nubProgress
      }, `${zcomplete}%`);
      return React.createElement("div", {
        className: classes.lineicon
      }, React.createElement("div", {
        className: classes.lineProgress
      }, React.createElement(LinearProgress, _extends({
        variant: "determinate",
        color: error ? 'secondary' : 'primary',
        value: value
      }, this.props))), React.createElement("div", {
        className: classes.icondiv
      }, finishOrError));
    }
  }

}

process.env.NODE_ENV !== "production" ? Progress.propTypes = {
  /**
   * If true, simulation progress.
   */
  baseProgress: PropTypes.bool,

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

  /**
   * If true, progress wrong.
   */
  error: PropTypes.bool,

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

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

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

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

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

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

  /**
   * The variant of progress indicator. Use indeterminate or query when there is no progress value.
   */
  variant: PropTypes.string
} : void 0;
Progress.defaultProps = {
  value: 0,
  error: false,
  isFinish: false,
  estimatedTime: 2,
  valueBuffer: 10
};
export default withStyles(styles, {
  name: 'RMProgress'
})(Progress);