feat(qrcode): support click & iconSize configuration (#49240)

* feat(qrcode): support click & iconSize configuration

* fix

fix

use rest

union  React.HTMLAttributes<HTMLElement

fix ImageSettings interface

type fix

add default 40

clear unused

* empty commit

---------

Co-authored-by: afc163 <afc163@gmail.com>

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

@@ -46,6 +46,13 @@ describe('QRCode test', () => {
     expect(refresh).toHaveBeenCalled();
   });
 
+  it('support click', () => {
+    const handleClick = jest.fn();
+    const { container } = render(<QRCode value="test" onClick={handleClick} />);
+    fireEvent.click(container?.querySelector<HTMLDivElement>('.ant-qrcode')!);
+    expect(handleClick).toHaveBeenCalled();
+  });
+
   it('support loading', () => {
     const Demo: React.FC = () => {
       const [status, setStatus] = useState<QRCodeProps['status']>('active');

components/qr-code/index.en-US.md

@@ -41,7 +41,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | type | render type | `canvas \| svg ` | `canvas` | 5.6.0 |
 | icon | include image url (only image link are supported) | string | - |
 | size | QRCode size | number | 160 |
-| iconSize | include image size | number | 40 |
+| iconSize | include image size | number \| { width: number; height: number } | 40 | 5.19.0 |
 | color | QRCode Color | string | `#000` |
 | bgColor | QRCode Background Color | string | `transparent` | 5.5.0 |
 | bordered | Whether has border style | boolean | `true` |

components/qr-code/index.tsx

@@ -20,7 +20,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     type = 'canvas',
     icon = '',
     size = 160,
-    iconSize = 40,
+    iconSize,
     color = token.colorText,
     errorLevel = 'M',
     status = 'active',
@@ -31,6 +31,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     rootClassName,
     prefixCls: customizePrefixCls,
     bgColor = 'transparent',
+    ...rest
   } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
@@ -41,8 +42,8 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     src: icon,
     x: undefined,
     y: undefined,
-    height: iconSize,
-    width: iconSize,
+    height: typeof iconSize === 'number' ? iconSize : iconSize?.height ?? 40,
+    width: typeof iconSize === 'number' ? iconSize : iconSize?.width ?? 40,
     excavate: true,
   };
 
@@ -86,7 +87,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
   };
 
   return wrapCSSVar(
-    <div className={mergedCls} style={mergedStyle}>
+    <div {...rest} className={mergedCls} style={mergedStyle}>
       {status !== 'active' && (
         <div className={`${prefixCls}-mask`}>
           {status === 'loading' && <Spin />}

components/qr-code/index.zh-CN.md

@@ -42,7 +42,7 @@ tag: 5.1.0
 | type | 渲染类型 | `canvas \| svg ` | `canvas` | 5.6.0 |
 | icon | 二维码中图片的地址（目前只支持图片地址） | string | - |
 | size | 二维码大小 | number | 160 |
-| iconSize | 二维码中图片的大小 | number | 40 |
+| iconSize | 二维码中图片的大小 | number \| { width: number; height: number } | 40 | 5.19.0 |
 | color | 二维码颜色 | string | `#000` |
 | bgColor | 二维码背景颜色 | string | `transparent` | 5.5.0 |
 | bordered | 是否有边框 | boolean | `true` |

components/qr-code/interface.ts

@@ -24,12 +24,12 @@ export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasEleme
 
 export type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
 
-export interface QRCodeProps extends QRProps {
+export interface QRCodeProps extends QRProps, React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   rootClassName?: string;
   prefixCls?: string;
   icon?: string;
-  iconSize?: number;
+  iconSize?: number | { width: number; height: number };
   bordered?: boolean;
   errorLevel?: 'L' | 'M' | 'Q' | 'H';
   status?: 'active' | 'expired' | 'loading' | 'scanned';