Skip to content

Commit ddb747a

Browse files
tanerengiiintanerengiiin
authored
New Component Toast (#8286)
* feat: add Toast component * feat: add toast demo & doc
1 parent 541f1d5 commit ddb747a

60 files changed

Lines changed: 2856 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/demo/toast/action-demo.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
2+
import { Button } from 'primereact/button';
3+
import { toast, Toast } from 'primereact/toast';
4+
5+
function ActionToast() {
6+
return (
7+
<Toast group="action">
8+
<Toast.Portal>
9+
<Toast.Region>
10+
{({ toast }: ToastRegionInstance) =>
11+
toast?.toasts.map((toast: ToastType) => (
12+
<Toast.Item key={toast.id} data={toast}>
13+
<div className="flex items-start gap-2">
14+
<Toast.Icon />
15+
<div className="flex-1">
16+
<Toast.Title className="mb-1 -mt-0.5" />
17+
<Toast.Description />
18+
<Toast.Action as={Button} size="small" className="mt-4" />
19+
</div>
20+
</div>
21+
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
22+
<i className="pi pi-times"></i>
23+
</Toast.Close>
24+
</Toast.Item>
25+
))
26+
}
27+
</Toast.Region>
28+
</Toast.Portal>
29+
</Toast>
30+
);
31+
}
32+
33+
function ActionDemo() {
34+
const handleCreateToast = () => {
35+
const id = toast({
36+
title: 'Changes saved',
37+
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
38+
group: 'action',
39+
action: {
40+
children: 'Undo',
41+
onClick: () => {
42+
toast.remove(id);
43+
toast({
44+
title: 'Changes saved',
45+
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
46+
group: 'action'
47+
});
48+
}
49+
}
50+
});
51+
};
52+
53+
return (
54+
<div className="card flex flex-wrap items-center justify-center gap-4">
55+
<Button onClick={handleCreateToast} variant="outlined">
56+
Create toast with action
57+
</Button>
58+
<ActionToast />
59+
</div>
60+
);
61+
}
62+
63+
export default ActionDemo;

‎apps/showcase/demo/toast/basic-demo.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
2+
import { Button } from 'primereact/button';
3+
import { toast, Toast } from 'primereact/toast';
4+
5+
function BasicToast() {
6+
return (
7+
<Toast richColors>
8+
<Toast.Portal>
9+
<Toast.Region>
10+
{({ toast }: ToastRegionInstance) =>
11+
toast?.toasts.map((toast: ToastType) => (
12+
<Toast.Item key={toast.id} data={toast}>
13+
<div className="flex items-start gap-2">
14+
<Toast.Icon />
15+
<div className="flex-1">
16+
<Toast.Title className="mb-1 -mt-0.5" />
17+
<Toast.Description />
18+
<Toast.Action as={Button} size="small" className="mt-4" />
19+
</div>
20+
</div>
21+
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
22+
<i className="pi pi-times"></i>
23+
</Toast.Close>
24+
</Toast.Item>
25+
))
26+
}
27+
</Toast.Region>
28+
</Toast.Portal>
29+
</Toast>
30+
);
31+
}
32+
33+
function BasicDemo() {
34+
return (
35+
<div className="card flex flex-wrap items-center justify-center gap-4">
36+
<Button
37+
onClick={() =>
38+
toast({
39+
title: 'Changes saved',
40+
description: 'Are you sure you would like to remove this user? This action cannot be undone.'
41+
})
42+
}
43+
variant="outlined"
44+
>
45+
Create toast
46+
</Button>
47+
<BasicToast />
48+
</div>
49+
);
50+
}
51+
52+
export default BasicDemo;

‎apps/showcase/demo/toast/position-demo.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
2+
import { Button } from 'primereact/button';
3+
import { toast, Toast } from 'primereact/toast';
4+
5+
function PositionToast({ position = 'bottom-right' }: { position: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' }) {
6+
return (
7+
<Toast position={position} group={position}>
8+
<Toast.Portal>
9+
<Toast.Region>
10+
{({ toast }: ToastRegionInstance) =>
11+
toast?.toasts.map((toast: ToastType) => (
12+
<Toast.Item key={toast.id} data={toast}>
13+
<div className="flex items-start gap-2">
14+
<Toast.Icon />
15+
<div className="flex-1">
16+
<Toast.Title className="mb-1 -mt-0.5" />
17+
<Toast.Description />
18+
<Toast.Action as={Button} size="small" className="mt-4" />
19+
</div>
20+
</div>
21+
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
22+
<i className="pi pi-times"></i>
23+
</Toast.Close>
24+
</Toast.Item>
25+
))
26+
}
27+
</Toast.Region>
28+
</Toast.Portal>
29+
</Toast>
30+
);
31+
}
32+
33+
function PositionDemo() {
34+
const createToast = (group: string) => {
35+
toast({
36+
title: 'Changes saved',
37+
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
38+
group
39+
});
40+
};
41+
42+
return (
43+
<div className="card flex flex-wrap items-center justify-center gap-4">
44+
<Button onClick={() => createToast('top-left')} variant="outlined">
45+
Top Left
46+
</Button>
47+
<Button onClick={() => createToast('top-center')} variant="outlined">
48+
Top Center
49+
</Button>
50+
<Button onClick={() => createToast('top-right')} variant="outlined">
51+
Top Right
52+
</Button>
53+
<Button onClick={() => createToast('bottom-left')} variant="outlined">
54+
Bottom Left
55+
</Button>
56+
<Button onClick={() => createToast('bottom-center')} variant="outlined">
57+
Bottom Center
58+
</Button>
59+
<Button onClick={() => createToast('bottom-right')} variant="outlined">
60+
Bottom Right
61+
</Button>
62+
63+
<PositionToast position="top-left" />
64+
<PositionToast position="top-right" />
65+
<PositionToast position="top-center" />
66+
<PositionToast position="bottom-left" />
67+
<PositionToast position="bottom-right" />
68+
<PositionToast position="bottom-center" />
69+
</div>
70+
);
71+
}
72+
73+
export default PositionDemo;

‎apps/showcase/demo/toast/rich-colors-demo.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
2+
import { Button } from 'primereact/button';
3+
import { toast, Toast } from 'primereact/toast';
4+
5+
function RichColorsToast() {
6+
return (
7+
<Toast richColors group="rich-colors">
8+
<Toast.Portal>
9+
<Toast.Region>
10+
{({ toast }: ToastRegionInstance) =>
11+
toast?.toasts.map((toastItem: ToastType) => (
12+
<Toast.Item key={toastItem.id} data={toastItem}>
13+
<div className="flex items-start gap-2">
14+
<Toast.Icon />
15+
<div className="flex-1">
16+
<Toast.Title className="mb-1 -mt-0.5" />
17+
<Toast.Description />
18+
<Toast.Action as={Button} size="small" className="mt-4" />
19+
</div>
20+
</div>
21+
<Toast.Close as={Button} iconOnly severity={toastItem.variant ?? 'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
22+
<i className="pi pi-times"></i>
23+
</Toast.Close>
24+
</Toast.Item>
25+
))
26+
}
27+
</Toast.Region>
28+
</Toast.Portal>
29+
</Toast>
30+
);
31+
}
32+
33+
function RichColorsDemo() {
34+
return (
35+
<div className="card flex flex-wrap items-center justify-center gap-4">
36+
<Button variant="outlined" severity="info" onClick={() => toast.info({ title: 'Info', description: 'This is an info toast', group: 'rich-colors' })}>
37+
Info
38+
</Button>
39+
<Button
40+
variant="outlined"
41+
severity="success"
42+
onClick={() =>
43+
toast.success({
44+
title: 'Success',
45+
description: 'This is a success toast',
46+
group: 'rich-colors'
47+
})
48+
}
49+
>
50+
Success
51+
</Button>
52+
<Button variant="outlined" severity="danger" onClick={() => toast.danger({ title: 'Error', description: 'This is an error toast', group: 'rich-colors' })}>
53+
Danger
54+
</Button>
55+
<Button variant="outlined" severity="warn" onClick={() => toast.warn({ title: 'Warning', description: 'This is a warning toast', group: 'rich-colors' })}>
56+
Warn
57+
</Button>
58+
<RichColorsToast />
59+
</div>
60+
);
61+
}
62+
63+
export default RichColorsDemo;

0 commit comments

Comments
 (0)