ant-design/components/qr-code/demo/customStatusRender.tsx
kiner-tang 3851af9607
feat: support custom status render in qrcode (#49563)
* 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>
2024-07-12 10:49:47 +08:00

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;