fix: QRCode style.padding should work

ant-design · Nov 12, 2023 · 3070be8 · 3070be8
1 parent 6ba626b
commit 3070be8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx
@@ -88,4 +88,17 @@ describe('QRCode test', () => {
     );
     errSpy.mockRestore();
   });
+
+  it('style.padding should works', () => {
+    const { container: container1 } = render(<QRCode value="test" size={200} />);
+    expect(container1.querySelector('canvas')).toHaveStyle('width: 174px; height: 174px');
+    const { container: container2 } = render(
+      <QRCode value="test" size={200} style={{ padding: 0 }} />,
+    );
+    expect(container2.querySelector('canvas')).toHaveStyle('width: 200px; height: 200px');
+    const { container: container3 } = render(
+      <QRCode value="test" size={200} style={{ padding: '2px' }} />,
+    );
+    expect(container3.querySelector('canvas')).toHaveStyle('width: 198px; height: 198px');
+  });
 });
diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx
@@ -45,9 +45,19 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     excavate: true,
   };
 
+  const getQrCodePadding = (): number => {
+    if (typeof style?.padding === 'number') {
+      return style?.padding;
+    }
+    if (/\d+px/.test(style?.padding || '')) {
+      return parseInt(style?.padding || '', 10);
+    }
+    return (token.paddingSM + token.lineWidth) * 2;
+  };
+
   const qrCodeProps = {
     value,
-    size: size - (token.paddingSM + token.lineWidth) * 2,
+    size: size - getQrCodePadding(),
     level: errorLevel,
     bgColor,
     fgColor: color,