@tomickigrzegorz/react-circular-progress-bar/dist/index.esm.js

A circular progress bar in svg

import e,{createContext as r,useContext as t,useState as n,useEffect as o,useRef as i}from"react";import a from"prop-types";function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){u(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var n,o,i=[],a=!0,c=!1;try{for(t=t.call(e);!(a=(n=t.next()).done)&&(i.push(n.value),!r||i.length!==r);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(c)throw o}}return i}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return f(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return f(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var m=r(),d=function(){var r=t(m),n=r.id,o=r.unit,i=r.number,a=r.counter,c=r.textPosition,l=r.fontSize,u=r.fontWeight,s=r.fontColor;return i?e.createElement("text",{x:"50%",y:"50%",fontSize:l,fontWeight:u,fill:s,textAnchor:"middle",dy:c},e.createElement("tspan",{className:"circular-percent-".concat(n)},a),e.createElement("tspan",{className:"circular-unit-".concat(n)},o)):null},p=function(){var r=t(m),n=r.stroke,o=r.fill,i=r.round,a=r.inverse,c=r.strokeBottom,l=r.cut,u=r.rotation,s=r.colorCircle,f=r.strokeDasharray,d=264-2.64*(100-l);return e.createElement("circle",{cx:"50",cy:"50",r:"42",shapeRendering:"geometricPrecision",fill:o,style:{transform:"rotate(".concat(u,"deg)"),transformOrigin:"50% 50%"},stroke:s,strokeWidth:c||n,strokeLinecap:i&&!f?"round":"butt",strokeDashoffset:a?-d:d,strokeDasharray:l?264:f})},y=function(r){var n=r.children,o=t(m),i=o.id,a=o.size,c=o.counter;return e.createElement("svg",{role:"progressbar",width:a,height:a,"data-index":i,viewBox:"0 0 100 100","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":c,"aria-labelledby":"circular progress bar"},n)},v=function(r){var n=r.index,o=t(m).linearGradient,i=-100,a="linear-gradient-".concat(n);return e.createElement("defs",null,e.createElement("linearGradient",{id:a},o.map((function(r,t){return i+=100,e.createElement("stop",{key:t,offset:i/(o.length-1)+"%",stopColor:r})}))))},b=function(){var r=t(m),n=r.id,o=r.rotation,i=r.linearGradient,a=r.animationSmooth,c=r.inverse,u=r.counter,s=r.stroke,f=r.round,d=r.cut,p=r.colorSlice,y=void 0!==i?"url(#linear-gradient-".concat(n||0,")"):p,b=void 0!==a?{transition:"stroke-dashoffset ".concat(a)}:"";return e.createElement(e.Fragment,null,i&&e.createElement(v,{index:n,linearGradient:i}),e.createElement("circle",{cx:"50%",cy:"50%",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:l({transform:"rotate(".concat(o,"deg)"),transformOrigin:"50% 50%"},b),stroke:y,strokeWidth:s,strokeLinecap:f?"round":"butt",strokeDashoffset:function(e,r,t){var n=264-e/100*(r?2.64*(100-r):264);return t?-n:n}(u,d,c),strokeDasharray:264}))},h=a.bool,g=a.number,O=a.string,k=a.array,E={percent:g.isRequired,colorSlice:O,colorCircle:O,round:h,opacity:g,number:h,size:g,speed:g,cut:g,rotation:g,unit:O,textPosition:O,fontSize:O,fill:O,fontWeight:g,stroke:g,strokeBottom:g,strokeDasharray:O,fontColor:O,linearGradient:k},w=function(r){var t=r.children,a=r.percent,c=r.speed,u=r.animationOff,f=s(n(u?a:0),2),v=f[0],h=f[1],g=i(),O=function(e){var r=s(n(!1),2),t=r[0],i=r[1];return o((function(){var r=new IntersectionObserver((function(e){var r=s(e,1)[0];r.intersectionRatio>=.5&&i(r.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return e&&e.current&&r.observe(e.current),function(){r.disconnect()}}),[e]),t}(g);o((function(){var e,r;if(O)if(u)h(a);else{var t=Number(null===(e=g.current)||void 0===e||null===(r=e.dataset)||void 0===r?void 0:r.angel);if(!(a>100||a<0||t===a)){var n,o=1e3/c,i=performance.now();return n=requestAnimationFrame((function e(r){n=requestAnimationFrame(e);var c=r-i;c>=o-.1&&(i=r-c%o,t>a&&h((function(e){return e-1})),t<a&&h((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[v,u,c,O,a]);var k,E,w,x=l(l({},r),{},{counter:v});return e.createElement("div",{ref:g,style:(k=r,E=k.styles,w=k.size,l(l({},E),{},{width:w,height:w})),"data-angel":v},e.createElement(m.Provider,{value:x},t,e.createElement(y,null,r.colorCircle&&e.createElement(p,null),e.createElement(b,null),e.createElement(d,null))))};w.propTypes=E,w.defaultProps={id:0,colorSlice:"#00a1ff",round:!1,number:!0,stroke:10,opacity:10,size:200,speed:1e3,cut:0,rotation:-90,unit:"%",textPosition:".35em",fontSize:"1.6rem",fontColor:"#000",fill:"none",fontWeight:400};export{w as CircularProgressBar};