test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

feat: Added bgColor attribute to fix the problem that the background c… (#42214)

Browse Source 
* 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 <zhanglongchao@shizhuang-inc.com>
This commit is contained in:
菠萝吹雪 2023-05-09 17:24:28 +08:00 committed by GitHub
parent 7a3e697c11
commit 0e94620a74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -29,7 +29,7 @@ Array [
>
<div
class="ant-qrcode ant-qrcode-borderless"
style="width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -54,7 +54,7 @@ exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] =
>
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -87,7 +87,7 @@ exports[`renders components/qrcode/demo/customColor.tsx extend context correctly
>
<div
class="ant-qrcode"
style="margin-bottom: 16px; background-color: rgb(245, 245, 245); width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -101,7 +101,7 @@ exports[`renders components/qrcode/demo/customColor.tsx extend context correctly
>
<div
class="ant-qrcode"
style="margin-bottom: 16px; background-color: rgb(245, 245, 245); width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
>
<canvas
height="134"
@ -190,7 +190,7 @@ Array [
</div>,
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -211,7 +211,7 @@ exports[`renders components/qrcode/demo/download.tsx extend context correctly 1`
>
<div
class="ant-qrcode"
style="margin-bottom: 16px; width: 160px; height: 160px;"
style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -234,7 +234,7 @@ exports[`renders components/qrcode/demo/errorlevel.tsx extend context correctly
Array [
<div
class="ant-qrcode"
style="margin-bottom: 16px; width: 160px; height: 160px;"
style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -313,7 +313,7 @@ Array [
exports[`renders components/qrcode/demo/icon.tsx extend context correctly 1`] = `
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"
@ -338,7 +338,7 @@ exports[`renders components/qrcode/demo/status.tsx extend context correctly 1`]
>
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<div
class="ant-qrcode-mask"
@ -379,7 +379,7 @@ exports[`renders components/qrcode/demo/status.tsx extend context correctly 1`]
>
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<div
class="ant-qrcode-mask"

18
components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -19,7 +19,7 @@ exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
>
<div
class="ant-qrcode"
style="width:160px;height:160px"
style="width:160px;height:160px;background-color:transparent"
>
<canvas
height="134"
@ -52,7 +52,7 @@ exports[`renders components/qrcode/demo/customColor.tsx correctly 1`] = `
>
<div
class="ant-qrcode"
style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px"
style="width:160px;height:160px;background-color:transparent"
>
<canvas
height="134"
@ -66,7 +66,7 @@ exports[`renders components/qrcode/demo/customColor.tsx correctly 1`] = `
>
<div
class="ant-qrcode"
style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px"
style="width:160px;height:160px;background-color:#f5f5f5"
>
<canvas
height="134"
@ -155,7 +155,7 @@ Array [
</div>,
<div
class="ant-qrcode"
style="width:160px;height:160px"
style="width:160px;height:160px;background-color:transparent"
>
<canvas
height="134"
@ -176,7 +176,7 @@ exports[`renders components/qrcode/demo/download.tsx correctly 1`] = `
>
<div
class="ant-qrcode"
style="margin-bottom:16px;width:160px;height:160px"
style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
>
<canvas
height="134"
@ -199,7 +199,7 @@ exports[`renders components/qrcode/demo/errorlevel.tsx correctly 1`] = `
Array [
<div
class="ant-qrcode"
style="margin-bottom:16px;width:160px;height:160px"
style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
>
<canvas
height="134"
@ -278,7 +278,7 @@ Array [
exports[`renders components/qrcode/demo/icon.tsx correctly 1`] = `
<div
class="ant-qrcode"
style="width:160px;height:160px"
style="width:160px;height:160px;background-color:transparent"
>
<canvas
height="134"
@ -303,7 +303,7 @@ exports[`renders components/qrcode/demo/status.tsx correctly 1`] = `
>
<div
class="ant-qrcode"
style="width:160px;height:160px"
style="width:160px;height:160px;background-color:transparent"
>
<div
class="ant-qrcode-mask"
@ -344,7 +344,7 @@ exports[`renders components/qrcode/demo/status.tsx correctly 1`] = `
>
<div
class="ant-qrcode"
style="width:160px;height:160px"
style="width:160px;height:160px;background-color:transparent"
>
<div
class="ant-qrcode-mask"

2
components/qrcode/__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;"
style="width: 160px; height: 160px; background-color: transparent;"
>
<canvas
height="134"

2
components/qrcode/demo/customColor.md
View File

@ -1,6 +1,6 @@
## zh-CN
通过设置 `color` 自定义二维码颜色，通过设置 `style` 自定义背景颜色。
通过设置 `color` 自定义二维码颜色，通过设置 `bgColor` 自定义背景颜色。
## en-US

10
components/qrcode/demo/customColor.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { QRCode, Space, theme } from 'antd';
import React from 'react';
const { useToken } = theme;
@ -7,15 +7,11 @@ const App: React.FC = () => {
const { token } = useToken();
return (
<Space>
<QRCode
value="https://ant.design/"
color={token.colorSuccessText}
style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }}
/>
<QRCode value="https://ant.design/" color={token.colorSuccessText} />
<QRCode
value="https://ant.design/"
color={token.colorInfoText}
style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }}
bgColor={token.colorBgLayout}
/>
</Space>
);

5
components/qrcode/index.en-US.md
View File

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

7
components/qrcode/index.tsx
View File

@ -29,6 +29,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
className,
rootClassName,
prefixCls: customizePrefixCls,
bgColor = 'transparent',
} = props;
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
@ -47,11 +48,11 @@ const QRCode: React.FC<QRCodeProps> = (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<QRCodeProps> = (props) => {
});
return wrapSSR(
<div style={{ ...style, width: size, height: size }} className={cls}>
<div style={{ ...style, width: size, height: size, backgroundColor: bgColor }} className={cls}>
{status !== 'active' && (
<div className={`${prefixCls}-mask`}>
{status === 'loading' && <Spin />}

5
components/qrcode/index.zh-CN.md
View File

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

1
components/qrcode/interface.ts
View File

@ -16,6 +16,7 @@ interface QRProps {
style?: CSSProperties;
includeMargin?: boolean;
imageSettings?: ImageSettings;
bgColor?: string;
}
export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;