@orfeas126/box-ui-elements/es/elements/common/progress-bar/ProgressBar.js

Box UI Elements

function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * 
 * @file Progress Bar component
 * @author Box
 */

import React, { PureComponent } from 'react';
import './ProgressBar.scss';
class ProgressBar extends PureComponent {
  /**
   * [constructor]
   *
   * @return {ProgressBar}
   */
  constructor(props) {
    super(props);
    /**
     * Increaments the progress or resets it
     * depending upon the edge conditions.
     *
     * @return {void}
     */
    _defineProperty(this, "startProgress", () => {
      const {
        percent
      } = this.state;
      if (percent === 0) {
        this.interval = setInterval(this.incrementProgress, 100);
      } else if (percent === 100) {
        // Timeout helps transition of hiding the bar to finish
        this.timeout = setTimeout(this.resetProgress, 600);
      }
    });
    /**
     * Increaments the progress very slowly
     *
     * @return {void}
     */
    _defineProperty(this, "incrementProgress", () => {
      const {
        percent
      } = this.state;
      this.setState({
        percent: percent + 2 / (percent || 1)
      });
    });
    /**
     * Resets the progress to 0
     *
     * @return {void}
     */
    _defineProperty(this, "resetProgress", () => {
      this.setState(ProgressBar.defaultProps);
    });
    const {
      percent: _percent
    } = props;
    this.state = {
      percent: _percent
    };
  }

  /**
   * Clears any timeouts and intervals
   *
   * @return {void}
   */
  clearTimeoutAndInterval() {
    clearInterval(this.interval);
    clearTimeout(this.timeout);
  }

  /**
   * Starts progress on mount
   */

  componentDidMount() {
    this.startProgress();
  }

  /**
   * Updates state from new props
   *
   * @return {void}
   */
  componentDidUpdate(prevProps) {
    const {
      percent
    } = this.props;
    if (prevProps.percent !== percent) {
      this.clearTimeoutAndInterval();
      this.setState({
        percent
      }, this.startProgress);
    }
  }

  /**
   * Clears time out
   *
   * @return {void}
   */
  componentWillUnmount() {
    this.clearTimeoutAndInterval();
  }
  /**
   * Renders the progress bar
   *
   * @return {void}
   */
  render() {
    const {
      percent
    } = this.state;
    const containerStyle = {
      opacity: percent > 0 && percent < 100 ? 1 : 0,
      transitionDelay: percent > 0 && percent < 100 ? '0' : '0.4s'
    };
    return /*#__PURE__*/React.createElement("div", {
      className: "be-progress-container",
      style: containerStyle
    }, /*#__PURE__*/React.createElement("div", {
      className: "be-progress",
      style: {
        width: `${percent}%`
      }
    }));
  }
}
_defineProperty(ProgressBar, "defaultProps", {
  percent: 0
});
export default ProgressBar;
//# sourceMappingURL=ProgressBar.js.map