react-circular-progressbar
Advanced tools
Comparing version 0.5.0 to 0.6.0
@@ -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 a(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 i(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 u=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}}(),s=r(6),c=n(s),l=r(4),p=n(l),f=function(e){function t(e){o(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={percentage:e.initialAnimation?0:e.percentage},r}return i(t,e),u(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:"getBackgroundPadding",value:function(){return this.props.background?null==this.props.backgroundPadding?this.props.strokeWidth:this.props.backgroundPadding:0}},{key:"getPathDescription",value:function(){var e=this.getPathRadius();return"\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 "}},{key:"getProgressStyle",value:function(){var e=2*Math.PI*this.getPathRadius();return{strokeDasharray:e+"px "+e+"px",strokeDashoffset:(100-Math.min(Math.max(this.state.percentage,0),100))/100*e+"px"}}},{key:"getPathRadius",value:function(){return 50-this.props.strokeWidth/2-this.getBackgroundPadding()}},{key:"render",value:function(){var e=this.props,t=e.percentage,r=e.textForPercentage,n=e.className,o=e.classes,a=e.strokeWidth,i=this.props.classForPercentage?this.props.classForPercentage(t):"",u=this.getPathDescription(),s=r?r(t):null;return c.default.createElement("svg",{className:o.root+" "+n+" "+i,viewBox:"0 0 100 100"},this.props.background?c.default.createElement("circle",{className:o.background,cx:50,cy:50,r:50}):null,c.default.createElement("path",{className:o.trail,d:u,strokeWidth:a,fillOpacity:0}),c.default.createElement("path",{className:o.path,d:u,strokeWidth:a,fillOpacity:0,style:this.getProgressStyle()}),s?c.default.createElement("text",{className:o.text,x:50,y:50},s):null)}}]),t}(c.default.Component);f.propTypes={percentage:p.default.number.isRequired,className:p.default.string,classes:p.default.objectOf(p.default.string),strokeWidth:p.default.number,background:p.default.bool,backgroundPadding:p.default.number,initialAnimation:p.default.bool,classForPercentage:p.default.func,textForPercentage:p.default.func},f.defaultProps={strokeWidth:8,className:"",classes:{root:"CircularProgressbar",trail:"CircularProgressbar-trail",path:"CircularProgressbar-path",text:"CircularProgressbar-text",background:"CircularProgressbar-background"},background:!1,backgroundPadding:null,initialAnimation:!1,textForPercentage:function(e){return e+"%"}},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,a,i,u,s){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 l=[r,n,a,i,u,s],p=0;c=new Error(t.replace(/%s/g,function(){return l[p++]})),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),a=r(5);e.exports=function(){function e(e,t,r,n,i,u){u!==a&&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,exact: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 a(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 i(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),l=r(4),p=n(l),f=function(e){function t(e){o(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={percentage:e.initialAnimation?0:e.percentage},r}return i(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:"getBackgroundPadding",value:function(){return this.props.background?null==this.props.backgroundPadding?this.props.strokeWidth:this.props.backgroundPadding:0}},{key:"getPathDescription",value:function(){var e=this.getPathRadius(),t=this.props.counterClockwise?1:0;return"\n M 50,50\n m 0,-"+e+"\n a "+e+","+e+" "+t+" 1 1 0,"+2*e+"\n a "+e+","+e+" "+t+" 1 1 0,-"+2*e+"\n "}},{key:"getProgressStyle",value:function(){var e=2*Math.PI*this.getPathRadius(),t=Math.min(Math.max(this.state.percentage,0),100),r=(100-t)/100*e;return{strokeDasharray:e+"px "+e+"px",strokeDashoffset:(this.props.counterClockwise?-r:r)+"px"}}},{key:"getPathRadius",value:function(){return 50-this.props.strokeWidth/2-this.getBackgroundPadding()}},{key:"render",value:function(){var e=this.props,t=e.percentage,r=e.textForPercentage,n=e.className,o=e.classes,a=e.strokeWidth,i=this.props.classForPercentage?this.props.classForPercentage(t):"",s=this.getPathDescription(),u=r?r(t):null;return c.default.createElement("svg",{className:o.root+" "+n+" "+i,viewBox:"0 0 100 100"},this.props.background?c.default.createElement("circle",{className:o.background,cx:50,cy:50,r:50}):null,c.default.createElement("path",{className:o.trail,d:s,strokeWidth:a,fillOpacity:0}),c.default.createElement("path",{className:o.path,d:s,strokeWidth:a,fillOpacity:0,style:this.getProgressStyle()}),u?c.default.createElement("text",{className:o.text,x:50,y:50},u):null)}}]),t}(c.default.Component);f.propTypes={percentage:p.default.number.isRequired,className:p.default.string,classes:p.default.objectOf(p.default.string),strokeWidth:p.default.number,background:p.default.bool,backgroundPadding:p.default.number,initialAnimation:p.default.bool,counterClockwise:p.default.bool,classForPercentage:p.default.func,textForPercentage:p.default.func},f.defaultProps={strokeWidth:8,className:"",classes:{root:"CircularProgressbar",trail:"CircularProgressbar-trail",path:"CircularProgressbar-path",text:"CircularProgressbar-text",background:"CircularProgressbar-background"},background:!1,backgroundPadding:null,initialAnimation:!1,counterClockwise:!1,classForPercentage:null,textForPercentage:function(e){return e+"%"}},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,a,i,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 l=[r,n,a,i,s,u],p=0;c=new Error(t.replace(/%s/g,function(){return l[p++]})),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),a=r(5);e.exports=function(){function e(e,t,r,n,i,s){s!==a&&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,exact: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)}])}); |
@@ -0,1 +1,5 @@ | ||
## 0.6.0 | ||
* Add `counterClockwise` prop for having progressbar go in opposite direction [#39] | ||
## 0.5.0 | ||
@@ -2,0 +6,0 @@ |
@@ -10,5 +10,5 @@ import React from 'react'; | ||
const Example = ({ description, children }) => ( | ||
<div className="col-xs-12 col-sm-4"> | ||
<div className="col-xs-12 col-sm-6 col-md-3"> | ||
<div className="row mb-1"> | ||
<div className="col-xs-4 offset-xs-4"> | ||
<div className="col-xs-6 offset-xs-3"> | ||
{children} | ||
@@ -69,6 +69,6 @@ </div> | ||
<div className="row mt-3"> | ||
<h2 className="text-xs-center mb-3">Styled with plain CSS.</h2> | ||
<h2 className="text-xs-center mb-3">Built with SVG and styled with plain CSS.</h2> | ||
<Example | ||
description="Change color/styling based on percentage." | ||
description="Customize text and styling dynamically based on percentage." | ||
> | ||
@@ -80,2 +80,5 @@ <ChangingProgressbar | ||
}} | ||
textForPercentage={(percentage) => { | ||
return percentage === 100 ? `${percentage}!!` : `${percentage}`; | ||
}} | ||
/> | ||
@@ -85,8 +88,8 @@ </Example> | ||
<Example | ||
description="Customize text and stroke width." | ||
description="Customize stroke width and make it go counterclockwise." | ||
> | ||
<CircularProgressbar | ||
percentage={50} | ||
<ChangingProgressbar | ||
percentages={[0, 20, 80]} | ||
strokeWidth={5} | ||
textForPercentage={(percentage) => `$${percentage}`} | ||
counterClockwise | ||
/> | ||
@@ -103,5 +106,21 @@ </Example> | ||
strokeWidth={6} | ||
percentage={33} | ||
percentage={66} | ||
/> | ||
</Example> | ||
<Example | ||
description="With SVG and CSS you can do whatever you want." | ||
> | ||
<div style={{ position: 'relative', width: '100%', height: '100%' }}> | ||
<div style={{ position: 'absolute', width: '100%' }}> | ||
<CircularProgressbar | ||
percentage={50} | ||
textForPercentage={null} | ||
/> | ||
</div> | ||
<div style={{ width: '100%', padding: '10%' }}> | ||
<img style={{ width: '100%' }} src="https://i.imgur.com/b9NyUGm.png" alt="doge" /> | ||
</div> | ||
</div> | ||
</Example> | ||
</div> | ||
@@ -108,0 +127,0 @@ |
{ | ||
"name": "react-circular-progressbar", | ||
"version": "0.5.0", | ||
"version": "0.6.0", | ||
"description": "A circular progress indicator component", | ||
"author": "Kevin Qi <iqnivek@gmail.com>", | ||
"main": "./build/index.js", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/iqnivek/react-circular-progressbar.git" | ||
}, | ||
"repository": "https://github.com/iqnivek/react-circular-progressbar.git", | ||
"license": "MIT", | ||
@@ -23,3 +20,3 @@ "keywords": [ | ||
"lint": "eslint src test", | ||
"prepublish": "npm run clean && npm run build", | ||
"prepare": "npm run clean && npm run build", | ||
"test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js", | ||
@@ -33,3 +30,3 @@ "test:watch": "npm test -- --watch", | ||
"babel-loader": "^7.0.0", | ||
"babel-preset-es2015": "^6.3.13", | ||
"babel-preset-env": "^1.6.0", | ||
"babel-preset-react": "^6.3.13", | ||
@@ -36,0 +33,0 @@ "babel-register": "^6.8.0", |
@@ -46,2 +46,3 @@ # React Circular Progressbar | ||
| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. | | ||
| `counterClockwise` | Toggle whether to rotate progressbar in counterclockwise direction. Default: `false`. | | ||
| `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'`. | | ||
@@ -80,6 +81,6 @@ | `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. | | ||
```bash | ||
npm install | ||
npm start | ||
yarn install | ||
yarn start | ||
``` | ||
Keep CI tests passing by running `npm test` and `npm run lint` often. | ||
Keep tests passing by running `yarn test` and `yarn run lint`. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
913163
19760
85
7