mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

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

* feat: optimize code

* feat: update test case

---------

Signed-off-by: kiner-tang <1127031143@qq.com>
This commit is contained in:
kiner-tang 2024-06-21 11:42:21 +08:00 committed by GitHub
parent a5d308b408
commit ff12f47d18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

7
components/qr-code/demo/download.tsx
View File

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

3
components/qr-code/index.tsx
View File

@ -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 = {

23
components/qr-code/interface.ts
View File

@ -1,30 +1,15 @@
import type { CSSProperties } from 'react';
import type { QRProps } from '@rc-component/qrcode';
interface ImageSettings {
src: string;
height: number;
width: number;
excavate: boolean;
x?: number;
y?: number;
}
type ImageSettings = QRProps['imageSettings'];
export interface QRProps {
value: string;
type?: 'canvas' | 'svg';
size?: number;
color?: string;
style?: CSSProperties;
includeMargin?: boolean;
imageSettings?: ImageSettings;
bgColor?: string;
}
export type { QRProps, ImageSettings };
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;

2
package.json
View File

@ -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",