React 0.14.x

Author: Minh Tran

.babelrc

@@ -0,0 +1,4 @@
+{
+  "stage": 0,
+  "optional": []
+}

.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "example/bower_components"
+  "directory": "example/app/bower_components"
 }

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -24,12 +24,28 @@
   "rules": {
     "strict": 0,
     "curly": 0,
-    "quotes": [2, "single"],
+    "quotes": [2, "single", "avoid-escape"],
+    "semi": 2,
     "no-underscore-dangle": 0,
+    "no-unused-vars": [2, {"args": "all"}],
     "camelcase": [2, {"properties": "never"}],
     "new-cap": 0,
-    "react/jsx-boolean-value": 2,
-    "react/jsx-quotes": 2,
+    "accessor-pairs": 0,
+    "brace-style": [2, "1tbs"],
+    "consistent-return": 2,
+    "dot-location": [2, "property"],
+    "dot-notation": 2,
+    "eol-last": 2,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "no-bitwise": 0,
+    "no-multi-spaces": 2,
+    "no-shadow": 2,
+    "no-unused-expressions": 2,
+    "space-after-keywords": 2,
+    "space-before-blocks": 2,
+    "jsx-quotes": [1, "prefer-single"],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": [2, "always"],
     "react/jsx-no-undef": 2,
     "react/jsx-sort-props": 0,
     "react/jsx-sort-prop-types": 0,
@@ -38,11 +54,12 @@
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
     "react/no-multi-comp": 2,
-    "react/no-unknown-property": 1,
+    "react/no-unknown-property": 2,
     "react/prop-types": 1,
     "react/react-in-jsx-scope": 2,
     "react/self-closing-comp": 2,
-    "react/wrap-multilines": 0
+    "react/sort-comp": 0,
+    "react/wrap-multilines": [2, {"declaration": false, "assignment": false}]
   },
   "globals": {
     "inject": false,

.gitignore

@@ -1,5 +1,4 @@
 .idea
-.tmp
-dist
-example/bower_components
 node_modules
+bower_components
+example/dist

.npmignore

@@ -1,5 +1,2 @@
 .idea
-.tmp
-dist
-.bowerrc
-bower.json
+example

README.md

@@ -17,8 +17,6 @@ npm install --save react-progress-bar-plus
 ```js
 var ProgressBar = require('react-progress-bar-plus');
 
-var percent = 0;
-
 <ProgressBar percent={10}/>
 ```
 
@@ -40,7 +38,7 @@ require('react-progress-bar-plus/lib/progress-bar.css');
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | percent | number | -1 | Progress percent |
-| onTop | bool | false | Progrees bar will ontop & height 100% |
+| onTop | bool | false | Progress bar will ontop & height 100% |
 | autoIncrement | bool | false | if `true` percent will auto increment `Math.random() + 1 - Math.random()`% in `intervalTime` ms. |
 | intervalTime | number | 200 | Interval time for auto increment. |
 

bower.json

@@ -1,8 +1,8 @@
 {
   "name": "react-progress-bar-plus",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Progress bar component for ReactJS.",
-  "main": "lib/ProgressBar.js",
+  "main": "lib/index.js",
   "keywords": [
     "react-component",
     "react",
@@ -19,7 +19,8 @@
     "test",
     "tests"
   ],
+  "dependencies": {},
   "devDependencies": {
     "bootstrap-customize": "~3.3.4"
   }
-}
+}

example/app.js renamed to example/app/app.js

@@ -1,41 +1,43 @@
-var React = require('react');
+import 'babel-core/polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Header from './components/Header.js';
+import Footer from './components/Footer.js';
+import ProgressBar from 'react-progress-bar-plus';
 
-require('./bower_components/bootstrap-customize/css/bootstrap.css');
-require('../src/progress-bar.scss');
-require('./assets/styles/app.scss');
+import './bower_components/bootstrap-customize/css/bootstrap.css';
+import 'react-progress-bar-plus/src/progress-bar.scss';
+import './assets/styles/app.scss';
 
-var Header = require('./components/Header');
-var Footer = require('./components/Footer');
-var ProgressBar = require('../src/ProgressBar');
+class App extends React.Component {
+  state = {
+    percent: -1,
+    autoIncrement: false,
+    intervalTime: 200
+  };
 
-var App = React.createClass({
-  getInitialState: function () {
-    return {
-      percent: -1,
-      autoIncrement: false,
-      intervalTime: 200
-    };
-  },
-  setPercent: function (percent) {
-    return function () {
+  setPercent = (percent) => {
+    return () => {
       this.setState({
         percent: percent
       });
-    }.bind(this);
-  },
-  startWithAutoIncrement: function () {
+    };
+  };
+
+  startWithAutoIncrement = () => {
     this.setState({
       percent: 0,
       autoIncrement: true,
       intervalTime: (Math.random() * 1000)
     });
-  },
-  render: function () {
+  };
+
+  render() {
     return (
-      <div className={'layout-page'}>
+      <div className='layout-page'>
         <Header/>
-        <main className={'layout-main'}>
-          <div className={'container'}>
+        <main className='layout-main'>
+          <div className='container'>
             <ProgressBar percent={this.state.percent}
               autoIncrement={this.state.autoIncrement}
               intervalTime={this.state.intervalTime}/>
@@ -86,7 +88,14 @@ var App = React.createClass({
       </div>
     );
   }
-});
+}
 
-React.render(<App />, document.body);
+function run() {
+  ReactDOM.render(<App />, document.getElementById('app'));
+}
 
+if (window.addEventListener) {
+  window.addEventListener('DOMContentLoaded', run);
+} else {
+  window.attachEvent('onload', run);
+}