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

Comparing version 0.2.2 to 0.2.3

bower.json

 {
   "name": "react-progress-bar-plus",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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,2 +0,2 @@
-!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){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 i=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}}(),u=function(e,t,r){for(var n=!0;n;){var o=e,a=t,i=r;u=s=c=void 0,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 c=u.get;return void 0===c?void 0:c.call(i)}var s=Object.getPrototypeOf(o);if(null===s)return void 0;e=s,t=a,r=i,n=!0}},c=r(2),s=n(c),l=r(3),p=n(l),f=function(e){function t(){var e=this;o(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state={percent:this.props.percent},this.increment=function(){var t=e.state.percent+(Math.random()+1-Math.random());t=99>t?t:99,e.setState({percent:t})},this.componentWillUnmount=function(){e.interval&&clearInterval(e.interval),e.timeout&&clearTimeout(e.timeout)},this.componentWillReceiveProps=function(t){e.interval&&clearInterval(e.interval),e.timeout&&clearTimeout(e.timeout),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 a(t,e),i(t,[{key:"render",value:function(){var e=p["default"]({"react-progress-bar":!0,"react-progress-bar-on-top":this.props.onTop,"react-progress-bar-hide":this.state.percent<0||this.state.percent>=100}),t={width:(this.state.percent<0?0:this.state.percent)+"%"};return s["default"].createElement("div",{className:e},s["default"].createElement("div",{className:"react-progress-bar-percent",style:t}),s["default"].createElement("div",{className:"react-progress-bar-spinner"},s["default"].createElement("div",{className:"react-progress-bar-spinner-icon"})))}}],[{key:"propTypes",value:{percent:s["default"].PropTypes.number.isRequired,onTop:s["default"].PropTypes.bool,autoIncrement:s["default"].PropTypes.bool,intervalTime:s["default"].PropTypes.number},enumerable:!0},{key:"defaultProps",value:{percent:-1,onTop:!1,autoIncrement:!1,intervalTime:200},enumerable:!0}]),t}(s["default"].Component);t["default"]=f,e.exports=t["default"]},function(t,r){t.exports=e},function(e,t,r){var n;/*!
+!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){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 i=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}}(),u=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 c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=a,r=i,n=!0,u=c=void 0}},s=r(2),c=n(s),p=r(3),l=n(p),f=function(e){function t(){var e=this;o(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments),this.state={percent:this.props.percent},this.increment=function(){var t=e.state.percent+(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})},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)}}return a(t,e),i(t,[{key:"render",value:function(){var e=(0,l["default"])({"react-progress-bar":!0,"react-progress-bar-on-top":this.props.onTop,"react-progress-bar-hide":this.state.percent<0||this.state.percent>=100}),t={width:(this.state.percent<0?0:this.state.percent)+"%"};return c["default"].createElement("div",{className:e},c["default"].createElement("div",{className:"react-progress-bar-percent",style:t}),c["default"].createElement("div",{className:"react-progress-bar-spinner"},c["default"].createElement("div",{className:"react-progress-bar-spinner-icon"})))}}],[{key:"propTypes",value:{percent:c["default"].PropTypes.number.isRequired,onTop:c["default"].PropTypes.bool,autoIncrement:c["default"].PropTypes.bool,intervalTime:c["default"].PropTypes.number},enumerable:!0},{key:"defaultProps",value:{percent:-1,onTop:!1,autoIncrement:!1,intervalTime:200},enumerable:!0}]),t}(c["default"].Component);t["default"]=f,e.exports=t["default"]},function(t,r){t.exports=e},function(e,t,r){var n,o;/*!
 	  Copyright (c) 2015 Jed Watson.
@@ -6,2 +6,2 @@ Licensed under the MIT License (MIT), see
 	*/
-!function(){"use strict";function o(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];if(r){var n=typeof r;if("string"===n||"number"===n)e+=" "+r;else if(Array.isArray(r))e+=" "+o.apply(null,r);else if("object"===n)for(var i in r)a.call(r,i)&&r[i]&&(e+=" "+i)}}return e.substr(1)}var a={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=o:(n=function(){return o}.call(t,r,t,e),!(void 0!==n&&(e.exports=n)))}()}])});
+!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+=" "+n;else if(Array.isArray(n))e+=" "+r.apply(null,n);else if("object"===o)for(var i in n)a.call(n,i)&&n[i]&&(e+=" "+i)}}return e.substr(1)}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)))}()}])});

gulpfile.js

 'use strict';
 
-var pkg = require('./package.json');
 var gulp = require('gulp');
@@ -10,7 +9,9 @@ var del = require('del');
 var filter = require('gulp-filter');
-var autoprefixer = require('gulp-autoprefixer');
-var minifyCss = require('gulp-minify-css');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var cssnano = require('cssnano');
 var runSequence = require('run-sequence');
-var webpackStatsHelper = require('./example/helper/webpack-stats-helper');
+var webpackStatsHelper = require('./example/webpack-stats-helper');
 var path = require('path');
+var preProcess = require('gulp-preprocess');
 var frep = require('gulp-frep');
@@ -20,10 +21,10 @@ var minifyHtml = require('gulp-minify-html');
 var webpackConfig = require('./webpack.config');
-var exampleWebpackConfig = require('./example/webpack.build.config');
+var exampleWebpackConfig = require('./example/webpack.prod.config');
 var webpack = require('webpack');
 
-gulp.task('clean', function () {
+gulp.task('lib:clean', function () {
   del.sync(['lib', 'dist']);
 });
 
-gulp.task('lint', function () {
+gulp.task('lib:lint', function () {
   return gulp
@@ -36,3 +37,3 @@ .src(['src/**/*.js'])
 
-gulp.task('babel', function () {
+gulp.task('lib:babel', function () {
   return gulp
@@ -44,3 +45,3 @@ .src(['src/**/*.js'])
 
-gulp.task('umd', function () {
+gulp.task('lib:umd', function () {
   return gulp
@@ -52,3 +53,3 @@ .src(['src/index.js'])
 
-gulp.task('sass', function () {
+gulp.task('lib:sass', function () {
   var cssFilter = filter('**/*.css');
@@ -59,21 +60,26 @@ return gulp
     .pipe(cssFilter)
-    .pipe(autoprefixer({
-      browsers: [
-        'ie >= 10',
-        'ie_mob >= 10',
-        'ff >= 30',
-        'chrome >= 34',
-        'safari >= 7',
-        'opera >= 23',
-        'ios >= 7',
-        'android >= 4.4',
-        'bb >= 10'
-      ]
-    }))
     .pipe(gulp.dest('lib'))
-    .pipe(minifyCss())
+    .pipe(postcss([
+      autoprefixer({
+        browsers: [
+          'ie >= 10',
+          'ie_mob >= 10',
+          'ff >= 30',
+          'chrome >= 34',
+          'safari >= 7',
+          'opera >= 23',
+          'ios >= 7',
+          'android >= 4.4',
+          'bb >= 10'
+        ]
+      }),
+      cssnano({
+        safe: true,
+        discardComments: {removeAll: true}
+      })
+    ]))
     .pipe(gulp.dest('dist'));
 });
 
-gulp.task('copy', function () {
+gulp.task('lib:copy', function () {
   return gulp
@@ -85,7 +91,6 @@ .src(['src/**/*', '!src/**/*.{scss,js}'])
 
-gulp.task('build:lib', function (callback) {
-  runSequence('clean', 'lint', 'babel', 'umd', 'sass', 'copy', callback);
+gulp.task('lib', function (callback) {
+  runSequence('lib:clean', 'lib:lint', 'lib:babel', 'lib:umd', 'lib:sass', 'lib:copy', callback);
 });
 
-
 gulp.task('example:clean', function () {
@@ -105,2 +110,7 @@ del.sync(['example/dist']);
   return gulp.src(['example/app/*.html'])
+    .pipe(preProcess({
+      options: {
+        srcDir: path.join(__dirname, 'example/app')
+      }
+    }))
     .pipe(frep(patterns))
@@ -117,3 +127,3 @@ .pipe(minifyHtml())
 
-gulp.task('build:example', function (callback) {
+gulp.task('example', function (callback) {
   runSequence('example:clean', 'example:webpack', 'example:html', 'example:copy', callback);
@@ -123,3 +133,3 @@ });
 gulp.task('build', function (callback) {
-  runSequence('build:lib', 'build:example', callback);
+  runSequence('lib', 'example', callback);
 });

lib/ProgressBar.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _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; 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 _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); } } };
 
@@ -48,24 +48,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-    this.componentWillUnmount = function () {
-      if (_this.interval) {
-        clearInterval(_this.interval);
+    this.handleProps = function (props) {
+      if (props.autoIncrement && props.percent >= 0 && props.percent < 99) {
+        _this.interval = setInterval(_this.increment, props.intervalTime);
       }
-      if (_this.timeout) {
-        clearTimeout(_this.timeout);
-      }
-    };
 
-    this.componentWillReceiveProps = function (nextProps) {
-      if (_this.interval) {
-        clearInterval(_this.interval);
-      }
-      if (_this.timeout) {
-        clearTimeout(_this.timeout);
-      }
-
-      if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) {
-        _this.interval = setInterval(_this.increment, nextProps.intervalTime);
-      }
-
-      if (nextProps.percent >= 100) {
+      if (props.percent >= 100) {
         _this.setState({
@@ -82,6 +66,29 @@ percent: 99.9
         _this.setState({
-          percent: nextProps.percent
+          percent: props.percent
         });
       }
     };
+
+    this.componentDidMount = function () {
+      _this.handleProps(_this.props);
+    };
+
+    this.componentWillReceiveProps = function (nextProps) {
+      if (_this.interval) {
+        clearInterval(_this.interval);
+      }
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+      _this.handleProps(nextProps);
+    };
+
+    this.componentWillUnmount = function () {
+      if (_this.interval) {
+        clearInterval(_this.interval);
+      }
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+    };
   }
@@ -88,0 +95,0 @@

package.json

 {
   "name": "react-progress-bar-plus",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Progress bar component for ReactJS.",
@@ -25,39 +25,45 @@ "main": "lib/index.js",
   "devDependencies": {
-    "autoprefixer": "^6.0.3",
+    "autoprefixer": "^6.1.1",
     "babel-core": "^5.8.25",
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^4.1.6",
     "babel-loader": "^5.3.2",
-    "camelcase": "^1.2.1",
-    "css-loader": "^0.19.0",
-    "del": "^2.0.2",
-    "eslint": "^1.6.0",
-    "eslint-loader": "^1.0.0",
-    "eslint-plugin-react": "^3.5.1",
+    "babel-plugin-react-transform": "^1.1.1",
+    "camelcase": "^2.0.1",
+    "css-loader": "^0.23.0",
+    "cssnano": "^3.3.2",
+    "del": "^2.1.0",
+    "eslint": "^1.10.1",
+    "eslint-loader": "^1.1.1",
+    "eslint-plugin-react": "^3.10.0",
     "express": "^4.13.3",
-    "file-loader": "^0.8.4",
+    "extract-text-webpack-plugin": "^0.9.1",
+    "file-loader": "^0.8.5",
+    "fs-extra": "^0.26.2",
     "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^3.0.2",
     "gulp-babel": "^5.2.1",
-    "gulp-eslint": "^1.0.0",
+    "gulp-eslint": "^1.1.1",
     "gulp-filter": "^3.0.1",
     "gulp-frep": "^0.1.3",
-    "gulp-minify-css": "^1.2.1",
     "gulp-minify-html": "^1.0.4",
-    "gulp-sass": "^2.0.4",
-    "http-proxy": "^1.11.2",
-    "json-loader": "^0.5.3",
+    "gulp-postcss": "^6.0.1",
+    "gulp-preprocess": "^1.2.0",
+    "gulp-sass": "^2.1.0",
+    "http-proxy": "^1.12.0",
+    "json-loader": "^0.5.4",
     "less": "^2.5.3",
-    "less-loader": "^2.2.1",
-    "lodash.merge": "^3.3.2",
-    "node-sass": "^3.3.3",
-    "opn": "^3.0.2",
-    "postcss-loader": "^0.6.0",
-    "react-dom": "^0.14.0",
-    "react-hot-loader": "^1.3.0",
-    "run-sequence": "^1.1.4",
-    "sass-loader": "^3.0.0",
-    "style-loader": "^0.12.4",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0",
-    "webpack-stream": "^2.1.1"
+    "less-loader": "^2.2.2",
+    "node-sass": "^3.4.2",
+    "opn": "^3.0.3",
+    "postcss-loader": "^0.8.0",
+    "preprocess": "^3.0.2",
+    "react-dom": "^0.14.3",
+    "react-router": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "run-sequence": "^1.1.5",
+    "sass-loader": "^3.1.2",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.9",
+    "webpack-dev-middleware": "^1.4.0",
+    "webpack-hot-middleware": "^2.5.0",
+    "webpack-stream": "^3.1.0"
   },
@@ -64,0 +70,0 @@ "repository": {

src/ProgressBar.js

@@ -31,24 +31,8 @@ import React from 'react';
 
-  componentWillUnmount = () => {
-    if (this.interval) {
-      clearInterval(this.interval);
+  handleProps = (props) => {
+    if (props.autoIncrement && props.percent >= 0 && props.percent < 99) {
+      this.interval = setInterval(this.increment, props.intervalTime);
     }
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  };
 
-  componentWillReceiveProps = (nextProps) => {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-
-    if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) {
-      this.interval = setInterval(this.increment, nextProps.intervalTime);
-    }
-
-    if (nextProps.percent >= 100) {
+    if (props.percent >= 100) {
       this.setState({
@@ -65,3 +49,3 @@ percent: 99.9
       this.setState({
-        percent: nextProps.percent
+        percent: props.percent
       });
@@ -71,2 +55,25 @@ }
 
+  componentDidMount = () => {
+    this.handleProps(this.props);
+  };
+
+  componentWillReceiveProps = (nextProps) => {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.handleProps(nextProps);
+  };
+
+  componentWillUnmount = () => {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  };
+
   render() {
@@ -73,0 +80,0 @@ let className = ClassNames({

No alert changes

Improved metrics

Total package byte prevSize

33189

3.34%

Lines of code

472

4.89%

Worsened metrics

Dev dependency count

43

16.22%

No dependency changes