@oguzhnatly/react-native-custom-qr-codes 2.0.0

package/lib/styles/codeStyles/circle.js

@@ -0,0 +1,31 @@
+/*
+
+circle.js
+
+This file exports a function for drawing a circle centre piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React from "react";
+import { Circle } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'circle' codeStyle
+export function drawCirclePiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize + xsize / 2;
+  var py = y * ysize + ysize / 2;
+  return (
+    <Circle
+      key={px + ":" + py}
+      cx={px}
+      cy={py}
+      r={xsize / 2}
+      fill={props.color}
+    />
+  );
+}

package/lib/styles/codeStyles/diamond.js

@@ -0,0 +1,35 @@
+/*
+
+diamond.js
+
+This file exports a function for drawing a diamond centre piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React from "react";
+import { G, Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'diamond' codeStyle
+export function drawDiamondPiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+  return (
+    <G x={px + xsize / 2} y={py + ysize / 2} width={xsize} height={ysize}>
+      <Rect
+        key={px + ":" + py}
+        x={-xsize / 2}
+        y={-ysize / 2}
+        width={xsize}
+        height={ysize}
+        rotate={45}
+        fill={props.color}
+      />
+    </G>
+  );
+}

package/lib/styles/codeStyles/dot.js

@@ -0,0 +1,31 @@
+/*
+
+dot.js
+
+This file exports a function for drawing a dot centre piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React from "react";
+import { Circle } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'dot' codeStyle
+export function drawDotPiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize + xsize / 2;
+  var py = y * ysize + ysize / 2;
+  return (
+    <Circle
+      key={px + ":" + py}
+      cx={px}
+      cy={py}
+      r={xsize / 3}
+      fill={props.color}
+    />
+  );
+}

package/lib/styles/codeStyles/index.js

@@ -0,0 +1,36 @@
+/*
+
+index.js
+
+This file exports a function for drawing the centre pieces of a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+
+import { drawSquarePiece } from './square';
+import { drawCirclePiece } from './circle';
+import { drawDotPiece } from './dot';
+import { drawDiamondPiece } from './diamond';
+import { drawSharpPiece } from './sharp';
+import { drawNinjaPiece } from './ninja';
+
+//Returns an SVG Element for a centre piece in the style of the codeStyle
+export function drawCentrePiece(x,y,modules,pieceProperties,props){
+    switch(props.codeStyle){
+      case 'square':
+        return drawSquarePiece(x,y,modules,pieceProperties,props);
+      case 'circle':
+        return drawCirclePiece(x,y,modules,pieceProperties,props);
+      case 'dot':
+        return drawDotPiece(x,y,modules,pieceProperties,props);
+      case 'diamond':
+        return drawDiamondPiece(x,y,modules,pieceProperties,props);
+      case 'sharp':
+        return drawSharpPiece(x,y,modules,pieceProperties,props);
+      case 'ninja':
+        return drawNinjaPiece(x,y,modules,pieceProperties,props);
+      default:
+        return drawSquarePiece(x,y,modules,pieceProperties,props);
+    }
+  }

package/lib/styles/codeStyles/ninja.js

@@ -0,0 +1,132 @@
+/*
+
+ninja.js
+
+This file exports a function for drawing a ninja centre piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React from "react";
+import { Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'ninja' codeStyle
+export function drawNinjaPiece(x, y, modules, pieceProperties, props) {
+  var orientation = pieceProperties.orientation;
+  var pieceType = pieceProperties.pieceType;
+  var width = props.size;
+  var height = props.size;
+  var length = modules.length;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+
+  // !!!! These aren't the proper paths yet
+  switch (pieceType) {
+    case "2b":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "1b":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "1b3b":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b1a":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b2c":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b2c3b":
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    default:
+      return (
+        <Rect
+          x={-(xsize / 2)}
+          y={-(ysize / 2)}
+          originX={px + xsize / 2}
+          originY={py + ysize / 2}
+          rotate={orientation}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+  }
+}

package/lib/styles/codeStyles/sharp.js

@@ -0,0 +1,118 @@
+/*
+
+sharp.js
+
+This file exports a function for drawing a sharp centre piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React from "react";
+import { Circle, Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'sharp' codeStyle
+export function drawSharpPiece(x, y, modules, pieceProperties, props) {
+  var orientation = pieceProperties.orientation;
+  var pieceType = pieceProperties.pieceType;
+  var width = props.size;
+  var height = props.size;
+  var length = modules.length;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+
+  // !!!! These aren't the proper paths yet
+  var str = xsize + "," + 0 + " " + xsize + "," + ysize + " " + 0 + "," + ysize;
+  var rotationStr = orientation + ", " + xsize / 2 + ", " + ysize / 2;
+
+  switch (pieceType) {
+    case "1a":
+      return (
+        <Circle
+          key={px + ":" + py}
+          cx={px + xsize / 2}
+          cy={py + ysize / 2}
+          r={xsize / 2}
+          fill={props.color}
+        />
+      );
+    case "2b":
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "1b3b":
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b":
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b1a":
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b2c":
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    case "2a1b2c3b":
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+    default:
+      return (
+        <Rect
+          key={px + ":" + py}
+          x={px}
+          y={py}
+          width={xsize}
+          height={ysize}
+          fill={props.color}
+        />
+      );
+  }
+}

package/lib/styles/codeStyles/square.js

@@ -0,0 +1,32 @@
+/*
+
+square.js
+
+This file exports a function for drawing a square centre piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React from "react";
+import { Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'square' codeStyle
+export function drawSquarePiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+  return (
+    <Rect
+      key={px + ":" + py}
+      x={px}
+      y={py}
+      width={xsize}
+      height={ysize}
+      fill={props.color}
+    />
+  );
+}

package/lib/styles/index.js

@@ -0,0 +1,45 @@
+/*
+
+index.js
+
+This file exports a function for drawing a piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+
+import { drawOuterEyePiece } from './outerEyeStyles';
+import { drawInnerEyePiece } from './innerEyeStyles';
+import { drawCentrePiece } from './codeStyles';
+
+//Returns an SVG Element for a piece in the style of the codeStyle
+export function drawPiece(x,y,modules,pieceProperties,props){
+
+  //Check the QR Code the piece is a part of: Centre, Inner Eye, or Outer Eye
+  var length = modules.length;
+
+  if( //If in the corners of the QR Code
+     (x<7 && y<7) ||
+     (x<7 && (length-y)<8) ||
+     ((length-x)<8 && y<7)
+  ){
+    if(//If part of the Outer Eye
+        x==0 ||
+        y==0 ||
+        x==6 ||
+        y==6 ||
+        x==(length-1) ||
+        y==(length-1) ||
+        (length-y)==7 ||
+        (length-x)==7
+    ){
+      return drawOuterEyePiece(x,y,modules,pieceProperties,props);
+    }
+    else{//If part of Inner Eye
+      return drawInnerEyePiece(x,y,modules,pieceProperties,props);
+    }
+  }
+  else{
+   return drawCentrePiece(x,y,modules,pieceProperties,props);
+  }
+}

package/lib/styles/innerEyeStyles/circle.js

@@ -0,0 +1,31 @@
+/*
+
+circle.js
+
+This file exports a function for drawing a circle outer eye piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React, { Component } from "react";
+import Svg, { Circle } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'circle' outerEyeStyle
+export function drawCirclesPiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize + xsize / 2;
+  var py = y * ysize + ysize / 2;
+  return (
+    <Circle
+      key={px + ":" + py}
+      cx={px}
+      cy={py}
+      r={xsize / 2}
+      fill={props.color}
+    />
+  );
+}

package/lib/styles/innerEyeStyles/diamond.js

@@ -0,0 +1,35 @@
+/*
+
+diamond.js
+
+This file exports a function for drawing a diamond outer eye piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React, { Component } from "react";
+import Svg, { G, Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'diamond' outerEyeStyle
+export function drawDiamondPiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+  return (
+    <G x={px + xsize / 2} y={py + ysize / 2} width={xsize} height={ysize}>
+      <Rect
+        key={px + ":" + py}
+        x={-xsize / 2}
+        y={-ysize / 2}
+        width={xsize}
+        height={ysize}
+        rotate={45}
+        fill={props.color}
+      />
+    </G>
+  );
+}

package/lib/styles/innerEyeStyles/index.js

@@ -0,0 +1,31 @@
+/*
+
+index.js
+
+This file exports a function for drawing the inner eye pieces of a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+
+import { drawCirclesPiece } from "./circle";
+import { drawDiamondPiece } from "./diamond";
+import { drawNone } from "./none";
+import { drawSquarePiece } from "./square";
+
+//Returns an SVG Element for an outer eye piece in the style of the innerEyeStyle
+export function drawInnerEyePiece(x, y, modules, pieceProperties, props) {
+  switch (props.innerEyeStyle) {
+    case "square":
+      return drawSquarePiece(x, y, modules, pieceProperties, props);
+    case "circles":
+      return drawCirclesPiece(x, y, modules, pieceProperties, props);
+    case "diamond":
+      return drawDiamondPiece(x, y, modules, pieceProperties, props);
+    case "circle":
+    case "rounded":
+      return drawNone(x, y, modules, pieceProperties, props);
+    default:
+      return drawSquarePiece(x, y, modules, pieceProperties, props);
+  }
+}

package/lib/styles/innerEyeStyles/none.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+import { View } from "react-native";
+
+//Returns an SVG Element for a piece of the 'circle' outerEyeStyle
+export function drawNone(x, y, modules, pieceProperties, props) {
+  return <View key={x + ":" + y} />;
+}

package/lib/styles/innerEyeStyles/square.js

@@ -0,0 +1,32 @@
+/*
+
+square.js
+
+This file exports a function for drawing a square outer eye piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React, { Component } from "react";
+import Svg, { Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'square' outerEyeStyle
+export function drawSquarePiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+  return (
+    <Rect
+      key={px + ":" + py}
+      x={px}
+      y={py}
+      width={xsize}
+      height={ysize}
+      fill={props.color}
+    />
+  );
+}

package/lib/styles/outerEyeStyles/circle.js

@@ -0,0 +1,31 @@
+/*
+
+circle.js
+
+This file exports a function for drawing a circle outer eye piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React, { Component } from "react";
+import Svg, { Circle } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'circle' outerEyeStyle
+export function drawCirclesPiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize + xsize / 2;
+  var py = y * ysize + ysize / 2;
+  return (
+    <Circle
+      key={px + ":" + py}
+      cx={px}
+      cy={py}
+      r={xsize / 2}
+      fill={props.color}
+    />
+  );
+}

package/lib/styles/outerEyeStyles/diamond.js

@@ -0,0 +1,35 @@
+/*
+
+diamond.js
+
+This file exports a function for drawing a diamond outer eye piece for a QRCode
+
+  --Geoff Natin 11/1/18 17:41
+
+*/
+import React, { Component } from "react";
+import Svg, { G, Rect } from "react-native-svg";
+
+//Returns an SVG Element for a piece of the 'diamond' outerEyeStyle
+export function drawDiamondPiece(x, y, modules, pieceProperties, props) {
+  var length = modules.length;
+  var width = props.size;
+  var height = props.size;
+  var xsize = width / length;
+  var ysize = height / length;
+  var px = x * xsize;
+  var py = y * ysize;
+  return (
+    <G x={px + xsize / 2} y={py + ysize / 2} width={xsize} height={ysize}>
+      <Rect
+        key={px + ":" + py}
+        x={-xsize / 2}
+        y={-ysize / 2}
+        width={xsize}
+        height={ysize}
+        rotate={45}
+        fill={props.color}
+      />
+    </G>
+  );
+}