From 3fa9d45dd593358fa99dcb907c52ff5ef42f865d Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 30 Apr 2024 17:03:00 +0800 Subject: [PATCH] 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 --- .../__snapshots__/demo-extend.test.ts.snap | 26 +++++++++---------- .../__tests__/__snapshots__/demo.test.ts.snap | 24 ++++++++--------- .../__snapshots__/index.test.tsx.snap | 2 +- components/qr-code/__tests__/index.test.tsx | 12 +++++---- components/qr-code/index.tsx | 6 ++--- components/qr-code/style/index.ts | 2 ++ 6 files changed, 38 insertions(+), 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 index a2e8b1ee45..dc503151f3 100644 --- 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 [ >
,
,
{ it('support custom size', () => { const { container } = render(); - expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px'); + const canvas = container.querySelector('.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(); - expect(container.querySelector('.ant-qrcode')).toHaveStyle( - 'width: 100px; height: 80px', + it('correct style order for canvas', () => { + const { container } = render(); + expect(container.querySelector('.ant-qrcode > canvas')).toHaveStyle( + 'width: 100%', ); }); }); diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 3dafc0157a..ad48315887 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -52,7 +52,7 @@ const QRCode: React.FC = (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 = (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 index 6fa15c93b1..2ad72f41ce 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -60,6 +60,8 @@ const genQRCodeStyle: GenerateStyle = (token) => { }, [`${componentCls}-borderless`]: { borderColor: 'transparent', + padding: 0, + borderRadius: 0, }, }; };