mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 12:38:58 +08:00
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;
|