feat: qrcode canvas supports style configuration (#48194)

* feat: qrcode canvas supports style configuration * Update components/qr-code/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: thinkasany <480968828@qq.com> * docs: update version * fix: typos * fix: ant-qrcode * fix: update padding for canvas / svg * fix: update * fix: typos * fix: when borderless padding shouble be 0 * fix: when borderless borderRadius should be 0 * fix: rm Variant --------- Signed-off-by: thinkasany <480968828@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
ant-design · Apr 30, 2024 · 3fa9d45 · 3fa9d45
1 parent 6f6868f
commit 3fa9d45
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 34 deletions.
diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -31,7 +31,7 @@ Array [
         >
           <div
             class="ant-qrcode ant-qrcode-borderless"
-            style="width: 160px; height: 160px; background-color: transparent;"
+            style="background-color: transparent; width: 160px; height: 160px;"
           >
             <canvas
               height="160"
@@ -56,7 +56,7 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -89,7 +89,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -102,7 +102,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
+      style="background-color: rgb(245, 245, 245); width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -189,7 +189,7 @@ Array [
   </div>,
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
@@ -211,7 +211,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
 >
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: rgb(255, 255, 255); margin-bottom: 16px;"
+    style="background-color: rgb(255, 255, 255); margin-bottom: 16px; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
@@ -235,7 +235,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
 Array [
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent; margin-bottom: 16px;"
+    style="background-color: transparent; margin-bottom: 16px; width: 160px; height: 160px;"
   >
     <canvas
       height="160"
@@ -315,7 +315,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx extend context correctly
 exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-qrcode"
-  style="width: 160px; height: 160px; background-color: transparent;"
+  style="background-color: transparent; width: 160px; height: 160px;"
 >
   <canvas
     height="160"
@@ -336,7 +336,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
 >
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <div
       class="ant-qrcode-mask"
@@ -371,7 +371,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <div
       class="ant-qrcode-mask"
@@ -420,7 +420,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <div
       class="ant-qrcode-mask"
@@ -450,7 +450,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <canvas
         height="160"
@@ -463,7 +463,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
   >
     <div
       class="ant-qrcode"
-      style="width: 160px; height: 160px; background-color: transparent;"
+      style="background-color: transparent; width: 160px; height: 160px;"
     >
       <svg
         height="160"

diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
@@ -20,7 +20,7 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -51,7 +51,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -64,7 +64,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:#f5f5f5"
+      style="background-color:#f5f5f5;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -149,7 +149,7 @@ Array [
   </div>,
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <canvas
       height="160"
@@ -169,7 +169,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
 >
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:#fff;margin-bottom:16px"
+    style="background-color:#fff;margin-bottom:16px;width:160px;height:160px"
   >
     <canvas
       height="160"
@@ -191,7 +191,7 @@ exports[`renders components/qr-code/demo/errorlevel.tsx correctly 1`] = `
 Array [
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent;margin-bottom:16px"
+    style="background-color:transparent;margin-bottom:16px;width:160px;height:160px"
   >
     <canvas
       height="160"
@@ -269,7 +269,7 @@ Array [
 exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-qrcode"
-  style="width:160px;height:160px;background-color:transparent"
+  style="background-color:transparent;width:160px;height:160px"
 >
   <canvas
     height="160"
@@ -288,7 +288,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
 >
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <div
       class="ant-qrcode-mask"
@@ -323,7 +323,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
   </div>
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <div
       class="ant-qrcode-mask"
@@ -372,7 +372,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
   </div>
   <div
     class="ant-qrcode"
-    style="width:160px;height:160px;background-color:transparent"
+    style="background-color:transparent;width:160px;height:160px"
   >
     <div
       class="ant-qrcode-mask"
@@ -400,7 +400,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <canvas
         height="160"
@@ -413,7 +413,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
   >
     <div
       class="ant-qrcode"
-      style="width:160px;height:160px;background-color:transparent"
+      style="background-color:transparent;width:160px;height:160px"
     >
       <svg
         height="160"

diff --git a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`QRCode test should correct render 1`] = `
 <div>
   <div
     class="ant-qrcode"
-    style="width: 160px; height: 160px; background-color: transparent;"
+    style="background-color: transparent; width: 160px; height: 160px;"
   >
     <canvas
       height="160"

diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx
@@ -40,7 +40,9 @@ describe('QRCode test', () => {
 
   it('support custom size', () => {
     const { container } = render(<QRCode value="test" size={100} />);
-    expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px');
+    const canvas = container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')!;
+    expect(canvas.width).toBe(100);
+    expect(canvas.height).toBe(100);
   });
 
   it('support refresh', () => {
@@ -88,10 +90,10 @@ describe('QRCode test', () => {
     errSpy.mockRestore();
   });
 
-  it('correct style order', () => {
-    const { container } = render(<QRCode value="test" size={80} style={{ width: 100 }} />);
-    expect(container.querySelector<HTMLDivElement>('.ant-qrcode')).toHaveStyle(
-      'width: 100px; height: 80px',
+  it('correct style order for canvas', () => {
+    const { container } = render(<QRCode value="test" size={80} style={{ width: '100%' }} />);
+    expect(container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')).toHaveStyle(
+      'width: 100%',
     );
   });
 });
diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx
@@ -52,7 +52,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     level: errorLevel,
     bgColor,
     fgColor: color,
-    style: { width: undefined, height: undefined },
+    style: { width: style?.width, height: style?.height },
     imageSettings: icon ? imageSettings : undefined,
   };
 
@@ -79,10 +79,10 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
   });
 
   const mergedStyle: React.CSSProperties = {
-    width: size,
-    height: size,
     backgroundColor: bgColor,
     ...style,
+    width: style?.width ?? size,
+    height: style?.height ?? size,
   };
 
   return wrapCSSVar(

diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts
@@ -60,6 +60,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
     },
     [`${componentCls}-borderless`]: {
       borderColor: 'transparent',
+      padding: 0,
+      borderRadius: 0,
     },
   };
 };