react-js-loading-progress-bar/build/index.js

React JS loading progress (bar and throbber) component that shows estimated time left (if several requests need to be made) and progress bar with percentage.

module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(3)()},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),i=r(1),a=r.n(i);r(7);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(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)}}function c(e,t){return!t||"object"!==s(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function l(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function p(e){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}(s,e);var t,r,n,i,a=(t=s,function(){var e,r=p(t);if(l()){var n=p(this).constructor;e=Reflect.construct(r,arguments,n)}else e=r.apply(this,arguments);return c(this,e)});function s(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(t=a.call(this,e)).state={startTime:Date.now(),currentItem:0,currentTime:null,totalItems:1,estimatedLeft:null,percentage:"",percentageNumber:0,timeElapsed:0},t}return r=s,i=[{key:"getDerivedStateFromProps",value:function(e,t){if(e.current!==t.currentItem){var r={};if(1===e.current)r={startTime:Date.now(),currentTime:Date.now(),currentItem:1,totalItems:e.total};else if(e.current>1){var n=Math.abs(Date.now()-t.currentTime),o=t.timeElapsed+n,i=o/1e3/e.current,a=(100*e.current/t.totalItems).toFixed(1),s="".concat(a,"%");n=i*(t.totalItems-e.current);var u=Math.floor(n/86400);n-=86400*u;var c=Math.floor(n/3600)%24;n-=3600*c;var l=Math.floor(n/60)%60;n-=60*l;var p=Math.floor(n%60),f="";u>0&&(f=("0"+u).slice(-2)+":");var d=("0"+c).slice(-2),m=("0"+l).slice(-2),b=("0"+p).slice(-2),h="".concat(f).concat(d,":").concat(m,":").concat(b);r={currentTime:Date.now(),currentItem:e.current,totalItems:e.total,estimatedLeft:h,percentage:s,percentageNumber:a,timeElapsed:o}}return r}return null}}],(n=[{key:"render",value:function(){return this.props.active?void 0!==this.props.showCompact?this.renderSingleLine():o.a.createElement("div",{className:"progressBar"},this.renderCustomTitle(),this.renderProcessingRequest(),this.renderQtyProcessed(),this.renderProgressBar(),this.renderTimeRemaining()):null}},{key:"renderQtyProcessed",value:function(){return void 0!==this.props.hideQtyProcessed&&void 0===this.props.visualOnly?o.a.createElement("label",null,this.props.current," out of ",this.props.total," processed"):null}},{key:"renderTimeRemaining",value:function(){return void 0===this.props.hideTimeRemaining||this.props.visualOnly?null:o.a.createElement("label",null,"Time remaining: ",this.state.estimatedLeft)}},{key:"renderProgressBar",value:function(){return void 0===this.props.hideProgressBar?void 0!==this.props.useSpinner?o.a.createElement("div",{className:"loader"}):o.a.createElement("div",null,o.a.createElement("progress",{max:"100",value:this.state.percentageNumber}),o.a.createElement("label",null,this.state.percentage)):null}},{key:"renderProcessingRequest",value:function(){return void 0===this.props.hideProcessingRequest&&void 0===this.props.visualOnly?o.a.createElement("label",null,"Processing your requests, please wait... ",this.state.percentage):null}},{key:"renderTimeRemaining",value:function(){return void 0===this.props.hideTimeRemaining&&void 0===this.props.visualOnly?o.a.createElement("label",null,"Time remaining: ",this.state.estimatedLeft):null}},{key:"renderCustomTitle",value:function(){return this.props.showCustomTitle?o.a.createElement("label",null,this.state.title):null}},{key:"renderSingleLine",value:function(){return o.a.createElement("div",null,o.a.createElement("progress",{style:this.props.progressBarStyle,max:"100",value:this.state.percentageNumber}),o.a.createElement("label",null,this.state.percentage," (Est. Time remaining: ",this.state.estimatedLeft,")"))}}])&&u(r.prototype,n),i&&u(r,i),s}(n.Component);d.propTypes={total:a.a.number.isRequired,active:a.a.bool.isRequired,current:a.a.number.isRequired,showCompact:a.a.bool,title:a.a.string,hideProcessingRequest:a.a.bool,hideTimeRemaining:a.a.bool,hideProgressBar:a.a.bool,hideQtyProcessed:a.a.bool,useSpinner:a.a.bool,visualOnly:a.a.bool},t.default=d},function(e,t,r){"use strict";var n=r(4),o=r(5),i=r(6);e.exports=function(){function e(e,t,r,n,a,s){s!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";function n(e){return function(){return e}}var o=function(){};o.thatReturns=n,o.thatReturnsFalse=n(!1),o.thatReturnsTrue=n(!0),o.thatReturnsNull=n(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,r){"use strict";e.exports=function(e,t,r,n,o,i,a,s){if(!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,n,o,i,a,s],l=0;(u=new Error(t.replace(/%s/g,(function(){return c[l++]})))).name="Invariant Violation"}throw u.framesToPop=1,u}}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){var n=r(8),o=r(9);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var i={insert:"head",singleton:!1},a=(n(o,i),o.locals?o.locals:{});e.exports=a},function(e,t,r){"use strict";var n,o=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},i=function(){var e={};return function(t){if(void 0===e[t]){var r=document.querySelector(t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}e[t]=r}return e[t]}}(),a=[];function s(e){for(var t=-1,r=0;r<a.length;r++)if(a[r].identifier===e){t=r;break}return t}function u(e,t){for(var r={},n=[],o=0;o<e.length;o++){var i=e[o],u=t.base?i[0]+t.base:i[0],c=r[u]||0,l="".concat(u," ").concat(c);r[u]=c+1;var p=s(l),f={css:i[1],media:i[2],sourceMap:i[3]};-1!==p?(a[p].references++,a[p].updater(f)):a.push({identifier:l,updater:h(f,t),references:1}),n.push(l)}return n}function c(e){var t=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var o=r.nc;o&&(n.nonce=o)}if(Object.keys(n).forEach((function(e){t.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(t);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var l,p=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function f(e,t,r,n){var o=r?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=p(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function d(e,t,r){var n=r.css,o=r.media,i=r.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var m=null,b=0;function h(e,t){var r,n,o;if(t.singleton){var i=b++;r=m||(m=c(t)),n=f.bind(null,r,i,!1),o=f.bind(null,r,i,!0)}else r=c(t),n=d.bind(null,r,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(r)};return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=o());var r=u(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<r.length;n++){var o=s(r[n]);a[o].references--}for(var i=u(e,t),c=0;c<r.length;c++){var l=s(r[c]);0===a[l].references&&(a[l].updater(),a.splice(l,1))}r=i}}}},function(e,t,r){(t=r(10)(!1)).push([e.i,"progress {\r\n\theight: 14px;\r\n\t/* Important Thing */\r\n\t-webkit-appearance: none;\r\n\tborder: none;\r\n  margin-right: 5px;\r\n\r\n\r\n  background-image:\r\n\t   -webkit-linear-gradient(-45deg,\r\n\t                           transparent 33%, rgba(0, 0, 0, .1) 33%,\r\n\t                           rgba(0,0, 0, .1) 66%, transparent 66%),\r\n\t   -webkit-linear-gradient(top,\r\n\t                           rgba(255, 255, 255, .25),\r\n\t                           rgba(0, 0, 0, .25)),\r\n\t   -webkit-linear-gradient(left, #38bcc3, #38bcc3);\r\n}\r\n\r\nprogress::-webkit-progress-bar {\r\n  background-color: #eee;\r\n  border-radius: 2px;\r\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;\r\n}\r\n\r\nprogress[value]::-webkit-progress-bar {\r\n  background-color: #eee;\r\n  border-radius: 2px;\r\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;\r\n}\r\n\r\nprogress[value]::-webkit-progress-value {\r\n  background-image:\r\n\t   -webkit-linear-gradient(-45deg,\r\n\t                           transparent 33%, rgba(0, 0, 0, .1) 33%,\r\n\t                           rgba(0,0, 0, .1) 66%, transparent 66%),\r\n\t   -webkit-linear-gradient(top,\r\n\t                           rgba(255, 255, 255, .25),\r\n\t                           rgba(0, 0, 0, .25)),\r\n\t   -webkit-linear-gradient(left, #38bcc3, #38bcc3);\r\n\r\n\r\n    border-radius: 2px;\r\n    background-size: 35px 20px, 100% 100%, 100% 100%;\r\n}\r\n\r\n/* Now the value part */\r\nprogress::-webkit-progress-value {\r\n  background-image:\r\n\t   -webkit-linear-gradient(-45deg,\r\n\t                           transparent 33%, rgba(0, 0, 0, .1) 33%,\r\n\t                           rgba(0,0, 0, .1) 66%, transparent 66%),\r\n\t   -webkit-linear-gradient(top,\r\n\t                           rgba(255, 255, 255, .25),\r\n\t                           rgba(0, 0, 0, .25)),\r\n\t   -webkit-linear-gradient(left, #38bcc3, #38bcc3);\r\n\r\n\r\n    border-radius: 2px;\r\n    background-size: 35px 20px, 100% 100%, 100% 100%;\r\n}\r\n\r\n\r\n.loader {\r\n  border: 3px solid #f3f3f3;\r\n  border-top: 3px solid #3498db;\r\n  border-radius: 50%;\r\n  width: 20px;\r\n  height: 20px;\r\n  -webkit-animation: spin 1s linear infinite;\r\n  animation: spin 1s linear infinite;\r\n  margin: 0 5px;\r\n  display: inline-flex;\r\n}\r\n\r\n@keyframes spin {\r\n    0% { transform: rotate(0deg); }\r\n    100% { transform: rotate(360deg); }\r\n}\r\n\r\n\r\n\r\n",""]),e.exports=t},function(e,t,r){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=function(e,t){var r=e[1]||"",n=e[3];if(!n)return r;if(t&&"function"==typeof btoa){var o=(a=n,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(u," */")),i=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[r].concat(i).concat([o]).join("\n")}var a,s,u;return[r].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,n){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(n)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);n&&o[u[0]]||(r&&(u[2]?u[2]="".concat(r," and ").concat(u[2]):u[2]=r),t.push(u))}},t}}]);