UNPKG

@delowar/react-circle-progressbar

Version:

A circular progressbar component, built with SVG and extensively customizable

2 lines 16.6 kB
/*! For license information please see progress.build.js.LICENSE.txt */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Progress",[],t):"object"==typeof exports?exports.Progress=t():e.Progress=t()}("undefined"!=typeof self?self:this,(function(){return(()=>{var e={418:e=>{"use strict";var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,i){for(var a,c,s=n(e),u=1;u<arguments.length;u++){for(var l in a=Object(arguments[u]))r.call(a,l)&&(s[l]=a[l]);if(t){c=t(a);for(var f=0;f<c.length;f++)o.call(a,c[f])&&(s[c[f]]=a[c[f]])}}return s}},703:(e,t,r)=>{"use strict";var o=r(414);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,i,a){if(a!==o){var c=new Error("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");throw c.name="Invariant Violation",c}}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,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:n};return r.PropTypes=r,r}},697:(e,t,r)=>{e.exports=r(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},408:(e,t,r)=>{"use strict";var o=r(418),n=60103,i=60106;t.Fragment=60107,t.StrictMode=60108,t.Profiler=60114;var a=60109,c=60110,s=60112;t.Suspense=60113;var u=60115,l=60116;if("function"==typeof Symbol&&Symbol.for){var f=Symbol.for;n=f("react.element"),i=f("react.portal"),t.Fragment=f("react.fragment"),t.StrictMode=f("react.strict_mode"),t.Profiler=f("react.profiler"),a=f("react.provider"),c=f("react.context"),s=f("react.forward_ref"),t.Suspense=f("react.suspense"),u=f("react.memo"),l=f("react.lazy")}var p="function"==typeof Symbol&&Symbol.iterator;function d(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var y={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},h={};function m(e,t,r){this.props=e,this.context=t,this.refs=h,this.updater=r||y}function b(){}function v(e,t,r){this.props=e,this.context=t,this.refs=h,this.updater=r||y}m.prototype.isReactComponent={},m.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(d(85));this.updater.enqueueSetState(this,e,t,"setState")},m.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=m.prototype;var g=v.prototype=new b;g.constructor=v,o(g,m.prototype),g.isPureReactComponent=!0;var w={current:null},O=Object.prototype.hasOwnProperty,E={key:!0,ref:!0,__self:!0,__source:!0};function _(e,t,r){var o,i={},a=null,c=null;if(null!=t)for(o in void 0!==t.ref&&(c=t.ref),void 0!==t.key&&(a=""+t.key),t)O.call(t,o)&&!E.hasOwnProperty(o)&&(i[o]=t[o]);var s=arguments.length-2;if(1===s)i.children=r;else if(1<s){for(var u=Array(s),l=0;l<s;l++)u[l]=arguments[l+2];i.children=u}if(e&&e.defaultProps)for(o in s=e.defaultProps)void 0===i[o]&&(i[o]=s[o]);return{$$typeof:n,type:e,key:a,ref:c,props:i,_owner:w.current}}function S(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}var j=/\/+/g;function C(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function P(e,t,r,o,a){var c=typeof e;"undefined"!==c&&"boolean"!==c||(e=null);var s=!1;if(null===e)s=!0;else switch(c){case"string":case"number":s=!0;break;case"object":switch(e.$$typeof){case n:case i:s=!0}}if(s)return a=a(s=e),e=""===o?"."+C(s,0):o,Array.isArray(a)?(r="",null!=e&&(r=e.replace(j,"$&/")+"/"),P(a,t,r,"",(function(e){return e}))):null!=a&&(S(a)&&(a=function(e,t){return{$$typeof:n,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(a,r+(!a.key||s&&s.key===a.key?"":(""+a.key).replace(j,"$&/")+"/")+e)),t.push(a)),1;if(s=0,o=""===o?".":o+":",Array.isArray(e))for(var u=0;u<e.length;u++){var l=o+C(c=e[u],u);s+=P(c,t,r,l,a)}else if("function"==typeof(l=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=p&&e[p]||e["@@iterator"])?e:null}(e)))for(e=l.call(e),u=0;!(c=e.next()).done;)s+=P(c=c.value,t,r,l=o+C(c,u++),a);else if("object"===c)throw t=""+e,Error(d(31,"[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t));return s}function k(e,t,r){if(null==e)return e;var o=[],n=0;return P(e,o,"","",(function(e){return t.call(r,e,n++)})),o}function x(e){if(-1===e._status){var t=e._result;t=t(),e._status=0,e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}if(1===e._status)return e._result;throw e._result}var R={current:null};function I(){var e=R.current;if(null===e)throw Error(d(321));return e}var $={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:w,IsSomeRendererActing:{current:!1},assign:o};t.Children={map:k,forEach:function(e,t,r){k(e,(function(){t.apply(this,arguments)}),r)},count:function(e){var t=0;return k(e,(function(){t++})),t},toArray:function(e){return k(e,(function(e){return e}))||[]},only:function(e){if(!S(e))throw Error(d(143));return e}},t.Component=m,t.PureComponent=v,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=$,t.cloneElement=function(e,t,r){if(null==e)throw Error(d(267,e));var i=o({},e.props),a=e.key,c=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(c=t.ref,s=w.current),void 0!==t.key&&(a=""+t.key),e.type&&e.type.defaultProps)var u=e.type.defaultProps;for(l in t)O.call(t,l)&&!E.hasOwnProperty(l)&&(i[l]=void 0===t[l]&&void 0!==u?u[l]:t[l])}var l=arguments.length-2;if(1===l)i.children=r;else if(1<l){u=Array(l);for(var f=0;f<l;f++)u[f]=arguments[f+2];i.children=u}return{$$typeof:n,type:e.type,key:a,ref:c,props:i,_owner:s}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:c,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:a,_context:e},e.Consumer=e},t.createElement=_,t.createFactory=function(e){var t=_.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:s,render:e}},t.isValidElement=S,t.lazy=function(e){return{$$typeof:l,_payload:{_status:-1,_result:e},_init:x}},t.memo=function(e,t){return{$$typeof:u,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return I().useCallback(e,t)},t.useContext=function(e,t){return I().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return I().useEffect(e,t)},t.useImperativeHandle=function(e,t,r){return I().useImperativeHandle(e,t,r)},t.useLayoutEffect=function(e,t){return I().useLayoutEffect(e,t)},t.useMemo=function(e,t){return I().useMemo(e,t)},t.useReducer=function(e,t,r){return I().useReducer(e,t,r)},t.useRef=function(e){return I().useRef(e)},t.useState=function(e){return I().useState(e)},t.version="17.0.1"},294:(e,t,r)=>{"use strict";e.exports=r(408)}},t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={exports:{}};return e[o](n,n.exports,r),n.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};return(()=>{"use strict";r.d(o,{default:()=>b});var e=r(294),t=r(697),n=r.n(t);function i(e){return(i="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 a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){s(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?p(e):t}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var y={angle:0,startColor:"#ff0000",stopColor:"#ffff00"},h={inset:!1,vertical:10,horizontal:0,blur:10,opacity:.5,color:"#000000"},m={inset:!0,vertical:3,horizontal:0,blur:3,opacity:.4,color:"#000000"},b=function(t){!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&&l(e,t)}(s,t);var r,o,n,i,a=(n=s,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=d(n);if(i){var r=d(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return f(this,e)});function s(t){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(r=a.call(this,t)).elem=(0,e.createRef)(),r.state={uid1:"",uid2:"",uid3:"",offset:0},r.uuid=r.uuid.bind(p(r)),r.isElementInViewport=r.isElementInViewport.bind(p(r)),r.placeOffset=r.placeOffset.bind(p(r)),r}return r=s,(o=[{key:"componentDidMount",value:function(){this.setState({uid1:this.uuid("grd_"),uid2:this.uuid("shd_"),uid3:this.uuid("shd2_")}),this.placeOffset()}},{key:"componentWillMount",value:function(){var e=this.props,t=parseInt(e.size),r=parseInt(e.borderBgWidth),o=parseInt(e.borderWidth),n=.5*(t-o);r>o&&(n-=.5*(r-o)),this.setState({offset:2*Math.PI*n})}},{key:"uuid",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return e+Math.random().toString(36).substring(2,8)+Math.random().toString(36).substring(2,8)+t}},{key:"isElementInViewport",value:function(e){var t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}},{key:"placeOffset",value:function(){var e=this.props,t=this.placeOffset,r=this.elem,o=this.onViewport,n=this.isElementInViewport,i=this.props.viewport,a=parseInt(e.size),c=parseInt(e.percent),s=parseInt(e.borderBgWidth),u=parseInt(e.borderWidth),l=.5*(a-u);s>u&&(l-=.5*(s-u));var f=2*Math.PI*l,p=f-f*c/100;window.addEventListener("scroll",t),!i&&this.setState({offset:p}),n(r.current)&&void 0!==r.current&&(window.removeEventListener("scroll",t),o&&o(r.current),i&&this.setState({offset:p}))}},{key:"render",value:function(){var t=this.props,r=this.props,o=r.className,n=r.fillColor,i=r.emptyColor,a=r.background,s=r.isGradient,u=r.isShadow,l=r.linecap,f=r.isBgShadow,p=r.transition,d=r.children,b=this.state,v=b.uid1,g=b.uid2,w=b.uid3,O=b.offset,E=c(c({},y),this.props.gradient),_=c(c({},h),this.props.shadow),S=c(c({},m),this.props.bgShadow),j=parseInt(t.size),C=parseInt(t.borderBgWidth),P=parseInt(t.borderWidth),k=.5*(j-C),x=.5*(j-P);P>C&&(k-=.5*(P-C)),C>P&&(x-=.5*(C-P));var R=2*Math.PI*x,I={height:j,width:j,position:"relative"},$={className:"circle-progress-wrap ".concat(o),style:I,ref:this.elem},D={className:"circle-progress-inner",style:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center"}},W={style:{transform:"rotate(-90deg)",overflow:"visible"},xmlns:"http://www.w3.org/2000/svg",viewBox:"".concat(j/2," ").concat(j/2," ").concat(j," ").concat(j)},B=c({cx:j,cy:j,r:k,stroke:i,strokeWidth:C,fill:a},f&&{filter:"url(#".concat(w,")")}),T=c(c({cx:j,cy:j,r:x,fill:"none",strokeWidth:P,strokeDasharray:R,strokeDashoffset:O,strokeLinecap:l,stroke:s?"url(#".concat(v,")"):n},u&&{filter:"url(#".concat(g,")")}),p&&{style:{transition:"stroke-dashoffset ".concat(p,"ms")}}),M={id:v,x1:"0%",y1:"0%",x2:"0%",y2:"100%",gradientTransform:"rotate(".concat(E.angle,", .5, .5)")},z={offset:0,stopColor:E.startColor},V={offset:100,stopColor:E.stopColor},N={id:g,width:"500%",height:"500%",x:"-250%",y:"-250%"},A={dx:-1*_.vertical,dy:_.horizontal,stdDeviation:_.blur,floodColor:_.color,floodOpacity:_.opacity},G={id:w,width:"500%",height:"500%",x:"-250%",y:"-250%"},L={dx:-1*S.vertical,dy:S.horizontal,stdDeviation:S.blur,floodColor:S.color,floodOpacity:S.opacity};return e.createElement("div",$,e.createElement("svg",W,s&&e.createElement("linearGradient",M,e.createElement("stop",z),e.createElement("stop",V)),u&&(!1===_.inset?e.createElement("filter",N,e.createElement("feDropShadow",N)):e.createElement("filter",N,e.createElement("feOffset",{dx:A.dx,dy:A.dy}),e.createElement("feGaussianBlur",{stdDeviation:A.stdDeviation}),e.createElement("feComposite",{operator:"out",in:"SourceGraphic",result:"inverse"}),e.createElement("feFlood",{"flood-color":A.floodColor,"flood-opacity":A.floodOpacity,result:"color"}),e.createElement("feComposite",{operator:"in",in:"color",in2:"inverse",result:"shadow"}),e.createElement("feComposite",{operator:"over",in:"shadow",in2:"SourceGraphic"}))),f&&(!1===S.inset?e.createElement("filter",G,e.createElement("feDropShadow",L)):e.createElement("filter",G,e.createElement("feOffset",{dx:L.dx,dy:L.dy}),e.createElement("feGaussianBlur",{stdDeviation:L.stdDeviation}),e.createElement("feComposite",{operator:"out",in:"SourceGraphic",result:"inverse"}),e.createElement("feFlood",{floodColor:L.floodColor,floodOpacity:L.floodOpacity,result:"color"}),e.createElement("feComposite",{operator:"in",in:"color",in2:"inverse",result:"shadow"}),e.createElement("feComposite",{operator:"over",in:"shadow",in2:"SourceGraphic"}))),e.createElement("circle",B),e.createElement("circle",T)),d&&e.createElement("div",D,e.createElement("div",null,d)))}}])&&u(r.prototype,o),s}(e.Component);b.defaultProps={size:180,borderWidth:15,borderBgWidth:15,fillColor:"#288feb",emptyColor:"#dddddd",background:"none",className:"",percent:55,linecap:"round",transition:400,isGradient:!1,gradient:{},isShadow:!1,shadow:{},isBgShadow:!1,bgShadow:{},viewport:!1,onViewport:null},b.propTypes={size:n().number,borderWidth:n().number,borderBgWidth:n().number,fillColor:n().string,emptyColor:n().string,background:n().string,className:n().string,percent:n().number,linecap:n().string,isGradient:n().bool,transition:n().number,gradient:n().shape({angle:n().number,startColor:n().string,stopColor:n().string}),isShadow:n().bool,shadow:n().shape({inset:n().bool,vertical:n().number,horizontal:n().number,blur:n().number,opacity:n().number,color:n().string}),isBgShadow:n().bool,bgShadow:n().shape({inset:n().bool,vertical:n().number,horizontal:n().number,blur:n().number,opacity:n().number,color:n().string}),viewport:n().bool,onViewport:n().func}})(),o.default})()}));