@tomik23/react-circular-progress-bar - npm Package Compare versions

Comparing version 0.1.24 to 0.1.25

CHANGELOG.md

@@ -0,1 +1,8 @@
+## v1.0.25 (2021-10-21)
+
+### Changed
+
+- `role=img` to `role=progressbar` - [progressbar role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role)
+- `animationSmooth` - new props, The [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) property allows you to create animations (a smooth transition effect). 
+
 ## v1.0.24 (2021-09-27)
@@ -2,0 +9,0 @@

dist/index.esm.js

@@ -1,1 +0,1 @@
-import e,{createContext as t,useContext as r,useState as n,useEffect as o,useRef as i}from"react";import a from"prop-types";function c(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 l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(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,i=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(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 f(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 f(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 m=t(),d=function(){var t=r(m),n=t.id,o=t.unit,i=t.number,a=t.counter,c=t.textPosition,l=t.fontSize,u=t.fontWeight,s=t.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 t=r(m),n=t.stroke,o=t.fill,i=t.round,a=t.inverse,c=t.strokeBottom,l=t.cut,u=t.rotation,s=t.colorCircle,f=t.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(t){var n=t.children,o=r(m),i=o.id,a=o.size;return e.createElement("svg",{role:"img",width:a,height:a,"data-index":i,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},n)},h=function(t){var n=t.index,o=r(m).linearGradient,i=-100,a="linear-gradient-".concat(n);return e.createElement("defs",null,e.createElement("linearGradient",{id:a},o.map((function(t,r){return i+=100,e.createElement("stop",{key:r,offset:i/(o.length-1)+"%",stopColor:t})}))))},v=function(){var t=r(m),n=t.id,o=t.rotation,i=t.linearGradient,a=t.inverse,c=t.counter,l=t.stroke,u=t.round,s=t.cut,f=t.colorSlice,d=void 0!==i?"url(#linear-gradient-".concat(n||0,")"):f;return e.createElement(e.Fragment,null,i&&e.createElement(h,{index:n,linearGradient:i}),e.createElement("circle",{cx:"50%",cy:"50%",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(".concat(o,"deg)"),transformOrigin:"50% 50%"},stroke:d,strokeWidth:l,strokeLinecap:u?"round":"butt",strokeDashoffset:function(e,t,r){var n=264-e/100*(t?2.64*(100-t):264);return r?-n:n}(c,s,a),strokeDasharray:264}))},g=function(){var t=r(m).children;return e.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},b=a.bool,O=a.number,E=a.string,k=a.array,w={percent:O.isRequired,colorSlice:E,colorCircle:E,round:b,opacity:O,number:b,size:O,speed:O,cut:O,rotation:O,unit:E,textPosition:E,fontSize:E,fill:E,fontWeight:O,stroke:O,strokeBottom:O,strokeDasharray:E,fontColor:E,linearGradient:k},x=function(t){var r=t.children,a=t.percent,c=t.speed,u=t.animationOff,f=s(n(u?a:0),2),h=f[0],b=f[1],O=i(),E=function(e){var t=s(n(!1),2),r=t[0],i=t[1];return o((function(){var t=new IntersectionObserver((function(e){var t=s(e,1)[0];t.intersectionRatio>=.5&&i(t.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return e&&e.current&&t.observe(e.current),function(){t.disconnect()}}),[e]),r}(O);o((function(){var e,t;if(E)if(u)b(a);else{var r=Number(null===(e=O.current)||void 0===e||null===(t=e.dataset)||void 0===t?void 0:t.angel);if(!(a>100||a<0||r===a)){var n,o=1e3/c,i=performance.now();return n=requestAnimationFrame((function e(t){n=requestAnimationFrame(e);var c=t-i;c>=o-.1&&(i=t-c%o,r>a&&b((function(e){return e-1})),r<a&&b((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[h,u,c,E,a]);var k,w,x=l(l({},t),{},{counter:h});return e.createElement("div",{ref:O,style:(k=t,w=k.size,{width:w,height:w}),"data-angel":h},e.createElement(m.Provider,{value:x},r&&e.createElement(g,null),e.createElement(y,null,t.colorCircle&&e.createElement(p,null),e.createElement(v,null),e.createElement(d,null))))};x.propTypes=w,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};export{x as CircularProgressBar};
+import e,{createContext as t,useContext as r,useState as n,useEffect as o,useRef as i}from"react";import a from"prop-types";function c(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 l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(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,i=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(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 f(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 f(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 m=t(),d=function(){var t=r(m),n=t.id,o=t.unit,i=t.number,a=t.counter,c=t.textPosition,l=t.fontSize,u=t.fontWeight,s=t.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 t=r(m),n=t.stroke,o=t.fill,i=t.round,a=t.inverse,c=t.strokeBottom,l=t.cut,u=t.rotation,s=t.colorCircle,f=t.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(t){var n=t.children,o=r(m),i=o.id,a=o.size;return e.createElement("svg",{role:"img",width:a,height:a,"data-index":i,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},n)},h=function(t){var n=t.index,o=r(m).linearGradient,i=-100,a="linear-gradient-".concat(n);return e.createElement("defs",null,e.createElement("linearGradient",{id:a},o.map((function(t,r){return i+=100,e.createElement("stop",{key:r,offset:i/(o.length-1)+"%",stopColor:t})}))))},v=function(){var t=r(m),n=t.id,o=t.rotation,i=t.linearGradient,a=t.animationSmooth,c=t.inverse,u=t.counter,s=t.stroke,f=t.round,d=t.cut,p=t.colorSlice,y=void 0!==i?"url(#linear-gradient-".concat(n||0,")"):p,v=void 0!==a?{transition:"stroke-dashoffset ".concat(a)}:"";return e.createElement(e.Fragment,null,i&&e.createElement(h,{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%"},v),stroke:y,strokeWidth:s,strokeLinecap:f?"round":"butt",strokeDashoffset:function(e,t,r){var n=264-e/100*(t?2.64*(100-t):264);return r?-n:n}(u,d,c),strokeDasharray:264}))},g=function(){var t=r(m).children;return e.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},b=a.bool,O=a.number,E=a.string,k=a.array,w={percent:O.isRequired,colorSlice:E,colorCircle:E,round:b,opacity:O,number:b,size:O,speed:O,cut:O,rotation:O,unit:E,textPosition:E,fontSize:E,fill:E,fontWeight:O,stroke:O,strokeBottom:O,strokeDasharray:E,fontColor:E,linearGradient:k},x=function(t){var r=t.children,a=t.percent,c=t.speed,u=t.animationOff,f=s(n(u?a:0),2),h=f[0],b=f[1],O=i(),E=function(e){var t=s(n(!1),2),r=t[0],i=t[1];return o((function(){var t=new IntersectionObserver((function(e){var t=s(e,1)[0];t.intersectionRatio>=.5&&i(t.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return e&&e.current&&t.observe(e.current),function(){t.disconnect()}}),[e]),r}(O);o((function(){var e,t;if(E)if(u)b(a);else{var r=Number(null===(e=O.current)||void 0===e||null===(t=e.dataset)||void 0===t?void 0:t.angel);if(!(a>100||a<0||r===a)){var n,o=1e3/c,i=performance.now();return n=requestAnimationFrame((function e(t){n=requestAnimationFrame(e);var c=t-i;c>=o-.1&&(i=t-c%o,r>a&&b((function(e){return e-1})),r<a&&b((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[h,u,c,E,a]);var k,w,x=l(l({},t),{},{counter:h});return e.createElement("div",{ref:O,style:(k=t,w=k.size,{width:w,height:w}),"data-angel":h},e.createElement(m.Provider,{value:x},r&&e.createElement(g,null),e.createElement(y,null,t.colorCircle&&e.createElement(p,null),e.createElement(v,null),e.createElement(d,null))))};x.propTypes=w,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};export{x as CircularProgressBar};

dist/index.js

@@ -1,1 +0,1 @@
-"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 f=e.createContext(),s=function(){var t=e.useContext(f),r=t.id,o=t.unit,a=t.number,i=t.counter,l=t.textPosition,u=t.fontSize,c=t.fontWeight,s=t.fontColor;return a?n.default.createElement("text",{x:"50%",y:"50%",fontSize:u,fontWeight:c,fill:s,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(f),r=t.stroke,o=t.fill,a=t.round,i=t.inverse,l=t.strokeBottom,u=t.cut,c=t.rotation,s=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:s,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(f),a=o.id,i=o.size;return n.default.createElement("svg",{role:"img",width:i,height:i,"data-index":a,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},r)},p=function(t){var r=t.index,o=e.useContext(f).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(f),r=t.id,o=t.rotation,a=t.linearGradient,i=t.inverse,l=t.counter,u=t.stroke,c=t.round,s=t.cut,d=t.colorSlice,m=void 0!==a?"url(#linear-gradient-".concat(r||0,")"):d;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:{transform:"rotate(".concat(o,"deg)"),transformOrigin:"50% 50%"},stroke:m,strokeWidth:u,strokeLinecap:c?"round":"butt",strokeDashoffset:function(e,t,r){var n=264-e/100*(t?2.64*(100-t):264);return r?-n:n}(l,s,i),strokeDasharray:264}))},v=function(){var t=e.useContext(f).children;return n.default.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},b=o.default.bool,g=o.default.number,h=o.default.string,x=o.default.array,O={percent:g.isRequired,colorSlice:h,colorCircle:h,round:b,opacity:g,number:b,size:g,speed:g,cut:g,rotation:g,unit:h,textPosition:h,fontSize:h,fill:h,fontWeight:g,stroke:g,strokeBottom:g,strokeDasharray:h,fontColor:h,linearGradient:x},E=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],b=c[1],g=e.useRef(),h=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}(g);e.useEffect((function(){var e,t;if(h)if(l)b(o);else{var r=Number(null===(e=g.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&&b((function(e){return e-1})),r<o&&b((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[p,l,a,h,o]);var x,O,E=i(i({},t),{},{counter:p});return n.default.createElement("div",{ref:g,style:(x=t,O=x.size,{width:O,height:O}),"data-angel":p},n.default.createElement(f.Provider,{value:E},r&&n.default.createElement(v,null),n.default.createElement(m,null,t.colorCircle&&n.default.createElement(d,null),n.default.createElement(y,null),n.default.createElement(s,null))))};E.propTypes=O,E.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=E;
+"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 f=e.createContext(),s=function(){var t=e.useContext(f),r=t.id,o=t.unit,a=t.number,i=t.counter,l=t.textPosition,u=t.fontSize,c=t.fontWeight,s=t.fontColor;return a?n.default.createElement("text",{x:"50%",y:"50%",fontSize:u,fontWeight:c,fill:s,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(f),r=t.stroke,o=t.fill,a=t.round,i=t.inverse,l=t.strokeBottom,u=t.cut,c=t.rotation,s=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:s,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(f),a=o.id,i=o.size;return n.default.createElement("svg",{role:"img",width:i,height:i,"data-index":a,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},r)},p=function(t){var r=t.index,o=e.useContext(f).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(f),r=t.id,o=t.rotation,a=t.linearGradient,l=t.animationSmooth,u=t.inverse,c=t.counter,s=t.stroke,d=t.round,m=t.cut,y=t.colorSlice,v=void 0!==a?"url(#linear-gradient-".concat(r||0,")"):y,h=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%"},h),stroke:v,strokeWidth:s,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=function(){var t=e.useContext(f).children;return n.default.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},h=o.default.bool,b=o.default.number,g=o.default.string,x=o.default.array,O={percent:b.isRequired,colorSlice:g,colorCircle:g,round:h,opacity:b,number:h,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:x},E=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],h=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)h(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&&h((function(e){return e-1})),r<o&&h((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[p,l,a,g,o]);var x,O,E=i(i({},t),{},{counter:p});return n.default.createElement("div",{ref:b,style:(x=t,O=x.size,{width:O,height:O}),"data-angel":p},n.default.createElement(f.Provider,{value:E},r&&n.default.createElement(v,null),n.default.createElement(m,null,t.colorCircle&&n.default.createElement(d,null),n.default.createElement(y,null),n.default.createElement(s,null))))};E.propTypes=O,E.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=E;

package.json

 {
   "name": "@tomik23/react-circular-progress-bar",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "private": false,
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -93,2 +93,6 @@ <h1 align="center">
         percent: Math.floor(Math.random() * 100 + 1)
+        colorSlice: "#000",
+        fontColor: "#F50057",
+        fontSize: "1.2rem",
+        fontWeight: 700
       });
@@ -195,2 +199,3 @@ }, 3000);
 | animationOff    | boolean |   `false`   |         | Turn off the progress animation                                                                                                                                          |
+| animationSmooth | string  |   ``   |         | The [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) property allows you to create animations (a smooth transition effect), e.g. `500ms ease-out`                                                                                                                                           |
 | colorSlice      | string  | `'#00a1ff'` |         | Progress layer color and background ["#ffff00","brown" \*](#colors-names)                                                                                                |
@@ -197,0 +202,0 @@ | colorCircle     | string  | `'#00a1ff'` |         | Bottom circle color Font ["#ffff00","brown" \*](#colors-names)                                                                                                           |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30881

increased by3.48%

Lines of code

46

increased by2.22%

Number of lines in readme file

228

increased by2.24%

No dependency changes