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

A circular progress bar in svg

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