From fcdd86512a259d38b37aba7a02dc9630c9ce531c Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Thu, 11 Apr 2024 13:18:23 +0800 Subject: [PATCH 01/11] feat: qrcode canvas supports style configuration --- components/qr-code/__tests__/index.test.tsx | 6 ++++++ components/qr-code/index.en-US.md | 1 + components/qr-code/index.tsx | 7 +++++-- components/qr-code/index.zh-CN.md | 1 + components/qr-code/interface.ts | 2 ++ 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx index 9420a6098835..06bde44855e5 100644 --- a/components/qr-code/__tests__/index.test.tsx +++ b/components/qr-code/__tests__/index.test.tsx @@ -94,4 +94,10 @@ describe('QRCode test', () => { '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.en-US.md b/components/qr-code/index.en-US.md index 51f7730dc23b..744f1f980a3c 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -48,6 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | QRCode status | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | callback | `() => void` | - | +| variant | Variants of QRCode | `borderless` | 5.16.2 | ## Design Token diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 3dafc0157ab7..c6adc45d463d 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -12,6 +12,7 @@ import Spin from '../spin'; import { useToken } from '../theme/internal'; import type { QRCodeProps, QRProps } from './interface'; import useStyle from './style/index'; +import useVariant from '../form/hooks/useVariants'; const QRCode: React.FC = (props) => { const [, token] = useToken(); @@ -31,8 +32,10 @@ const QRCode: React.FC = (props) => { rootClassName, prefixCls: customizePrefixCls, bgColor = 'transparent', + variant: customVariant, } = props; const { getPrefixCls } = useContext(ConfigContext); + const [variant, enableVariantCls] = useVariant(customVariant, bordered); const prefixCls = getPrefixCls('qrcode', customizePrefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls); @@ -52,7 +55,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, }; @@ -75,7 +78,7 @@ const QRCode: React.FC = (props) => { } const mergedCls = classNames(prefixCls, className, rootClassName, hashId, cssVarCls, { - [`${prefixCls}-borderless`]: !bordered, + [`${prefixCls}-borderless`]: !bordered || (enableVariantCls && variant === 'borderless'), }); const mergedStyle: React.CSSProperties = { diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index c9a3fc442f78..dd64710cb104 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -49,6 +49,7 @@ tag: 5.1.0 | errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | 二维码状态 | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | +| variant | 形态变体 | `borderless` | 5.16.2 | ## 主题变量（Design Token） diff --git a/components/qr-code/interface.ts b/components/qr-code/interface.ts index 48298c4052d6..acf9059c3081 100644 --- a/components/qr-code/interface.ts +++ b/components/qr-code/interface.ts @@ -1,4 +1,5 @@ import type { CSSProperties } from 'react'; +import type { Variant } from '../form/hooks/useVariants'; interface ImageSettings { src: string; @@ -34,4 +35,5 @@ export interface QRCodeProps extends QRProps { errorLevel?: 'L' | 'M' | 'Q' | 'H'; status?: 'active' | 'expired' | 'loading' | 'scanned'; onRefresh?: () => void; + variant?: Variant; } From ed9fd1c4593ef8ce036e069caa72e6395ad86403 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Thu, 11 Apr 2024 13:18:53 +0800 Subject: [PATCH 02/11] Update components/qr-code/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: thinkasany <480968828@qq.com> --- components/qr-code/index.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index dd64710cb104..fd158ffbf2fc 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -49,7 +49,7 @@ tag: 5.1.0 | errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | 二维码状态 | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -| variant | 形态变体 | `borderless` | 5.16.2 | +| variant | 形态变体 | `borderless` | 5.17.0 | ## 主题变量（Design Token） From 5746dc3e2ad88745bf11d9a9052dc3265ec7302d Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Thu, 11 Apr 2024 13:20:24 +0800 Subject: [PATCH 03/11] docs: update version --- components/qr-code/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index 744f1f980a3c..9fe885ab7b9d 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | QRCode status | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | callback | `() => void` | - | -| variant | Variants of QRCode | `borderless` | 5.16.2 | +| variant | Variants of QRCode | `borderless` | 5.17.0 | ## Design Token From 36a8e78a0484af3de74d17011d403b3b3cb6e3e0 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Thu, 11 Apr 2024 22:39:53 +0800 Subject: [PATCH 04/11] fix: typos --- components/qr-code/index.en-US.md | 2 +- components/qr-code/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index 9fe885ab7b9d..7f92d19376c8 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | QRCode status | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | callback | `() => void` | - | -| variant | Variants of QRCode | `borderless` | 5.17.0 | +| variant | Variants of QRCode | `borderless` | - | 5.17.0 | ## Design Token diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index fd158ffbf2fc..956dd84a5d74 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -49,7 +49,7 @@ tag: 5.1.0 | errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | 二维码状态 | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -| variant | 形态变体 | `borderless` | 5.17.0 | +| variant | 形态变体 | `borderless` | - | 5.17.0 | ## 主题变量（Design Token） From 6d648b894399194e88f1534acd5f87d25e3769bc Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 15 Apr 2024 15:31:16 +0800 Subject: [PATCH 05/11] fix: ant-qrcode --- components/qr-code/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index c6adc45d463d..0adf2720b64f 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -82,10 +82,10 @@ const QRCode: React.FC = (props) => { }); const mergedStyle: React.CSSProperties = { - width: size, - height: size, backgroundColor: bgColor, ...style, + width: 'fit-content', + height: 'fit-content', }; return wrapCSSVar( From 176a254a375b775b055d3beb64620fb6444710ac Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 15 Apr 2024 19:40:08 +0800 Subject: [PATCH 06/11] fix: update padding for canvas / svg --- .../__snapshots__/demo-extend.test.ts.snap | 32 +++++++++++-------- .../__tests__/__snapshots__/demo.test.ts.snap | 24 +++++++------- .../__snapshots__/index.test.tsx.snap | 2 +- components/qr-code/__tests__/index.test.tsx | 12 +++---- components/qr-code/style/index.ts | 6 ++-- 5 files changed, 39 insertions(+), 37 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 a2e8b1ee45b8..a8ff1a391ba1 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 [ >
,
`; -exports[`renders components/qr-code/demo/type.tsx extend context correctly 2`] = `[]`; +exports[`renders components/qr-code/demo/type.tsx extend context correctly 2`] = ` +[ + [Error: Could not parse CSS stylesheet], +] +`; diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap index 31d0bc909ee9..e57c2b8934e1 100644 --- 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`] = ` >
,
{ 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,14 +90,8 @@ 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(); + const { container } = render(); expect(container.querySelector('.ant-qrcode > canvas')).toHaveStyle( 'width: 100%', ); diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index 6fa15c93b16c..3a95186b7e89 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -20,7 +20,6 @@ const genQRCodeStyle: GenerateStyle = (token) => { display: 'flex', justifyContent: 'center', alignItems: 'center', - padding: token.paddingSM, backgroundColor: token.colorWhite, borderRadius: token.borderRadiusLG, border: `${unit(lineWidth)} ${lineType} ${colorSplit}`, @@ -51,8 +50,11 @@ const genQRCodeStyle: GenerateStyle = (token) => { alignSelf: 'stretch', flex: 'auto', minWidth: 0, + padding: token.paddingSM, + }, + '> svg': { + padding: token.paddingSM, }, - '&-icon': { marginBlockEnd: token.marginXS, fontSize: token.controlHeight, From 57c0281949ba433ac8cfcefae11ef7a00cca4fad Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 15 Apr 2024 20:05:28 +0800 Subject: [PATCH 07/11] fix: update --- .../__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 | 2 +- components/qr-code/index.tsx | 4 +-- components/qr-code/style/index.ts | 6 ++--- 6 files changed, 31 insertions(+), 33 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 a8ff1a391ba1..ef23ad44793b 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(); - const canvas = container.querySelector('.ant-qrcode > canvas'); + const canvas = container.querySelector('.ant-qrcode > canvas')!; expect(canvas.width).toBe(100); expect(canvas.height).toBe(100); }); diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 0adf2720b64f..ec17c4ceb98a 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -84,8 +84,8 @@ const QRCode: React.FC = (props) => { const mergedStyle: React.CSSProperties = { backgroundColor: bgColor, ...style, - width: 'fit-content', - height: 'fit-content', + width: style?.width ?? size, + height: style?.width ?? size, }; return wrapCSSVar( diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index 3a95186b7e89..6fa15c93b16c 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -20,6 +20,7 @@ const genQRCodeStyle: GenerateStyle = (token) => { display: 'flex', justifyContent: 'center', alignItems: 'center', + padding: token.paddingSM, backgroundColor: token.colorWhite, borderRadius: token.borderRadiusLG, border: `${unit(lineWidth)} ${lineType} ${colorSplit}`, @@ -50,11 +51,8 @@ const genQRCodeStyle: GenerateStyle = (token) => { alignSelf: 'stretch', flex: 'auto', minWidth: 0, - padding: token.paddingSM, - }, - '> svg': { - padding: token.paddingSM, }, + '&-icon': { marginBlockEnd: token.marginXS, fontSize: token.controlHeight, From 9588ee88b47412942324b7a96ccfcc4e43c350ad Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 15 Apr 2024 20:57:46 +0800 Subject: [PATCH 08/11] fix: typos --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 6 +----- components/qr-code/index.tsx | 2 +- 2 files changed, 2 insertions(+), 6 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 ef23ad44793b..dc503151f326 100644 --- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -486,8 +486,4 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
`; -exports[`renders components/qr-code/demo/type.tsx extend context correctly 2`] = ` -[ - [Error: Could not parse CSS stylesheet], -] -`; +exports[`renders components/qr-code/demo/type.tsx extend context correctly 2`] = `[]`; diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index ec17c4ceb98a..5a6393dbba70 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -85,7 +85,7 @@ const QRCode: React.FC = (props) => { backgroundColor: bgColor, ...style, width: style?.width ?? size, - height: style?.width ?? size, + height: style?.height ?? size, }; return wrapCSSVar( From 7cc967aa5d42976237c1f81a6a54f27ea70f36e4 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 15 Apr 2024 22:02:03 +0800 Subject: [PATCH 09/11] fix: when borderless padding shouble be 0 --- components/qr-code/style/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index 6fa15c93b16c..2eeafcb12ec1 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -60,6 +60,7 @@ const genQRCodeStyle: GenerateStyle = (token) => { }, [`${componentCls}-borderless`]: { borderColor: 'transparent', + padding: 0, }, }; }; From 53c67e982896d026c835be83abb24c015eebbf22 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 15 Apr 2024 22:35:46 +0800 Subject: [PATCH 10/11] fix: when borderless borderRadius should be 0 --- components/qr-code/style/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index 2eeafcb12ec1..2ad72f41ce77 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -61,6 +61,7 @@ const genQRCodeStyle: GenerateStyle = (token) => { [`${componentCls}-borderless`]: { borderColor: 'transparent', padding: 0, + borderRadius: 0, }, }; }; From bff6e020bc812096456cb4c0062c1b9470abf5c1 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 30 Apr 2024 15:01:06 +0800 Subject: [PATCH 11/11] fix: rm Variant --- components/qr-code/index.en-US.md | 1 - components/qr-code/index.tsx | 5 +---- components/qr-code/index.zh-CN.md | 1 - components/qr-code/interface.ts | 2 -- 4 files changed, 1 insertion(+), 8 deletions(-) diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index 7f92d19376c8..51f7730dc23b 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -48,7 +48,6 @@ Common props ref：[Common props](/docs/react/common-props) | errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | QRCode status | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | callback | `() => void` | - | -| variant | Variants of QRCode | `borderless` | - | 5.17.0 | ## Design Token diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 5a6393dbba70..ad48315887bc 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -12,7 +12,6 @@ import Spin from '../spin'; import { useToken } from '../theme/internal'; import type { QRCodeProps, QRProps } from './interface'; import useStyle from './style/index'; -import useVariant from '../form/hooks/useVariants'; const QRCode: React.FC = (props) => { const [, token] = useToken(); @@ -32,10 +31,8 @@ const QRCode: React.FC = (props) => { rootClassName, prefixCls: customizePrefixCls, bgColor = 'transparent', - variant: customVariant, } = props; const { getPrefixCls } = useContext(ConfigContext); - const [variant, enableVariantCls] = useVariant(customVariant, bordered); const prefixCls = getPrefixCls('qrcode', customizePrefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls); @@ -78,7 +75,7 @@ const QRCode: React.FC = (props) => { } const mergedCls = classNames(prefixCls, className, rootClassName, hashId, cssVarCls, { - [`${prefixCls}-borderless`]: !bordered || (enableVariantCls && variant === 'borderless'), + [`${prefixCls}-borderless`]: !bordered, }); const mergedStyle: React.CSSProperties = { diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index 956dd84a5d74..c9a3fc442f78 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -49,7 +49,6 @@ tag: 5.1.0 | errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | 二维码状态 | `active \| expired \| loading \| scanned` | `active` | scanned: 5.13.0 | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -| variant | 形态变体 | `borderless` | - | 5.17.0 | ## 主题变量（Design Token） diff --git a/components/qr-code/interface.ts b/components/qr-code/interface.ts index acf9059c3081..48298c4052d6 100644 --- a/components/qr-code/interface.ts +++ b/components/qr-code/interface.ts @@ -1,5 +1,4 @@ import type { CSSProperties } from 'react'; -import type { Variant } from '../form/hooks/useVariants'; interface ImageSettings { src: string; @@ -35,5 +34,4 @@ export interface QRCodeProps extends QRProps { errorLevel?: 'L' | 'M' | 'Q' | 'H'; status?: 'active' | 'expired' | 'loading' | 'scanned'; onRefresh?: () => void; - variant?: Variant; }