react-circular-progressbar - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

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]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},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}}(),c=r(2),p=n(c),u=function(e){function t(e){o(this,t);var r=i(this,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 p["default"].createElement("svg",{className:"CircularProgressbar "+(this.props.classForPercentage?this.props.classForPercentage(this.props.percentage):""),viewBox:"0 0 100 100"},p["default"].createElement("path",{className:"CircularProgressbar-trail",d:t,strokeWidth:this.props.strokeWidth,fillOpacity:0}),p["default"].createElement("path",{className:"CircularProgressbar-path",d:t,strokeWidth:this.props.strokeWidth,fillOpacity:0,style:n}),p["default"].createElement("text",{className:"CircularProgressbar-text",x:50,y:50},this.props.textForPercentage(this.props.percentage)))}}]),t}(p["default"].Component);u.propTypes={percentage:c.PropTypes.number.isRequired,strokeWidth:c.PropTypes.number,initialAnimation:c.PropTypes.bool,classForPercentage:c.PropTypes.func,textForPercentage:c.PropTypes.func},u.defaultProps={strokeWidth:8,textForPercentage:function(e){return e+"%"},initialAnimation:!1},t["default"]=u},function(t,r){t.exports=e}])});
+!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=6)}([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(5),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"};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);f.propTypes={percentage:l.default.number.isRequired,strokeWidth:l.default.number,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);e.exports=function(){function e(){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(t,r){t.exports=e},function(e,t,r){e.exports=r(0)}])});

CHANGELOG.md

@@ -0,1 +1,6 @@
+## 0.1.4
+
+* Fixes React PropTypes import warning by using prop-types package
+* Upgrades devDependencies
+
 ## 0.1.3
@@ -2,0 +7,0 @@

package.json

 {
   "name": "react-circular-progressbar",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A circular progress indicator component",
@@ -19,5 +19,4 @@ "author": "Kevin Qi <[e-mail]>",
   "scripts": {
-    "build": "NODE_ENV=production webpack",
-    "build:demo": "NODE_ENV=demo webpack",
-    "deploy:demo": "npm run build:demo && ./scripts/build_ghpages.sh",
+    "build": "NODE_ENV=production webpack && npm run build:demo",
+    "build:demo": "NODE_ENV=demo webpack && cp ./src/styles.css ./docs/styles.css",
     "clean": "rimraf build",
@@ -32,4 +31,4 @@ "lint": "eslint src test",
     "babel-core": "^6.3.15",
-    "babel-eslint": "^6.0.4",
-    "babel-loader": "^6.2.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.3.13",
@@ -40,13 +39,19 @@ "babel-preset-react": "^6.3.13",
     "enzyme": "^2.3.0",
-    "eslint": "^2.9.0",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-react": "^5.0.1",
+    "eslint": "^3.11.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.0.0",
     "jsdom": "^9.0.0",
-    "mocha": "^2.4.5",
+    "mocha": "^3.3.0",
+    "react": "^15.4.0",
     "react-addons-test-utils": "^15.0.2",
-    "react-dom": "^15.0.1",
+    "react-dom": "^15.4.0",
     "rimraf": "^2.3.4",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^2.5.1",
+    "webpack-dev-server": "^2.4.5"
   },
+  "dependencies": {
+    "prop-types": "^15.0.0"
+  },
   "peerDependencies": {
@@ -53,0 +58,0 @@ "react": "^0.14.0 || ^15.0.0"

README.md

@@ -34,4 +34,14 @@ # React Circular Progressbar
 
-See the [live demo page](http://www.kevinqi.com/react-circular-progressbar/) for examples and configuration options.
+## Props
 
+| Name | Description |
+| ---- | ----------- |
+| `percentage` | Numeric percentage to display, from 0-100. Required. |
+| `strokeWidth` | Width of circlar line. Default: `false`. |
+| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. 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'`. |
+| `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. |
+
+See the [demo page JSX](docs/demo.jsx) to see code used on the live demo page.
+
 ## Development
@@ -47,3 +57,1 @@
 Keep CI tests passing by running `npm test` and `npm run lint` often.
-
-Deploy updates to the demo page with `npm run deploy:demo`.

webpack.config.js

@@ -5,2 +5,3 @@ const webpack = require('webpack');
 const nodeEnv = process.env.NODE_ENV || 'development';
+const demoDir = 'docs';
 
@@ -21,11 +22,11 @@ const webpackConfig = {
   resolve: {
-    extensions: ['', '.js', '.jsx'],
-    modulesDirectories: ['node_modules']
+    extensions: ['.js', '.jsx'],
+    modules: ['node_modules']
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         exclude: /(node_modules)/,
-        loader: 'babel'
+        loader: 'babel-loader'
       }
@@ -37,2 +38,5 @@ ]
       'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+    }),
+    new webpack.LoaderOptionsPlugin({
+      debug: true
     })
@@ -44,6 +48,5 @@ ]
   webpackConfig.devtool = 'source-map';
-  webpackConfig.debug = true;
-  webpackConfig.devServer = { contentBase: './demo'};
+  webpackConfig.devServer = { contentBase: path.resolve(__dirname, demoDir) };
   webpackConfig.entry['react-circular-progressbar'].unshift('webpack-dev-server/client?http://0.0.0.0:8080/');
-  webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, 'demo', 'demo.jsx'));
+  webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, demoDir, 'demo.jsx'));
   webpackConfig.output.publicPath = '/';
@@ -53,4 +56,4 @@ }
 if (nodeEnv === 'demo') {
-  webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, 'demo', 'demo.jsx'));
-  webpackConfig.output.path = path.resolve(__dirname, 'demo');
+  webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, demoDir, 'demo.jsx'));
+  webpackConfig.output.path = path.resolve(__dirname, demoDir);
 }
@@ -57,0 +60,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

749888

increased by8180.57%

Number of package files

13

increased by30%

Lines of code

19607

increased by27515.49%

Number of lines in readme file

56

increased by16.67%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

21

increased by16.67%

Number of low supply chain risk alerts

6

increased by500%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.0.0