Skip to content

Commit b7a77b5

Browse files
li-jia-nanli-jia-nan
authored
chore: code prettier (#122)
1 parent 2b58c4d commit b7a77b5

7 files changed

Lines changed: 255 additions & 203 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,4 @@
7575
"react-dom": ">=16.9.0"
7676
},
7777
"packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
78-
}
78+
}

‎src/QRCodeCanvas.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from './utils';
1515

1616
const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
17-
function QRCodeCanvas(props, forwardedRef) {
17+
(props, ref) => {
1818
const {
1919
value,
2020
size = DEFAULT_SIZE,
@@ -29,22 +29,21 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
2929
...otherProps
3030
} = props;
3131
const imgSrc = imageSettings?.src;
32-
const _canvas = React.useRef<HTMLCanvasElement | null>(null);
32+
const _canvas = React.useRef<HTMLCanvasElement>(null);
3333
const _image = React.useRef<HTMLImageElement>(null);
3434

3535
const setCanvasRef = React.useCallback(
36-
(node: HTMLCanvasElement | null) => {
36+
(node: HTMLCanvasElement) => {
3737
_canvas.current = node;
38-
if (typeof forwardedRef === 'function') {
39-
forwardedRef(node);
40-
} else if (forwardedRef) {
41-
forwardedRef.current = node;
38+
if (typeof ref === 'function') {
39+
ref(node);
40+
} else if (ref) {
41+
ref.current = node;
4242
}
4343
},
44-
[forwardedRef],
44+
[ref],
4545
);
4646

47-
4847
const [, setIsImageLoaded] = React.useState(false);
4948

5049
const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
@@ -58,7 +57,7 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
5857
});
5958

6059
React.useEffect(() => {
61-
if (_canvas.current != null) {
60+
if (_canvas.current) {
6261
const canvas = _canvas.current;
6362

6463
const ctx = canvas.getContext('2d');
@@ -89,16 +88,15 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
8988
const scale = (size / numCells) * pixelRatio;
9089
ctx.scale(scale, scale);
9190

92-
9391
ctx.fillStyle = bgColor;
9492
ctx.fillRect(0, 0, numCells, numCells);
9593

9694
ctx.fillStyle = fgColor;
9795
if (isSupportPath2d) {
9896
ctx.fill(new Path2D(generatePath(cellsToDraw, margin)));
9997
} else {
100-
cells.forEach(function (row, rdx) {
101-
row.forEach(function (cell, cdx) {
98+
cells.forEach((row, rdx) => {
99+
row.forEach((cell, cdx) => {
102100
if (cell) {
103101
ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
104102
}
@@ -126,7 +124,12 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
126124
setIsImageLoaded(false);
127125
}, [imgSrc]);
128126

129-
const canvasStyle = { height: size, width: size, ...style };
127+
const canvasStyle: React.CSSProperties = {
128+
height: size,
129+
width: size,
130+
...style,
131+
};
132+
130133
let img = null;
131134
if (imgSrc != null) {
132135
img = (
@@ -159,6 +162,9 @@ const QRCodeCanvas = React.forwardRef<HTMLCanvasElement, QRPropsCanvas>(
159162
);
160163
},
161164
);
162-
QRCodeCanvas.displayName = 'QRCodeCanvas';
165+
166+
if (process.env.NODE_ENV !== 'production') {
167+
QRCodeCanvas.displayName = 'QRCodeCanvas';
168+
}
163169

164170
export { QRCodeCanvas };

‎src/QRCodeSVG.tsx‎

Lines changed: 69 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -12,81 +12,79 @@ import {
1212
} from './utils';
1313
import { useQRCode } from './hooks/useQRCode';
1414

15-
const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>(
16-
function QRCodeSVG(props, forwardedRef) {
17-
const {
18-
value,
19-
size = DEFAULT_SIZE,
20-
level = DEFAULT_LEVEL,
21-
bgColor = DEFAULT_BACKGROUND_COLOR,
22-
fgColor = DEFAULT_FRONT_COLOR,
23-
includeMargin = DEFAULT_NEED_MARGIN,
24-
minVersion = DEFAULT_MINVERSION,
25-
title,
26-
marginSize,
27-
imageSettings,
28-
...otherProps
29-
} = props;
15+
const QRCodeSVG = React.forwardRef<SVGSVGElement, QRPropsSVG>((props, ref) => {
16+
const {
17+
value,
18+
size = DEFAULT_SIZE,
19+
level = DEFAULT_LEVEL,
20+
bgColor = DEFAULT_BACKGROUND_COLOR,
21+
fgColor = DEFAULT_FRONT_COLOR,
22+
includeMargin = DEFAULT_NEED_MARGIN,
23+
minVersion = DEFAULT_MINVERSION,
24+
title,
25+
marginSize,
26+
imageSettings,
27+
...otherProps
28+
} = props;
3029

31-
const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
32-
value,
33-
level,
34-
minVersion,
35-
includeMargin,
36-
marginSize,
37-
imageSettings,
38-
size,
39-
});
30+
const { margin, cells, numCells, calculatedImageSettings } = useQRCode({
31+
value,
32+
level,
33+
minVersion,
34+
includeMargin,
35+
marginSize,
36+
imageSettings,
37+
size,
38+
});
4039

41-
let cellsToDraw = cells;
42-
let image = null;
43-
if (imageSettings != null && calculatedImageSettings != null) {
44-
if (calculatedImageSettings.excavation != null) {
45-
cellsToDraw = excavateModules(
46-
cells,
47-
calculatedImageSettings.excavation,
48-
);
49-
}
50-
51-
image = (
52-
<image
53-
href={imageSettings.src}
54-
height={calculatedImageSettings.h}
55-
width={calculatedImageSettings.w}
56-
x={calculatedImageSettings.x + margin}
57-
y={calculatedImageSettings.y + margin}
58-
preserveAspectRatio="none"
59-
opacity={calculatedImageSettings.opacity}
60-
// when crossOrigin is not set, the image will be tainted
61-
// and the canvas cannot be exported to an image
62-
crossOrigin={calculatedImageSettings.crossOrigin}
63-
/>
64-
);
40+
let cellsToDraw = cells;
41+
let image = null;
42+
if (imageSettings != null && calculatedImageSettings != null) {
43+
if (calculatedImageSettings.excavation != null) {
44+
cellsToDraw = excavateModules(cells, calculatedImageSettings.excavation);
6545
}
6646

67-
const fgPath = generatePath(cellsToDraw, margin);
68-
69-
return (
70-
<svg
71-
height={size}
72-
width={size}
73-
viewBox={`0 0 ${numCells} ${numCells}`}
74-
ref={forwardedRef}
75-
role="img"
76-
{...otherProps}
77-
>
78-
{!!title && <title>{title}</title>}
79-
<path
80-
fill={bgColor}
81-
d={`M0,0 h${numCells}v${numCells}H0z`}
82-
shapeRendering="crispEdges"
83-
/>
84-
<path fill={fgColor} d={fgPath} shapeRendering="crispEdges" />
85-
{image}
86-
</svg>
47+
image = (
48+
<image
49+
href={imageSettings.src}
50+
height={calculatedImageSettings.h}
51+
width={calculatedImageSettings.w}
52+
x={calculatedImageSettings.x + margin}
53+
y={calculatedImageSettings.y + margin}
54+
preserveAspectRatio="none"
55+
opacity={calculatedImageSettings.opacity}
56+
// when crossOrigin is not set, the image will be tainted
57+
// and the canvas cannot be exported to an image
58+
crossOrigin={calculatedImageSettings.crossOrigin}
59+
/>
8760
);
88-
},
89-
);
90-
QRCodeSVG.displayName = 'QRCodeSVG';
61+
}
62+
63+
const fgPath = generatePath(cellsToDraw, margin);
64+
65+
return (
66+
<svg
67+
height={size}
68+
width={size}
69+
viewBox={`0 0 ${numCells} ${numCells}`}
70+
ref={ref}
71+
role="img"
72+
{...otherProps}
73+
>
74+
{!!title && <title>{title}</title>}
75+
<path
76+
fill={bgColor}
77+
d={`M0,0 h${numCells}v${numCells}H0z`}
78+
shapeRendering="crispEdges"
79+
/>
80+
<path fill={fgColor} d={fgPath} shapeRendering="crispEdges" />
81+
{image}
82+
</svg>
83+
);
84+
});
85+
86+
if (process.env.NODE_ENV !== 'production') {
87+
QRCodeSVG.displayName = 'QRCodeSVG';
88+
}
9189

9290
export { QRCodeSVG };

‎src/hooks/useQRCode.tsx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { QrCode, QrSegment } from '../libs/qrcodegen';
22
import type { ErrorCorrectionLevel, ImageSettings } from '../interface';
33
import { ERROR_LEVEL_MAP, getImageSettings, getMarginSize } from '../utils';
4-
import { useMemo } from 'react';
4+
import React from 'react';
55

6-
export function useQRCode({
6+
export const useQRCode = ({
77
value,
88
level,
99
minVersion,
@@ -19,29 +19,25 @@ export function useQRCode({
1919
marginSize?: number;
2020
imageSettings?: ImageSettings;
2121
size: number;
22-
}) {
23-
const qrcode = useMemo(() => {
22+
}) => {
23+
const qrcode = React.useMemo<QrCode>(() => {
2424
const segments = QrSegment.makeSegments(value);
25-
return QrCode.encodeSegments(
26-
segments,
27-
ERROR_LEVEL_MAP[level],
28-
minVersion,
29-
);
25+
return QrCode.encodeSegments(segments, ERROR_LEVEL_MAP[level], minVersion);
3026
}, [value, level, minVersion]);
3127

32-
const { cells, margin, numCells, calculatedImageSettings } = useMemo(() => {
33-
const cs = qrcode.getModules();
34-
35-
const mg = getMarginSize(includeMargin, marginSize);
36-
const ncs = cs.length + mg * 2;
37-
const cis = getImageSettings(cs, size, mg, imageSettings);
38-
return {
39-
cells: cs,
40-
margin: mg,
41-
numCells: ncs,
42-
calculatedImageSettings: cis,
43-
};
44-
}, [qrcode, size, imageSettings, includeMargin, marginSize]);
28+
const { cells, margin, numCells, calculatedImageSettings } =
29+
React.useMemo(() => {
30+
const cs = qrcode.getModules();
31+
const mg = getMarginSize(includeMargin, marginSize);
32+
const ncs = cs.length + mg * 2;
33+
const cis = getImageSettings(cs, size, mg, imageSettings);
34+
return {
35+
cells: cs,
36+
margin: mg,
37+
numCells: ncs,
38+
calculatedImageSettings: cis,
39+
};
40+
}, [qrcode, size, imageSettings, includeMargin, marginSize]);
4541

4642
return {
4743
qrcode,
@@ -50,4 +46,4 @@ export function useQRCode({
5046
numCells,
5147
calculatedImageSettings,
5248
};
53-
}
49+
};

‎src/interface.ts‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,32 @@ export type ERROR_LEVEL_MAPPED_TYPE = {
1010
[index in ErrorCorrectionLevel]: Ecc;
1111
};
1212

13-
1413
export type ImageSettings = {
15-
src: string;
16-
height: number;
17-
width: number;
18-
excavate: boolean;
19-
x?: number;
20-
y?: number;
21-
opacity?: number;
22-
crossOrigin?: CrossOrigin;
23-
};
24-
25-
export type QRProps = {
26-
value: string;
27-
size?: number;
28-
level?: ErrorCorrectionLevel;
29-
bgColor?: string;
30-
fgColor?: string;
31-
style?: CSSProperties;
32-
includeMargin?: boolean;
33-
marginSize?: number;
34-
imageSettings?: ImageSettings;
35-
title?: string;
36-
minVersion?: number;
37-
};
38-
export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
39-
export type QRPropsSVG = QRProps & React.SVGAttributes<SVGSVGElement>;
40-
14+
src: string;
15+
height: number;
16+
width: number;
17+
excavate: boolean;
18+
x?: number;
19+
y?: number;
20+
opacity?: number;
21+
crossOrigin?: CrossOrigin;
22+
};
23+
24+
export type QRProps = {
25+
value: string;
26+
size?: number;
27+
level?: ErrorCorrectionLevel;
28+
bgColor?: string;
29+
fgColor?: string;
30+
style?: CSSProperties;
31+
includeMargin?: boolean;
32+
marginSize?: number;
33+
imageSettings?: ImageSettings;
34+
title?: string;
35+
minVersion?: number;
36+
};
37+
38+
export type QRPropsCanvas = QRProps &
39+
React.CanvasHTMLAttributes<HTMLCanvasElement>;
40+
41+
export type QRPropsSVG = QRProps & React.SVGAttributes<SVGSVGElement>;

0 commit comments

Comments
 (0)