Skip to content

Commit

Permalink
demo: update Drawer demo (ant-design#48935)
Browse files Browse the repository at this point in the history
  • Loading branch information
li-jia-nan authored May 15, 2024
1 parent 08e39ba commit 84b072e
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2788,7 +2788,7 @@ Array [
type="button"
>
<span>
Open
Open Drawer
</span>
</button>,
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
type="button"
>
<span>
Open
Open Drawer
</span>
</button>
`;
Expand Down
32 changes: 12 additions & 20 deletions components/drawer/demo/loading.tsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,36 @@
import React from 'react';
import type { DrawerProps } from 'antd';
import { Button, Drawer } from 'antd';

const App: React.FC = () => {
const [open, setOpen] = React.useState(false);
const [loading, setLoading] = React.useState<DrawerProps['loading']>(true);
const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
const [open, setOpen] = React.useState<boolean>(false);
const [loading, setLoading] = React.useState<boolean>(true);

const clearTimer = () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
};

const showDrawer = () => {
const showLoading = () => {
setOpen(true);
setLoading(true);
timerRef.current = setTimeout(() => {

// Simple loading mock. You should add cleanup logic in real world.
setTimeout(() => {
setLoading(false);
}, 2000);
};

React.useEffect(() => clearTimer, []);

return (
<>
<Button type="primary" onClick={showDrawer}>
Open
<Button type="primary" onClick={showLoading}>
Open Drawer
</Button>
<Drawer
closable
destroyOnClose
title="Basic Drawer"
title={<p>Loading Drawer</p>}
placement="right"
closable={false}
open={open}
loading={loading}
onClose={() => setOpen(false)}
>
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => setLoading(true)}>
set Loading true
<Button type="primary" style={{ marginBottom: 16 }} onClick={showLoading}>
Reload
</Button>
<p>Some contents...</p>
<p>Some contents...</p>
Expand Down

0 comments on commit 84b072e

Please sign in to comment.