From 16e05aca70f690a129e6261d4225d14fe2ac0e4a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 22 Nov 2022 16:56:27 +0800 Subject: [PATCH 01/70] feat: qrcode --- .../__test__/__snapshots__/demo.test.ts.snap | 44 +++++ components/qr-code/__test__/demo.test.ts | 3 + components/qr-code/constants.ts | 3 + components/qr-code/demos/download.tsx | 28 +++ components/qr-code/demos/errorlevel.tsx | 28 +++ components/qr-code/demos/logo.tsx | 14 ++ components/qr-code/demos/outdated.tsx | 11 ++ components/qr-code/demos/popover.tsx | 16 ++ components/qr-code/demos/refresh.tsx | 53 ++++++ components/qr-code/demos/rendermode.tsx | 17 ++ components/qr-code/demos/service.ts | 42 +++++ components/qr-code/demos/withoutlogo.tsx | 9 + components/qr-code/index.md | 123 ++++++++++++ components/qr-code/index.tsx | 178 ++++++++++++++++++ components/qr-code/style/index.ts | 48 +++++ package.json | 1 + 16 files changed, 618 insertions(+) create mode 100644 components/qr-code/__test__/__snapshots__/demo.test.ts.snap create mode 100644 components/qr-code/__test__/demo.test.ts create mode 100644 components/qr-code/constants.ts create mode 100644 components/qr-code/demos/download.tsx create mode 100644 components/qr-code/demos/errorlevel.tsx create mode 100644 components/qr-code/demos/logo.tsx create mode 100644 components/qr-code/demos/outdated.tsx create mode 100644 components/qr-code/demos/popover.tsx create mode 100644 components/qr-code/demos/refresh.tsx create mode 100644 components/qr-code/demos/rendermode.tsx create mode 100644 components/qr-code/demos/service.ts create mode 100644 components/qr-code/demos/withoutlogo.tsx create mode 100644 components/qr-code/index.md create mode 100644 components/qr-code/index.tsx create mode 100644 components/qr-code/style/index.ts diff --git a/components/qr-code/__test__/__snapshots__/demo.test.ts.snap b/components/qr-code/__test__/__snapshots__/demo.test.ts.snap new file mode 100644 index 000000000000..867d17bb94c8 --- /dev/null +++ b/components/qr-code/__test__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders download.tsx correctly 1`] = ` + +
+
+ +
+ +
+ +`; + +exports[` renders errorlevel.tsx correctly 1`] = ``; + +exports[` renders logo.tsx correctly 1`] = ``; + +exports[` renders outdated.tsx correctly 1`] = ``; + +exports[` renders popover.tsx correctly 1`] = ``; + +exports[` renders refresh.tsx correctly 1`] = ``; + +exports[` renders rendermode.tsx correctly 1`] = ``; + +exports[` renders withoutlogo.tsx correctly 1`] = ``; diff --git a/components/qr-code/__test__/demo.test.ts b/components/qr-code/__test__/demo.test.ts new file mode 100644 index 000000000000..54c644e47038 --- /dev/null +++ b/components/qr-code/__test__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/demo'; + +demoTest('QrCode'); diff --git a/components/qr-code/constants.ts b/components/qr-code/constants.ts new file mode 100644 index 000000000000..b4acf792bb49 --- /dev/null +++ b/components/qr-code/constants.ts @@ -0,0 +1,3 @@ +const QRCODE = '二维码'; +const CLICK_REFRESH = '点击刷新'; +export { QRCODE, CLICK_REFRESH }; diff --git a/components/qr-code/demos/download.tsx b/components/qr-code/demos/download.tsx new file mode 100644 index 000000000000..9fc0f6bb895d --- /dev/null +++ b/components/qr-code/demos/download.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { QrCode } from '@alipay/tech-ui'; +import { Button } from 'antd'; + +export default () => { + const downloadQrCode = () => { + const canvas = document.getElementById('myqrcode').getElementsByTagName('canvas')[0]; + const url = canvas.toDataURL(); // 转为 base + const a = document.createElement('a'); + a.download = '二维码.png'; + a.href = url; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + }; + + return ( +
+ + +
+ ); +}; diff --git a/components/qr-code/demos/errorlevel.tsx b/components/qr-code/demos/errorlevel.tsx new file mode 100644 index 000000000000..4cffcab88bf2 --- /dev/null +++ b/components/qr-code/demos/errorlevel.tsx @@ -0,0 +1,28 @@ +/** + * uuid: f54dc6af + * title: errorLevel例子 + */ + +import React, { useState } from 'react'; +import { QrCode } from '@alipay/tech-ui'; +import { Radio } from 'antd'; + +export default () => { + const [level, setLevel] = useState('L'); + + return ( +
+ setLevel(e.target.value)}> + L + M + Q + H + + +
+ ); +}; diff --git a/components/qr-code/demos/logo.tsx b/components/qr-code/demos/logo.tsx new file mode 100644 index 000000000000..7ab3657dead6 --- /dev/null +++ b/components/qr-code/demos/logo.tsx @@ -0,0 +1,14 @@ +/** + * uuid: f54dc6af + * title: 带 logo 例子 + */ + +import React from 'react'; +import { QrCode } from '@alipay/tech-ui'; + +export default () => ( + +); diff --git a/components/qr-code/demos/outdated.tsx b/components/qr-code/demos/outdated.tsx new file mode 100644 index 000000000000..f9147100c36f --- /dev/null +++ b/components/qr-code/demos/outdated.tsx @@ -0,0 +1,11 @@ +/** + * uuid: b10012f5 + * title: 过期状态 + */ + +import React from 'react'; +import { QrCode } from '@alipay/tech-ui'; + +export default () => ( + console.log('已刷新')} /> +); diff --git a/components/qr-code/demos/popover.tsx b/components/qr-code/demos/popover.tsx new file mode 100644 index 000000000000..4388f54ee0bb --- /dev/null +++ b/components/qr-code/demos/popover.tsx @@ -0,0 +1,16 @@ +/** + * uuid: b83bf277 + * title: popover 带 logo 例子 + */ + +import React from 'react'; +import { QrCode } from '@alipay/tech-ui'; + +export default () => ( + +); diff --git a/components/qr-code/demos/refresh.tsx b/components/qr-code/demos/refresh.tsx new file mode 100644 index 000000000000..af6d12bfebc4 --- /dev/null +++ b/components/qr-code/demos/refresh.tsx @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from 'react'; +import { QrCode } from '@alipay/tech-ui'; +import { Spin } from 'antd'; +import service from './service'; +import type { CertifyLPDTO } from './service'; + +export default () => { + const [loading, setLoading] = useState(false); + const [expired, setExpired] = useState(false); + const [certifyData, setCertifyData] = useState({}); + const { qrUrl, imgUrl, expires } = certifyData; + + // 重新加载二维码，实际使用中替换为实际请求 + const reloadQrCode = async () => { + setLoading(true); + const result = await service.reloadQrCode(); + if (result.success) { + setExpired(false); + setCertifyData(result.data); + } + setLoading(false); + }; + + // 轮询当前认证状态，更新过期状态 + useEffect(() => { + reloadQrCode(); + }, []); + + useEffect(() => { + const loopStatus = setInterval(() => { + // 这里可以查询认证状态并做后续动作。 + setExpired(Date.now() > expires); + }, 1000); + + return () => { + clearInterval(loopStatus); + }; + }, [expires]); + + return loading ? ( + + ) : ( + { + reloadQrCode(); + }} + /> + ); +}; diff --git a/components/qr-code/demos/rendermode.tsx b/components/qr-code/demos/rendermode.tsx new file mode 100644 index 000000000000..369f2c9764dd --- /dev/null +++ b/components/qr-code/demos/rendermode.tsx @@ -0,0 +1,17 @@ +/** + * uuid: f54dc6af + * title: 渲染为canvas + */ + +import React from 'react'; +import { QrCode } from '@alipay/tech-ui'; + +export default () => ( + <> + + +); diff --git a/components/qr-code/demos/service.ts b/components/qr-code/demos/service.ts new file mode 100644 index 000000000000..443c66cdde57 --- /dev/null +++ b/components/qr-code/demos/service.ts @@ -0,0 +1,42 @@ +export interface CertifyLPDTO { + /** 认证id */ + certifyId?: string; + /** 二维码url */ + qrUrl?: string; + /** 二维码中的Logo的图片地址 */ + imgUrl?: string; + /** 过期时间戳，单位毫秒 */ + expires?: number; +} + +function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + +/** + * 刷新二维码 + */ +export const reloadQrCode = async () => { + await sleep(Math.random() * 2000); + + return { + success: true, + errorCode: null, + errorMessage: null, + data: { + /** 认证id */ + certifyId: '#certifyId', + /** 二维码url */ + qrUrl: 'https://www.alipay.com', + /** 二维码中的Logo的图片地址 */ + imgUrl: + 'https://gw-office.alipayobjects.com/basement_prod/c83c53ab-515e-43e2-85d0-4d0da16f11ef.svg', + /** 过期时间戳，单位毫秒 */ + expires: Date.now() + 6000, // 假设 6 秒过期 + }, + }; +}; + +export default { + reloadQrCode, +}; diff --git a/components/qr-code/demos/withoutlogo.tsx b/components/qr-code/demos/withoutlogo.tsx new file mode 100644 index 000000000000..d5a6c655d670 --- /dev/null +++ b/components/qr-code/demos/withoutlogo.tsx @@ -0,0 +1,9 @@ +/** + * uuid: 0a9254ef + * title: 不带 logo 例子 + */ + +import React from 'react'; +import { QrCode } from '@alipay/tech-ui'; + +export default () => ; diff --git a/components/qr-code/index.md b/components/qr-code/index.md new file mode 100644 index 000000000000..25d5ea0522bc --- /dev/null +++ b/components/qr-code/index.md @@ -0,0 +1,123 @@ +--- +uuid: ba1833a0 +title: QrCode 二维码 +legacy: /QrCode +nav: + title: 组件 + path: /components +--- + +# QrCode 二维码 + + +若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。 + + +能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 + +## 何时使用 + +当需要将链接转换成为二维码时使用。 + +## 代码演示 + +### 不带 logo 例子 + + + +### 渲染为 svg + + + +### 过期状态 + + + +### 带 logo 例子 + + + +### popover 带 logo 例子 + + + +### 轮询 & 过期刷新 + +轮询二维码过期状态，并进行刷新的实际业务例子。 + + + +### 下载二维码 + +很多场景下会有下载二维码的需求，这里提供一种实现。 + + + +### 二维码纠错比例 + +手动调整二维码的纠错比例。 + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +| :--------- | :--------------------------------------- | :-------------------------- | :--------- | +| mode | 最终渲染出来的结构 | `'svg' \| 'canvas'` | `'canvas'` | +| value | 扫描后的地址 | string | - | +| logo | 二维码中图片的地址（目前只支持图片地址） | string | - | +| size | 二维码图片大小 | number | 128 | +| logoSize | 二维码中 logo 大小 | number | 32 | +| bgColor | 二维码背景颜色 | string | '#FFFFFF' | +| fgColor | 二维码前景的颜色 | string | '#000000' | +| popover | 是否展现气泡卡片 | boolean | false | +| expired | 是否过期 | boolean | false | +| onRefresh | 点击点击刷新的回调 | () => void | noop | +| errorLevel | 纠错码的登记 | `'L' \| 'M' \| 'Q' \| 'H' ` | `'L'` | + +## Contributors(2) + +Ordered by date of first contribution + + + + + +--- diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx new file mode 100644 index 000000000000..01a524b14d61 --- /dev/null +++ b/components/qr-code/index.tsx @@ -0,0 +1,178 @@ +import type { CSSProperties, FC } from 'react'; +import { useEffect, useState } from 'react'; +import React from 'react'; +import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react'; +import { ReloadOutlined } from '@ant-design/icons'; +import { Popover } from 'antd'; +import { noop } from 'lodash'; +import classNames from 'classnames'; + +import { QRCODE, CLICK_REFRESH } from './constants'; +import useStyle from './style/index'; +import getPrefixCls from '../_util/getPrefixCls'; + +/** + * 统计数据组件的基础 props 类型定义 + */ +export interface QrCodeBaseProps { + /** + * @description 附加样式 + * @ignore + */ + style?: CSSProperties; + /** + * @description 类名 + * @ignore + */ + className?: string; + /** + * @description 自定义 CSS classname 前缀 + * @ignore + */ + prefixCls?: string; +} + +/** + * 统计数据组件列表的 props 类型定义 + */ +export interface QrCodeProps extends QrCodeBaseProps { + /** + * @title 渲染模式 + * @description 二维码渲染模式 + * @default "svg" + */ + mode?: 'canvas' | 'svg' | string; + /** + * @title 二维码地址 + * @description 扫描后的地址 + */ + value: string; + /** + * @title 二维码图片大小 + * @description 二维码图片大小 + * @default "128" + */ + size?: number; + /** + * @title 背景颜色 + * @description 二维码背景颜色 + * @default "#FFFFFF" + */ + bgColor?: string; + /** + * @title 前景颜色 + * @description 二维码前景颜色 + * @default "#000000" + */ + fgColor?: string; + /** + * @title Logo 图片地址 + * @description 二维码中图片的地址（目前只支持图片地址） + */ + logo?: string; + /** + * @title Logo 图片大小 + * @description 二维码中 logo 大小 + * @default "32" + */ + logoSize?: number; + /** + * @title 展现气泡卡片 + * @description 是否展现气泡卡片 + * @default false + */ + popover?: boolean; + /** + * @title 点击刷新的回调 + * @description 点击刷新的回调 + */ + onRefresh?: React.MouseEventHandler; + /** + * @title 是否过期 + * @description 是否过期 + * @default false + */ + expired?: boolean; + /** + * @title 纠错级别 + * @description 纠错级别 + * @default "L" + */ + errorLevel?: 'L' | 'M' | 'Q' | 'H' | string; +} + +const QRCode: FC = ({ + mode = 'canvas', + value = '', + logo = '', + size = 128, + bgColor = '#FFFFFF', + fgColor = '#000000', + logoSize = 32, + popover = false, + errorLevel = 'L', + onRefresh = noop, + style, + className, + prefixCls: p, + expired = false, +}) => { + const prefixCls = getPrefixCls('qrcode', p); + const { hashId, wrapSSR } = useStyle(prefixCls); + + const [qrCodeProps, setQrCodeProps] = useState({}); + useEffect(() => { + const imageSettingsProps = { + src: logo, + x: undefined, + y: undefined, + height: logoSize ? logoSize : 24, + width: logoSize ? logoSize : 24, + excavate: true, + }; + setQrCodeProps({ + value: value, + imageSettings: logo ? { ...imageSettingsProps } : null, + size: size, + level: errorLevel, + bgColor: bgColor, + fgColor: fgColor, + ke: value, + }); + }, [bgColor, errorLevel, fgColor, logo, logoSize, size, value]); + + if (!value) return null; + + const qrcode = + mode === 'svg' ? : ; + + if (popover) { + return ( + + qrcode + + ); + } + return wrapSSR( +
+ {expired && ( +
+ + + +
{QRCODE}
+
{CLICK_REFRESH}
+
+ )} + {qrcode} +
, + ); +}; +export default QRCode; diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts new file mode 100644 index 000000000000..117c68b5c54b --- /dev/null +++ b/components/qr-code/style/index.ts @@ -0,0 +1,48 @@ +import type { TechUIToken } from '../../style/useStyle'; +import { resetComponent } from '../../style/useStyle'; +import { useTechUIStyle } from '../../style/useStyle'; + +import type { GenerateStyle } from 'antd/es/theme'; + +const genTecUIStyle: GenerateStyle = (token) => { + const { componentCls } = token; + return { + [componentCls]: { + ...resetComponent?.(token), + position: 'relative', + width: '100%', + height: '100%', + + '&-mask': { + position: 'absolute', + insetBlockStart: 0, + insetInlineStart: 0, + zIndex: '4', + display: 'block', + width: '100%', + height: '100%', + color: '#000', + lineHeight: '1.5', + textAlign: 'center', + backgroundColor: 'white', + opacity: '0.94', + }, + + '&-icon': { + marginBlockEnd: 8, + fontSize: '32px', + }, + }, + }; +}; + +export default function useStyle(prefixCls: string) { + return useTechUIStyle('QrCode', (token) => { + const techUiToken: TechUIToken = { + ...token, + componentCls: `.${prefixCls}`, + }; + + return [genTecUIStyle(techUiToken)]; + }); +} diff --git a/package.json b/package.json index 76f5d5fa03b6..ceb18266447a 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "copy-to-clipboard": "^3.2.0", "dayjs": "^1.11.1", "lodash": "^4.17.21", + "qrcode.react": "^3.1.0", "rc-cascader": "~3.7.0", "rc-checkbox": "~2.3.0", "rc-collapse": "~3.4.2", From c3b8b447fa6fcedd83f92a49feced3c448901394 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 22 Nov 2022 18:04:26 +0800 Subject: [PATCH 02/70] chore: code clean --- components/qr-code/index.md | 47 ------------------------------------- 1 file changed, 47 deletions(-) diff --git a/components/qr-code/index.md b/components/qr-code/index.md index 25d5ea0522bc..e06fbfa7e543 100644 --- a/components/qr-code/index.md +++ b/components/qr-code/index.md @@ -74,50 +74,3 @@ nav: | expired | 是否过期 | boolean | false | | onRefresh | 点击点击刷新的回调 | () => void | noop | | errorLevel | 纠错码的登记 | `'L' \| 'M' \| 'Q' \| 'H' ` | `'L'` | - -## Contributors(2) - -Ordered by date of first contribution - - - - - ---- From a974d94f8af71dd9e5e44925fc93a59e69309ad3 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 23 Nov 2022 22:18:58 +0800 Subject: [PATCH 03/70] feat: New Component Qr-Code (#38891) * feat: QrCode * fix * fix * fix: fix bug * fix: fix bug * fix * fix * fix * delete * delete * test case * fix lint * bundlesize * demo * fix: fix test --- .../__snapshots__/index.test.ts.snap | 1 + components/index.tsx | 2 + .../__snapshots__/demo-extend.test.ts.snap | 153 +++++++++++++ .../__test__/__snapshots__/demo.test.ts.snap | 177 ++++++++++++--- .../__snapshots__/index.test.tsx.snap | 16 ++ .../qr-code/__test__/demo-extend.test.ts | 3 + components/qr-code/__test__/demo.test.ts | 4 +- components/qr-code/__test__/image.test.ts | 5 + components/qr-code/__test__/index.test.tsx | 29 +++ components/qr-code/constants.ts | 3 - components/qr-code/demo/base.md | 7 + components/qr-code/demo/base.tsx | 6 + components/qr-code/demo/download.md | 7 + components/qr-code/demo/download.tsx | 26 +++ components/qr-code/demo/errorleve.md | 7 + .../qr-code/{demos => demo}/errorlevel.tsx | 23 +- components/qr-code/demo/logo.md | 7 + components/qr-code/demo/logo.tsx | 11 + components/qr-code/demos/download.tsx | 28 --- components/qr-code/demos/logo.tsx | 14 -- components/qr-code/demos/outdated.tsx | 11 - components/qr-code/demos/popover.tsx | 16 -- components/qr-code/demos/refresh.tsx | 53 ----- components/qr-code/demos/rendermode.tsx | 17 -- components/qr-code/demos/service.ts | 42 ---- components/qr-code/demos/withoutlogo.tsx | 9 - components/qr-code/index.en-US.md | 40 ++++ components/qr-code/index.md | 76 ------- components/qr-code/index.tsx | 203 ++++-------------- components/qr-code/index.zh-CN.md | 41 ++++ components/qr-code/interface.ts | 31 +++ components/qr-code/style/index.ts | 37 +--- components/theme/interface.ts | 1 + package.json | 3 +- 34 files changed, 595 insertions(+), 514 deletions(-) create mode 100644 components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap create mode 100644 components/qr-code/__test__/__snapshots__/index.test.tsx.snap create mode 100644 components/qr-code/__test__/demo-extend.test.ts create mode 100644 components/qr-code/__test__/image.test.ts create mode 100644 components/qr-code/__test__/index.test.tsx delete mode 100644 components/qr-code/constants.ts create mode 100644 components/qr-code/demo/base.md create mode 100644 components/qr-code/demo/base.tsx create mode 100644 components/qr-code/demo/download.md create mode 100644 components/qr-code/demo/download.tsx create mode 100644 components/qr-code/demo/errorleve.md rename components/qr-code/{demos => demo}/errorlevel.tsx (50%) create mode 100644 components/qr-code/demo/logo.md create mode 100644 components/qr-code/demo/logo.tsx delete mode 100644 components/qr-code/demos/download.tsx delete mode 100644 components/qr-code/demos/logo.tsx delete mode 100644 components/qr-code/demos/outdated.tsx delete mode 100644 components/qr-code/demos/popover.tsx delete mode 100644 components/qr-code/demos/refresh.tsx delete mode 100644 components/qr-code/demos/rendermode.tsx delete mode 100644 components/qr-code/demos/service.ts delete mode 100644 components/qr-code/demos/withoutlogo.tsx create mode 100644 components/qr-code/index.en-US.md delete mode 100644 components/qr-code/index.md create mode 100644 components/qr-code/index.zh-CN.md create mode 100644 components/qr-code/interface.ts diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap index 740ef46f1fa8..c37c6c8c7a96 100644 --- a/components/__tests__/__snapshots__/index.test.ts.snap +++ b/components/__tests__/__snapshots__/index.test.ts.snap @@ -40,6 +40,7 @@ exports[`antd exports modules correctly 1`] = ` "Popconfirm", "Popover", "Progress", + "QrCode", "Radio", "Rate", "Result", diff --git a/components/index.tsx b/components/index.tsx index 9043a3add8a9..e07e70a14926 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -149,4 +149,6 @@ export { default as Typography } from './typography'; export type { TypographyProps } from './typography'; export { default as Upload } from './upload'; export type { UploadFile, UploadProps } from './upload'; +export { default as QrCode } from './qr-code'; +export type { QrCodeProps, QRPropsCanvas } from './qr-code/interface'; export { default as version } from './version'; diff --git a/components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000000..35200a862277 --- /dev/null +++ b/components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,153 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/qr-code/demo/base.tsx extend context correctly 1`] = ` +
+ +
+`; + +exports[`renders ./components/qr-code/demo/download.tsx extend context correctly 1`] = ` +
+
+ +
+ +
+`; + +exports[`renders ./components/qr-code/demo/errorlevel.tsx extend context correctly 1`] = ` +Array [ +
+ + + + +
, +
+ +
, +] +`; + +exports[`renders ./components/qr-code/demo/logo.tsx extend context correctly 1`] = ` +
+ + +
+`; diff --git a/components/qr-code/__test__/__snapshots__/demo.test.ts.snap b/components/qr-code/__test__/__snapshots__/demo.test.ts.snap index 867d17bb94c8..2912270a47f6 100644 --- a/components/qr-code/__test__/__snapshots__/demo.test.ts.snap +++ b/components/qr-code/__test__/__snapshots__/demo.test.ts.snap @@ -1,44 +1,153 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` renders download.tsx correctly 1`] = ` - +exports[`renders ./components/qr-code/demo/base.tsx correctly 1`] = ` +
+ +
+`; + +exports[`renders ./components/qr-code/demo/download.tsx correctly 1`] = ` +
+
+ +
+ +
+`; + +exports[`renders ./components/qr-code/demo/errorlevel.tsx correctly 1`] = ` +Array [
-
- -
- -
- + + + + , +
+ +
, +] `; -exports[` renders errorlevel.tsx correctly 1`] = ``; - -exports[` renders logo.tsx correctly 1`] = ``; - -exports[` renders outdated.tsx correctly 1`] = ``; - -exports[` renders popover.tsx correctly 1`] = ``; - -exports[` renders refresh.tsx correctly 1`] = ``; - -exports[` renders rendermode.tsx correctly 1`] = ``; - -exports[` renders withoutlogo.tsx correctly 1`] = ``; +exports[`renders ./components/qr-code/demo/logo.tsx correctly 1`] = ` +
+ + +
+`; diff --git a/components/qr-code/__test__/__snapshots__/index.test.tsx.snap b/components/qr-code/__test__/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000000..5a5204560617 --- /dev/null +++ b/components/qr-code/__test__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`QrCode test rtl render component should be rendered correctly in RTL direction 1`] = `null`; + +exports[`QrCode test should correct render 1`] = ` +
+ +
+`; diff --git a/components/qr-code/__test__/demo-extend.test.ts b/components/qr-code/__test__/demo-extend.test.ts new file mode 100644 index 000000000000..4f084aa2f95e --- /dev/null +++ b/components/qr-code/__test__/demo-extend.test.ts @@ -0,0 +1,3 @@ +import { extendTest } from '../../../tests/shared/demoTest'; + +extendTest('qr-code'); diff --git a/components/qr-code/__test__/demo.test.ts b/components/qr-code/__test__/demo.test.ts index 54c644e47038..3333ff7dac6c 100644 --- a/components/qr-code/__test__/demo.test.ts +++ b/components/qr-code/__test__/demo.test.ts @@ -1,3 +1,3 @@ -import demoTest from '../../../tests/demo'; +import demoTest from '../../../tests/shared/demoTest'; -demoTest('QrCode'); +demoTest('qr-code'); diff --git a/components/qr-code/__test__/image.test.ts b/components/qr-code/__test__/image.test.ts new file mode 100644 index 000000000000..3cf41e4d3c4e --- /dev/null +++ b/components/qr-code/__test__/image.test.ts @@ -0,0 +1,5 @@ +import { imageDemoTest } from '../../../tests/shared/imageTest'; + +describe('QrCode image', () => { + imageDemoTest('qr-code'); +}); diff --git a/components/qr-code/__test__/index.test.tsx b/components/qr-code/__test__/index.test.tsx new file mode 100644 index 000000000000..d63e59fc88cf --- /dev/null +++ b/components/qr-code/__test__/index.test.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import QrCode from '..'; +import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; +import { render } from '../../../tests/utils'; + +describe('QrCode test', () => { + mountTest(QrCode); + rtlTest(QrCode); + it('should correct render ', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + it('should render `null` when value not exist', () => { + const { container } = render(); + expect(container.firstChild).toBe(null); + }); + + it('support icon', () => { + const { container } = render(); + expect(container.querySelector('img')).toBeTruthy(); + }); + it('support size', () => { + const { container } = render(); + const wapper = container.querySelector('.ant-qrcode'); + expect(wapper?.style?.width).toBe('100px'); + expect(wapper?.style?.height).toBe('100px'); + }); +}); diff --git a/components/qr-code/constants.ts b/components/qr-code/constants.ts deleted file mode 100644 index b4acf792bb49..000000000000 --- a/components/qr-code/constants.ts +++ /dev/null @@ -1,3 +0,0 @@ -const QRCODE = '二维码'; -const CLICK_REFRESH = '点击刷新'; -export { QRCODE, CLICK_REFRESH }; diff --git a/components/qr-code/demo/base.md b/components/qr-code/demo/base.md new file mode 100644 index 000000000000..cdbb62b914cd --- /dev/null +++ b/components/qr-code/demo/base.md @@ -0,0 +1,7 @@ +## zh-CN + +基本使用 + +## en-US + +base diff --git a/components/qr-code/demo/base.tsx b/components/qr-code/demo/base.tsx new file mode 100644 index 000000000000..5ae56b669649 --- /dev/null +++ b/components/qr-code/demo/base.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { QrCode } from 'antd'; + +const App: React.FC = () => ; + +export default App; diff --git a/components/qr-code/demo/download.md b/components/qr-code/demo/download.md new file mode 100644 index 000000000000..d0f1cef4d3fa --- /dev/null +++ b/components/qr-code/demo/download.md @@ -0,0 +1,7 @@ +## zh-CN + +下载二维码 + +## en-US + +Download QrCode diff --git a/components/qr-code/demo/download.tsx b/components/qr-code/demo/download.tsx new file mode 100644 index 000000000000..e805af0acd82 --- /dev/null +++ b/components/qr-code/demo/download.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { QrCode, Button } from 'antd'; + +const downloadQrCode = () => { + const canvas = document.getElementById('myqrcode')?.querySelector('canvas'); + const url = canvas?.toDataURL(); + if (url) { + const a = document.createElement('a'); + a.download = 'qr-code.png'; + a.href = url; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } +}; + +const App: React.FC = () => ( +
+ + +
+); + +export default App; diff --git a/components/qr-code/demo/errorleve.md b/components/qr-code/demo/errorleve.md new file mode 100644 index 000000000000..42928cc614ad --- /dev/null +++ b/components/qr-code/demo/errorleve.md @@ -0,0 +1,7 @@ +## zh-CN + +纠错比例 + +## en-US + +Error Level diff --git a/components/qr-code/demos/errorlevel.tsx b/components/qr-code/demo/errorlevel.tsx similarity index 50% rename from components/qr-code/demos/errorlevel.tsx rename to components/qr-code/demo/errorlevel.tsx index 4cffcab88bf2..9bac1fa34129 100644 --- a/components/qr-code/demos/errorlevel.tsx +++ b/components/qr-code/demo/errorlevel.tsx @@ -1,28 +1,19 @@ -/** - * uuid: f54dc6af - * title: errorLevel例子 - */ - import React, { useState } from 'react'; -import { QrCode } from '@alipay/tech-ui'; -import { Radio } from 'antd'; +import { Radio, QrCode } from 'antd'; -export default () => { +const App: React.FC = () => { const [level, setLevel] = useState('L'); - return ( -
+ <> setLevel(e.target.value)}> L M Q H - -
+ + ); }; + +export default App; diff --git a/components/qr-code/demo/logo.md b/components/qr-code/demo/logo.md new file mode 100644 index 000000000000..ffc214e822fa --- /dev/null +++ b/components/qr-code/demo/logo.md @@ -0,0 +1,7 @@ +## zh-CN + +带 Icon 的例子 + +## en-US + +With Icon diff --git a/components/qr-code/demo/logo.tsx b/components/qr-code/demo/logo.tsx new file mode 100644 index 000000000000..e4088fa29902 --- /dev/null +++ b/components/qr-code/demo/logo.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { QrCode } from 'antd'; + +const App: React.FC = () => ( + +); + +export default App; diff --git a/components/qr-code/demos/download.tsx b/components/qr-code/demos/download.tsx deleted file mode 100644 index 9fc0f6bb895d..000000000000 --- a/components/qr-code/demos/download.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { QrCode } from '@alipay/tech-ui'; -import { Button } from 'antd'; - -export default () => { - const downloadQrCode = () => { - const canvas = document.getElementById('myqrcode').getElementsByTagName('canvas')[0]; - const url = canvas.toDataURL(); // 转为 base - const a = document.createElement('a'); - a.download = '二维码.png'; - a.href = url; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - }; - - return ( -
- - -
- ); -}; diff --git a/components/qr-code/demos/logo.tsx b/components/qr-code/demos/logo.tsx deleted file mode 100644 index 7ab3657dead6..000000000000 --- a/components/qr-code/demos/logo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/** - * uuid: f54dc6af - * title: 带 logo 例子 - */ - -import React from 'react'; -import { QrCode } from '@alipay/tech-ui'; - -export default () => ( - -); diff --git a/components/qr-code/demos/outdated.tsx b/components/qr-code/demos/outdated.tsx deleted file mode 100644 index f9147100c36f..000000000000 --- a/components/qr-code/demos/outdated.tsx +++ /dev/null @@ -1,11 +0,0 @@ -/** - * uuid: b10012f5 - * title: 过期状态 - */ - -import React from 'react'; -import { QrCode } from '@alipay/tech-ui'; - -export default () => ( - console.log('已刷新')} /> -); diff --git a/components/qr-code/demos/popover.tsx b/components/qr-code/demos/popover.tsx deleted file mode 100644 index 4388f54ee0bb..000000000000 --- a/components/qr-code/demos/popover.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * uuid: b83bf277 - * title: popover 带 logo 例子 - */ - -import React from 'react'; -import { QrCode } from '@alipay/tech-ui'; - -export default () => ( - -); diff --git a/components/qr-code/demos/refresh.tsx b/components/qr-code/demos/refresh.tsx deleted file mode 100644 index af6d12bfebc4..000000000000 --- a/components/qr-code/demos/refresh.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { QrCode } from '@alipay/tech-ui'; -import { Spin } from 'antd'; -import service from './service'; -import type { CertifyLPDTO } from './service'; - -export default () => { - const [loading, setLoading] = useState(false); - const [expired, setExpired] = useState(false); - const [certifyData, setCertifyData] = useState({}); - const { qrUrl, imgUrl, expires } = certifyData; - - // 重新加载二维码，实际使用中替换为实际请求 - const reloadQrCode = async () => { - setLoading(true); - const result = await service.reloadQrCode(); - if (result.success) { - setExpired(false); - setCertifyData(result.data); - } - setLoading(false); - }; - - // 轮询当前认证状态，更新过期状态 - useEffect(() => { - reloadQrCode(); - }, []); - - useEffect(() => { - const loopStatus = setInterval(() => { - // 这里可以查询认证状态并做后续动作。 - setExpired(Date.now() > expires); - }, 1000); - - return () => { - clearInterval(loopStatus); - }; - }, [expires]); - - return loading ? ( - - ) : ( - { - reloadQrCode(); - }} - /> - ); -}; diff --git a/components/qr-code/demos/rendermode.tsx b/components/qr-code/demos/rendermode.tsx deleted file mode 100644 index 369f2c9764dd..000000000000 --- a/components/qr-code/demos/rendermode.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/** - * uuid: f54dc6af - * title: 渲染为canvas - */ - -import React from 'react'; -import { QrCode } from '@alipay/tech-ui'; - -export default () => ( - <> - - -); diff --git a/components/qr-code/demos/service.ts b/components/qr-code/demos/service.ts deleted file mode 100644 index 443c66cdde57..000000000000 --- a/components/qr-code/demos/service.ts +++ /dev/null @@ -1,42 +0,0 @@ -export interface CertifyLPDTO { - /** 认证id */ - certifyId?: string; - /** 二维码url */ - qrUrl?: string; - /** 二维码中的Logo的图片地址 */ - imgUrl?: string; - /** 过期时间戳，单位毫秒 */ - expires?: number; -} - -function sleep(ms) { - return new Promise((resolve) => setTimeout(resolve, ms)); -} - -/** - * 刷新二维码 - */ -export const reloadQrCode = async () => { - await sleep(Math.random() * 2000); - - return { - success: true, - errorCode: null, - errorMessage: null, - data: { - /** 认证id */ - certifyId: '#certifyId', - /** 二维码url */ - qrUrl: 'https://www.alipay.com', - /** 二维码中的Logo的图片地址 */ - imgUrl: - 'https://gw-office.alipayobjects.com/basement_prod/c83c53ab-515e-43e2-85d0-4d0da16f11ef.svg', - /** 过期时间戳，单位毫秒 */ - expires: Date.now() + 6000, // 假设 6 秒过期 - }, - }; -}; - -export default { - reloadQrCode, -}; diff --git a/components/qr-code/demos/withoutlogo.tsx b/components/qr-code/demos/withoutlogo.tsx deleted file mode 100644 index d5a6c655d670..000000000000 --- a/components/qr-code/demos/withoutlogo.tsx +++ /dev/null @@ -1,9 +0,0 @@ -/** - * uuid: 0a9254ef - * title: 不带 logo 例子 - */ - -import React from 'react'; -import { QrCode } from '@alipay/tech-ui'; - -export default () => ; diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md new file mode 100644 index 000000000000..3c4163c92c8b --- /dev/null +++ b/components/qr-code/index.en-US.md @@ -0,0 +1,40 @@ +--- +category: Components +title: QrCode +cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg +demo: + cols: 2 +group: + title: Data Display + order: 5 +--- + +# QrCode + +能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 + + + +## 何时使用 + +当需要将链接转换成为二维码时使用。 + +## 代码演示 + + +base +With Icon +Download QrCode +Error Level + +## API + +| 参数 | 说明 | 类型 | 默认值 | +| :--------- | :--------------------------------------- | :-------------------------- | :----- | +| value | 扫描后的地址 | string | - | +| size | 二维码图片大小 | number | 128 | +| icon | 二维码中图片的地址（目前只支持图片地址） | string | - | +| iconSize | 二维码中图片的大小 | number | 32 | +| bgColor | 二维码背景颜色 | string | `#fff` | +| fgColor | 二维码前景的颜色 | string | `#000` | +| errorLevel | 纠错码的等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `L` | diff --git a/components/qr-code/index.md b/components/qr-code/index.md deleted file mode 100644 index e06fbfa7e543..000000000000 --- a/components/qr-code/index.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -uuid: ba1833a0 -title: QrCode 二维码 -legacy: /QrCode -nav: - title: 组件 - path: /components ---- - -# QrCode 二维码 - - -若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。 - - -能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 - -## 何时使用 - -当需要将链接转换成为二维码时使用。 - -## 代码演示 - -### 不带 logo 例子 - - - -### 渲染为 svg - - - -### 过期状态 - - - -### 带 logo 例子 - - - -### popover 带 logo 例子 - - - -### 轮询 & 过期刷新 - -轮询二维码过期状态，并进行刷新的实际业务例子。 - - - -### 下载二维码 - -很多场景下会有下载二维码的需求，这里提供一种实现。 - - - -### 二维码纠错比例 - -手动调整二维码的纠错比例。 - - - -## API - -| 参数 | 说明 | 类型 | 默认值 | -| :--------- | :--------------------------------------- | :-------------------------- | :--------- | -| mode | 最终渲染出来的结构 | `'svg' \| 'canvas'` | `'canvas'` | -| value | 扫描后的地址 | string | - | -| logo | 二维码中图片的地址（目前只支持图片地址） | string | - | -| size | 二维码图片大小 | number | 128 | -| logoSize | 二维码中 logo 大小 | number | 32 | -| bgColor | 二维码背景颜色 | string | '#FFFFFF' | -| fgColor | 二维码前景的颜色 | string | '#000000' | -| popover | 是否展现气泡卡片 | boolean | false | -| expired | 是否过期 | boolean | false | -| onRefresh | 点击点击刷新的回调 | () => void | noop | -| errorLevel | 纠错码的登记 | `'L' \| 'M' \| 'Q' \| 'H' ` | `'L'` | diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 01a524b14d61..f3a2e0e6dfa6 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -1,178 +1,59 @@ -import type { CSSProperties, FC } from 'react'; -import { useEffect, useState } from 'react'; -import React from 'react'; -import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react'; -import { ReloadOutlined } from '@ant-design/icons'; -import { Popover } from 'antd'; -import { noop } from 'lodash'; +import React, { useMemo, useContext } from 'react'; +import { QRCodeCanvas } from 'qrcode.react'; import classNames from 'classnames'; - -import { QRCODE, CLICK_REFRESH } from './constants'; +import { ConfigContext } from '../config-provider'; +import type { ConfigConsumerProps } from '../config-provider'; +import type { QrCodeProps, QRPropsCanvas } from './interface'; import useStyle from './style/index'; -import getPrefixCls from '../_util/getPrefixCls'; - -/** - * 统计数据组件的基础 props 类型定义 - */ -export interface QrCodeBaseProps { - /** - * @description 附加样式 - * @ignore - */ - style?: CSSProperties; - /** - * @description 类名 - * @ignore - */ - className?: string; - /** - * @description 自定义 CSS classname 前缀 - * @ignore - */ - prefixCls?: string; -} - -/** - * 统计数据组件列表的 props 类型定义 - */ -export interface QrCodeProps extends QrCodeBaseProps { - /** - * @title 渲染模式 - * @description 二维码渲染模式 - * @default "svg" - */ - mode?: 'canvas' | 'svg' | string; - /** - * @title 二维码地址 - * @description 扫描后的地址 - */ - value: string; - /** - * @title 二维码图片大小 - * @description 二维码图片大小 - * @default "128" - */ - size?: number; - /** - * @title 背景颜色 - * @description 二维码背景颜色 - * @default "#FFFFFF" - */ - bgColor?: string; - /** - * @title 前景颜色 - * @description 二维码前景颜色 - * @default "#000000" - */ - fgColor?: string; - /** - * @title Logo 图片地址 - * @description 二维码中图片的地址（目前只支持图片地址） - */ - logo?: string; - /** - * @title Logo 图片大小 - * @description 二维码中 logo 大小 - * @default "32" - */ - logoSize?: number; - /** - * @title 展现气泡卡片 - * @description 是否展现气泡卡片 - * @default false - */ - popover?: boolean; - /** - * @title 点击刷新的回调 - * @description 点击刷新的回调 - */ - onRefresh?: React.MouseEventHandler; - /** - * @title 是否过期 - * @description 是否过期 - * @default false - */ - expired?: boolean; - /** - * @title 纠错级别 - * @description 纠错级别 - * @default "L" - */ - errorLevel?: 'L' | 'M' | 'Q' | 'H' | string; -} -const QRCode: FC = ({ - mode = 'canvas', - value = '', - logo = '', - size = 128, - bgColor = '#FFFFFF', - fgColor = '#000000', - logoSize = 32, - popover = false, - errorLevel = 'L', - onRefresh = noop, - style, - className, - prefixCls: p, - expired = false, -}) => { - const prefixCls = getPrefixCls('qrcode', p); - const { hashId, wrapSSR } = useStyle(prefixCls); - - const [qrCodeProps, setQrCodeProps] = useState({}); - useEffect(() => { - const imageSettingsProps = { - src: logo, +const QrCode: React.FC = (props) => { + const { + value, + icon = '', + size = 128, + bgColor = '#fff', + fgColor = '#000', + iconSize = 32, + errorLevel = 'L', + style, + className, + prefixCls: customizePrefixCls, + } = props; + const { getPrefixCls } = useContext(ConfigContext); + const prefixCls = getPrefixCls('qrcode', customizePrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); + + const qrCodeProps = useMemo(() => { + const imageSettings: QrCodeProps['imageSettings'] = { + src: icon, x: undefined, y: undefined, - height: logoSize ? logoSize : 24, - width: logoSize ? logoSize : 24, + height: iconSize, + width: iconSize, excavate: true, }; - setQrCodeProps({ - value: value, - imageSettings: logo ? { ...imageSettingsProps } : null, - size: size, + return { + value, + size, level: errorLevel, - bgColor: bgColor, - fgColor: fgColor, - ke: value, - }); - }, [bgColor, errorLevel, fgColor, logo, logoSize, size, value]); - - if (!value) return null; - - const qrcode = - mode === 'svg' ? : ; + bgColor, + fgColor, + imageSettings: icon ? imageSettings : undefined, + }; + }, [bgColor, errorLevel, fgColor, icon, iconSize, size, value]); - if (popover) { - return ( - - qrcode - - ); + if (!value) { + return null; } + return wrapSSR(
- {expired && ( -
- - - -
{QRCODE}
-
{CLICK_REFRESH}
-
- )} - {qrcode} +
, ); }; -export default QRCode; + +export default QrCode; diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md new file mode 100644 index 000000000000..c511cde3fffa --- /dev/null +++ b/components/qr-code/index.zh-CN.md @@ -0,0 +1,41 @@ +--- +category: Components +subtitle: 二维码 +title: QrCode +cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg +demo: + cols: 2 +group: + title: 数据展示 + order: 5 +--- + +# QrCode 二维码 + +能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 + + + +## 何时使用 + +当需要将链接转换成为二维码时使用。 + +## 代码演示 + + +基本使用 +带 logo 的例子 +下载二维码 +纠错比例 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +| :--------- | :--------------------------------------- | :-------------------------- | :----- | +| value | 扫描后的地址 | string | - | +| size | 二维码图片大小 | number | 128 | +| icon | 二维码中图片的地址（目前只支持图片地址） | string | - | +| iconSize | 二维码中图片的大小 | number | 32 | +| bgColor | 二维码背景颜色 | string | `#fff` | +| fgColor | 二维码前景的颜色 | string | `#000` | +| errorLevel | 纠错码的等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `L` | diff --git a/components/qr-code/interface.ts b/components/qr-code/interface.ts new file mode 100644 index 000000000000..bb63a0112808 --- /dev/null +++ b/components/qr-code/interface.ts @@ -0,0 +1,31 @@ +import type { CSSProperties } from 'react'; + +interface ImageSettings { + src: string; + height: number; + width: number; + excavate: boolean; + x?: number; + y?: number; +} + +interface QRProps { + value: string; + size?: number; + level?: string; + bgColor?: string; + fgColor?: string; + style?: CSSProperties; + includeMargin?: boolean; + imageSettings?: ImageSettings; +} + +export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes; + +export interface QrCodeProps extends QRProps { + className?: string; + prefixCls?: string; + icon?: string; + iconSize?: number; + errorLevel?: 'L' | 'M' | 'Q' | 'H'; +} diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index 117c68b5c54b..5948fce0f59b 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -1,10 +1,10 @@ -import type { TechUIToken } from '../../style/useStyle'; -import { resetComponent } from '../../style/useStyle'; -import { useTechUIStyle } from '../../style/useStyle'; +import type { FullToken, GenerateStyle } from '../../theme'; +import { genComponentStyleHook } from '../../theme'; +import { resetComponent } from '../../style'; -import type { GenerateStyle } from 'antd/es/theme'; +interface QrCodeToken extends FullToken<'QrCode'> {} -const genTecUIStyle: GenerateStyle = (token) => { +const genQrCodeStyle: GenerateStyle = (token) => { const { componentCls } = token; return { [componentCls]: { @@ -12,22 +12,6 @@ const genTecUIStyle: GenerateStyle = (token) => { position: 'relative', width: '100%', height: '100%', - - '&-mask': { - position: 'absolute', - insetBlockStart: 0, - insetInlineStart: 0, - zIndex: '4', - display: 'block', - width: '100%', - height: '100%', - color: '#000', - lineHeight: '1.5', - textAlign: 'center', - backgroundColor: 'white', - opacity: '0.94', - }, - '&-icon': { marginBlockEnd: 8, fontSize: '32px', @@ -36,13 +20,4 @@ const genTecUIStyle: GenerateStyle = (token) => { }; }; -export default function useStyle(prefixCls: string) { - return useTechUIStyle('QrCode', (token) => { - const techUiToken: TechUIToken = { - ...token, - componentCls: `.${prefixCls}`, - }; - - return [genTecUIStyle(techUiToken)]; - }); -} +export default genComponentStyleHook<'QrCode'>('QrCode', genQrCodeStyle); diff --git a/components/theme/interface.ts b/components/theme/interface.ts index 444973f59d74..5e1ee09827f9 100644 --- a/components/theme/interface.ts +++ b/components/theme/interface.ts @@ -135,6 +135,7 @@ export interface ComponentTokenMap { Space?: SpaceComponentToken; Progress?: ProgressComponentToken; Tour?: TourComponentToken; + QrCode?: {}; } export type OverrideToken = { diff --git a/package.json b/package.json index ceb18266447a..fc7e07d916ce 100644 --- a/package.json +++ b/package.json @@ -261,6 +261,7 @@ "pretty-format": "^29.0.0", "prismjs": "^1.29.0", "progress": "^2.0.3", + "qrcode.react": "^3.1.0", "qs": "^6.10.1", "rc-footer": "^0.6.6", "rc-tween-one": "^3.0.3", @@ -323,7 +324,7 @@ "bundlesize": [ { "path": "./dist/antd.min.js", - "maxSize": "377.5 kB" + "maxSize": "379.5 kB" } ], "tnpm": { From fe855059c820724f2b8e21d7f65daed1706259d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com> Date: Thu, 24 Nov 2022 15:09:24 +0800 Subject: [PATCH 04/70] remove dep --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index fc7e07d916ce..ddfbc14fff80 100644 --- a/package.json +++ b/package.json @@ -261,7 +261,6 @@ "pretty-format": "^29.0.0", "prismjs": "^1.29.0", "progress": "^2.0.3", - "qrcode.react": "^3.1.0", "qs": "^6.10.1", "rc-footer": "^0.6.6", "rc-tween-one": "^3.0.3", From 581273f48cd7b990c939ee7309c2a54e076ad56e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com> Date: Thu, 24 Nov 2022 16:06:35 +0800 Subject: [PATCH 05/70] update snap --- tests/__snapshots__/index.test.ts.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap index b867fa54bcd4..65ad7c74a68a 100644 --- a/tests/__snapshots__/index.test.ts.snap +++ b/tests/__snapshots__/index.test.ts.snap @@ -40,6 +40,7 @@ exports[`antd dist files exports modules correctly 1`] = ` "Popconfirm", "Popover", "Progress", + "QrCode", "Radio", "Rate", "Result", From df041849e0aee60462d3ced879a420a006f5242d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com> Date: Thu, 24 Nov 2022 17:11:49 +0800 Subject: [PATCH 06/70] en docs --- components/qr-code/index.en-US.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index 3c4163c92c8b..3bca9de80346 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -11,15 +11,15 @@ group: # QrCode -能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 +Components that can convert links into QR codes, and support custom color and logo. - + -## 何时使用 +## When To Use -当需要将链接转换成为二维码时使用。 +Used when the link needs to be converted into a QR Code. -## 代码演示 +## Examples base @@ -29,12 +29,12 @@ group: ## API -| 参数 | 说明 | 类型 | 默认值 | -| :--------- | :--------------------------------------- | :-------------------------- | :----- | -| value | 扫描后的地址 | string | - | -| size | 二维码图片大小 | number | 128 | -| icon | 二维码中图片的地址（目前只支持图片地址） | string | - | -| iconSize | 二维码中图片的大小 | number | 32 | -| bgColor | 二维码背景颜色 | string | `#fff` | -| fgColor | 二维码前景的颜色 | string | `#000` | -| errorLevel | 纠错码的等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `L` | +| Property | Description | Type | Default | +| :--------- | :------------------------------------------ | :-------------------------- | :------ | +| value | scanned link | string | - | +| size | QrCode size | number | 128 | +| icon | include image url (only link are supported) | string | - | +| iconSize | include image size | number | 32 | +| bgColor | QrCode Background Color | string | `#fff` | +| fgColor | QrCode Foreground Color | string | `#000` | +| errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `L` | From 93e7ae77617843c7a4cc8e4fca0857893693408c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 24 Nov 2022 17:11:52 +0800 Subject: [PATCH 07/70] refactor: rename tests dir --- .../__snapshots__/demo-extend.test.ts.snap | 0 .../{__test__ => __tests__}/__snapshots__/demo.test.ts.snap | 0 .../{__test__ => __tests__}/__snapshots__/index.test.tsx.snap | 0 components/qr-code/{__test__ => __tests__}/demo-extend.test.ts | 0 components/qr-code/{__test__ => __tests__}/demo.test.ts | 0 components/qr-code/{__test__ => __tests__}/image.test.ts | 0 components/qr-code/{__test__ => __tests__}/index.test.tsx | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename components/qr-code/{__test__ => __tests__}/__snapshots__/demo-extend.test.ts.snap (100%) rename components/qr-code/{__test__ => __tests__}/__snapshots__/demo.test.ts.snap (100%) rename components/qr-code/{__test__ => __tests__}/__snapshots__/index.test.tsx.snap (100%) rename components/qr-code/{__test__ => __tests__}/demo-extend.test.ts (100%) rename components/qr-code/{__test__ => __tests__}/demo.test.ts (100%) rename components/qr-code/{__test__ => __tests__}/image.test.ts (100%) rename components/qr-code/{__test__ => __tests__}/index.test.tsx (100%) diff --git a/components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap similarity index 100% rename from components/qr-code/__test__/__snapshots__/demo-extend.test.ts.snap rename to components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap diff --git a/components/qr-code/__test__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/qr-code/__test__/__snapshots__/demo.test.ts.snap rename to components/qr-code/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/qr-code/__test__/__snapshots__/index.test.tsx.snap b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/qr-code/__test__/__snapshots__/index.test.tsx.snap rename to components/qr-code/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/qr-code/__test__/demo-extend.test.ts b/components/qr-code/__tests__/demo-extend.test.ts similarity index 100% rename from components/qr-code/__test__/demo-extend.test.ts rename to components/qr-code/__tests__/demo-extend.test.ts diff --git a/components/qr-code/__test__/demo.test.ts b/components/qr-code/__tests__/demo.test.ts similarity index 100% rename from components/qr-code/__test__/demo.test.ts rename to components/qr-code/__tests__/demo.test.ts diff --git a/components/qr-code/__test__/image.test.ts b/components/qr-code/__tests__/image.test.ts similarity index 100% rename from components/qr-code/__test__/image.test.ts rename to components/qr-code/__tests__/image.test.ts diff --git a/components/qr-code/__test__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx similarity index 100% rename from components/qr-code/__test__/index.test.tsx rename to components/qr-code/__tests__/index.test.tsx From 60ad00a5902ab0a809283a3009557c593644c9fb Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:38:27 +0800 Subject: [PATCH 08/70] Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/base.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/base.md b/components/qr-code/demo/base.md index cdbb62b914cd..f90e126d54f3 100644 --- a/components/qr-code/demo/base.md +++ b/components/qr-code/demo/base.md @@ -1,6 +1,6 @@ ## zh-CN -基本使用 +基本用法。 ## en-US From 2d391b5a51727f154c7be15aed485981c0436331 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:38:38 +0800 Subject: [PATCH 09/70] Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/base.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/base.md b/components/qr-code/demo/base.md index f90e126d54f3..d7c5bd3ef03d 100644 --- a/components/qr-code/demo/base.md +++ b/components/qr-code/demo/base.md @@ -4,4 +4,4 @@ ## en-US -base +Basic Usage. From fbdc1f7594267093dfdd6f78f6ff15d42ca010fe Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:38:47 +0800 Subject: [PATCH 10/70] Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/download.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/download.md b/components/qr-code/demo/download.md index d0f1cef4d3fa..e67ea20ef7d1 100644 --- a/components/qr-code/demo/download.md +++ b/components/qr-code/demo/download.md @@ -1,6 +1,6 @@ ## zh-CN -下载二维码 +下载二维码的简单实现。 ## en-US From 6b678cd797e13c3dfba7c364b44ffd1226897612 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:38:55 +0800 Subject: [PATCH 11/70] Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/download.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/download.md b/components/qr-code/demo/download.md index e67ea20ef7d1..e961df09fec3 100644 --- a/components/qr-code/demo/download.md +++ b/components/qr-code/demo/download.md @@ -4,4 +4,4 @@ ## en-US -Download QrCode +A way to download QrCode. From bc02ee42a45268e5082d15b2e4763c5bdeb6a8fb Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:39:14 +0800 Subject: [PATCH 12/70] Update components/qr-code/demo/download.tsx Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/download.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/download.tsx b/components/qr-code/demo/download.tsx index e805af0acd82..1d44909208b5 100644 --- a/components/qr-code/demo/download.tsx +++ b/components/qr-code/demo/download.tsx @@ -18,7 +18,7 @@ const App: React.FC = () => (
); From 3a339e803080018557c9b2a2ab072f9690879acd Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:39:49 +0800 Subject: [PATCH 13/70] Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/logo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/logo.md b/components/qr-code/demo/logo.md index ffc214e822fa..e2fd2c930709 100644 --- a/components/qr-code/demo/logo.md +++ b/components/qr-code/demo/logo.md @@ -4,4 +4,4 @@ ## en-US -With Icon +QrCode with Icon. From 6623457272273a89ec900a1c6671c743e5ad9801 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:39:59 +0800 Subject: [PATCH 14/70] Update components/qr-code/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index f3a2e0e6dfa6..8ae8a720bdd9 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -14,7 +14,7 @@ const QrCode: React.FC = (props) => { bgColor = '#fff', fgColor = '#000', iconSize = 32, - errorLevel = 'L', + errorLevel = 'M', style, className, prefixCls: customizePrefixCls, From cd02097132f26e270c9b507856be53ce7a9eb6ef Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:40:09 +0800 Subject: [PATCH 15/70] Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/style/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index 5948fce0f59b..b55db326c360 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -8,7 +8,7 @@ const genQrCodeStyle: GenerateStyle = (token) => { const { componentCls } = token; return { [componentCls]: { - ...resetComponent?.(token), + ...resetComponent(token), position: 'relative', width: '100%', height: '100%', From cb9eac8529fcf712b9c4ac52972e678d483a4e84 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:40:18 +0800 Subject: [PATCH 16/70] Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/style/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index b55db326c360..717427175f0f 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -13,8 +13,8 @@ const genQrCodeStyle: GenerateStyle = (token) => { width: '100%', height: '100%', '&-icon': { - marginBlockEnd: 8, - fontSize: '32px', + marginBlockEnd: token.marginXS, + fontSize: token.controlHeight, }, }, }; From f70e41966b7d35d5d59acac632c983ee48614edb Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 22:40:36 +0800 Subject: [PATCH 17/70] Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> --- components/qr-code/demo/logo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/qr-code/demo/logo.md b/components/qr-code/demo/logo.md index e2fd2c930709..403cd515ab3b 100644 --- a/components/qr-code/demo/logo.md +++ b/components/qr-code/demo/logo.md @@ -1,6 +1,6 @@ ## zh-CN -带 Icon 的例子 +带 Icon 的二维码。 ## en-US From 8eee086a895506e5ef42c6a417200ee53574067e Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 23:08:21 +0800 Subject: [PATCH 18/70] rename --- .../__snapshots__/demo-extend.test.ts.snap | 136 ++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 136 ++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 4 +- .../__tests__/demo-extend.test.ts | 2 +- .../__tests__/demo.test.ts | 2 +- .../__tests__/image.test.ts | 4 +- .../__tests__/index.test.tsx | 16 +- components/{qr-code => QRCode}/demo/base.md | 0 components/QRCode/demo/base.tsx | 6 + .../{qr-code => QRCode}/demo/download.md | 2 +- .../{qr-code => QRCode}/demo/download.tsx | 10 +- .../demo/errorlevel.md} | 0 components/QRCode/demo/errorlevel.tsx | 14 ++ .../demo/logo.md => QRCode/demo/icon.md} | 2 +- .../demo/logo.tsx => QRCode/demo/icon.tsx} | 4 +- components/QRCode/index.en-US.md | 40 +++++ components/{qr-code => QRCode}/index.tsx | 8 +- components/{qr-code => QRCode}/index.zh-CN.md | 6 +- components/{qr-code => QRCode}/interface.ts | 2 +- components/{qr-code => QRCode}/style/index.ts | 6 +- .../__snapshots__/index.test.ts.snap | 2 +- components/index.tsx | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 153 ------------------ .../__tests__/__snapshots__/demo.test.ts.snap | 153 ------------------ components/qr-code/demo/base.tsx | 6 - components/qr-code/demo/errorlevel.tsx | 19 --- components/qr-code/index.en-US.md | 40 ----- components/theme/interface.ts | 2 +- package.json | 4 +- tests/__snapshots__/index.test.ts.snap | 2 +- 30 files changed, 373 insertions(+), 412 deletions(-) create mode 100644 components/QRCode/__tests__/__snapshots__/demo-extend.test.ts.snap create mode 100644 components/QRCode/__tests__/__snapshots__/demo.test.ts.snap rename components/{qr-code => QRCode}/__tests__/__snapshots__/index.test.tsx.snap (68%) rename components/{qr-code => QRCode}/__tests__/demo-extend.test.ts (72%) rename components/{qr-code => QRCode}/__tests__/demo.test.ts (72%) rename components/{qr-code => QRCode}/__tests__/image.test.ts (53%) rename components/{qr-code => QRCode}/__tests__/index.test.tsx (68%) rename components/{qr-code => QRCode}/demo/base.md (100%) create mode 100644 components/QRCode/demo/base.tsx rename components/{qr-code => QRCode}/demo/download.md (67%) rename components/{qr-code => QRCode}/demo/download.tsx (66%) rename components/{qr-code/demo/errorleve.md => QRCode/demo/errorlevel.md} (100%) create mode 100644 components/QRCode/demo/errorlevel.tsx rename components/{qr-code/demo/logo.md => QRCode/demo/icon.md} (71%) rename components/{qr-code/demo/logo.tsx => QRCode/demo/icon.tsx} (82%) create mode 100644 components/QRCode/index.en-US.md rename components/{qr-code => QRCode}/index.tsx (87%) rename components/{qr-code => QRCode}/index.zh-CN.md (95%) rename components/{qr-code => QRCode}/interface.ts (92%) rename components/{qr-code => QRCode}/style/index.ts (71%) delete mode 100644 components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap delete mode 100644 components/qr-code/__tests__/__snapshots__/demo.test.ts.snap delete mode 100644 components/qr-code/demo/base.tsx delete mode 100644 components/qr-code/demo/errorlevel.tsx delete mode 100644 components/qr-code/index.en-US.md diff --git a/components/QRCode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/QRCode/__tests__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000000..8bfccc68b668 --- /dev/null +++ b/components/QRCode/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,136 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/QRCode/demo/base.tsx extend context correctly 1`] = ` +
+ +
+`; + +exports[`renders ./components/QRCode/demo/download.tsx extend context correctly 1`] = ` +
+
+ +
+ +
+`; + +exports[`renders ./components/QRCode/demo/errorlevel.tsx extend context correctly 1`] = ` +Array [ +
+ +
, +
+
+ + + + +
+
, +] +`; + +exports[`renders ./components/QRCode/demo/icon.tsx extend context correctly 1`] = ` +
+ + +
+`; diff --git a/components/QRCode/__tests__/__snapshots__/demo.test.ts.snap b/components/QRCode/__tests__/__snapshots__/demo.test.ts.snap new file mode 100644 index 000000000000..e6cce63200b2 --- /dev/null +++ b/components/QRCode/__tests__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,136 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/QRCode/demo/base.tsx correctly 1`] = ` +
+ +
+`; + +exports[`renders ./components/QRCode/demo/download.tsx correctly 1`] = ` +
+
+ +
+ +
+`; + +exports[`renders ./components/QRCode/demo/errorlevel.tsx correctly 1`] = ` +Array [ +
+ +
, +
+
+ + + + +
+
, +] +`; + +exports[`renders ./components/QRCode/demo/icon.tsx correctly 1`] = ` +
+ + +
+`; diff --git a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap b/components/QRCode/__tests__/__snapshots__/index.test.tsx.snap similarity index 68% rename from components/qr-code/__tests__/__snapshots__/index.test.tsx.snap rename to components/QRCode/__tests__/__snapshots__/index.test.tsx.snap index 5a5204560617..158576899cbc 100644 --- a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/QRCode/__tests__/__snapshots__/index.test.tsx.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`QrCode test rtl render component should be rendered correctly in RTL direction 1`] = `null`; +exports[`QRCode test rtl render component should be rendered correctly in RTL direction 1`] = `null`; -exports[`QrCode test should correct render 1`] = ` +exports[`QRCode test should correct render 1`] = `
{ - imageDemoTest('qr-code'); +describe('QRCode image', () => { + imageDemoTest('QRCode'); }); diff --git a/components/qr-code/__tests__/index.test.tsx b/components/QRCode/__tests__/index.test.tsx similarity index 68% rename from components/qr-code/__tests__/index.test.tsx rename to components/QRCode/__tests__/index.test.tsx index d63e59fc88cf..15604d636901 100644 --- a/components/qr-code/__tests__/index.test.tsx +++ b/components/QRCode/__tests__/index.test.tsx @@ -1,27 +1,27 @@ import React from 'react'; -import QrCode from '..'; +import QRCode from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { render } from '../../../tests/utils'; -describe('QrCode test', () => { - mountTest(QrCode); - rtlTest(QrCode); +describe('QRCode test', () => { + mountTest(QRCode); + rtlTest(QRCode); it('should correct render ', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); it('should render `null` when value not exist', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toBe(null); }); it('support icon', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('img')).toBeTruthy(); }); it('support size', () => { - const { container } = render(); + const { container } = render(); const wapper = container.querySelector('.ant-qrcode'); expect(wapper?.style?.width).toBe('100px'); expect(wapper?.style?.height).toBe('100px'); diff --git a/components/qr-code/demo/base.md b/components/QRCode/demo/base.md similarity index 100% rename from components/qr-code/demo/base.md rename to components/QRCode/demo/base.md diff --git a/components/QRCode/demo/base.tsx b/components/QRCode/demo/base.tsx new file mode 100644 index 000000000000..5092f0f86e1a --- /dev/null +++ b/components/QRCode/demo/base.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { QRCode } from 'antd'; + +const App: React.FC = () => ; + +export default App; diff --git a/components/qr-code/demo/download.md b/components/QRCode/demo/download.md similarity index 67% rename from components/qr-code/demo/download.md rename to components/QRCode/demo/download.md index e961df09fec3..9967cf7fa2f1 100644 --- a/components/qr-code/demo/download.md +++ b/components/QRCode/demo/download.md @@ -4,4 +4,4 @@ ## en-US -A way to download QrCode. +A way to download QRCode. diff --git a/components/qr-code/demo/download.tsx b/components/QRCode/demo/download.tsx similarity index 66% rename from components/qr-code/demo/download.tsx rename to components/QRCode/demo/download.tsx index 1d44909208b5..277a28f0826e 100644 --- a/components/qr-code/demo/download.tsx +++ b/components/QRCode/demo/download.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { QrCode, Button } from 'antd'; +import { QRCode, Button } from 'antd'; -const downloadQrCode = () => { +const downloadQRCode = () => { const canvas = document.getElementById('myqrcode')?.querySelector('canvas'); const url = canvas?.toDataURL(); if (url) { const a = document.createElement('a'); - a.download = 'qr-code.png'; + a.download = 'QRCode.png'; a.href = url; document.body.appendChild(a); a.click(); @@ -16,8 +16,8 @@ const downloadQrCode = () => { const App: React.FC = () => (
- -
diff --git a/components/qr-code/demo/errorleve.md b/components/QRCode/demo/errorlevel.md similarity index 100% rename from components/qr-code/demo/errorleve.md rename to components/QRCode/demo/errorlevel.md diff --git a/components/QRCode/demo/errorlevel.tsx b/components/QRCode/demo/errorlevel.tsx new file mode 100644 index 000000000000..e1bae117f517 --- /dev/null +++ b/components/QRCode/demo/errorlevel.tsx @@ -0,0 +1,14 @@ +import React, { useState } from 'react'; +import { Segmented, QRCode } from 'antd'; + +const App: React.FC = () => { + const [level, setLevel] = useState('L'); + return ( + <> + + + + ); +}; + +export default App; diff --git a/components/qr-code/demo/logo.md b/components/QRCode/demo/icon.md similarity index 71% rename from components/qr-code/demo/logo.md rename to components/QRCode/demo/icon.md index 403cd515ab3b..05a34f1d8cb6 100644 --- a/components/qr-code/demo/logo.md +++ b/components/QRCode/demo/icon.md @@ -4,4 +4,4 @@ ## en-US -QrCode with Icon. +QRCode with Icon. diff --git a/components/qr-code/demo/logo.tsx b/components/QRCode/demo/icon.tsx similarity index 82% rename from components/qr-code/demo/logo.tsx rename to components/QRCode/demo/icon.tsx index e4088fa29902..1ac92453c7ea 100644 --- a/components/qr-code/demo/logo.tsx +++ b/components/QRCode/demo/icon.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { QrCode } from 'antd'; +import { QRCode } from 'antd'; const App: React.FC = () => ( - diff --git a/components/QRCode/index.en-US.md b/components/QRCode/index.en-US.md new file mode 100644 index 000000000000..6c775bc026fc --- /dev/null +++ b/components/QRCode/index.en-US.md @@ -0,0 +1,40 @@ +--- +category: Components +title: QRCode +cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg +demo: + cols: 2 +group: + title: Data Display + order: 5 +--- + +# QRCode + +Components that can convert links into QR codes, and support custom color and logo. + + + +## When To Use + +Used when the link needs to be converted into a QR Code. + +## Examples + + +base +With Icon +Download QRCode +Error Level + +## API + +| Property | Description | Type | Default | +| :-- | :-- | :-- | :-- | +| value | scanned link | string | - | +| size | QRCode size | number | 128 | +| icon | include image url (only image link are supported) | string | - | +| iconSize | include image size | number | 32 | +| bgColor | QRCode Background Color | string | `#fff` | +| fgColor | QRCode Foreground Color | string | `#000` | +| errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `L` | diff --git a/components/qr-code/index.tsx b/components/QRCode/index.tsx similarity index 87% rename from components/qr-code/index.tsx rename to components/QRCode/index.tsx index 8ae8a720bdd9..03bc62d3dcf5 100644 --- a/components/qr-code/index.tsx +++ b/components/QRCode/index.tsx @@ -3,10 +3,10 @@ import { QRCodeCanvas } from 'qrcode.react'; import classNames from 'classnames'; import { ConfigContext } from '../config-provider'; import type { ConfigConsumerProps } from '../config-provider'; -import type { QrCodeProps, QRPropsCanvas } from './interface'; +import type { QRCodeProps, QRPropsCanvas } from './interface'; import useStyle from './style/index'; -const QrCode: React.FC = (props) => { +const QRCode: React.FC = (props) => { const { value, icon = '', @@ -24,7 +24,7 @@ const QrCode: React.FC = (props) => { const [wrapSSR, hashId] = useStyle(prefixCls); const qrCodeProps = useMemo(() => { - const imageSettings: QrCodeProps['imageSettings'] = { + const imageSettings: QRCodeProps['imageSettings'] = { src: icon, x: undefined, y: undefined, @@ -56,4 +56,4 @@ const QrCode: React.FC = (props) => { ); }; -export default QrCode; +export default QRCode; diff --git a/components/qr-code/index.zh-CN.md b/components/QRCode/index.zh-CN.md similarity index 95% rename from components/qr-code/index.zh-CN.md rename to components/QRCode/index.zh-CN.md index c511cde3fffa..1aabe202a2df 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/QRCode/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 二维码 -title: QrCode +title: QRCode cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg demo: cols: 2 @@ -10,7 +10,7 @@ group: order: 5 --- -# QrCode 二维码 +# QRCode 二维码 能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 @@ -24,7 +24,7 @@ group: 基本使用 -带 logo 的例子 +带 Icon 的例子 下载二维码 纠错比例 diff --git a/components/qr-code/interface.ts b/components/QRCode/interface.ts similarity index 92% rename from components/qr-code/interface.ts rename to components/QRCode/interface.ts index bb63a0112808..20c48d5c2614 100644 --- a/components/qr-code/interface.ts +++ b/components/QRCode/interface.ts @@ -22,7 +22,7 @@ interface QRProps { export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes; -export interface QrCodeProps extends QRProps { +export interface QRCodeProps extends QRProps { className?: string; prefixCls?: string; icon?: string; diff --git a/components/qr-code/style/index.ts b/components/QRCode/style/index.ts similarity index 71% rename from components/qr-code/style/index.ts rename to components/QRCode/style/index.ts index 717427175f0f..a73393dcfbb4 100644 --- a/components/qr-code/style/index.ts +++ b/components/QRCode/style/index.ts @@ -2,9 +2,9 @@ import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook } from '../../theme'; import { resetComponent } from '../../style'; -interface QrCodeToken extends FullToken<'QrCode'> {} +interface QRCodeToken extends FullToken<'QRCode'> {} -const genQrCodeStyle: GenerateStyle = (token) => { +const genQRCodeStyle: GenerateStyle = (token) => { const { componentCls } = token; return { [componentCls]: { @@ -20,4 +20,4 @@ const genQrCodeStyle: GenerateStyle = (token) => { }; }; -export default genComponentStyleHook<'QrCode'>('QrCode', genQrCodeStyle); +export default genComponentStyleHook<'QRCode'>('QRCode', genQRCodeStyle); diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap index c37c6c8c7a96..9364bf329bad 100644 --- a/components/__tests__/__snapshots__/index.test.ts.snap +++ b/components/__tests__/__snapshots__/index.test.ts.snap @@ -40,7 +40,7 @@ exports[`antd exports modules correctly 1`] = ` "Popconfirm", "Popover", "Progress", - "QrCode", + "QRCode", "Radio", "Rate", "Result", diff --git a/components/index.tsx b/components/index.tsx index e07e70a14926..d050ecf417c4 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -149,6 +149,6 @@ export { default as Typography } from './typography'; export type { TypographyProps } from './typography'; export { default as Upload } from './upload'; export type { UploadFile, UploadProps } from './upload'; -export { default as QrCode } from './qr-code'; -export type { QrCodeProps, QRPropsCanvas } from './qr-code/interface'; +export { default as QRCode } from './QRCode'; +export type { QRCodeProps, QRPropsCanvas } from './QRCode/interface'; export { default as version } from './version'; diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap deleted file mode 100644 index 35200a862277..000000000000 --- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap +++ /dev/null @@ -1,153 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders ./components/qr-code/demo/base.tsx extend context correctly 1`] = ` -
- -
-`; - -exports[`renders ./components/qr-code/demo/download.tsx extend context correctly 1`] = ` -
-
- -
- -
-`; - -exports[`renders ./components/qr-code/demo/errorlevel.tsx extend context correctly 1`] = ` -Array [ -
- - - - -
, -
- -
, -] -`; - -exports[`renders ./components/qr-code/demo/logo.tsx extend context correctly 1`] = ` -
- - -
-`; diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap deleted file mode 100644 index 2912270a47f6..000000000000 --- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap +++ /dev/null @@ -1,153 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders ./components/qr-code/demo/base.tsx correctly 1`] = ` -
- -
-`; - -exports[`renders ./components/qr-code/demo/download.tsx correctly 1`] = ` -
-
- -
- -
-`; - -exports[`renders ./components/qr-code/demo/errorlevel.tsx correctly 1`] = ` -Array [ -
- - - - -
, -
- -
, -] -`; - -exports[`renders ./components/qr-code/demo/logo.tsx correctly 1`] = ` -
- - -
-`; diff --git a/components/qr-code/demo/base.tsx b/components/qr-code/demo/base.tsx deleted file mode 100644 index 5ae56b669649..000000000000 --- a/components/qr-code/demo/base.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { QrCode } from 'antd'; - -const App: React.FC = () => ; - -export default App; diff --git a/components/qr-code/demo/errorlevel.tsx b/components/qr-code/demo/errorlevel.tsx deleted file mode 100644 index 9bac1fa34129..000000000000 --- a/components/qr-code/demo/errorlevel.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useState } from 'react'; -import { Radio, QrCode } from 'antd'; - -const App: React.FC = () => { - const [level, setLevel] = useState('L'); - return ( - <> - setLevel(e.target.value)}> - L - M - Q - H - - - - ); -}; - -export default App; diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md deleted file mode 100644 index 3bca9de80346..000000000000 --- a/components/qr-code/index.en-US.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -category: Components -title: QrCode -cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg -demo: - cols: 2 -group: - title: Data Display - order: 5 ---- - -# QrCode - -Components that can convert links into QR codes, and support custom color and logo. - - - -## When To Use - -Used when the link needs to be converted into a QR Code. - -## Examples - - -base -With Icon -Download QrCode -Error Level - -## API - -| Property | Description | Type | Default | -| :--------- | :------------------------------------------ | :-------------------------- | :------ | -| value | scanned link | string | - | -| size | QrCode size | number | 128 | -| icon | include image url (only link are supported) | string | - | -| iconSize | include image size | number | 32 | -| bgColor | QrCode Background Color | string | `#fff` | -| fgColor | QrCode Foreground Color | string | `#000` | -| errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `L` | diff --git a/components/theme/interface.ts b/components/theme/interface.ts index 5e1ee09827f9..a819c8125e67 100644 --- a/components/theme/interface.ts +++ b/components/theme/interface.ts @@ -135,7 +135,7 @@ export interface ComponentTokenMap { Space?: SpaceComponentToken; Progress?: ProgressComponentToken; Tour?: TourComponentToken; - QrCode?: {}; + QRCode?: {}; } export type OverrideToken = { diff --git a/package.json b/package.json index ddfbc14fff80..79a4327d0bfa 100644 --- a/package.json +++ b/package.json @@ -86,8 +86,8 @@ "site": "dumi build && cp .surgeignore _site", "sort": "npx sort-package-json", "sort-api": "antd-tools run sort-api-table", - "start": "PORT=8001 dumi dev", - "test": "jest --config .jest.js --cache=false", + "start": "dumi dev", + "test": "jest --config .jest.js --cache=false tests/index.test.ts", "test:update": "jest --config .jest.js --cache=false -u", "test-all": "sh -e ./scripts/test-all.sh", "test-node": "npm run version && jest --config .jest.node.js --cache=false", diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap index 65ad7c74a68a..6d5e6564cf6e 100644 --- a/tests/__snapshots__/index.test.ts.snap +++ b/tests/__snapshots__/index.test.ts.snap @@ -40,7 +40,7 @@ exports[`antd dist files exports modules correctly 1`] = ` "Popconfirm", "Popover", "Progress", - "QrCode", + "QRCode", "Radio", "Rate", "Result", From 6a9a5e2ce625b256103232c0a8c97661c1626804 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 23:14:34 +0800 Subject: [PATCH 19/70] fix --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 79a4327d0bfa..ddfbc14fff80 100644 --- a/package.json +++ b/package.json @@ -86,8 +86,8 @@ "site": "dumi build && cp .surgeignore _site", "sort": "npx sort-package-json", "sort-api": "antd-tools run sort-api-table", - "start": "dumi dev", - "test": "jest --config .jest.js --cache=false tests/index.test.ts", + "start": "PORT=8001 dumi dev", + "test": "jest --config .jest.js --cache=false", "test:update": "jest --config .jest.js --cache=false -u", "test-all": "sh -e ./scripts/test-all.sh", "test-node": "npm run version && jest --config .jest.node.js --cache=false", From 6e79cb89dc2cb776a13f477602a90dc8d2144d2b Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 24 Nov 2022 23:38:48 +0800 Subject: [PATCH 20/70] adjust text --- components/QRCode/demo/errorlevel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/QRCode/demo/errorlevel.md b/components/QRCode/demo/errorlevel.md index 42928cc614ad..fd93bbb7a69b 100644 --- a/components/QRCode/demo/errorlevel.md +++ b/components/QRCode/demo/errorlevel.md @@ -1,7 +1,7 @@ ## zh-CN -纠错比例 +纠错比例。 ## en-US -Error Level +Error Level. From e0c1b4229cce959aae95f2f5bf913614140cf19c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 25 Nov 2022 18:06:14 +0800 Subject: [PATCH 21/70] rename --- components/QRCode/__tests__/demo-extend.test.ts | 2 +- components/QRCode/__tests__/demo.test.ts | 2 +- components/QRCode/__tests__/image.test.ts | 2 +- components/QRCode/demo/icon.tsx | 2 +- components/index.tsx | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/QRCode/__tests__/demo-extend.test.ts b/components/QRCode/__tests__/demo-extend.test.ts index 0420f1f77339..79dea1e4faf5 100644 --- a/components/QRCode/__tests__/demo-extend.test.ts +++ b/components/QRCode/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('QRCode'); +extendTest('qrcode'); diff --git a/components/QRCode/__tests__/demo.test.ts b/components/QRCode/__tests__/demo.test.ts index 1929bbef5413..1cb1d77dd4fd 100644 --- a/components/QRCode/__tests__/demo.test.ts +++ b/components/QRCode/__tests__/demo.test.ts @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('QRCode'); +demoTest('qrcode'); diff --git a/components/QRCode/__tests__/image.test.ts b/components/QRCode/__tests__/image.test.ts index 96aa383bf011..df82d405e561 100644 --- a/components/QRCode/__tests__/image.test.ts +++ b/components/QRCode/__tests__/image.test.ts @@ -1,5 +1,5 @@ import { imageDemoTest } from '../../../tests/shared/imageTest'; describe('QRCode image', () => { - imageDemoTest('QRCode'); + imageDemoTest('qrcode'); }); diff --git a/components/QRCode/demo/icon.tsx b/components/QRCode/demo/icon.tsx index 1ac92453c7ea..77a62185921e 100644 --- a/components/QRCode/demo/icon.tsx +++ b/components/QRCode/demo/icon.tsx @@ -4,7 +4,7 @@ import { QRCode } from 'antd'; const App: React.FC = () => ( ); diff --git a/components/index.tsx b/components/index.tsx index d050ecf417c4..a9848329c2e1 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -149,6 +149,6 @@ export { default as Typography } from './typography'; export type { TypographyProps } from './typography'; export { default as Upload } from './upload'; export type { UploadFile, UploadProps } from './upload'; -export { default as QRCode } from './QRCode'; -export type { QRCodeProps, QRPropsCanvas } from './QRCode/interface'; +export { default as QRCode } from './qrcode'; +export type { QRCodeProps, QRPropsCanvas } from './qrcode/interface'; export { default as version } from './version'; From d284ec452ffa8a82d7b0fe18afdd772d21a7775b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 25 Nov 2022 18:34:04 +0800 Subject: [PATCH 22/70] fix title --- components/QRCode/index.en-US.md | 2 -- components/QRCode/index.zh-CN.md | 2 -- 2 files changed, 4 deletions(-) diff --git a/components/QRCode/index.en-US.md b/components/QRCode/index.en-US.md index 6c775bc026fc..f2c0dc040511 100644 --- a/components/QRCode/index.en-US.md +++ b/components/QRCode/index.en-US.md @@ -9,8 +9,6 @@ group: order: 5 --- -# QRCode - Components that can convert links into QR codes, and support custom color and logo. diff --git a/components/QRCode/index.zh-CN.md b/components/QRCode/index.zh-CN.md index 1aabe202a2df..1bb246f2d621 100644 --- a/components/QRCode/index.zh-CN.md +++ b/components/QRCode/index.zh-CN.md @@ -10,8 +10,6 @@ group: order: 5 --- -# QRCode 二维码 - 能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置。 From dc49d1ee23f457669e8ff67e33f53cfe65e6d00d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 25 Nov 2022 19:17:42 +0800 Subject: [PATCH 23/70] rename --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 0 .../{QRCode => qrcoded}/__tests__/__snapshots__/demo.test.ts.snap | 0 .../__tests__/__snapshots__/index.test.tsx.snap | 0 components/{QRCode => qrcoded}/__tests__/demo-extend.test.ts | 0 components/{QRCode => qrcoded}/__tests__/demo.test.ts | 0 components/{QRCode => qrcoded}/__tests__/image.test.ts | 0 components/{QRCode => qrcoded}/__tests__/index.test.tsx | 0 components/{QRCode => qrcoded}/demo/base.md | 0 components/{QRCode => qrcoded}/demo/base.tsx | 0 components/{QRCode => qrcoded}/demo/download.md | 0 components/{QRCode => qrcoded}/demo/download.tsx | 0 components/{QRCode => qrcoded}/demo/errorlevel.md | 0 components/{QRCode => qrcoded}/demo/errorlevel.tsx | 0 components/{QRCode => qrcoded}/demo/icon.md | 0 components/{QRCode => qrcoded}/demo/icon.tsx | 0 components/{QRCode => qrcoded}/index.en-US.md | 0 components/{QRCode => qrcoded}/index.tsx | 0 components/{QRCode => qrcoded}/index.zh-CN.md | 0 components/{QRCode => qrcoded}/interface.ts | 0 components/{QRCode => qrcoded}/style/index.ts | 0 20 files changed, 0 insertions(+), 0 deletions(-) rename components/{QRCode => qrcoded}/__tests__/__snapshots__/demo-extend.test.ts.snap (100%) rename components/{QRCode => qrcoded}/__tests__/__snapshots__/demo.test.ts.snap (100%) rename components/{QRCode => qrcoded}/__tests__/__snapshots__/index.test.tsx.snap (100%) rename components/{QRCode => qrcoded}/__tests__/demo-extend.test.ts (100%) rename components/{QRCode => qrcoded}/__tests__/demo.test.ts (100%) rename components/{QRCode => qrcoded}/__tests__/image.test.ts (100%) rename components/{QRCode => qrcoded}/__tests__/index.test.tsx (100%) rename components/{QRCode => qrcoded}/demo/base.md (100%) rename components/{QRCode => qrcoded}/demo/base.tsx (100%) rename components/{QRCode => qrcoded}/demo/download.md (100%) rename components/{QRCode => qrcoded}/demo/download.tsx (100%) rename components/{QRCode => qrcoded}/demo/errorlevel.md (100%) rename components/{QRCode => qrcoded}/demo/errorlevel.tsx (100%) rename components/{QRCode => qrcoded}/demo/icon.md (100%) rename components/{QRCode => qrcoded}/demo/icon.tsx (100%) rename components/{QRCode => qrcoded}/index.en-US.md (100%) rename components/{QRCode => qrcoded}/index.tsx (100%) rename components/{QRCode => qrcoded}/index.zh-CN.md (100%) rename components/{QRCode => qrcoded}/interface.ts (100%) rename components/{QRCode => qrcoded}/style/index.ts (100%) diff --git a/components/QRCode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcoded/__tests__/__snapshots__/demo-extend.test.ts.snap similarity index 100% rename from components/QRCode/__tests__/__snapshots__/demo-extend.test.ts.snap rename to components/qrcoded/__tests__/__snapshots__/demo-extend.test.ts.snap diff --git a/components/QRCode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcoded/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/QRCode/__tests__/__snapshots__/demo.test.ts.snap rename to components/qrcoded/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/QRCode/__tests__/__snapshots__/index.test.tsx.snap b/components/qrcoded/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/QRCode/__tests__/__snapshots__/index.test.tsx.snap rename to components/qrcoded/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/QRCode/__tests__/demo-extend.test.ts b/components/qrcoded/__tests__/demo-extend.test.ts similarity index 100% rename from components/QRCode/__tests__/demo-extend.test.ts rename to components/qrcoded/__tests__/demo-extend.test.ts diff --git a/components/QRCode/__tests__/demo.test.ts b/components/qrcoded/__tests__/demo.test.ts similarity index 100% rename from components/QRCode/__tests__/demo.test.ts rename to components/qrcoded/__tests__/demo.test.ts diff --git a/components/QRCode/__tests__/image.test.ts b/components/qrcoded/__tests__/image.test.ts similarity index 100% rename from components/QRCode/__tests__/image.test.ts rename to components/qrcoded/__tests__/image.test.ts diff --git a/components/QRCode/__tests__/index.test.tsx b/components/qrcoded/__tests__/index.test.tsx similarity index 100% rename from components/QRCode/__tests__/index.test.tsx rename to components/qrcoded/__tests__/index.test.tsx diff --git a/components/QRCode/demo/base.md b/components/qrcoded/demo/base.md similarity index 100% rename from components/QRCode/demo/base.md rename to components/qrcoded/demo/base.md diff --git a/components/QRCode/demo/base.tsx b/components/qrcoded/demo/base.tsx similarity index 100% rename from components/QRCode/demo/base.tsx rename to components/qrcoded/demo/base.tsx diff --git a/components/QRCode/demo/download.md b/components/qrcoded/demo/download.md similarity index 100% rename from components/QRCode/demo/download.md rename to components/qrcoded/demo/download.md diff --git a/components/QRCode/demo/download.tsx b/components/qrcoded/demo/download.tsx similarity index 100% rename from components/QRCode/demo/download.tsx rename to components/qrcoded/demo/download.tsx diff --git a/components/QRCode/demo/errorlevel.md b/components/qrcoded/demo/errorlevel.md similarity index 100% rename from components/QRCode/demo/errorlevel.md rename to components/qrcoded/demo/errorlevel.md diff --git a/components/QRCode/demo/errorlevel.tsx b/components/qrcoded/demo/errorlevel.tsx similarity index 100% rename from components/QRCode/demo/errorlevel.tsx rename to components/qrcoded/demo/errorlevel.tsx diff --git a/components/QRCode/demo/icon.md b/components/qrcoded/demo/icon.md similarity index 100% rename from components/QRCode/demo/icon.md rename to components/qrcoded/demo/icon.md diff --git a/components/QRCode/demo/icon.tsx b/components/qrcoded/demo/icon.tsx similarity index 100% rename from components/QRCode/demo/icon.tsx rename to components/qrcoded/demo/icon.tsx diff --git a/components/QRCode/index.en-US.md b/components/qrcoded/index.en-US.md similarity index 100% rename from components/QRCode/index.en-US.md rename to components/qrcoded/index.en-US.md diff --git a/components/QRCode/index.tsx b/components/qrcoded/index.tsx similarity index 100% rename from components/QRCode/index.tsx rename to components/qrcoded/index.tsx diff --git a/components/QRCode/index.zh-CN.md b/components/qrcoded/index.zh-CN.md similarity index 100% rename from components/QRCode/index.zh-CN.md rename to components/qrcoded/index.zh-CN.md diff --git a/components/QRCode/interface.ts b/components/qrcoded/interface.ts similarity index 100% rename from components/QRCode/interface.ts rename to components/qrcoded/interface.ts diff --git a/components/QRCode/style/index.ts b/components/qrcoded/style/index.ts similarity index 100% rename from components/QRCode/style/index.ts rename to components/qrcoded/style/index.ts From 723ae850f3c66d1ade6c9557315051b99e02926d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 25 Nov 2022 19:18:37 +0800 Subject: [PATCH 24/70] rename --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 0 .../{qrcoded => qrcode}/__tests__/__snapshots__/demo.test.ts.snap | 0 .../__tests__/__snapshots__/index.test.tsx.snap | 0 components/{qrcoded => qrcode}/__tests__/demo-extend.test.ts | 0 components/{qrcoded => qrcode}/__tests__/demo.test.ts | 0 components/{qrcoded => qrcode}/__tests__/image.test.ts | 0 components/{qrcoded => qrcode}/__tests__/index.test.tsx | 0 components/{qrcoded => qrcode}/demo/base.md | 0 components/{qrcoded => qrcode}/demo/base.tsx | 0 components/{qrcoded => qrcode}/demo/download.md | 0 components/{qrcoded => qrcode}/demo/download.tsx | 0 components/{qrcoded => qrcode}/demo/errorlevel.md | 0 components/{qrcoded => qrcode}/demo/errorlevel.tsx | 0 components/{qrcoded => qrcode}/demo/icon.md | 0 components/{qrcoded => qrcode}/demo/icon.tsx | 0 components/{qrcoded => qrcode}/index.en-US.md | 0 components/{qrcoded => qrcode}/index.tsx | 0 components/{qrcoded => qrcode}/index.zh-CN.md | 0 components/{qrcoded => qrcode}/interface.ts | 0 components/{qrcoded => qrcode}/style/index.ts | 0 20 files changed, 0 insertions(+), 0 deletions(-) rename components/{qrcoded => qrcode}/__tests__/__snapshots__/demo-extend.test.ts.snap (100%) rename components/{qrcoded => qrcode}/__tests__/__snapshots__/demo.test.ts.snap (100%) rename components/{qrcoded => qrcode}/__tests__/__snapshots__/index.test.tsx.snap (100%) rename components/{qrcoded => qrcode}/__tests__/demo-extend.test.ts (100%) rename components/{qrcoded => qrcode}/__tests__/demo.test.ts (100%) rename components/{qrcoded => qrcode}/__tests__/image.test.ts (100%) rename components/{qrcoded => qrcode}/__tests__/index.test.tsx (100%) rename components/{qrcoded => qrcode}/demo/base.md (100%) rename components/{qrcoded => qrcode}/demo/base.tsx (100%) rename components/{qrcoded => qrcode}/demo/download.md (100%) rename components/{qrcoded => qrcode}/demo/download.tsx (100%) rename components/{qrcoded => qrcode}/demo/errorlevel.md (100%) rename components/{qrcoded => qrcode}/demo/errorlevel.tsx (100%) rename components/{qrcoded => qrcode}/demo/icon.md (100%) rename components/{qrcoded => qrcode}/demo/icon.tsx (100%) rename components/{qrcoded => qrcode}/index.en-US.md (100%) rename components/{qrcoded => qrcode}/index.tsx (100%) rename components/{qrcoded => qrcode}/index.zh-CN.md (100%) rename components/{qrcoded => qrcode}/interface.ts (100%) rename components/{qrcoded => qrcode}/style/index.ts (100%) diff --git a/components/qrcoded/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap similarity index 100% rename from components/qrcoded/__tests__/__snapshots__/demo-extend.test.ts.snap rename to components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap diff --git a/components/qrcoded/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/qrcoded/__tests__/__snapshots__/demo.test.ts.snap rename to components/qrcode/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/qrcoded/__tests__/__snapshots__/index.test.tsx.snap b/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/qrcoded/__tests__/__snapshots__/index.test.tsx.snap rename to components/qrcode/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/qrcoded/__tests__/demo-extend.test.ts b/components/qrcode/__tests__/demo-extend.test.ts similarity index 100% rename from components/qrcoded/__tests__/demo-extend.test.ts rename to components/qrcode/__tests__/demo-extend.test.ts diff --git a/components/qrcoded/__tests__/demo.test.ts b/components/qrcode/__tests__/demo.test.ts similarity index 100% rename from components/qrcoded/__tests__/demo.test.ts rename to components/qrcode/__tests__/demo.test.ts diff --git a/components/qrcoded/__tests__/image.test.ts b/components/qrcode/__tests__/image.test.ts similarity index 100% rename from components/qrcoded/__tests__/image.test.ts rename to components/qrcode/__tests__/image.test.ts diff --git a/components/qrcoded/__tests__/index.test.tsx b/components/qrcode/__tests__/index.test.tsx similarity index 100% rename from components/qrcoded/__tests__/index.test.tsx rename to components/qrcode/__tests__/index.test.tsx diff --git a/components/qrcoded/demo/base.md b/components/qrcode/demo/base.md similarity index 100% rename from components/qrcoded/demo/base.md rename to components/qrcode/demo/base.md diff --git a/components/qrcoded/demo/base.tsx b/components/qrcode/demo/base.tsx similarity index 100% rename from components/qrcoded/demo/base.tsx rename to components/qrcode/demo/base.tsx diff --git a/components/qrcoded/demo/download.md b/components/qrcode/demo/download.md similarity index 100% rename from components/qrcoded/demo/download.md rename to components/qrcode/demo/download.md diff --git a/components/qrcoded/demo/download.tsx b/components/qrcode/demo/download.tsx similarity index 100% rename from components/qrcoded/demo/download.tsx rename to components/qrcode/demo/download.tsx diff --git a/components/qrcoded/demo/errorlevel.md b/components/qrcode/demo/errorlevel.md similarity index 100% rename from components/qrcoded/demo/errorlevel.md rename to components/qrcode/demo/errorlevel.md diff --git a/components/qrcoded/demo/errorlevel.tsx b/components/qrcode/demo/errorlevel.tsx similarity index 100% rename from components/qrcoded/demo/errorlevel.tsx rename to components/qrcode/demo/errorlevel.tsx diff --git a/components/qrcoded/demo/icon.md b/components/qrcode/demo/icon.md similarity index 100% rename from components/qrcoded/demo/icon.md rename to components/qrcode/demo/icon.md diff --git a/components/qrcoded/demo/icon.tsx b/components/qrcode/demo/icon.tsx similarity index 100% rename from components/qrcoded/demo/icon.tsx rename to components/qrcode/demo/icon.tsx diff --git a/components/qrcoded/index.en-US.md b/components/qrcode/index.en-US.md similarity index 100% rename from components/qrcoded/index.en-US.md rename to components/qrcode/index.en-US.md diff --git a/components/qrcoded/index.tsx b/components/qrcode/index.tsx similarity index 100% rename from components/qrcoded/index.tsx rename to components/qrcode/index.tsx diff --git a/components/qrcoded/index.zh-CN.md b/components/qrcode/index.zh-CN.md similarity index 100% rename from components/qrcoded/index.zh-CN.md rename to components/qrcode/index.zh-CN.md diff --git a/components/qrcoded/interface.ts b/components/qrcode/interface.ts similarity index 100% rename from components/qrcoded/interface.ts rename to components/qrcode/interface.ts diff --git a/components/qrcoded/style/index.ts b/components/qrcode/style/index.ts similarity index 100% rename from components/qrcoded/style/index.ts rename to components/qrcode/style/index.ts From 21b7a318fc610c61092ec25a07ab34823865593b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 25 Nov 2022 20:00:11 +0800 Subject: [PATCH 25/70] fix: snap --- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 10 +++++----- .../qrcode/__tests__/__snapshots__/demo.test.ts.snap | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap index 8bfccc68b668..d9a365c62257 100644 --- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/QRCode/demo/base.tsx extend context correctly 1`] = ` +exports[`renders ./components/qrcode/demo/base.tsx extend context correctly 1`] = `
`; -exports[`renders ./components/QRCode/demo/download.tsx extend context correctly 1`] = ` +exports[`renders ./components/qrcode/demo/download.tsx extend context correctly 1`] = `
@@ -38,7 +38,7 @@ exports[`renders ./components/QRCode/demo/download.tsx extend context correctly
`; -exports[`renders ./components/QRCode/demo/errorlevel.tsx extend context correctly 1`] = ` +exports[`renders ./components/qrcode/demo/errorlevel.tsx extend context correctly 1`] = ` Array [
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap index e6cce63200b2..9d705b3b2a87 100644 --- a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/QRCode/demo/base.tsx correctly 1`] = ` +exports[`renders ./components/qrcode/demo/base.tsx correctly 1`] = `
`; -exports[`renders ./components/QRCode/demo/download.tsx correctly 1`] = ` +exports[`renders ./components/qrcode/demo/download.tsx correctly 1`] = `
@@ -38,7 +38,7 @@ exports[`renders ./components/QRCode/demo/download.tsx correctly 1`] = `
`; -exports[`renders ./components/QRCode/demo/errorlevel.tsx correctly 1`] = ` +exports[`renders ./components/qrcode/demo/errorlevel.tsx correctly 1`] = ` Array [
From f060335556dba3d366b89525e787dd8904be1454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sat, 26 Nov 2022 00:12:53 +0800 Subject: [PATCH 26/70] fix --- components/qrcode/style/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts index a73393dcfbb4..277807c7f334 100644 --- a/components/qrcode/style/index.ts +++ b/components/qrcode/style/index.ts @@ -1,5 +1,5 @@ -import type { FullToken, GenerateStyle } from '../../theme'; -import { genComponentStyleHook } from '../../theme'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook } from '../../theme/internal'; import { resetComponent } from '../../style'; interface QRCodeToken extends FullToken<'QRCode'> {} From a489f3cda0a2e08fc25c7c575603e9bbe7d6adce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sat, 26 Nov 2022 00:34:04 +0800 Subject: [PATCH 27/70] bundlesize --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ddfbc14fff80..f2b8da8d7c2f 100644 --- a/package.json +++ b/package.json @@ -323,7 +323,7 @@ "bundlesize": [ { "path": "./dist/antd.min.js", - "maxSize": "379.5 kB" + "maxSize": "380 kB" } ], "tnpm": { From c0dd3a70408e0f508f6cfd97df7ef3f57ed2a544 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sat, 26 Nov 2022 10:12:03 +0800 Subject: [PATCH 28/70] update demo --- components/qrcode/demo/download.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/qrcode/demo/download.tsx b/components/qrcode/demo/download.tsx index 277a28f0826e..c66ce361cc65 100644 --- a/components/qrcode/demo/download.tsx +++ b/components/qrcode/demo/download.tsx @@ -3,8 +3,8 @@ import { QRCode, Button } from 'antd'; const downloadQRCode = () => { const canvas = document.getElementById('myqrcode')?.querySelector('canvas'); - const url = canvas?.toDataURL(); - if (url) { + if (canvas) { + const url = canvas.toDataURL(); const a = document.createElement('a'); a.download = 'QRCode.png'; a.href = url; From 50a1a1e3f5f1e72bfb73d1527e8e3d7868f56eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sat, 26 Nov 2022 10:21:09 +0800 Subject: [PATCH 29/70] update docs --- components/qrcode/index.en-US.md | 2 +- components/qrcode/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/qrcode/index.en-US.md b/components/qrcode/index.en-US.md index f2c0dc040511..2bfe537df0be 100644 --- a/components/qrcode/index.en-US.md +++ b/components/qrcode/index.en-US.md @@ -30,8 +30,8 @@ Used when the link needs to be converted into a QR Code. | Property | Description | Type | Default | | :-- | :-- | :-- | :-- | | value | scanned link | string | - | -| size | QRCode size | number | 128 | | icon | include image url (only image link are supported) | string | - | +| size | QRCode size | number | 128 | | iconSize | include image size | number | 32 | | bgColor | QRCode Background Color | string | `#fff` | | fgColor | QRCode Foreground Color | string | `#000` | diff --git a/components/qrcode/index.zh-CN.md b/components/qrcode/index.zh-CN.md index 1bb246f2d621..4c9c81a27a7c 100644 --- a/components/qrcode/index.zh-CN.md +++ b/components/qrcode/index.zh-CN.md @@ -31,8 +31,8 @@ group: | 参数 | 说明 | 类型 | 默认值 | | :--------- | :--------------------------------------- | :-------------------------- | :----- | | value | 扫描后的地址 | string | - | -| size | 二维码图片大小 | number | 128 | | icon | 二维码中图片的地址（目前只支持图片地址） | string | - | +| size | 二维码图片大小 | number | 128 | | iconSize | 二维码中图片的大小 | number | 32 | | bgColor | 二维码背景颜色 | string | `#fff` | | fgColor | 二维码前景的颜色 | string | `#000` | From 0c8abc00d0253e3a046f19a68f993621fcc0fdfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Sun, 27 Nov 2022 14:19:28 +0800 Subject: [PATCH 30/70] add demo --- .../__snapshots__/demo-extend.test.ts.snap | 986 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 128 +++ components/qrcode/demo/customColor.md | 7 + components/qrcode/demo/customColor.tsx | 46 + components/qrcode/demo/customSize.md | 7 + components/qrcode/demo/customSize.tsx | 48 + components/qrcode/index.en-US.md | 2 + components/qrcode/index.zh-CN.md | 4 +- 8 files changed, 1227 insertions(+), 1 deletion(-) create mode 100644 components/qrcode/demo/customColor.md create mode 100644 components/qrcode/demo/customColor.tsx create mode 100644 components/qrcode/demo/customSize.md create mode 100644 components/qrcode/demo/customSize.tsx diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap index d9a365c62257..527511bb2dfe 100644 --- a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -13,6 +13,992 @@ exports[`renders ./components/qrcode/demo/base.tsx extend context correctly 1`]
`; +exports[`renders ./components/qrcode/demo/customColor.tsx extend context correctly 1`] = ` +Array [ +
+ +
, +
+
+ +
+
+
+
+ +
+