Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add maskPattern prop #378

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

feat: add maskPattern prop #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/__test__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/__test__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'.
Expand Down
16 changes: 14 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -276,6 +282,7 @@ function useQRCode({
imageSettings,
size,
boostLevel,
maskPattern,
}: {
value: string | string[];
level: ErrorCorrectionLevel;
Expand All @@ -284,6 +291,7 @@ function useQRCode({
marginSize?: number;
imageSettings?: ImageSettings;
size: number;
maskPattern?: number;
boostLevel?: boolean;
}) {
let qrcode = React.useMemo(() => {
Expand All @@ -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(() => {
Expand Down Expand Up @@ -355,6 +363,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
fgColor = DEFAULT_FGCOLOR,
includeMargin = DEFAULT_INCLUDEMARGIN,
minVersion = DEFAULT_MINVERSION,
maskPattern,
boostLevel,
marginSize,
imageSettings,
Expand Down Expand Up @@ -388,6 +397,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
value,
level,
minVersion,
maskPattern,
boostLevel,
includeMargin,
marginSize,
Expand Down Expand Up @@ -516,6 +526,7 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
fgColor = DEFAULT_FGCOLOR,
includeMargin = DEFAULT_INCLUDEMARGIN,
minVersion = DEFAULT_MINVERSION,
maskPattern,
boostLevel,
title,
marginSize,
Expand All @@ -527,6 +538,7 @@ const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
value,
level,
minVersion,
maskPattern,
boostLevel,
includeMargin,
marginSize,
Expand Down