react-circular-progressbar - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

build/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CircularProgressbar=t(require("react")):e.CircularProgressbar=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(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)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(6),c=n(u),p=r(4),f=n(p),l=function(e){function t(e){o(this,t);var r=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={percentage:e.initialAnimation?0:e.percentage},r}return a(t,e),s(t,[{key:"componentDidMount",value:function(){var e=this;this.props.initialAnimation&&(this.initialTimeout=setTimeout(function(){e.requestAnimationFrame=window.requestAnimationFrame(function(){e.setState({percentage:e.props.percentage})})},0))}},{key:"componentWillReceiveProps",value:function(e){this.setState({percentage:e.percentage})}},{key:"componentWillUnmount",value:function(){clearTimeout(this.initialTimeout),window.cancelAnimationFrame(this.requestAnimationFrame)}},{key:"render",value:function(){var e=50-this.props.strokeWidth/2,t="\n      M 50,50 m 0,-"+e+"\n      a "+e+","+e+" 0 1 1 0,"+2*e+"\n      a "+e+","+e+" 0 1 1 0,-"+2*e+"\n    ",r=2*Math.PI*e,n={strokeDasharray:r+"px "+r+"px",strokeDashoffset:(100-this.state.percentage)/100*r+"px"};return c.default.createElement("svg",{className:"CircularProgressbar "+(this.props.classForPercentage?this.props.classForPercentage(this.props.percentage):""),viewBox:"0 0 100 100"},c.default.createElement("path",{className:"CircularProgressbar-trail",d:t,strokeWidth:this.props.strokeWidth,fillOpacity:0}),c.default.createElement("path",{className:"CircularProgressbar-path",d:t,strokeWidth:this.props.strokeWidth,fillOpacity:0,style:n}),c.default.createElement("text",{className:"CircularProgressbar-text",x:50,y:50},this.props.textForPercentage(this.props.percentage)))}}]),t}(c.default.Component);l.propTypes={percentage:f.default.number.isRequired,strokeWidth:f.default.number,initialAnimation:f.default.bool,classForPercentage:f.default.func,textForPercentage:f.default.func},l.defaultProps={strokeWidth:8,textForPercentage:function(e){return e+"%"},initialAnimation:!1},t.default=l},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";function n(e,t,r,n,i,a,s,u){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[r,n,i,a,s,u],f=0;c=new Error(t.replace(/%s/g,function(){return p[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=n},function(e,t,r){"use strict";var n=r(1),o=r(2),i=r(5);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};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){e.exports=r(3)()},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,r){t.exports=e},function(e,t,r){e.exports=r(0)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CircularProgressbar=t(require("react")):e.CircularProgressbar=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(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)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(6),c=n(u),p=r(4),l=n(p),f=function(e){function t(e){o(this,t);var r=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={percentage:e.initialAnimation?0:e.percentage},r}return a(t,e),s(t,[{key:"componentDidMount",value:function(){var e=this;this.props.initialAnimation&&(this.initialTimeout=setTimeout(function(){e.requestAnimationFrame=window.requestAnimationFrame(function(){e.setState({percentage:e.props.percentage})})},0))}},{key:"componentWillReceiveProps",value:function(e){this.setState({percentage:e.percentage})}},{key:"componentWillUnmount",value:function(){clearTimeout(this.initialTimeout),window.cancelAnimationFrame(this.requestAnimationFrame)}},{key:"render",value:function(){var e=50-this.props.strokeWidth/2,t="\n      M 50,50 m 0,-"+e+"\n      a "+e+","+e+" 0 1 1 0,"+2*e+"\n      a "+e+","+e+" 0 1 1 0,-"+2*e+"\n    ",r=2*Math.PI*e,n={strokeDasharray:r+"px "+r+"px",strokeDashoffset:(100-this.state.percentage)/100*r+"px"},o=this.props.classForPercentage?this.props.classForPercentage(this.props.percentage):"";return c.default.createElement("svg",{className:"CircularProgressbar "+this.props.className+" "+o,viewBox:"0 0 100 100"},c.default.createElement("path",{className:"CircularProgressbar-trail",d:t,strokeWidth:this.props.strokeWidth,fillOpacity:0}),c.default.createElement("path",{className:"CircularProgressbar-path",d:t,strokeWidth:this.props.strokeWidth,fillOpacity:0,style:n}),c.default.createElement("text",{className:"CircularProgressbar-text",x:50,y:50},this.props.textForPercentage(this.props.percentage)))}}]),t}(c.default.Component);f.propTypes={percentage:l.default.number.isRequired,strokeWidth:l.default.number,className:l.default.string,initialAnimation:l.default.bool,classForPercentage:l.default.func,textForPercentage:l.default.func},f.defaultProps={strokeWidth:8,textForPercentage:function(e){return e+"%"},initialAnimation:!1},t.default=f},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";function n(e,t,r,n,i,a,s,u){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[r,n,i,a,s,u],l=0;c=new Error(t.replace(/%s/g,function(){return p[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=n},function(e,t,r){"use strict";var n=r(1),o=r(2),i=r(5);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};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){e.exports=r(3)()},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,r){t.exports=e},function(e,t,r){e.exports=r(0)}])});

docs/demo.jsx

@@ -124,11 +124,11 @@ import React from 'react';
         <Config
+          name="className"
+          example="'your-css-class'"
+          description="Classes to apply to the svg element"
+        />
+        <Config
           name="initialAnimation"
           example="false"
           description="Toggle whether to animate progress starting from 0% on initial mount."
-        >
-          <CircularProgressbar
-            percentage={50}
-            initialAnimation={true}
-          />
-        </Config>
+        />
         <Config
@@ -135,0 +135,0 @@ name="classForPercentage"

package.json

 {
   "name": "react-circular-progressbar",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A circular progress indicator component",
@@ -5,0 +5,0 @@ "author": "Kevin Qi <[e-mail]>",

README.md

@@ -40,2 +40,3 @@ # React Circular Progressbar
 | `strokeWidth` | Width of circular line. Default: `8`. |
+| `className` | Classes to apply to the svg element |
 | `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. |
@@ -42,0 +43,0 @@ | `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. |

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

762467

increased by0.04%

Number of lines in readme file

57

increased by1.79%

No dependency changes