Browse Source
* feat: qrcode * chore: code clean * 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 * remove dep * update snap * en docs * refactor: rename tests dir * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * rename * fix * adjust text * rename * fix title * rename * rename * fix: snap * fix * bundlesize * update demo * update docs * add demo * add docs * add docs * test: add warning * update demo * bundlesize * update test case * update demo * feat: add onRefresh、add status * fix: fix demo * fix: fix demo * add locale * add locale * add test case * update snap * fix demo * update demo * update demo * update demo * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/interface.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * fix * Update components/qrcode/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * fix * fix * fix * add decs * fix * fix * fix type * fix * fix demo * fix lint * fix lint * add test case for bordered * prettier-ignore Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: 栗嘉男 <lijianan@lijianandeMacBook-Pro.local>pull/39356/head
lijianan
2 years ago
committed by
GitHub
GitHub
41 changed files with 1431 additions and 21 deletions
@ -0,0 +1,403 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`renders ./components/qrcode/demo/Popover.tsx extend context correctly 1`] = ` |
|||
Array [ |
|||
<img |
|||
alt="icon" |
|||
height="100" |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
width="100" |
|||
/>, |
|||
<div> |
|||
<div |
|||
class="ant-popover" |
|||
style="opacity:0" |
|||
> |
|||
<div |
|||
class="ant-popover-content" |
|||
> |
|||
<div |
|||
class="ant-popover-arrow" |
|||
> |
|||
<span |
|||
class="ant-popover-arrow-content" |
|||
/> |
|||
</div> |
|||
<div |
|||
class="ant-popover-inner" |
|||
role="tooltip" |
|||
style="padding:0" |
|||
> |
|||
<div |
|||
class="ant-popover-inner-content" |
|||
> |
|||
<div |
|||
class="ant-qrcode ant-qrcode-borderless" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div>, |
|||
] |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/base.tsx extend context correctly 1`] = ` |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/customColor.tsx extend context correctly 1`] = ` |
|||
<div |
|||
class="ant-space ant-space-horizontal ant-space-align-center" |
|||
> |
|||
<div |
|||
class="ant-space-item" |
|||
style="margin-right:8px" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="ant-space-item" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/customSize.tsx extend context correctly 1`] = ` |
|||
Array [ |
|||
<div |
|||
class="ant-btn-group" |
|||
style="margin-bottom:16px" |
|||
> |
|||
<button |
|||
class="ant-btn ant-btn-default" |
|||
type="button" |
|||
> |
|||
<span |
|||
aria-label="minus" |
|||
class="anticon anticon-minus" |
|||
role="img" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
data-icon="minus" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
<span> |
|||
Smaller |
|||
</span> |
|||
</button> |
|||
<button |
|||
class="ant-btn ant-btn-default" |
|||
type="button" |
|||
> |
|||
<span |
|||
aria-label="plus" |
|||
class="anticon anticon-plus" |
|||
role="img" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
data-icon="plus" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<defs> |
|||
<style /> |
|||
</defs> |
|||
<path |
|||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" |
|||
/> |
|||
<path |
|||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
<span> |
|||
Larger |
|||
</span> |
|||
</button> |
|||
</div>, |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
<img |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
style="display:none" |
|||
/> |
|||
</div>, |
|||
] |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/download.tsx extend context correctly 1`] = ` |
|||
<div |
|||
id="myqrcode" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
<button |
|||
class="ant-btn ant-btn-primary" |
|||
type="button" |
|||
> |
|||
<span> |
|||
Download |
|||
</span> |
|||
</button> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/errorlevel.tsx extend context correctly 1`] = ` |
|||
Array [ |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div>, |
|||
<div |
|||
class="ant-segmented" |
|||
> |
|||
<div |
|||
class="ant-segmented-group" |
|||
> |
|||
<label |
|||
class="ant-segmented-item ant-segmented-item-selected" |
|||
> |
|||
<input |
|||
checked="" |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="L" |
|||
> |
|||
L |
|||
</div> |
|||
</label> |
|||
<label |
|||
class="ant-segmented-item" |
|||
> |
|||
<input |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="M" |
|||
> |
|||
M |
|||
</div> |
|||
</label> |
|||
<label |
|||
class="ant-segmented-item" |
|||
> |
|||
<input |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="Q" |
|||
> |
|||
Q |
|||
</div> |
|||
</label> |
|||
<label |
|||
class="ant-segmented-item" |
|||
> |
|||
<input |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="H" |
|||
> |
|||
H |
|||
</div> |
|||
</label> |
|||
</div> |
|||
</div>, |
|||
] |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/icon.tsx extend context correctly 1`] = ` |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
<img |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
style="display:none" |
|||
/> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/status.tsx extend context correctly 1`] = ` |
|||
<div |
|||
class="ant-space ant-space-horizontal ant-space-align-center" |
|||
style="flex-wrap:wrap;margin-bottom:-8px" |
|||
> |
|||
<div |
|||
class="ant-space-item" |
|||
style="margin-right:8px;padding-bottom:8px" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<div |
|||
class="ant-qrcode-mask" |
|||
> |
|||
<div |
|||
aria-busy="true" |
|||
aria-live="polite" |
|||
class="ant-spin ant-spin-spinning" |
|||
> |
|||
<span |
|||
class="ant-spin-dot ant-spin-dot-spin" |
|||
> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="ant-space-item" |
|||
style="padding-bottom:8px" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<div |
|||
class="ant-qrcode-mask" |
|||
> |
|||
<p> |
|||
QRCode is expired |
|||
</p> |
|||
<button |
|||
class="ant-btn ant-btn-link" |
|||
type="button" |
|||
> |
|||
<span |
|||
aria-label="reload" |
|||
class="anticon anticon-reload" |
|||
role="img" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
data-icon="reload" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
<span> |
|||
click refresh |
|||
</span> |
|||
</button> |
|||
</div> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
@ -0,0 +1,363 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`renders ./components/qrcode/demo/Popover.tsx correctly 1`] = ` |
|||
<img |
|||
alt="icon" |
|||
height="100" |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
width="100" |
|||
/> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/base.tsx correctly 1`] = ` |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/customColor.tsx correctly 1`] = ` |
|||
<div |
|||
class="ant-space ant-space-horizontal ant-space-align-center" |
|||
> |
|||
<div |
|||
class="ant-space-item" |
|||
style="margin-right:8px" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="ant-space-item" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/customSize.tsx correctly 1`] = ` |
|||
Array [ |
|||
<div |
|||
class="ant-btn-group" |
|||
style="margin-bottom:16px" |
|||
> |
|||
<button |
|||
class="ant-btn ant-btn-default" |
|||
type="button" |
|||
> |
|||
<span |
|||
aria-label="minus" |
|||
class="anticon anticon-minus" |
|||
role="img" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
data-icon="minus" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
<span> |
|||
Smaller |
|||
</span> |
|||
</button> |
|||
<button |
|||
class="ant-btn ant-btn-default" |
|||
type="button" |
|||
> |
|||
<span |
|||
aria-label="plus" |
|||
class="anticon anticon-plus" |
|||
role="img" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
data-icon="plus" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<defs> |
|||
<style /> |
|||
</defs> |
|||
<path |
|||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" |
|||
/> |
|||
<path |
|||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
<span> |
|||
Larger |
|||
</span> |
|||
</button> |
|||
</div>, |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
<img |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
style="display:none" |
|||
/> |
|||
</div>, |
|||
] |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/download.tsx correctly 1`] = ` |
|||
<div |
|||
id="myqrcode" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
<button |
|||
class="ant-btn ant-btn-primary" |
|||
type="button" |
|||
> |
|||
<span> |
|||
Download |
|||
</span> |
|||
</button> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/errorlevel.tsx correctly 1`] = ` |
|||
Array [ |
|||
<div |
|||
class="ant-qrcode" |
|||
style="margin-bottom:16px;width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div>, |
|||
<div |
|||
class="ant-segmented" |
|||
> |
|||
<div |
|||
class="ant-segmented-group" |
|||
> |
|||
<label |
|||
class="ant-segmented-item ant-segmented-item-selected" |
|||
> |
|||
<input |
|||
checked="" |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="L" |
|||
> |
|||
L |
|||
</div> |
|||
</label> |
|||
<label |
|||
class="ant-segmented-item" |
|||
> |
|||
<input |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="M" |
|||
> |
|||
M |
|||
</div> |
|||
</label> |
|||
<label |
|||
class="ant-segmented-item" |
|||
> |
|||
<input |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="Q" |
|||
> |
|||
Q |
|||
</div> |
|||
</label> |
|||
<label |
|||
class="ant-segmented-item" |
|||
> |
|||
<input |
|||
class="ant-segmented-item-input" |
|||
type="radio" |
|||
/> |
|||
<div |
|||
class="ant-segmented-item-label" |
|||
title="H" |
|||
> |
|||
H |
|||
</div> |
|||
</label> |
|||
</div> |
|||
</div>, |
|||
] |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/icon.tsx correctly 1`] = ` |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
<img |
|||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
style="display:none" |
|||
/> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`renders ./components/qrcode/demo/status.tsx correctly 1`] = ` |
|||
<div |
|||
class="ant-space ant-space-horizontal ant-space-align-center" |
|||
style="flex-wrap:wrap;margin-bottom:-8px" |
|||
> |
|||
<div |
|||
class="ant-space-item" |
|||
style="margin-right:8px;padding-bottom:8px" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<div |
|||
class="ant-qrcode-mask" |
|||
> |
|||
<div |
|||
aria-busy="true" |
|||
aria-live="polite" |
|||
class="ant-spin ant-spin-spinning" |
|||
> |
|||
<span |
|||
class="ant-spin-dot ant-spin-dot-spin" |
|||
> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
<i |
|||
class="ant-spin-dot-item" |
|||
/> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="ant-space-item" |
|||
style="padding-bottom:8px" |
|||
> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width:160px;height:160px" |
|||
> |
|||
<div |
|||
class="ant-qrcode-mask" |
|||
> |
|||
<p> |
|||
QRCode is expired |
|||
</p> |
|||
<button |
|||
class="ant-btn ant-btn-link" |
|||
type="button" |
|||
> |
|||
<span |
|||
aria-label="reload" |
|||
class="anticon anticon-reload" |
|||
role="img" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
data-icon="reload" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z" |
|||
/> |
|||
</svg> |
|||
</span> |
|||
<span> |
|||
click refresh |
|||
</span> |
|||
</button> |
|||
</div> |
|||
<canvas |
|||
height="134" |
|||
style="height:134px;width:134px" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
@ -0,0 +1,20 @@ |
|||
// 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`] = ` |
|||
<div> |
|||
<div |
|||
class="ant-qrcode" |
|||
style="width: 160px; height: 160px;" |
|||
> |
|||
<canvas |
|||
height="134" |
|||
style="height: 134px; width: 134px;" |
|||
width="134" |
|||
/> |
|||
</div> |
|||
</div> |
|||
`; |
|||
|
|||
exports[`QRCode test should render \`null\` and console Error when value not exist 1`] = `null`; |
|||
@ -0,0 +1,3 @@ |
|||
import { extendTest } from '../../../tests/shared/demoTest'; |
|||
|
|||
extendTest('qrcode'); |
|||
@ -0,0 +1,3 @@ |
|||
import demoTest from '../../../tests/shared/demoTest'; |
|||
|
|||
demoTest('qrcode'); |
|||
@ -0,0 +1,5 @@ |
|||
import { imageDemoTest } from '../../../tests/shared/imageTest'; |
|||
|
|||
describe('QRCode image', () => { |
|||
imageDemoTest('qrcode'); |
|||
}); |
|||
@ -0,0 +1,82 @@ |
|||
import React, { useState } from 'react'; |
|||
import QRCode from '..'; |
|||
import mountTest from '../../../tests/shared/mountTest'; |
|||
import rtlTest from '../../../tests/shared/rtlTest'; |
|||
import { fireEvent, render } from '../../../tests/utils'; |
|||
import type { QRCodeProps } from '../interface'; |
|||
|
|||
describe('QRCode test', () => { |
|||
mountTest(QRCode); |
|||
rtlTest(QRCode); |
|||
|
|||
it('should correct render', () => { |
|||
const { container } = render(<QRCode value="test" />); |
|||
expect( |
|||
container |
|||
?.querySelector<HTMLDivElement>('.ant-qrcode') |
|||
?.querySelector<HTMLCanvasElement>('canvas'), |
|||
).toBeTruthy(); |
|||
expect(container).toMatchSnapshot(); |
|||
}); |
|||
|
|||
it('should render `null` and console Error when value not exist', () => { |
|||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); |
|||
const { container } = render(<QRCode value={undefined as unknown as string} />); |
|||
expect(container.firstChild).toBe(null); |
|||
expect(container.firstChild).toMatchSnapshot(); |
|||
expect(errSpy).toHaveBeenCalledWith('Warning: [antd: QRCode] need to receive `value` props'); |
|||
errSpy.mockRestore(); |
|||
}); |
|||
|
|||
it('support custom icon', () => { |
|||
const { container } = render(<QRCode value="test" icon="test" />); |
|||
expect( |
|||
container |
|||
?.querySelector<HTMLDivElement>('.ant-qrcode') |
|||
?.querySelector<HTMLImageElement>('img'), |
|||
).toBeTruthy(); |
|||
}); |
|||
|
|||
it('support custom size', () => { |
|||
const { container } = render(<QRCode value="test" size={100} />); |
|||
const wapper = container.querySelector<HTMLDivElement>('.ant-qrcode'); |
|||
expect(wapper?.style?.width).toBe('100px'); |
|||
expect(wapper?.style?.height).toBe('100px'); |
|||
}); |
|||
|
|||
it('support refresh', () => { |
|||
const refresh = jest.fn(); |
|||
const { container } = render(<QRCode value="test" status="expired" onRefresh={refresh} />); |
|||
fireEvent.click( |
|||
container |
|||
?.querySelector<HTMLDivElement>('.ant-qrcode') |
|||
?.querySelector<HTMLButtonElement>('button.ant-btn-link')!, |
|||
); |
|||
expect(refresh).toHaveBeenCalled(); |
|||
}); |
|||
|
|||
it('support loading', () => { |
|||
const Demo: React.FC = () => { |
|||
const [status, setStatus] = useState<QRCodeProps['status']>('active'); |
|||
return ( |
|||
<> |
|||
<QRCode value="test" status={status} /> |
|||
<button type="button" onClick={() => setStatus('loading')}> |
|||
set loading |
|||
</button> |
|||
</> |
|||
); |
|||
}; |
|||
const { container } = render(<Demo />); |
|||
expect(container.querySelector<HTMLDivElement>('.ant-spin-spinning')).toBeFalsy(); |
|||
fireEvent.click(container?.querySelector<HTMLButtonElement>('button')!); |
|||
expect(container.querySelector<HTMLDivElement>('.ant-spin-spinning')).toBeTruthy(); |
|||
}); |
|||
|
|||
it('support bordered', () => { |
|||
const { container } = render(<QRCode value="test" bordered={false} />); |
|||
expect(container?.querySelector<HTMLDivElement>('.ant-qrcode')).toHaveClass( |
|||
'ant-qrcode-borderless', |
|||
); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
带气泡卡片的例子。 |
|||
|
|||
## en-US |
|||
|
|||
With Popover. |
|||
@ -0,0 +1,12 @@ |
|||
import React from 'react'; |
|||
import { QRCode, Popover } from 'antd'; |
|||
|
|||
const src = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Popover overlayInnerStyle={{ padding: 0 }} content={<QRCode value={src} bordered={false} />}> |
|||
<img width={100} height={100} src={src} alt="icon" /> |
|||
</Popover> |
|||
); |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
基本用法。 |
|||
|
|||
## en-US |
|||
|
|||
Basic Usage. |
|||
@ -0,0 +1,6 @@ |
|||
import React from 'react'; |
|||
import { QRCode } from 'antd'; |
|||
|
|||
const App: React.FC = () => <QRCode value="https://ant.design/" />; |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
通过设置 `color` 自定义二维码颜色，通过设置 `style` 自定义背景颜色。 |
|||
|
|||
## en-US |
|||
|
|||
Custom Color. |
|||
@ -0,0 +1,24 @@ |
|||
import React from 'react'; |
|||
import { QRCode, Space, theme } from 'antd'; |
|||
|
|||
const { useToken } = theme; |
|||
|
|||
const App: React.FC = () => { |
|||
const { token } = useToken(); |
|||
return ( |
|||
<Space> |
|||
<QRCode |
|||
value="https://ant.design/" |
|||
color={token.colorSuccessText} |
|||
style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }} |
|||
/> |
|||
<QRCode |
|||
value="https://ant.design/" |
|||
color={token.colorInfoText} |
|||
style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }} |
|||
/> |
|||
</Space> |
|||
); |
|||
}; |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
自定义尺寸 |
|||
|
|||
## en-US |
|||
|
|||
Custom Size. |
|||
@ -0,0 +1,48 @@ |
|||
import React, { useState } from 'react'; |
|||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons'; |
|||
import { QRCode, Button } from 'antd'; |
|||
|
|||
const App: React.FC = () => { |
|||
const [size, setSize] = useState<number>(160); |
|||
|
|||
const increase = () => { |
|||
setSize((prevSize) => { |
|||
const newSize = prevSize + 10; |
|||
if (newSize > 300) { |
|||
return 300; |
|||
} |
|||
return newSize; |
|||
}); |
|||
}; |
|||
|
|||
const decline = () => { |
|||
setSize((prevSize) => { |
|||
const newSize = prevSize - 10; |
|||
if (newSize < 48) { |
|||
return 48; |
|||
} |
|||
return newSize; |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<Button.Group style={{ marginBottom: 16 }}> |
|||
<Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}> |
|||
Smaller |
|||
</Button> |
|||
<Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}> |
|||
Larger |
|||
</Button> |
|||
</Button.Group> |
|||
<QRCode |
|||
size={size} |
|||
iconSize={size / 4} |
|||
value="https://ant.design/" |
|||
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
/> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
下载二维码的简单实现。 |
|||
|
|||
## en-US |
|||
|
|||
A way to download QRCode. |
|||
@ -0,0 +1,26 @@ |
|||
import React from 'react'; |
|||
import { QRCode, Button } from 'antd'; |
|||
|
|||
const downloadQRCode = () => { |
|||
const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas'); |
|||
if (canvas) { |
|||
const url = canvas.toDataURL(); |
|||
const a = document.createElement('a'); |
|||
a.download = 'QRCode.png'; |
|||
a.href = url; |
|||
document.body.appendChild(a); |
|||
a.click(); |
|||
document.body.removeChild(a); |
|||
} |
|||
}; |
|||
|
|||
const App: React.FC = () => ( |
|||
<div id="myqrcode"> |
|||
<QRCode value="https://ant.design/" style={{ marginBottom: 16 }} /> |
|||
<Button type="primary" onClick={downloadQRCode}> |
|||
Download |
|||
</Button> |
|||
</div> |
|||
); |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
通过设置 errorLevel 调整不同的容错等级。 |
|||
|
|||
## en-US |
|||
|
|||
set Error Level. |
|||
@ -0,0 +1,19 @@ |
|||
import React, { useState } from 'react'; |
|||
import type { QRCodeProps } from 'antd'; |
|||
import { Segmented, QRCode } from 'antd'; |
|||
|
|||
const App: React.FC = () => { |
|||
const [level, setLevel] = useState<string | number>('L'); |
|||
return ( |
|||
<> |
|||
<QRCode |
|||
style={{ marginBottom: 16 }} |
|||
errorLevel={level as QRCodeProps['errorLevel']} |
|||
value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
/> |
|||
<Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} /> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
带 Icon 的二维码。 |
|||
|
|||
## en-US |
|||
|
|||
QRCode with Icon. |
|||
@ -0,0 +1,11 @@ |
|||
import React from 'react'; |
|||
import { QRCode } from 'antd'; |
|||
|
|||
const App: React.FC = () => ( |
|||
<QRCode |
|||
value="https://ant.design/" |
|||
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" |
|||
/> |
|||
); |
|||
|
|||
export default App; |
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
可以通过 `status` 的值控制二维码的状态。 |
|||
|
|||
## en-US |
|||
|
|||
The status can be controlled by the value `status`. |
|||
@ -0,0 +1,11 @@ |
|||
import React from 'react'; |
|||
import { QRCode, Space } from 'antd'; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Space wrap> |
|||
<QRCode value="https://ant.design/" status="loading" /> |
|||
<QRCode value="https://ant.design/" status="expired" onRefresh={() => console.log('refresh')} /> |
|||
</Space> |
|||
); |
|||
|
|||
export default App; |
|||
@ -0,0 +1,56 @@ |
|||
--- |
|||
category: Components |
|||
title: QRCode |
|||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original |
|||
demo: |
|||
cols: 2 |
|||
group: |
|||
title: Data Display |
|||
order: 5 |
|||
--- |
|||
|
|||
Components that can convert links into QR codes, and support custom color and logo. Available since `antd@5.1.0`. |
|||
|
|||
<Alert message="If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. You can configure the QR code to be larger through `size`, or shorten the link through short link services."></Alert> |
|||
|
|||
## When To Use |
|||
|
|||
Used when the link needs to be converted into a QR Code. |
|||
|
|||
## Examples |
|||
|
|||
<!-- prettier-ignore --> |
|||
<code src="./demo/base.tsx">base</code> |
|||
<code src="./demo/icon.tsx">With Icon</code> |
|||
<code src="./demo/status.tsx">other statu</code> |
|||
<code src="./demo/customSize.tsx">Custom Size</code> |
|||
<code src="./demo/customColor.tsx">Custom Color</code> |
|||
<code src="./demo/download.tsx">Download QRCode</code> |
|||
<code src="./demo/errorlevel.tsx">Error Level</code> |
|||
<code src="./demo/Popover.tsx">Advanced Usage</code> |
|||
|
|||
## API |
|||
|
|||
> This component is available since `antd@5.1.0` |
|||
|
|||
| Property | Description | Type | Default | |
|||
| :-- | :-- | :-- | :-- | |
|||
| value | scanned link | string | - | |
|||
| icon | include image url (only image link are supported) | string | - | |
|||
| size | QRCode size | number | 128 | |
|||
| iconSize | include image size | number | 32 | |
|||
| color | QRCode Color | string | `#000` | |
|||
| bordered | Whether has border style | boolean | `true` | |
|||
| errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | |
|||
| status | QRCode statu | `active \| expired \| loading ` | `active` | |
|||
| onRefresh | callback | `() => void` | - | |
|||
|
|||
## FAQ |
|||
|
|||
### About QRCode ErrorLevel |
|||
|
|||
The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate. |
|||
|
|||
Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change. |
|||
|
|||
> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html) |
|||
@ -0,0 +1,92 @@ |
|||
import React, { useMemo, useContext } from 'react'; |
|||
import { QRCodeCanvas } from 'qrcode.react'; |
|||
import classNames from 'classnames'; |
|||
import { ReloadOutlined } from '@ant-design/icons'; |
|||
import { ConfigContext } from '../config-provider'; |
|||
import LocaleReceiver from '../locale-provider/LocaleReceiver'; |
|||
import type { ConfigConsumerProps } from '../config-provider'; |
|||
import type { QRCodeProps, QRPropsCanvas } from './interface'; |
|||
import warning from '../_util/warning'; |
|||
import useStyle from './style/index'; |
|||
import Spin from '../spin'; |
|||
import Button from '../button'; |
|||
import theme from '../theme'; |
|||
|
|||
const { useToken } = theme; |
|||
|
|||
const QRCode: React.FC<QRCodeProps> = (props) => { |
|||
const { |
|||
value, |
|||
icon = '', |
|||
size = 160, |
|||
iconSize = 40, |
|||
color = '#000', |
|||
errorLevel = 'M', |
|||
status = 'active', |
|||
bordered = true, |
|||
onRefresh, |
|||
style, |
|||
className, |
|||
prefixCls: customizePrefixCls, |
|||
} = props; |
|||
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext); |
|||
const prefixCls = getPrefixCls('qrcode', customizePrefixCls); |
|||
const [wrapSSR, hashId] = useStyle(prefixCls); |
|||
const { token } = useToken(); |
|||
const qrCodeProps = useMemo<QRPropsCanvas>(() => { |
|||
const imageSettings: QRCodeProps['imageSettings'] = { |
|||
src: icon, |
|||
x: undefined, |
|||
y: undefined, |
|||
height: iconSize, |
|||
width: iconSize, |
|||
excavate: true, |
|||
}; |
|||
return { |
|||
value, |
|||
size: size - (token.paddingSM + token.lineWidth) * 2, |
|||
level: errorLevel, |
|||
bgColor: 'transparent', |
|||
fgColor: color, |
|||
imageSettings: icon ? imageSettings : undefined, |
|||
}; |
|||
}, [errorLevel, color, icon, iconSize, size, value]); |
|||
|
|||
if (!value) { |
|||
if (process.env.NODE_ENV !== 'production') { |
|||
warning(false, 'QRCode', 'need to receive `value` props'); |
|||
} |
|||
return null; |
|||
} |
|||
|
|||
const cls = classNames(prefixCls, className, hashId, { |
|||
[`${prefixCls}-borderless`]: !bordered, |
|||
}); |
|||
|
|||
return wrapSSR( |
|||
<LocaleReceiver componentName="QRCode"> |
|||
{(locale) => ( |
|||
<div style={{ ...style, width: size, height: size }} className={cls}> |
|||
{status !== 'active' && ( |
|||
<div className={`${prefixCls}-mask`}> |
|||
{status === 'loading' && <Spin />} |
|||
{status === 'expired' && ( |
|||
<> |
|||
<p>{locale.expired}</p> |
|||
{typeof onRefresh === 'function' && ( |
|||
<Button type="link" icon={<ReloadOutlined />} onClick={onRefresh}> |
|||
{locale.refresh} |
|||
</Button> |
|||
)} |
|||
</> |
|||
)} |
|||
</div> |
|||
)} |
|||
<QRCodeCanvas {...qrCodeProps} /> |
|||
</div> |
|||
)} |
|||
</LocaleReceiver>, |
|||
); |
|||
}; |
|||
|
|||
export default QRCode; |
|||
@ -0,0 +1,57 @@ |
|||
--- |
|||
category: Components |
|||
subtitle: 二维码 |
|||
title: QRCode |
|||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original |
|||
demo: |
|||
cols: 2 |
|||
group: |
|||
title: 数据展示 |
|||
order: 5 |
|||
--- |
|||
|
|||
能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。 |
|||
|
|||
<Alert message="若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。"></Alert> |
|||
|
|||
## 何时使用 |
|||
|
|||
当需要将链接转换成为二维码时使用。 |
|||
|
|||
## 代码演示 |
|||
|
|||
<!-- prettier-ignore --> |
|||
<code src="./demo/base.tsx">基本使用</code> |
|||
<code src="./demo/icon.tsx">带 Icon 的例子</code> |
|||
<code src="./demo/status.tsx">不同的状态</code> |
|||
<code src="./demo/customSize.tsx">自定义尺寸</code> |
|||
<code src="./demo/customColor.tsx">自定义颜色</code> |
|||
<code src="./demo/download.tsx">下载二维码</code> |
|||
<code src="./demo/errorlevel.tsx">纠错比例</code> |
|||
<code src="./demo/Popover.tsx">高级用法</code> |
|||
|
|||
## API |
|||
|
|||
> 自 `antd@5.1.0` 版本开始提供该组件。 |
|||
|
|||
| 参数 | 说明 | 类型 | 默认值 | |
|||
| :-- | :-- | :-- | :-- | |
|||
| value | 扫描后的地址 | string | - | |
|||
| icon | 二维码中图片的地址（目前只支持图片地址） | string | - | |
|||
| size | 二维码大小 | number | 160 | |
|||
| iconSize | 二维码中图片的大小 | number | 40 | |
|||
| color | 二维码颜色 | string | `#000` | |
|||
| bordered | 是否有边框 | boolean | `true` | |
|||
| errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` | |
|||
| status | 二维码状态 | `active \| expired \| loading ` | `active` | |
|||
| onRefresh | 点击"点击刷新"的回调 | `() => void` | - | |
|||
|
|||
## FAQ |
|||
|
|||
### 关于二维码纠错等级 |
|||
|
|||
纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。 |
|||
|
|||
通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约`30%` 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。 |
|||
|
|||
> 有关更多信息，可参阅相关资料：[https://www.qrcode.com/zh/about/error_correction](https://www.qrcode.com/zh/about/error_correction.html) |
|||
@ -0,0 +1,33 @@ |
|||
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; |
|||
color?: string; |
|||
style?: CSSProperties; |
|||
includeMargin?: boolean; |
|||
imageSettings?: ImageSettings; |
|||
} |
|||
|
|||
export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>; |
|||
|
|||
export interface QRCodeProps extends QRProps { |
|||
className?: string; |
|||
prefixCls?: string; |
|||
icon?: string; |
|||
iconSize?: number; |
|||
bordered?: boolean; |
|||
errorLevel?: 'L' | 'M' | 'Q' | 'H'; |
|||
status?: 'active' | 'expired' | 'loading'; |
|||
onRefresh?: () => void; |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
import type { FullToken, GenerateStyle } from '../../theme/internal'; |
|||
import { mergeToken, genComponentStyleHook } from '../../theme/internal'; |
|||
import { resetComponent } from '../../style'; |
|||
|
|||
export interface ComponentToken {} |
|||
|
|||
interface QRCodeToken extends FullToken<'QRCode'> { |
|||
QRCodeMaskBackgroundColor: string; |
|||
} |
|||
|
|||
const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => { |
|||
const { componentCls } = token; |
|||
return { |
|||
[componentCls]: { |
|||
...resetComponent(token), |
|||
display: 'flex', |
|||
justifyContent: 'center', |
|||
alignItems: 'center', |
|||
padding: token.paddingSM, |
|||
borderRadius: token.borderRadiusLG, |
|||
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, |
|||
position: 'relative', |
|||
width: '100%', |
|||
height: '100%', |
|||
overflow: 'hidden', |
|||
[`& > ${componentCls}-mask`]: { |
|||
position: 'absolute', |
|||
insetBlockStart: 0, |
|||
insetInlineStart: 0, |
|||
zIndex: 10, |
|||
display: 'flex', |
|||
flexDirection: 'column', |
|||
justifyContent: 'center', |
|||
alignItems: 'center', |
|||
width: '100%', |
|||
height: '100%', |
|||
color: token.colorText, |
|||
lineHeight: token.lineHeight, |
|||
background: token.QRCodeMaskBackgroundColor, |
|||
textAlign: 'center', |
|||
}, |
|||
'&-icon': { |
|||
marginBlockEnd: token.marginXS, |
|||
fontSize: token.controlHeight, |
|||
}, |
|||
}, |
|||
[`${componentCls}-borderless`]: { |
|||
borderColor: 'transparent', |
|||
}, |
|||
}; |
|||
}; |
|||
|
|||
export default genComponentStyleHook<'QRCode'>('QRCode', (token) => |
|||
genQRCodeStyle( |
|||
mergeToken<QRCodeToken>(token, { |
|||
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)', |
|||
}), |
|||
), |
|||
); |
|||
Loading…
Reference in new issue