From 4d2e1e515cf4cfb996bc600cc7cf91e849821f0c Mon Sep 17 00:00:00 2001 From: Andrew Rothman Date: Tue, 24 Oct 2017 14:14:27 -0700 Subject: [PATCH] add didGeneratePNGData callback prop --- README.md | 15 ++++++++------- package.json | 8 ++++---- src/index.js | 12 ++++++++++-- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 5aae977..345de98 100644 --- a/README.md +++ b/README.md @@ -22,13 +22,14 @@ React.render( ## Available Props -prop | type | default value -----------|----------------------|-------------- -`value` | `string` | -`size` | `number` | `128` -`bgColor` | `string` (CSS color) | `"#FFFFFF"` -`fgColor` | `string` (CSS color) | `"#000000"` -`level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'` +prop | type | default value +-----------------------|-------------------------------|-------------- +`value` | `string` | +`size` | `number` | `128` +`bgColor` | `string` (CSS color) | `"#FFFFFF"` +`fgColor` | `string` (CSS color) | `"#000000"` +`level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'` +`didGeneratePNGData` | `(string) => void` | diff --git a/package.json b/package.json index affc9b3..e76b955 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "homepage": "http://zpao.github.io/qrcode.react", "main": "lib/index.js", "scripts": { - "flow": "flow", + "flow": "./node_modules/.bin/flow", "lint": "eslint src/ examples/demo.js", "pretty": "prettier --write --single-quote --bracket-spacing=false --trailing-comma=es5 {.eslintrc.js,src/*.js,examples/demo.js}", - "prepublish": "flow && make clean && make all", + "prepublish": "./node_modules/.bin/flow && make clean && make all", "prepublish-docs": "make clean && make all", "publish-docs": "gh-pages --dist=examples --src='{index.html,bundle.js}'", "test": "echo \"Error: no test specified\" && exit 1" @@ -45,10 +45,10 @@ "eslint": "^3.19.0", "eslint-config-prettier": "^1.6.0", "eslint-plugin-react": "^3.16.1", - "flow-bin": "^0.45.0", + "flow-bin": "^0.57.3", "gh-pages": "^0.12.0", "prettier": "^1.1.0", "react": "^16.0.0", "react-dom": "^16.0.0" } -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 27d1ee2..b971cf8 100644 --- a/src/index.js +++ b/src/index.js @@ -31,9 +31,10 @@ type Props = { level: $Keys, bgColor: string, fgColor: string, + didGeneratePNGData: (string) => void }; -class QRCode extends React.Component { +class QRCode extends React.Component { props: Props; _canvas: ?HTMLCanvasElement; @@ -42,6 +43,8 @@ class QRCode extends React.Component { level: 'L', bgColor: '#FFFFFF', fgColor: '#000000', + didGeneratePNGData: null, + value: "" }; static propTypes = { @@ -50,11 +53,12 @@ class QRCode extends React.Component { level: PropTypes.oneOf(['L', 'M', 'Q', 'H']), bgColor: PropTypes.string, fgColor: PropTypes.string, + didGeneratePNGData: PropTypes.func }; shouldComponentUpdate(nextProps: Props) { return Object.keys(QRCode.propTypes).some( - k => this.props[k] !== nextProps[k] + k => this.props[k] !== nextProps[k] && k !== "didGeneratePNGData" ); } @@ -106,6 +110,10 @@ class QRCode extends React.Component { ); }); }); + + if (this.props.didGeneratePNGData != null) { + this.props.didGeneratePNGData(canvas.toDataURL("image/png")); + } } }