react-progress-bar-plus - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

bower.json

 {
   "name": "react-progress-bar-plus",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Progress bar component for ReactJS.",
@@ -5,0 +5,0 @@ "main": ["dist/progress-bar.css", "dist/react-progress-bar-plus.js"],

dist/react-progress-bar-plus.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactProgressBarPlus=t(require("react")):e.ReactProgressBarPlus=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(1),a=n(o);t["default"]=a["default"],e.exports=t["default"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=function(e,t,r){for(var n=!0;n;){var o=e,a=t,i=r;n=!1,null===o&&(o=Function.prototype);var u=Object.getOwnPropertyDescriptor(o,a);if(void 0!==u){if("value"in u)return u.value;var s=u.get;if(void 0===s)return;return s.call(i)}var p=Object.getPrototypeOf(o);if(null===p)return;e=p,t=a,r=i,n=!0,u=p=void 0}},p=r(2),c=n(p),l=r(3),f=n(l),d=function(e){function t(){var e=this;a(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state={percent:this.props.percent},this.componentDidMount=function(){e.handleProps(e.props)},this.componentWillReceiveProps=function(t){e.interval&&clearInterval(e.interval),e.timeout&&clearTimeout(e.timeout),e.handleProps(t)},this.componentWillUnmount=function(){e.interval&&clearInterval(e.interval),e.timeout&&clearTimeout(e.timeout)},this.increment=function(){var t=e.state.percent;t+=Math.random()+1-Math.random(),t=99>t?t:99,e.setState({percent:t})},this.handleProps=function(t){t.autoIncrement&&t.percent>=0&&t.percent<99&&(e.interval=setInterval(e.increment,t.intervalTime)),t.percent>=100?e.setState({percent:99.9},function(){e.timeout=setTimeout(function(){e.setState({percent:-1})},400)}):e.setState({percent:t.percent})}}return i(t,e),u(t,[{key:"render",value:function(){var e=this.props,t=e.onTop,r=e.spinner,n=e.className,a=this.state.percent;n=(0,f["default"])("react-progress-bar",n,{"react-progress-bar-on-top":t,"react-progress-bar-hide":0>a||a>=100});var i={width:(0>a?0:a)+"%"},u=(0,f["default"])("react-progress-bar-spinner",o({},"react-progress-bar-spinner-"+r,r));return c["default"].createElement("div",{className:n},c["default"].createElement("div",{className:"react-progress-bar-percent",style:i}),r?c["default"].createElement("div",{className:u},c["default"].createElement("div",{className:"react-progress-bar-spinner-icon"})):null)}}],[{key:"propTypes",value:{className:c["default"].PropTypes.string,percent:c["default"].PropTypes.number.isRequired,onTop:c["default"].PropTypes.bool,autoIncrement:c["default"].PropTypes.bool,intervalTime:c["default"].PropTypes.number,spinner:c["default"].PropTypes.oneOf([!1,"left","right"])},enumerable:!0},{key:"defaultProps",value:{percent:-1,onTop:!1,autoIncrement:!1,intervalTime:200,spinner:"left"},enumerable:!0}]),t}(c["default"].Component);t["default"]=d,e.exports=t["default"]},function(t,r){t.exports=e},function(e,t,r){var n,o;!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var o=typeof n;if("string"===o||"number"===o)e.push(n);else if(Array.isArray(n))e.push(r.apply(null,n));else if("object"===o)for(var i in n)a.call(n,i)&&n[i]&&e.push(i)}}return e.join(" ")}var a={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(n=[],o=function(){return r}.apply(t,n),!(void 0!==o&&(e.exports=o)))}()}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.ReactProgressBarPlus=t(require("prop-types"),require("react")):e.ReactProgressBarPlus=t(e.PropTypes,e.React)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=r(4),p=n(s),l=r(3),f=n(l),d=r(2),m=n(d),v=function(e){function t(){var e,r,n,o;a(this,t);for(var i=arguments.length,c=Array(i),s=0;s<i;s++)c[s]=arguments[s];return r=n=u(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(c))),n.state={percent:n.props.percent},n.componentDidMount=function(){n.handleProps(n.props)},n.componentWillReceiveProps=function(e){n.interval&&clearInterval(n.interval),n.timeout&&clearTimeout(n.timeout),n.handleProps(e)},n.componentWillUnmount=function(){n.interval&&clearInterval(n.interval),n.timeout&&clearTimeout(n.timeout)},n.increment=function(){var e=n.state.percent;e+=Math.random()+1-Math.random(),e=e<99?e:99,n.setState({percent:e})},n.handleProps=function(e){var t=e.autoIncrement,r=e.percent,o=e.intervalTime;t&&r>=0&&r<99&&(n.interval=setInterval(n.increment,o)),r>=100?n.setState({percent:99.9},function(){n.timeout=setTimeout(function(){n.setState({percent:-1})},400)}):n.setState({percent:r})},o=r,u(n,o)}return i(t,e),c(t,[{key:"render",value:function(){var e=this.props,t=e.onTop,r=e.spinner,n=this.props.className,a=this.state.percent;n=(0,m.default)("react-progress-bar",n,{"react-progress-bar-on-top":t,"react-progress-bar-hide":a<0||a>=100});var u={width:(a<0?0:a)+"%"},i=(0,m.default)("react-progress-bar-spinner",o({},"react-progress-bar-spinner-"+r,r));return p.default.createElement("div",{className:n},p.default.createElement("div",{className:"react-progress-bar-percent",style:u}),r?p.default.createElement("div",{className:i},p.default.createElement("div",{className:"react-progress-bar-spinner-icon"})):null)}}]),t}(p.default.Component);v.propTypes={className:f.default.string,percent:f.default.number.isRequired,onTop:f.default.bool,autoIncrement:f.default.bool,intervalTime:f.default.number,spinner:f.default.oneOf([!1,"left","right"])},v.defaultProps={className:"",percent:-1,onTop:!1,autoIncrement:!1,intervalTime:200,spinner:"left"},t.default=v,e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(0),o=function(e){return e&&e.__esModule?e:{default:e}}(n);t.default=o.default,e.exports=t.default},function(e,t,r){var n,o;!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var o=typeof n;if("string"===o||"number"===o)e.push(n);else if(Array.isArray(n))e.push(r.apply(null,n));else if("object"===o)for(var u in n)a.call(n,u)&&n[u]&&e.push(u)}}return e.join(" ")}var a={}.hasOwnProperty;void 0!==e&&e.exports?e.exports=r:(n=[],void 0!==(o=function(){return r}.apply(t,n))&&(e.exports=o))}()},function(t,r){t.exports=e},function(e,r){e.exports=t}])});

gulpfile.babel.js

 import gulp from 'gulp';
-import taskDir from 'task-dir';
-import path from 'path';
+import del from 'del';
+import babel from 'gulp-babel';
+import webpackStream from 'webpack-stream';
+import webpack from 'webpack';
+import sass from 'gulp-sass';
+import postcss from 'gulp-postcss';
+import concat from 'gulp-concat';
+import runSequence from 'run-sequence';
+import pkg from './package.json';
+import webpackConfig from './webpack.config';
+import exampleWebpackConfig from './example/webpack.config.babel';
 
+gulp.task('build:lib:clean', () => {
+  del.sync(['lib', 'dist']);
+});
 
-taskDir(gulp, path.join(__dirname, 'tasks'));
+gulp.task('build:lib:babel', () => gulp
+  .src(['src/**/*.js'])
+  .pipe(babel())
+  .pipe(gulp.dest('lib')));
 
+gulp.task('build:lib:umd', () => gulp
+  .src(['src/index.js'])
+  .pipe(webpackStream(webpackConfig, webpack))
+  .pipe(gulp.dest('dist')));
+
+gulp.task('build:lib:style', () => gulp
+  .src(['src/**/*.scss', '!src/**/_*.scss'])
+  .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
+  .pipe(gulp.dest('lib'))
+  .pipe(concat(`${pkg.name}.css`))
+  .pipe(postcss())
+  .pipe(gulp.dest('dist')));
+
+gulp.task('build:lib:copy', () => gulp
+  .src(['src/**/*', '!src/**/*.{scss,js}'])
+  .pipe(gulp.dest('lib'))
+  .pipe(gulp.dest('dist')));
+
+gulp.task('build:lib', (callback) => {
+  runSequence(
+    'build:lib:clean',
+    'build:lib:babel',
+    'build:lib:umd',
+    'build:lib:style',
+    'build:lib:copy',
+    callback
+  );
+});
+
+gulp.task('build:example:clean', () => {
+  del.sync(['example/dist']);
+});
+
+gulp.task('build:example:webpack', () => gulp
+  .src(['example/app/app.js'])
+  .pipe(webpackStream(exampleWebpackConfig, webpack))
+  .pipe(gulp.dest('example/dist')));
+
+gulp.task('build:example:copy', () => gulp
+  .src(['example/app/*', '!example/app/*.{html,js}'], { nodir: true })
+  .pipe(gulp.dest('example/dist')));
+
+gulp.task('build:example', (callback) => {
+  runSequence(
+    'build:example:clean',
+    'build:example:webpack',
+    'build:example:copy',
+    callback
+  );
+});
+
+gulp.task('build', (callback) => {
+  runSequence('build:lib', 'build:example', callback);
+});
+
 gulp.task('default', ['build']);

lib/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _ProgressBar = require('./ProgressBar.js');
 
-var _ProgressBarJs = require('./ProgressBar.js');
+var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
 
-var _ProgressBarJs2 = _interopRequireDefault(_ProgressBarJs);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports['default'] = _ProgressBarJs2['default'];
+exports.default = _ProgressBar2.default;
 module.exports = exports['default'];

lib/ProgressBar.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _react = require('react');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _react2 = _interopRequireDefault(_react);
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _propTypes = require('prop-types');
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var _classnames2 = require('classnames');
 
-var _react = require('react');
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _react2 = _interopRequireDefault(_react);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _classnames2 = require('classnames');
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _classnames3 = _interopRequireDefault(_classnames2);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var ProgressBar = (function (_React$Component) {
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProgressBar = function (_React$Component) {
   _inherits(ProgressBar, _React$Component);
 
   function ProgressBar() {
-    var _this = this;
+    var _ref;
 
+    var _temp, _this, _ret;
+
     _classCallCheck(this, ProgressBar);
 
-    _get(Object.getPrototypeOf(ProgressBar.prototype), 'constructor', this).apply(this, arguments);
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    this.state = {
-      percent: this.props.percent
-    };
-
-    this.componentDidMount = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      percent: _this.props.percent
+    }, _this.componentDidMount = function () {
       _this.handleProps(_this.props);
-    };
-
-    this.componentWillReceiveProps = function (nextProps) {
+    }, _this.componentWillReceiveProps = function (nextProps) {
       if (_this.interval) {
@@ -53,5 +57,3 @@ clearInterval(_this.interval);
       _this.handleProps(nextProps);
-    };
-
-    this.componentWillUnmount = function () {
+    }, _this.componentWillUnmount = function () {
       if (_this.interval) {
@@ -63,8 +65,6 @@ clearInterval(_this.interval);
       }
-    };
-
-    this.increment = function () {
+    }, _this.increment = function () {
       var percent = _this.state.percent;
 
-      percent = percent + (Math.random() + 1 - Math.random());
+      percent += Math.random() + 1 - Math.random();
       percent = percent < 99 ? percent : 99;
@@ -74,10 +74,12 @@ _this.setState({
       });
-    };
+    }, _this.handleProps = function (props) {
+      var autoIncrement = props.autoIncrement,
+          percent = props.percent,
+          intervalTime = props.intervalTime;
 
-    this.handleProps = function (props) {
-      if (props.autoIncrement && props.percent >= 0 && props.percent < 99) {
-        _this.interval = setInterval(_this.increment, props.intervalTime);
+      if (autoIncrement && percent >= 0 && percent < 99) {
+        _this.interval = setInterval(_this.increment, intervalTime);
       }
 
-      if (props.percent >= 100) {
+      if (percent >= 100) {
         _this.setState({
@@ -94,6 +96,6 @@ percent: 99.9
         _this.setState({
-          percent: props.percent
+          percent: percent
         });
       }
-    };
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -104,9 +106,9 @@
     value: function render() {
-      var _props = this.props;
-      var onTop = _props.onTop;
-      var spinner = _props.spinner;
-      var className = _props.className;
+      var _props = this.props,
+          onTop = _props.onTop,
+          spinner = _props.spinner;
+      var className = this.props.className;
       var percent = this.state.percent;
 
-      className = (0, _classnames3['default'])('react-progress-bar', className, {
+      className = (0, _classnames3.default)('react-progress-bar', className, {
         'react-progress-bar-on-top': onTop,
@@ -116,41 +118,36 @@ 'react-progress-bar-hide': percent < 0 || percent >= 100
       var style = { width: (percent < 0 ? 0 : percent) + '%' };
-      var spinnerClassName = (0, _classnames3['default'])('react-progress-bar-spinner', _defineProperty({}, 'react-progress-bar-spinner-' + spinner, spinner));
-      return _react2['default'].createElement(
+      var spinnerClassName = (0, _classnames3.default)('react-progress-bar-spinner', _defineProperty({}, 'react-progress-bar-spinner-' + spinner, spinner));
+      return _react2.default.createElement(
         'div',
         { className: className },
-        _react2['default'].createElement('div', { className: 'react-progress-bar-percent', style: style }),
-        spinner ? _react2['default'].createElement(
+        _react2.default.createElement('div', { className: 'react-progress-bar-percent', style: style }),
+        spinner ? _react2.default.createElement(
           'div',
           { className: spinnerClassName },
-          _react2['default'].createElement('div', { className: 'react-progress-bar-spinner-icon' })
+          _react2.default.createElement('div', { className: 'react-progress-bar-spinner-icon' })
         ) : null
       );
     }
-  }], [{
-    key: 'propTypes',
-    value: {
-      className: _react2['default'].PropTypes.string,
-      percent: _react2['default'].PropTypes.number.isRequired,
-      onTop: _react2['default'].PropTypes.bool,
-      autoIncrement: _react2['default'].PropTypes.bool,
-      intervalTime: _react2['default'].PropTypes.number,
-      spinner: _react2['default'].PropTypes.oneOf([false, 'left', 'right'])
-    },
-    enumerable: true
-  }, {
-    key: 'defaultProps',
-    value: {
-      percent: -1,
-      onTop: false,
-      autoIncrement: false,
-      intervalTime: 200,
-      spinner: 'left'
-    },
-    enumerable: true
   }]);
 
   return ProgressBar;
-})(_react2['default'].Component);
+}(_react2.default.Component);
 
-exports['default'] = ProgressBar;
+ProgressBar.propTypes = {
+  className: _propTypes2.default.string,
+  percent: _propTypes2.default.number.isRequired,
+  onTop: _propTypes2.default.bool,
+  autoIncrement: _propTypes2.default.bool,
+  intervalTime: _propTypes2.default.number,
+  spinner: _propTypes2.default.oneOf([false, 'left', 'right'])
+};
+ProgressBar.defaultProps = {
+  className: '',
+  percent: -1,
+  onTop: false,
+  autoIncrement: false,
+  intervalTime: 200,
+  spinner: 'left'
+};
+exports.default = ProgressBar;
 module.exports = exports['default'];

package.json

 {
   "name": "react-progress-bar-plus",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Progress bar component for ReactJS.",
   "main": "lib/index.js",
   "scripts": {
-    "start": "NODE_ENV=development gulp start",
+    "start": "NODE_ENV=development babel-node example/webpack.server.js --hot",
+    "lint": "NODE_ENV=development eslint .",
     "build": "NODE_ENV=production gulp build"
@@ -22,61 +23,55 @@ },
   "dependencies": {
-    "classnames": "^2.1.5"
+    "classnames": "^2.1.5",
+    "prop-types": "^15.5.10"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.1",
-    "babel": "^5.8.34",
-    "babel-core": "^5.8.29",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-react-transform": "^1.1.1",
-    "bootstrap": "^3.3.6",
-    "camelcase": "^2.0.1",
-    "css-loader": "^0.23.0",
-    "cssnano": "^3.3.2",
-    "del": "^2.1.0",
-    "eslint": "^1.10.1",
-    "eslint-loader": "^1.2.0",
-    "eslint-plugin-react": "^3.15.0",
-    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
-    "gulp": "^3.9.0",
-    "gulp-babel": "^5.2.1",
-    "gulp-eslint": "^1.1.0",
-    "gulp-filter": "^3.0.1",
-    "gulp-postcss": "^6.1.0",
-    "gulp-sass": "^2.2.0",
-    "history": "^2.0.1",
-    "html-loader": "^0.4.0",
-    "html-webpack-plugin": "^2.7.1",
-    "http-proxy": "^1.12.0",
-    "json-loader": "^0.5.4",
-    "less": "^2.5.3",
-    "less-loader": "^2.2.1",
-    "node-sass": "^3.4.2",
-    "opn": "^4.0.0",
-    "postcss-loader": "^0.8.0",
-    "react-dom": "^0.13 || ^0.14 || ^15.0.0",
-    "react-router": "^2.0.0",
-    "react-transform-hmr": "^1.0.1",
-    "run-sequence": "^1.1.5",
-    "sass-loader": "^3.1.2",
-    "style-loader": "^0.13.0",
-    "task-dir": "^0.2.0",
-    "webpack": "^1.12.11",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.5.0",
-    "webpack-manifest-plugin": "^1.0.0",
-    "webpack-stream": "^3.0.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/vn38minhtran/react-progress-bar-plus.git"
-  },
-  "author": "Minh Tran",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vn38minhtran/react-progress-bar-plus/issues"
-  },
-  "homepage": "https://github.com/vn38minhtran/react-progress-bar-plus"
+    "autoprefixer": "^7.0.1",
+    "babel-cli": "^6.8.0",
+    "babel-core": "^6.8.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-add-module-exports": "^0.2.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-env": "^1.2.2",
+    "babel-preset-react": "^6.24.1",
+    "bootstrap": "^3.3.7",
+    "camelcase": "^4.1.0",
+    "clean-webpack-plugin": "^0.1.9",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
+    "cssnano": "^3.5.2",
+    "del": "^3.0.0",
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-loader": "^1.3.0",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.0.1",
+    "express": "^4.15.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "flux": "^3.1.2",
+    "globby": "^6.1.0",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-postcss": "^7.0.0",
+    "gulp-sass": "^3.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy": "^1.16.2",
+    "node-sass": "^4.5.0",
+    "postcss-loader": "^2.0.5",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-hot-loader": "^1.3.1",
+    "react-router-dom": "^4.1.1",
+    "run-sequence": "^1.2.2",
+    "sass-loader": "^6.0.1",
+    "style-loader": "^0.18.2",
+    "webpack": "^2.2.1",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0",
+    "webpack-stream": "^3.2.0"
+  }
 }

README.md

@@ -5,3 +5,3 @@ # React Progress Bar Plus
 
-[<img src="./screen-shot.png" width="100%"/>](http://vn38minhtran.github.io/react-progress-bar-plus)
+[<img src="./screen-shot.png" width="100%"/>](http://minhtranite.github.io/react-progress-bar-plus)
 
@@ -25,3 +25,3 @@ ## Installation
 ```js
-var ProgressBar = require('react-progress-bar-plus');
+const ProgressBar = require('react-progress-bar-plus');
 
@@ -48,3 +48,3 @@ <ProgressBar percent={10}/>
 ```html
-<link rel="stylesheet" type="text/css" href="path/to/react-progress-bar-plus/dist/progress-bar.css">
+<link rel="stylesheet" type="text/css" href="path/to/react-progress-bar-plus/dist/react-progress-bar-plus.css">
 <script src="path/to/react-progress-bar-plus/dist/react-progress-bar-plus.js"></script>
@@ -54,5 +54,3 @@ ```
 ```js
-...
-var ProgressBar = window.ReactProgressBarPlus;
-...
+const ProgressBar = window.ReactProgressBarPlus;
 ```
@@ -74,3 +72,3 @@
 
-View [demo](http://vn38minhtran.github.io/react-progress-bar-plus) or example folder.
+View [demo](http://minhtranite.github.io/react-progress-bar-plus) or example folder.
 
@@ -77,0 +75,0 @@ ## License

src/index.js

 import ProgressBar from './ProgressBar.js';
+
 export default ProgressBar;

src/ProgressBar.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -6,11 +7,12 @@
   static propTypes = {
-    className: React.PropTypes.string,
-    percent: React.PropTypes.number.isRequired,
-    onTop: React.PropTypes.bool,
-    autoIncrement: React.PropTypes.bool,
-    intervalTime: React.PropTypes.number,
-    spinner: React.PropTypes.oneOf([false, 'left', 'right'])
+    className: PropTypes.string,
+    percent: PropTypes.number.isRequired,
+    onTop: PropTypes.bool,
+    autoIncrement: PropTypes.bool,
+    intervalTime: PropTypes.number,
+    spinner: PropTypes.oneOf([false, 'left', 'right'])
   };
 
   static defaultProps = {
+    className: '',
     percent: -1,
@@ -51,7 +53,7 @@ onTop: false,
   increment = () => {
-    let {percent} = this.state;
-    percent = percent + (Math.random() + 1 - Math.random());
+    let { percent } = this.state;
+    percent += ((Math.random() + 1) - Math.random());
     percent = percent < 99 ? percent : 99;
     this.setState({
-      percent: percent
+      percent
     });
@@ -61,7 +63,8 @@ };
   handleProps = (props) => {
-    if (props.autoIncrement && props.percent >= 0 && props.percent < 99) {
-      this.interval = setInterval(this.increment, props.intervalTime);
+    const { autoIncrement, percent, intervalTime } = props;
+    if (autoIncrement && percent >= 0 && percent < 99) {
+      this.interval = setInterval(this.increment, intervalTime);
     }
 
-    if (props.percent >= 100) {
+    if (percent >= 100) {
       this.setState({
@@ -78,3 +81,3 @@ percent: 99.9
       this.setState({
-        percent: props.percent
+        percent
       });
@@ -85,4 +88,5 @@ }
   render() {
-    let {onTop, spinner, className} = this.props;
-    let {percent} = this.state;
+    const { onTop, spinner } = this.props;
+    let { className } = this.props;
+    const { percent } = this.state;
     className = classnames('react-progress-bar', className, {
@@ -92,4 +96,4 @@ 'react-progress-bar-on-top': onTop,
     });
-    let style = {width: (percent < 0 ? 0 : percent) + '%'};
-    let spinnerClassName = classnames('react-progress-bar-spinner', {
+    const style = { width: `${percent < 0 ? 0 : percent}%` };
+    const spinnerClassName = classnames('react-progress-bar-spinner', {
       [`react-progress-bar-spinner-${spinner}`]: spinner
@@ -96,0 +100,0 @@ });

webpack.config.js

 import webpack from 'webpack';
+import path from 'path';
+import camelCase from 'camelcase';
 import pkg from './package.json';
-import camelCase from 'camelcase';
 
-const capitalizeFirstLetter = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-};
+const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
 
 const webpackConfig = {
   output: {
-    filename: pkg.name + '.js',
+    filename: `${pkg.name}.js`,
     library: capitalizeFirstLetter(camelCase(pkg.name)),
@@ -21,9 +20,34 @@ libraryTarget: 'umd'
       amd: 'react'
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs: 'react-dom',
+      commonjs2: 'react-dom',
+      amd: 'react-dom'
+    },
+    'prop-types': {
+      root: 'PropTypes',
+      commonjs: 'prop-types',
+      commonjs2: 'prop-types',
+      amd: 'prop-types'
     }
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.(js|jsx)$/,
-        exclude: /(node_modules)/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            configFile: path.join(__dirname, '.eslintrc'),
+            failOnError: true,
+            emitError: true
+          }
+        },
+        enforce: 'pre'
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
         loader: 'babel-loader'
@@ -34,4 +58,4 @@ }
   resolve: {
-    modulesDirectories: ['node_modules', 'bower_components'],
-    extensions: ['', '.jsx', '.js']
+    modules: ['node_modules'],
+    extensions: ['.jsx', '.js']
   },
@@ -52,4 +76,3 @@ plugins: [
       }
-    }),
-    new webpack.optimize.DedupePlugin()
+    })
   ]
@@ -56,0 +79,0 @@ };

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35812

4.22%

Number of package files

31

6.9%

Lines of code

576

22.55%

Worsened metrics

Dependency count

3

50%

Dev dependency count

48

6.67%

Number of low license alerts

1

Infinity%

Number of low maintenance alerts

3

200%

Number of low quality alerts

2

100%

Number of lines in readme file

73

-2.67%

Number of low supply chain risk alerts

3

200%

Number of medium supply chain risk alerts

2

100%

Dependency changes

• + Added

  prop-types@^15.5.10