mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
3851af9607
* feat: support custom status render in qrcode * feat: support custom status render in qrcode * feat: add test case * fix: code review * fix: code review * fix: code review * fix: code review * feat: optimize code * feat: optimize code * Update components/qr-code/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: kiner-tang <1127031143@qq.com> * Update components/qr-code/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: kiner-tang <1127031143@qq.com> * feat: opt code Signed-off-by: kiner-tang <1127031143@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/qr-code/index.en-US.md Signed-off-by: kiner-tang <1127031143@qq.com> * Update components/qr-code/index.zh-CN.md Signed-off-by: kiner-tang <1127031143@qq.com> --------- Signed-off-by: kiner-tang <1127031143@qq.com> Co-authored-by: lijianan <574980606@qq.com>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@ant-design/icons';
|
|
import type { QRCodeProps } from 'antd';
|
|
import { Button, Flex, QRCode, Space, Spin } from 'antd';
|
|
|
|
const value = 'https://ant.design';
|
|
|
|
const customStatusRender: QRCodeProps['statusRender'] = (info) => {
|
|
switch (info.status) {
|
|
case 'expired':
|
|
return (
|
|
<div>
|
|
<CloseCircleFilled style={{ color: 'red' }} /> {info.locale?.expired}
|
|
<p>
|
|
<Button type="link" onClick={info.onRefresh}>
|
|
<ReloadOutlined /> {info.locale?.refresh}
|
|
</Button>
|
|
</p>
|
|
</div>
|
|
);
|
|
case 'loading':
|
|
return (
|
|
<Space direction="vertical">
|
|
<Spin />
|
|
<p>Loading...</p>
|
|
</Space>
|
|
);
|
|
case 'scanned':
|
|
return (
|
|
<div>
|
|
<CheckCircleFilled style={{ color: 'green' }} /> {info.locale?.scanned}
|
|
</div>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Flex gap="middle" wrap>
|
|
<QRCode value={value} status="loading" statusRender={customStatusRender} />
|
|
<QRCode
|
|
value={value}
|
|
status="expired"
|
|
onRefresh={() => console.log('refresh')}
|
|
statusRender={customStatusRender}
|
|
/>
|
|
<QRCode value={value} status="scanned" statusRender={customStatusRender} />
|
|
</Flex>
|
|
);
|
|
|
|
export default App;
|