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

* 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>
2 years ago · 0e94620a74
9 changed files with 35 additions and 35 deletions
--- 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 [
        >
          <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"
--- a/components/qrcode/tests/snapshots/demo.test.ts.snap
+++ b/components/qrcode/tests/snapshots/demo.test.ts.snap
@ -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"
--- a/components/qrcode/tests/snapshots/index.test.tsx.snap
+++ b/components/qrcode/tests/snapshots/index.test.tsx.snap
@ -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"
--- a/components/qrcode/demo/customColor.md
+++ b/components/qrcode/demo/customColor.md
@ -1,6 +1,6 @@
 ## zh-CN

-通过设置 `color` 自定义二维码颜色，通过设置 `style` 自定义背景颜色。
+通过设置 `color` 自定义二维码颜色，通过设置 `bgColor` 自定义背景颜色。

 ## en-US

--- a/components/qrcode/demo/customColor.tsx
+++ b/components/qrcode/demo/customColor.tsx
@ -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>
  );
--- 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` |
--- a/components/qrcode/index.tsx
+++ b/components/qrcode/index.tsx
@ -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 />}
--- 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` |
--- 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<HTMLCanvasElement>;