test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 Packages Projects Releases Wiki Activity

feat: qrcode canvas supports style configuration (#48194)

Browse Source 
* 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>
This commit is contained in:
thinkasany 2024-04-30 17:03:00 +08:00 committed by GitHub
parent 6f6868f7d5
commit 3fa9d45dd5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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"

24
components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -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"

2
components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -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"

12
components/qr-code/__tests__/index.test.tsx
View File

@ -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%',
);
});
});

6
components/qr-code/index.tsx
View File

@ -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(

2
components/qr-code/style/index.ts
View File

@ -60,6 +60,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
},
[`${componentCls}-borderless`]: {
borderColor: 'transparent',
padding: 0,
borderRadius: 0,
},
};
};