feat: add maskPattern prop

zpao · Oct 27, 2024 · fa50ae9 · fa50ae9
1 parent 5d9ec58
commit fa50ae9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/src/__test__/__snapshots__/index.test.tsx.snap b/src/__test__/__snapshots__/index.test.tsx.snap
@@ -337,6 +337,17 @@ exports[`Canvas rendering renders Canvas variation ({ marginSize: -10 }) correct
 ]
 `;
 
+exports[`Canvas rendering renders Canvas variation ({ maskPattern: 1 }) correctly 1`] = `
+[
+  <canvas
+    height="128"
+    role="img"
+    style="height: 128px; width: 128px;"
+    width="128"
+  />,
+]
+`;
+
 exports[`Canvas rendering renders Canvas variation ({ minVersion: 22 }) correctly 1`] = `
 [
   <canvas
@@ -948,6 +959,26 @@ exports[`SVG rendering renders SVG variation ({ marginSize: -10 }) correctly 1`]
 </svg>
 `;
 
+exports[`SVG rendering renders SVG variation ({ maskPattern: 1 }) correctly 1`] = `
+<svg
+  height="128"
+  role="img"
+  viewBox="0 0 29 29"
+  width="128"
+>
+  <path
+    d="M0,0 h29v29H0z"
+    fill="#ffffff"
+    shape-rendering="crispEdges"
+  />
+  <path
+    d="M0 0h7v1H0zM8 0h1v1H8zM10 0h5v1H10zM17 0h2v1H17zM22,0 h7v1H22zM0 1h1v1H0zM6 1h1v1H6zM8 1h3v1H8zM12 1h1v1H12zM14 1h1v1H14zM18 1h1v1H18zM22 1h1v1H22zM28,1 h1v1H28zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM10 2h1v1H10zM13 2h1v1H13zM15 2h1v1H15zM17 2h1v1H17zM19 2h1v1H19zM22 2h1v1H22zM24 2h3v1H24zM28,2 h1v1H28zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h2v1H10zM13 3h2v1H13zM17 3h3v1H17zM22 3h1v1H22zM24 3h3v1H24zM28,3 h1v1H28zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h3v1H8zM12 4h2v1H12zM17 4h1v1H17zM22 4h1v1H22zM24 4h3v1H24zM28,4 h1v1H28zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM12 5h2v1H12zM16 5h2v1H16zM22 5h1v1H22zM28,5 h1v1H28zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22,6 h7v1H22zM8 7h1v1H8zM10 7h1v1H10zM12 7h1v1H12zM14 7h3v1H14zM18 7h1v1H18zM0 8h3v1H0zM5 8h2v1H5zM8 8h3v1H8zM12 8h1v1H12zM14 8h1v1H14zM16 8h1v1H16zM19 8h1v1H19zM21 8h4v1H21zM27,8 h2v1H27zM2 9h1v1H2zM5 9h1v1H5zM9 9h5v1H9zM15 9h2v1H15zM19 9h5v1H19zM27,9 h2v1H27zM0 10h1v1H0zM2 10h3v1H2zM6 10h3v1H6zM11 10h1v1H11zM15 10h1v1H15zM18 10h2v1H18zM21 10h2v1H21zM24 10h3v1H24zM28,10 h1v1H28zM2 11h1v1H2zM4 11h1v1H4zM8 11h2v1H8zM11 11h2v1H11zM15 11h1v1H15zM18 11h3v1H18zM22 11h2v1H22zM1 12h3v1H1zM5 12h2v1H5zM9 12h1v1H9zM12 12h1v1H12zM15 12h2v1H15zM20 12h1v1H20zM22 12h1v1H22zM28,12 h1v1H28zM0 13h1v1H0zM2 13h2v1H2zM7 13h1v1H7zM11 13h2v1H11zM14 13h3v1H14zM19 13h2v1H19zM22 13h2v1H22zM26,13 h3v1H26zM0 14h9v1H0zM11 14h1v1H11zM13 14h1v1H13zM15 14h5v1H15zM22 14h4v1H22zM28,14 h1v1H28zM0 15h5v1H0zM9 15h3v1H9zM15 15h1v1H15zM18 15h1v1H18zM20 15h2v1H20zM23 15h1v1H23zM1 16h2v1H1zM4 16h1v1H4zM6 16h3v1H6zM11 16h2v1H11zM15 16h1v1H15zM19 16h2v1H19zM22 16h1v1H22zM25 16h1v1H25zM28,16 h1v1H28zM4 17h1v1H4zM9 17h4v1H9zM14 17h4v1H14zM19 17h5v1H19zM25,17 h4v1H25zM0 18h2v1H0zM3 18h5v1H3zM11 18h3v1H11zM15 18h1v1H15zM19 18h4v1H19zM28,18 h1v1H28zM2 19h4v1H2zM7 19h2v1H7zM10 19h3v1H10zM14 19h1v1H14zM21 19h2v1H21zM0 20h2v1H0zM3 20h2v1H3zM6 20h4v1H6zM12 20h1v1H12zM15 20h1v1H15zM19 20h7v1H19zM27 20h1v1H27zM8 21h1v1H8zM10 21h2v1H10zM13 21h1v1H13zM15 21h3v1H15zM19 21h2v1H19zM24 21h3v1H24zM28,21 h1v1H28zM0 22h7v1H0zM9 22h5v1H9zM15 22h1v1H15zM20 22h1v1H20zM22 22h1v1H22zM24 22h1v1H24zM28,22 h1v1H28zM0 23h1v1H0zM6 23h1v1H6zM8 23h1v1H8zM11 23h1v1H11zM14 23h3v1H14zM19 23h2v1H19zM24 23h2v1H24zM28,23 h1v1H28zM0 24h1v1H0zM2 24h3v1H2zM6 24h1v1H6zM9 24h3v1H9zM15 24h2v1H15zM19 24h6v1H19zM27,24 h2v1H27zM0 25h1v1H0zM2 25h3v1H2zM6 25h1v1H6zM9 25h4v1H9zM15 25h3v1H15zM20 25h2v1H20zM24 25h1v1H24zM27,25 h2v1H27zM0 26h1v1H0zM2 26h3v1H2zM6 26h1v1H6zM8 26h1v1H8zM10 26h3v1H10zM14 26h5v1H14zM20 26h2v1H20zM24,26 h5v1H24zM0 27h1v1H0zM6 27h1v1H6zM8 27h1v1H8zM10 27h1v1H10zM12 27h1v1H12zM15 27h2v1H15zM18 27h1v1H18zM20 27h4v1H20zM25 27h1v1H25zM0 28h7v1H0zM8 28h2v1H8zM12 28h1v1H12zM16 28h1v1H16zM20 28h1v1H20zM23 28h1v1H23zM25 28h1v1H25zM28,28 h1v1H28z"
+    fill="#000000"
+    shape-rendering="crispEdges"
+  />
+</svg>
+`;
+
 exports[`SVG rendering renders SVG variation ({ minVersion: 22 }) correctly 1`] = `
 <svg
   height="128"

diff --git a/src/__test__/index.test.tsx b/src/__test__/index.test.tsx
@@ -81,6 +81,7 @@ const TEST_CONFIGS: PartialQRProps[] = [
   // for ensuring minVersion is respected.
   {minVersion: 22},
   {level: 'L', boostLevel: false},
+  {maskPattern: 1},
   // Test all crossOrigin values. Important in case we remove other image
   // settings tests and to ensure we do non-obvious things like map '' to
   // 'anonymous'.

diff --git a/src/index.tsx b/src/index.tsx
@@ -123,6 +123,12 @@ type QRProps = {
    * @defaultValue 1
    */
   minVersion?: number;
+  /**
+   * The masking pattern (0-7) for the QR code.
+   * @see https://en.wikipedia.org/wiki/QR_code#Encoding
+   * @defaultValue -1
+   */
+  maskPattern?: number;
   /**
    * If enabled, the Error Correction Level of the result may be higher than
    * the specified Error Correction Level option if it can be done without
@@ -276,6 +282,7 @@ function useQRCode({
   imageSettings,
   size,
   boostLevel,
+  maskPattern,
 }: {
   value: string | string[];
   level: ErrorCorrectionLevel;
@@ -284,6 +291,7 @@ function useQRCode({
   marginSize?: number;
   imageSettings?: ImageSettings;
   size: number;
+  maskPattern?: number;
   boostLevel?: boolean;
 }) {
   let qrcode = React.useMemo(() => {
@@ -297,10 +305,10 @@ function useQRCode({
       ERROR_LEVEL_MAP[level],
       minVersion,
       undefined,
-      undefined,
+      maskPattern,
       boostLevel
     );
-  }, [value, level, minVersion, boostLevel]);
+  }, [value, level, minVersion, maskPattern, boostLevel]);
 
   const {cells, margin, numCells, calculatedImageSettings} =
     React.useMemo(() => {
@@ -355,6 +363,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       fgColor = DEFAULT_FGCOLOR,
       includeMargin = DEFAULT_INCLUDEMARGIN,
       minVersion = DEFAULT_MINVERSION,
+      maskPattern,
       boostLevel,
       marginSize,
       imageSettings,
@@ -388,6 +397,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
       value,
       level,
       minVersion,
+      maskPattern,
       boostLevel,
       includeMargin,
       marginSize,
@@ -516,6 +526,7 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
       fgColor = DEFAULT_FGCOLOR,
       includeMargin = DEFAULT_INCLUDEMARGIN,
       minVersion = DEFAULT_MINVERSION,
+      maskPattern,
       boostLevel,
       title,
       marginSize,
@@ -527,6 +538,7 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
       value,
       level,
       minVersion,
+      maskPattern,
       boostLevel,
       includeMargin,
       marginSize,