Create component

Author: Minh Tran

example/app.js

@@ -1,20 +1,85 @@
 var React = require('react');
 
 require('./bower_components/bootstrap-customize/css/bootstrap.css');
+require('../src/progress-bar.scss');
 require('./assets/styles/app.scss');
 
 var Header = require('./components/Header');
 var Footer = require('./components/Footer');
-var Component = require('../src/Component');
+var ProgressBar = require('../src/ProgressBar');
 
 var App = React.createClass({
+  getInitialState: function () {
+    return {
+      percent: -1,
+      autoIncrement: false,
+      intervalTime: 200
+    };
+  },
+  setPercent: function (percent) {
+    return function () {
+      this.setState({
+        percent: percent
+      });
+    }.bind(this);
+  },
+  startWithAutoIncrement: function () {
+    this.setState({
+      percent: 0,
+      autoIncrement: true,
+      intervalTime: (Math.random() * 1000)
+    });
+  },
   render: function () {
     return (
-      <div className={"layout-page"}>
+      <div className={'layout-page'}>
         <Header/>
-        <main className={"layout-main"}>
-          <div className={"container"}>
-            <Component/>
+        <main className={'layout-main'}>
+          <div className={'container'}>
+            <ProgressBar percent={this.state.percent}
+              autoIncrement={this.state.autoIncrement}
+              intervalTime={this.state.intervalTime}/>
+
+            <div className='text-center'>
+              <div className='btn-group'>
+                <button className='btn btn-default'
+                  onClick={this.setPercent(0)}>
+                  Start
+                </button>
+                <button className='btn btn-default'
+                  onClick={this.setPercent(25)}>
+                  Set 25
+                </button>
+                <button className='btn btn-default'
+                  onClick={this.setPercent(50)}>
+                  Set 50
+                </button>
+                <button className='btn btn-default'
+                  onClick={this.setPercent(75)}>
+                  Set 75
+                </button>
+                <button className='btn btn-default'
+                  onClick={this.setPercent(100)}>Finish
+                </button>
+              </div>
+            </div>
+            <hr/>
+            <div className='text-center'>
+              <h4>
+                Current intervalTime: <code>{this.state.intervalTime}</code>
+              </h4>
+
+              <div className='btn-group'>
+                <button className='btn btn-default'
+                  onClick={this.startWithAutoIncrement}>
+                  Start with auto increment
+                </button>
+                <button className='btn btn-default'
+                  onClick={this.setPercent(100)}>
+                  Finish
+                </button>
+              </div>
+            </div>
           </div>
         </main>
         <Footer/>

src/Component.js

@@ -0,0 +1,77 @@
+var React = require('react');
+
+var ProgressBar = React.createClass({
+  propTypes: {
+    percent: React.PropTypes.number.isRequired,
+    onTop: React.PropTypes.bool,
+    autoIncrement: React.PropTypes.bool,
+    intervalTime: React.PropTypes.number
+  },
+  getDefaultProps: function () {
+    return {
+      percent: -1,
+      onTop: false,
+      autoIncrement: false,
+      intervalTime: 200
+    };
+  },
+  getInitialState: function () {
+    return {
+      percent: this.props.percent
+    };
+  },
+  increment: function () {
+    var percent = this.state.percent + (Math.random() + 1 - Math.random());
+    percent = percent < 99 ? percent : 99;
+    this.setState({
+      percent: percent
+    });
+  },
+  componentWillUnmount: function () {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+  componentWillReceiveProps: function (nextProps) {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+
+    if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) {
+      this.interval = setInterval(this.increment, nextProps.intervalTime);
+    }
+
+    if (nextProps.percent >= 100) {
+      this.setState({
+        percent: 99.9
+      }, function () {
+        setTimeout(function () {
+          this.setState({
+            percent: 100
+          });
+        }.bind(this), 400);
+      });
+    } else {
+      this.setState({
+        percent: nextProps.percent
+      });
+    }
+  },
+  render: function () {
+    var className = 'react-progress-bar' + (this.props.onTop ? ' react-progress-bar-on-top' : '');
+    if (this.state.percent < 0 || this.state.percent >= 100) {
+      className += ' react-progress-bar-hide';
+    }
+    var style = {width: this.state.percent + '%'};
+    return (
+      <div className={className}>
+        <div className='react-progress-bar-percent' style={style}/>
+        <div className='react-progress-bar-spinner'>
+          <div className='react-progress-bar-spinner-icon'></div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = ProgressBar;

src/ProgressBar.js

@@ -0,0 +1,68 @@
+@-webkit-keyframes react-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes react-progress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.react-progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  visibility: visible;
+  opacity: 1;
+  transition: all 400ms;
+  z-index: 9999999;
+  &.react-progress-bar-on-top {
+    height: 100%;
+  }
+  &.react-progress-bar-hide {
+    opacity: 0;
+    visibility: hidden;
+    z-index: -10;
+    .react-progress-bar-percent {
+      width: 0;
+    }
+  }
+}
+
+.react-progress-bar-percent {
+  height: 2px;
+  background: #29D;
+  box-shadow: 0 0 10px #29D, 0 0 5px #29D;
+  transition: all 200ms ease;
+  width: 5px;
+}
+
+.react-progress-bar-spinner {
+  display: block;
+  position: fixed;
+  top: 15px;
+  left: 15px;
+}
+
+.react-progress-bar-spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: react-progress-spinner 400ms linear infinite;
+  animation: react-progress-spinner 400ms linear infinite;
+}