test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

Replace part of the Demo of the notification with the hooks (#35710)

Browse Source 
* docs: modify the part demo to hooks

* docs: modify the part demo to hooks
This commit is contained in:
PCCCCCCC 2022-05-25 10:14:51 +08:00 committed by GitHub
parent 2077af6795
commit 1d09d6fe0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 205 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/notification/demo/custom-icon.md
View File

@ -18,20 +18,27 @@ import { SmileOutlined } from '@ant-design/icons';
import { Button, notification } from 'antd';
import React from 'react';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
const openNotification = () => {
api.open({
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```

40
components/notification/demo/custom-style.md
View File

@ -17,23 +17,29 @@ The style and className are available to customize Notification.
import { Button, notification } from 'antd';
import React from 'react';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
className: 'custom-class',
style: {
width: 600,
},
});
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
className: 'custom-class',
style: {
width: 600,
},
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
export default App;
```

34
components/notification/demo/duration.md
View File

@ -17,21 +17,27 @@ title:
import { Button, notification } from 'antd';
import React from 'react';
const openNotification = () => {
const args = {
message: 'Notification Title',
description:
'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
duration: 0,
};
notification.open(args);
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
const openNotification = () => {
api.open({
message: 'Notification Title',
description:
'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
duration: 0,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```

121
components/notification/demo/placement.md
View File

@ -26,65 +26,70 @@ import { Button, Divider, notification, Space } from 'antd';
import type { NotificationPlacement } from 'antd/lib/notification';
import React from 'react';
const openNotification = (placement: NotificationPlacement) => {
notification.info({
message: `Notification ${placement}`,
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
placement,
});
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const App: React.FC = () => (
<>
<Space>
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
top
</Button>
<Button
type="primary"
onClick={() => openNotification('bottom')}
icon={<BorderBottomOutlined />}
>
bottom
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('topLeft')}
icon={<RadiusUpleftOutlined />}
>
topLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('topRight')}
icon={<RadiusUprightOutlined />}
>
topRight
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('bottomLeft')}
icon={<RadiusBottomleftOutlined />}
>
bottomLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight
</Button>
</Space>
</>
);
const openNotification = (placement: NotificationPlacement) => {
api.info({
message: `Notification ${placement}`,
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
placement,
});
};
return (
<>
{contextHolder}
<Space>
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
top
</Button>
<Button
type="primary"
onClick={() => openNotification('bottom')}
icon={<BorderBottomOutlined />}
>
bottom
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('topLeft')}
icon={<RadiusUpleftOutlined />}
>
topLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('topRight')}
icon={<RadiusUprightOutlined />}
>
topRight
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('bottomLeft')}
icon={<RadiusBottomleftOutlined />}
>
bottomLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight
</Button>
</Space>
</>
);
};
export default App;
```

42
components/notification/demo/update.md
View File

@ -19,27 +19,33 @@ import React from 'react';
const key = 'updatable';
const openNotification = () => {
notification.open({
key,
message: 'Notification Title',
description: 'description.',
});
setTimeout(() => {
notification.open({
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
key,
message: 'New Title',
description: 'New description.',
message: 'Notification Title',
description: 'description.',
});
}, 1000);
};
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
setTimeout(() => {
api.open({
key,
message: 'New Title',
description: 'New description.',
});
}, 1000);
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```

59
components/notification/demo/with-btn.md
View File

@ -23,33 +23,40 @@ const close = () => {
);
};
const openNotification = () => {
const key = `open${Date.now()}`;
const btn = (
<Space>
<Button type="link" size="small" onClick={() => notification.destroy()}>
Destroy All
</Button>
<Button type="primary" size="small" onClick={() => notification.destroy(key)}>
Confirm
</Button>
</Space>
);
notification.open({
message: 'Notification Title',
description:
'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
});
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
const openNotification = () => {
const key = `open${Date.now()}`;
const btn = (
<Space>
<Button type="link" size="small" onClick={() => notification.destroy()}>
Destroy All
</Button>
<Button type="primary" size="small" onClick={() => notification.destroy(key)}>
Confirm
</Button>
</Space>
);
api.open({
message: 'Notification Title',
description:
'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```

37
components/notification/demo/with-icon.md
View File

@ -19,22 +19,29 @@ import React from 'react';
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const openNotificationWithIcon = (type: NotificationType) => {
notification[type]({
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const App: React.FC = () => (
<Space>
<Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
<Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
<Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
</Space>
);
const openNotificationWithIcon = (type: NotificationType) => {
api[type]({
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
return (
<>
{contextHolder}
<Space>
<Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
<Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
<Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
</Space>
</>
);
};
export default App;
```