mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00

* refactor: Unified destroyOnHidden API * fix: fix type * fix: fix type * fix: fix * fix: fix * fix: fix * doc: update doc * doc: update doc * demo: update demo
44 lines
1016 B
TypeScript
44 lines
1016 B
TypeScript
import React from 'react';
|
|
import { Button, Drawer } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const [open, setOpen] = React.useState<boolean>(false);
|
|
const [loading, setLoading] = React.useState<boolean>(true);
|
|
|
|
const showLoading = () => {
|
|
setOpen(true);
|
|
setLoading(true);
|
|
|
|
// Simple loading mock. You should add cleanup logic in real world.
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button type="primary" onClick={showLoading}>
|
|
Open Drawer
|
|
</Button>
|
|
<Drawer
|
|
closable
|
|
destroyOnHidden
|
|
title={<p>Loading Drawer</p>}
|
|
placement="right"
|
|
open={open}
|
|
loading={loading}
|
|
onClose={() => setOpen(false)}
|
|
>
|
|
<Button type="primary" style={{ marginBottom: 16 }} onClick={showLoading}>
|
|
Reload
|
|
</Button>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
<p>Some contents...</p>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|