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

Comparing version 1.0.0 to 1.1.0

bower.json

 {
   "name": "react-progress-bar-plus",
-  "version": "1.0.0",
+  "version": "1.1.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){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 c=u.get;if(void 0===c)return;return c.call(i)}var s=Object.getPrototypeOf(o);if(null===s)return;e=s,t=a,r=i,n=!0,u=s=void 0}},c=r(2),s=n(c),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 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,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("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}}(),p=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 p=u.get;if(void 0===p)return;return p.call(i)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=a,r=i,n=!0,u=c=void 0}},c=r(2),s=n(c),l=r(3),f=n(l),d=function(e){function t(){var e=this;a(this,t),p(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=this.state.percent,a=(0,f["default"])("react-progress-bar",{"react-progress-bar-on-top":t,"react-progress-bar-hide":0>n||n>=100}),i={width:(0>n?0:n)+"%"},u=(0,f["default"])("react-progress-bar-spinner",o({},"react-progress-bar-spinner-"+r,r));return s["default"].createElement("div",{className:a},s["default"].createElement("div",{className:"react-progress-bar-percent",style:i}),r?s["default"].createElement("div",{className:u},s["default"].createElement("div",{className:"react-progress-bar-spinner-icon"})):null)}}],[{key:"propTypes",value:{percent:s["default"].PropTypes.number.isRequired,onTop:s["default"].PropTypes.bool,autoIncrement:s["default"].PropTypes.bool,intervalTime:s["default"].PropTypes.number,spinner:s["default"].PropTypes.oneOf([!1,"left","right"])},enumerable:!0},{key:"defaultProps",value:{percent:-1,onTop:!1,autoIncrement:!1,intervalTime:200,spinner:"left"},enumerable:!0}]),t}(s["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)))}()}])});

lib/ProgressBar.js

@@ -13,2 +13,4 @@ 'use strict';
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -22,5 +24,5 @@
 
-var _classnames = require('classnames');
+var _classnames2 = require('classnames');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
@@ -41,4 +43,29 @@ var ProgressBar = (function (_React$Component) {
 
+    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);
+      }
+    };
+
     this.increment = function () {
-      var percent = _this.state.percent + (Math.random() + 1 - Math.random());
+      var percent = _this.state.percent;
+
+      percent = percent + (Math.random() + 1 - Math.random());
       percent = percent < 99 ? percent : 99;
@@ -71,25 +98,2 @@ _this.setState({
     };
-
-    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);
-      }
-    };
   }
@@ -100,8 +104,13 @@
     value: function render() {
-      var className = (0, _classnames2['default'])({
-        'react-progress-bar': true,
-        'react-progress-bar-on-top': this.props.onTop,
-        'react-progress-bar-hide': this.state.percent < 0 || this.state.percent >= 100
+      var _props = this.props;
+      var onTop = _props.onTop;
+      var spinner = _props.spinner;
+      var percent = this.state.percent;
+
+      var className = (0, _classnames3['default'])('react-progress-bar', {
+        'react-progress-bar-on-top': onTop,
+        'react-progress-bar-hide': percent < 0 || percent >= 100
       });
-      var style = { width: (this.state.percent < 0 ? 0 : this.state.percent) + '%' };
+      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(
@@ -111,7 +120,7 @@ 'div',
         _react2['default'].createElement('div', { className: 'react-progress-bar-percent', style: style }),
-        _react2['default'].createElement(
+        spinner ? _react2['default'].createElement(
           'div',
-          { className: 'react-progress-bar-spinner' },
+          { className: spinnerClassName },
           _react2['default'].createElement('div', { className: 'react-progress-bar-spinner-icon' })
-        )
+        ) : null
       );
@@ -125,3 +134,4 @@ }
       autoIncrement: _react2['default'].PropTypes.bool,
-      intervalTime: _react2['default'].PropTypes.number
+      intervalTime: _react2['default'].PropTypes.number,
+      spinner: _react2['default'].PropTypes.oneOf([false, 'left', 'right'])
     },
@@ -135,3 +145,4 @@ enumerable: true
       autoIncrement: false,
-      intervalTime: 200
+      intervalTime: 200,
+      spinner: 'left'
     },
@@ -138,0 +149,0 @@ enumerable: true

package.json

 {
   "name": "react-progress-bar-plus",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Progress bar component for ReactJS.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -65,2 +65,3 @@ # React Progress Bar Plus
 | intervalTime | number | 200 | Interval time for auto increment. |
+| spinner | oneOf([false, 'left', 'right'])   | left | Spinner position. Pass `false` to hide spinner icon. |
 
@@ -67,0 +68,0 @@ ## Example

src/ProgressBar.js

@@ -9,3 +9,4 @@ import React from 'react';
     autoIncrement: React.PropTypes.bool,
-    intervalTime: React.PropTypes.number
+    intervalTime: React.PropTypes.number,
+    spinner: React.PropTypes.oneOf([false, 'left', 'right'])
   };
@@ -17,3 +18,4 @@
     autoIncrement: false,
-    intervalTime: 200
+    intervalTime: 200,
+    spinner: 'left'
   };
@@ -25,4 +27,28 @@
 
+  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);
+    }
+  };
+
   increment = () => {
-    let percent = this.state.percent + (Math.random() + 1 - Math.random());
+    let {percent} = this.state;
+    percent = percent + (Math.random() + 1 - Math.random());
     percent = percent < 99 ? percent : 99;
@@ -56,38 +82,23 @@ this.setState({
 
-  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() {
-    let className = classnames({
-      'react-progress-bar': true,
-      'react-progress-bar-on-top': this.props.onTop,
-      'react-progress-bar-hide': this.state.percent < 0 || this.state.percent >= 100
+    let {onTop, spinner} = this.props;
+    let {percent} = this.state;
+    let className = classnames('react-progress-bar', {
+      'react-progress-bar-on-top': onTop,
+      'react-progress-bar-hide': percent < 0 || percent >= 100
     });
-    let style = {width: (this.state.percent < 0 ? 0 : this.state.percent) + '%'};
+    let style = {width: (percent < 0 ? 0 : percent) + '%'};
+    let spinnerClassName = classnames('react-progress-bar-spinner', {
+      [`react-progress-bar-spinner-${spinner}`]: spinner
+    });
     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>
+        {
+          spinner ?
+            <div className={spinnerClassName}>
+              <div className="react-progress-bar-spinner-icon"/>
+            </div>
+            : null
+        }
       </div>
@@ -94,0 +105,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

34103

3.54%

Number of downloads

966

6.74%

Lines of code

467

3.78%

Number of lines in readme file

74

1.37%

No dependency changes