ldx-widgets/dist/components/progress_bar.js

widgets

/*
Progress Bar Props

@props.showLabel - bool 
  Determines if we show the label
 

@props.labelPosition - string
  Determines where to display the label in relation to the bar - center or top
 */

(function() {
  var ProgressBar, PropTypes, React, createClass, div;

  React = require('react');

  createClass = require('create-react-class');

  PropTypes = require('prop-types');

  div = require('react-dom-factories').div;

  ProgressBar = createClass({
    displayName: 'ProgressBar',
    propTypes: {
      progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      showLabel: PropTypes.bool,
      labelPosition: PropTypes.string,
      indeterminate: PropTypes.bool,
      className: PropTypes.string
    },
    getDefaultProps: function() {
      return {
        progress: 0,
        showLabel: true,
        labelPosition: 'center',
        indeterminate: false,
        className: ''
      };
    },
    getInitialState: function() {
      return {
        indPos: 0,
        progWidth: 0
      };
    },
    componentDidMount: function() {
      if (this.props.indeterminate) {
        return this.setState({
          progWidth: this.refs.progress.clientWidth
        }, (function(_this) {
          return function() {
            return _this.startProgress();
          };
        })(this));
      }
    },
    startProgress: function() {
      this.ind = setInterval((function(_this) {
        return function() {
          var indPos, pos, progWidth, ref;
          ref = _this.state, indPos = ref.indPos, progWidth = ref.progWidth;
          pos = indPos <= -25 ? indPos = 0 : indPos - 1;
          return _this.setState({
            indPos: pos
          });
        };
      })(this), 60);
      return window.addEventListener('resize', this.resizeWindow);
    },
    componentWillUnmount: function() {
      clearInterval(this.ind);
      return window.removeEventListener('resize', this.resizeWindow);
    },
    resizeWindow: function() {
      clearInterval(this.ind);
      return this.setState({
        progWidth: this.refs.progress.clientWidth
      }, this.startProgress);
    },
    render: function() {
      var bars, className, i, indPos, indeterminate, j, labelPosition, numTicks, progWidth, progress, progressClass, ref, ref1, ref2, showLabel, style, tickWidth;
      ref = this.props, progress = ref.progress, className = ref.className, showLabel = ref.showLabel, labelPosition = ref.labelPosition, indeterminate = ref.indeterminate;
      ref1 = this.state, indPos = ref1.indPos, progWidth = ref1.progWidth;
      progressClass = "progress-bar " + className;
      if (typeof progress === 'number') {
        progress = progress + "%";
      }
      style = {
        width: progress
      };
      if (indeterminate) {
        bars = [];
        tickWidth = 25;
        numTicks = Math.floor(progWidth / tickWidth);
        style = {
          width: (numTicks + 2) * tickWidth,
          transform: "translateX(" + indPos + "px) translateZ(0px)",
          msTransform: "translate(" + indPos + "px)",
          WebkitTransform: "translateX(" + indPos + "px)"
        };
        for (i = j = 0, ref2 = numTicks; 0 <= ref2 ? j <= ref2 : j >= ref2; i = 0 <= ref2 ? ++j : --j) {
          bars.push(div({
            key: i,
            className: 'ind-bar',
            style: {
              width: 13,
              marginRight: 12
            }
          }));
        }
      }
      return div({
        ref: 'progress'
      }, [
        showLabel && labelPosition === 'top' ? div({
          key: 'label',
          className: "progress-label " + labelPosition
        }, progress) : void 0, div({
          key: 'bar',
          className: progressClass,
          ref: 'progress-bar'
        }, [
          div({
            key: 'bars',
            className: "progress " + (indeterminate ? 'ind' : ''),
            style: style
          }, bars), showLabel && labelPosition === 'center' ? div({
            key: 'label',
            className: 'progress-label'
          }, progress) : void 0
        ])
      ]);
    }
  });

  module.exports = ProgressBar;

}).call(this);