Merge branch 'release/4.0.2'

Author: awesomejerry

README.md

@@ -69,6 +69,24 @@ render() {
 
 ```
 
+```
+// get base64 string encode of the qrcode (currently logo is not included)
+getDataURL() {
+  this.svg.toDataURL(this.callback);
+}
+callback(dataURL) {
+  console.log(dataURL);
+}
+render() {
+  return (
+    <QRCode
+      value="Just some string value"
+      getRef={(c) => (this.svg = c)}
+    />
+  );
+}
+```
+
 
 ### Props
 
@@ -80,6 +98,7 @@ color           | 'black'        | Color of the QR code
 logo | null        | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
 logoSize | 20% of size | Size of the imprinted logo. Bigger logo = less error correction in QR code
 logoBackgroundColor | backgroundColor        | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
+getRef          | null       | Get SVG ref for further usage
 
 
 ### Dependencies

package.json

@@ -1,13 +1,25 @@
 {
   "name": "react-native-qrcode-svg",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "A QR Code generator for React Native based on react-native-svg and javascript-qrcode.",
   "main": "index.js",
   "scripts": {
     "test": "jest",
     "test-update": "npm run test -- --updateSnapshot",
+    "lint-staged": "lint-staged",
+    "lint": "standard 'src/**/*.js'",
     "2npm": "publish"
   },
+  "standard": {
+    "env": [
+      "jest"
+    ],
+    "parser": "babel-eslint"
+  },
+  "pre-commit": "lint-staged",
+  "lint-staged": {
+    "*.js": "lint"
+  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/awesomejerry/react-native-qrcode-svg.git"
@@ -32,11 +44,15 @@
     "javascript-qrcode": "git+https://git@github.com/awesomejerry/javascript-qrcode.git"
   },
   "devDependencies": {
+    "babel-eslint": "^7.2.2",
     "babel-jest": "^19.0.0",
     "babel-preset-react-native": "^1.9.1",
     "jest": "^19.0.2",
+    "lint-staged": "^3.4.0",
+    "pre-commit": "^1.2.2",
     "publish": "^0.6.0",
     "react": "^15.4.2",
-    "react-test-renderer": "^15.4.2"
+    "react-test-renderer": "^15.4.2",
+    "standard": "^10.0.2"
   }
 }

src/__mocks__/react-native-svg.js

@@ -1,22 +1,21 @@
-import React from 'react';
+import React from 'react'
 
-export default function({ children }) {
+export default function ({ children }) {
   return (
     <div>
-      {children}  
+      {children}
     </div>
-  );
+  )
 }
 
 export const Rect = () => {
   return (
     <span>Rect</span>
-  );
-};
+  )
+}
 
 export const Path = () => {
   return (
     <span>Path</span>
-  );
-};
-
+  )
+}

src/__mocks__/react-native.js

@@ -1,24 +1,24 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes } from 'react'
 
 export const View = ({ children }) => {
   return (
     <div>{children}</div>
-  );
-};
+  )
+}
 
 export const Image = ({ source, resizeMode }) => {
   return (
     <div>
       <span>Source: {source.uri ? source.uri : source}</span>
       <span>ResizeMode: {resizeMode}</span>
     </div>
-  );
-};
+  )
+}
 Image.propTypes = {
   source: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.shape({
-      uri: PropTypes.string,
-    }),
-  ]),
-};
+      uri: PropTypes.string
+    })
+  ])
+}

src/__tests__/Matrix-test.js

@@ -1,4 +1,4 @@
-import genMatrix from '../genMatrix';
+import genMatrix from '../genMatrix'
 
 const expected = [
   [ 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1 ],
@@ -22,9 +22,9 @@ const expected = [
   [ 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1 ],
   [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0 ],
   [ 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1 ]
-];
+]
 
 it('generates correctly', () => {
-  const matrix = genMatrix('test');
-  expect(matrix).toEqual(expected);
-});
+  const matrix = genMatrix('test')
+  expect(matrix).toEqual(expected)
+})

src/__tests__/QRCode-test.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import QRCode from '../index';
-import renderer from 'react-test-renderer';
+import React from 'react'
+import QRCode from '../index'
+import renderer from 'react-test-renderer'
 
 describe('QRCode', () => {
   it('renders correctly', () => {
     const tree = renderer.create(
       <QRCode />
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    ).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 
   it('renders with logo correctly', () => {
     const tree = renderer.create(
       <QRCode
         logo={{ uri: 'fakeUri' }}
       />
-    ).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
+    ).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/genMatrix.js

@@ -1,6 +1,6 @@
-import { QrCode } from 'javascript-qrcode';
+import { QrCode } from 'javascript-qrcode'
 
 export default (value) => {
-  const qrcode = new QrCode(value);
-  return qrcode.getData();
-};
+  const qrcode = new QrCode(value)
+  return qrcode.getData()
+}

src/index.js

@@ -1,9 +1,9 @@
 // core
-import React, { PropTypes, PureComponent } from 'react';
-import { View, Image } from 'react-native';
+import React, { PropTypes, PureComponent } from 'react'
+import { View, Image } from 'react-native'
 // libs
-import Svg, { Rect, Path } from 'react-native-svg';
-import genMatrix from './genMatrix';
+import Svg, { Rect, Path } from 'react-native-svg'
+import genMatrix from './genMatrix'
 
 /**
  * A simple component for displaying QR Code using svg
@@ -27,84 +27,86 @@ export default class QRCode extends PureComponent {
     logoBackgroundColor: PropTypes.string,
     /* logo's distance to its wrapper */
     logoMargin: PropTypes.number,
+    /* get svg ref for further usage */
+    getRef: PropTypes.func
   };
   static defaultProps = {
     value: 'This is a QR Code.',
     size: 100,
     color: 'black',
     backgroundColor: 'white',
-    logoMargin: 2,
+    logoMargin: 2
   };
-  constructor(props) {
-    super(props);
-    this._matrix = null;
-    this._cellSize = null;
-    this._path = null;
-    this.setMatrix(props);
+  constructor (props) {
+    super(props)
+    this._matrix = null
+    this._cellSize = null
+    this._path = null
+    this.setMatrix(props)
   }
-  componentWillUpdate(nextProps) {
+  componentWillUpdate (nextProps) {
     // if value has changed, re-setMatrix
     if (nextProps.value !== this.props.value) {
-      this.setMatrix(nextProps);
+      this.setMatrix(nextProps)
     }
   }
   /* calculate the size of the cell and draw the path */
-  setMatrix(props) {
-    const { value, size } = props;
-    this._matrix = genMatrix(value);
-    this._cellSize = size / (this._matrix.length + 2);
-    this._path = this.transformMatrixIntoPath();
+  setMatrix (props) {
+    const { value, size } = props
+    this._matrix = genMatrix(value)
+    this._cellSize = size / (this._matrix.length + 2)
+    this._path = this.transformMatrixIntoPath()
   }
   /* project the matrix into path draw */
-  transformMatrixIntoPath() {
-    const matrix = this._matrix;
-    const cellSize = this._cellSize;
+  transformMatrixIntoPath () {
+    const matrix = this._matrix
+    const cellSize = this._cellSize
     // adjust origin
-    const oY = cellSize * 1.5;
-    const oX = cellSize;
-    let d = '';
+    const oY = cellSize * 1.5
+    const oX = cellSize
+    let d = ''
     matrix.forEach((row, i) => {
-      let needDraw = false;
+      let needDraw = false
       row.forEach((column, j) => {
         if (column) {
           if (!needDraw) {
-            d += `M${oX + cellSize * j} ${oY + cellSize * i} `;
-            needDraw = true;
+            d += `M${oX + cellSize * j} ${oY + cellSize * i} `
+            needDraw = true
           }
           if (needDraw && j === matrix.length - 1) {
-            d += `L${oX + cellSize * (j + 1)} ${oY + cellSize * i} `;
+            d += `L${oX + cellSize * (j + 1)} ${oY + cellSize * i} `
           }
         } else {
           if (needDraw) {
-            d += `L${oX + cellSize * j} ${oY + cellSize * i} `;
-            needDraw = false;
+            d += `L${oX + cellSize * j} ${oY + cellSize * i} `
+            needDraw = false
           }
         }
-      });
-    });
-    return d;
+      })
+    })
+    return d
   }
-  renderLogo() {
+  renderLogo () {
     const {
       size,
       backgroundColor,
       logo,
       logoBackgroundColor = backgroundColor,
       logoSize = size * 0.2,
-      logoMargin,
-    } = this.props;
-    const wrapSize = logoSize + logoMargin * 2;
-    const position = size / 2 - logoSize / 2 - logoMargin;
+      logoMargin
+    } = this.props
+    const wrapSize = logoSize + logoMargin * 2
+    const position = size / 2 - logoSize / 2 - logoMargin
 
     return (
       <View
         style={{
-          backgroundColor: logoBackgroundColor, 
+          backgroundColor: logoBackgroundColor,
           width: wrapSize,
           height: wrapSize,
           position: 'absolute',
           left: position,
-          top: position,
+          top: position
         }}
       >
         <Image
@@ -122,12 +124,12 @@ export default class QRCode extends PureComponent {
     )
   }
 
-  render() {
-    const { size, color, backgroundColor, logo } = this.props;
+  render () {
+    const { size, color, backgroundColor, logo, getRef } = this.props
 
     return (
       <View>
-        <Svg width={size} height={size}>
+        <Svg ref={getRef} width={size} height={size}>
           <Rect
             x={this._cellSize}
             y={this._cellSize}
@@ -143,6 +145,6 @@ export default class QRCode extends PureComponent {
         </Svg>
         {logo && this.renderLogo()}
       </View>
-    );
+    )
   }
 }