Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: qrcode canvas supports style configuration #48194

Merged
merged 13 commits into from Apr 30, 2024
Merged

feat: qrcode canvas supports style configuration #48194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fcdd865
feat: qrcode canvas supports style configuration
thinkasany Apr 11, 2024
ed9fd1c
Update components/qr-code/index.zh-CN.md
thinkasany Apr 11, 2024
5746dc3
docs: update version
thinkasany Apr 11, 2024
36a8e78
fix: typos
thinkasany Apr 11, 2024
6d648b8
fix: ant-qrcode
thinkasany Apr 15, 2024
176a254
fix: update padding for canvas / svg
thinkasany Apr 15, 2024
57c0281
fix: update
thinkasany Apr 15, 2024
9588ee8
fix: typos
thinkasany Apr 15, 2024
7cc967a
fix: when borderless padding shouble be 0
thinkasany Apr 15, 2024
53c67e9
fix: when borderless borderRadius should be 0
thinkasany Apr 15, 2024
b57eee5
Merge branch 'feature' into master
afc163 Apr 16, 2024
bff6e02
fix: rm Variant
thinkasany Apr 30, 2024
e2f8df5
Merge remote-tracking branch 'upstream/feature' into HEAD
thinkasany Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 13 additions & 13 deletions components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
24 changes: 12 additions & 12 deletions components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down
12 changes: 7 additions & 5 deletions components/qr-code/__tests__/index.test.tsx
View file
Open in desktop
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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%' }} />);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

加了新特性的话，需要新增 test case，不要动原来用例

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

expect(container.querySelector<HTMLCanvasElement>('.ant-qrcode > canvas')).toHaveStyle(
'width: 100%',
);
});
});
6 changes: 3 additions & 3 deletions components/qr-code/index.tsx
View file
Open in desktop
Expand Up @@ -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 },
afc163 marked this conversation as resolved.
Show resolved Hide resolved
imageSettings: icon ? imageSettings : undefined,
};

Expand All @@ -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(
Expand Down
2 changes: 2 additions & 0 deletions components/qr-code/style/index.ts
View file
Open in desktop
Expand Up @@ -60,6 +60,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
},
[`${componentCls}-borderless`]: {
borderColor: 'transparent',
padding: 0,
borderRadius: 0,
},
};
};
Expand Down