ldx-widgets/dist/components/progress_bar.js

widgets

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

  React = require('react');

  div = React.DOM.div;

  ProgressBar = React.createClass({
    displayName: 'ProgressBar',
    propTypes: {
      progress: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
      showLabel: React.PropTypes.bool,
      indeterminate: React.PropTypes.bool,
      className: React.PropTypes.string
    },
    getDefaultProps: function() {
      return {
        progress: 0,
        showLabel: true,
        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, numTicks, progWidth, progress, progressClass, ref, ref1, ref2, showLabel, style, tickWidth;
      ref = this.props, progress = ref.progress, className = ref.className, showLabel = ref.showLabel, 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({
        className: progressClass,
        ref: 'progress'
      }, div({
        className: "progress " + (indeterminate ? 'ind' : ''),
        style: style
      }, bars), showLabel ? div({
        className: 'progress-label'
      }, progress) : void 0);
    }
  });

  module.exports = ProgressBar;

}).call(this);