ant-design/components/qr-code/demo/customStatusRender.tsx

53 lines
1.4 KiB
TypeScript
Raw Normal View History

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;