feat: use rc-qrcode instead of qrcode.react (#49454)

* feat: use rc-qrcode instead of qrcode.react

* feat: optimize code

* feat: update test case

---------

Signed-off-by: kiner-tang <1127031143@qq.com>

components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -35,6 +35,7 @@ Array [
           >
             <canvas
               height="160"
+              role="img"
               width="160"
             />
           </div>
@@ -60,6 +61,7 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -93,6 +95,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -106,6 +109,7 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -193,9 +197,11 @@ Array [
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
     <img
+      crossorigin="anonymous"
       src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
       style="display: none;"
     />
@@ -215,8 +221,14 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
+    <img
+      crossorigin="anonymous"
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      style="display: none;"
+    />
   </div>
   <button
     class="ant-btn ant-btn-primary"
@@ -239,6 +251,7 @@ Array [
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>,
@@ -319,9 +332,11 @@ exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] =
 >
   <canvas
     height="160"
+    role="img"
     width="160"
   />
   <img
+    crossorigin="anonymous"
     src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
     style="display: none;"
   />
@@ -370,6 +385,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
     </div>
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>
@@ -419,6 +435,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
     </div>
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>
@@ -437,6 +454,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
     </div>
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>
@@ -458,6 +476,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -471,6 +490,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
     >
       <svg
         height="160"
+        role="img"
         viewBox="0 0 25 25"
         width="160"
       >

components/qr-code/__tests__/__snapshots__/demo.test.ts.snap

@@ -24,6 +24,7 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -55,6 +56,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -68,6 +70,7 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -153,9 +156,11 @@ Array [
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
     <img
+      crossorigin="anonymous"
       src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
       style="display:none"
     />
@@ -173,8 +178,14 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
+    <img
+      crossorigin="anonymous"
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      style="display:none"
+    />
   </div>
   <button
     class="ant-btn ant-btn-primary"
@@ -195,6 +206,7 @@ Array [
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>,
@@ -273,9 +285,11 @@ exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
 >
   <canvas
     height="160"
+    role="img"
     width="160"
   />
   <img
+    crossorigin="anonymous"
     src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
     style="display:none"
   />
@@ -322,6 +336,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
     </div>
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>
@@ -371,6 +386,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
     </div>
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>
@@ -389,6 +405,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
     </div>
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>
@@ -408,6 +425,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
     >
       <canvas
         height="160"
+        role="img"
         width="160"
       />
     </div>
@@ -421,6 +439,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
     >
       <svg
         height="160"
+        role="img"
         viewBox="0 0 25 25"
         width="160"
       >

components/qr-code/__tests__/__snapshots__/index.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`QRCode test should correct render 1`] = `
   >
     <canvas
       height="160"
+      role="img"
       width="160"
     />
   </div>

components/qr-code/demo/download.tsx

@@ -16,7 +16,12 @@ const downloadQRCode = () => {
 
 const App: React.FC = () => (
   <div id="myqrcode">
-    <QRCode value="https://ant.design/" bgColor="#fff" style={{ marginBottom: 16 }} />
+    <QRCode
+      value="https://ant.design/"
+      bgColor="#fff"
+      style={{ marginBottom: 16 }}
+      icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+    />
     <Button type="primary" onClick={downloadQRCode}>
       Download
     </Button>

components/qr-code/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
 import classNames from 'classnames';
-import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
+import { QRCodeCanvas, QRCodeSVG } from '@rc-component/qrcode';
 
 import { devUseWarning } from '../_util/warning';
 import Button from '../button';
@@ -45,6 +45,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     height: typeof iconSize === 'number' ? iconSize : iconSize?.height ?? 40,
     width: typeof iconSize === 'number' ? iconSize : iconSize?.width ?? 40,
     excavate: true,
+    crossOrigin: 'anonymous',
   };
 
   const qrCodeProps = {

components/qr-code/interface.ts

@@ -1,30 +1,15 @@
-import type { CSSProperties } from 'react';
+import type { QRProps } from '@rc-component/qrcode';
 
-interface ImageSettings {
+type ImageSettings = QRProps['imageSettings'];
-  src: string;
-  height: number;
-  width: number;
-  excavate: boolean;
-  x?: number;
-  y?: number;
-}
 
-export interface QRProps {
+export type { QRProps, ImageSettings };
-  value: string;
-  type?: 'canvas' | 'svg';
-  size?: number;
-  color?: string;
-  style?: CSSProperties;
-  includeMargin?: boolean;
-  imageSettings?: ImageSettings;
-  bgColor?: string;
-}
 
 export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
 
 export type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
 
 export interface QRCodeProps extends QRProps, React.HTMLAttributes<HTMLDivElement> {
+  type?: 'canvas' | 'svg';
   className?: string;
   rootClassName?: string;
   prefixCls?: string;

package.json

@@ -124,12 +124,12 @@
     "@ctrl/tinycolor": "^3.6.1",
     "@rc-component/color-picker": "~1.5.3",
     "@rc-component/mutate-observer": "^1.1.0",
+    "@rc-component/qrcode": "~1.0.0",
     "@rc-component/tour": "~1.15.0",
     "@rc-component/trigger": "^2.2.0",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.11",
-    "qrcode.react": "^3.1.0",
     "rc-cascader": "~3.27.0",
     "rc-checkbox": "~3.3.0",
     "rc-collapse": "~3.7.3",