From 0e94620a748421789fe127a2c91695faf020eda5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8F=A0=E8=90=9D=E5=90=B9=E9=9B=AA?= Date: Tue, 9 May 2023 17:24:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Added=20bgColor=20attribute=20to=20fix?= =?UTF-8?q?=20the=20problem=20that=20the=20background=20c=E2=80=A6=20(#422?= =?UTF-8?q?14)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Added bgColor attribute to fix the problem that the background color of the QR code is displayed incorrectly when downloading * chorn: update snap * fix: 新增版本号 * fix: update snap * fix: 去除多余代码 * fix: update snap --------- Co-authored-by: pineapple --- .../__snapshots__/demo-extend.test.ts.snap | 20 +++++++++---------- .../__tests__/__snapshots__/demo.test.ts.snap | 18 ++++++++--------- .../__snapshots__/index.test.tsx.snap | 2 +- components/qrcode/demo/customColor.md | 2 +- components/qrcode/demo/customColor.tsx | 10 +++------- components/qrcode/index.en-US.md | 5 +++-- components/qrcode/index.tsx | 7 ++++--- components/qrcode/index.zh-CN.md | 5 +++-- components/qrcode/interface.ts | 1 + 9 files changed, 35 insertions(+), 35 deletions(-) diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap index 7e54e605bc..169b123e7f 100644 --- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -29,7 +29,7 @@ Array [ >
,
,
{ const { token } = useToken(); return ( - + ); diff --git a/components/qrcode/index.en-US.md b/components/qrcode/index.en-US.md index 7066b17fa8..829f3f8df9 100644 --- a/components/qrcode/index.en-US.md +++ b/components/qrcode/index.en-US.md @@ -34,13 +34,14 @@ Used when the text needs to be converted into a QR Code. > This component is available since `antd@5.1.0` -| Property | Description | Type | Default | -| :-- | :-- | :-- | :-- | +| Property | Description | Type | Default | Version | +| :-- | :-- | :-- | :-- | :-- | | value | scanned text | string | - | | icon | include image url (only image link are supported) | string | - | | size | QRCode size | number | 128 | | iconSize | include image size | number | 32 | | color | QRCode Color | string | `#000` | +| bgColor | QRCode Background Color | string | `transparent` | 5.5.0 | | bordered | Whether has border style | boolean | `true` | | errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | QRCode status | `active \| expired \| loading ` | `active` | diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx index cc0e1051e9..487bb0c683 100644 --- a/components/qrcode/index.tsx +++ b/components/qrcode/index.tsx @@ -29,6 +29,7 @@ const QRCode: React.FC = (props) => { className, rootClassName, prefixCls: customizePrefixCls, + bgColor = 'transparent', } = props; const { getPrefixCls } = useContext(ConfigContext); const prefixCls = getPrefixCls('qrcode', customizePrefixCls); @@ -47,11 +48,11 @@ const QRCode: React.FC = (props) => { value, size: size - (token.paddingSM + token.lineWidth) * 2, level: errorLevel, - bgColor: 'transparent', + bgColor, fgColor: color, imageSettings: icon ? imageSettings : undefined, }; - }, [errorLevel, color, icon, iconSize, size, value]); + }, [errorLevel, color, icon, iconSize, size, value, bgColor]); const [locale] = useLocale('QRCode'); @@ -75,7 +76,7 @@ const QRCode: React.FC = (props) => { }); return wrapSSR( -
+
{status !== 'active' && (
{status === 'loading' && } diff --git a/components/qrcode/index.zh-CN.md b/components/qrcode/index.zh-CN.md index 7e01f77673..c143bf1844 100644 --- a/components/qrcode/index.zh-CN.md +++ b/components/qrcode/index.zh-CN.md @@ -35,13 +35,14 @@ group: > 自 `antd@5.1.0` 版本开始提供该组件。 -| 参数 | 说明 | 类型 | 默认值 | -| :-- | :-- | :-- | :-- | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| :-- | :-- | :-- | :-- | :-- | | value | 扫描后的文本 | string | - | | icon | 二维码中图片的地址（目前只支持图片地址） | string | - | | size | 二维码大小 | number | 160 | | iconSize | 二维码中图片的大小 | number | 40 | | color | 二维码颜色 | string | `#000` | +| bgColor | 二维码背景颜色 | string | `transparent` | 5.5.0 | | bordered | 是否有边框 | boolean | `true` | | errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | | status | 二维码状态 | `active \| expired \| loading ` | `active` | diff --git a/components/qrcode/interface.ts b/components/qrcode/interface.ts index b25a87b326..87aa1a19d8 100644 --- a/components/qrcode/interface.ts +++ b/components/qrcode/interface.ts @@ -16,6 +16,7 @@ interface QRProps { style?: CSSProperties; includeMargin?: boolean; imageSettings?: ImageSettings; + bgColor?: string; } export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes;