-
Notifications
You must be signed in to change notification settings - Fork 103
/
ToastContainer.svelte
45 lines (43 loc) · 1.79 KB
/
ToastContainer.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script lang="ts">
import { Alert, Toast } from '@ui'
import { notifications, removeDisplayNotification } from '@auxiliary/notification/stores'
import { fade } from 'svelte/transition'
import { Swiper } from '@components'
$: toasts = $notifications.map((notification) => ({
type: notification.type,
alert: notification.alert,
message: notification.message,
subMessage: notification.subMessage,
progress: notification.progress,
id: notification.id,
actions: notification.actions.map((action, actionIndex) => ({
...action,
onClick: () => action.callback(notification, actionIndex),
})),
}))
</script>
{#if toasts?.length > 0}
<toast-container class="fixed top-0 flex flex-col z-10 w-full p-5" transition:fade|local={{ duration: 100 }}>
<ul class="space-y-2">
{#each toasts as toast (toast.id)}
<li transition:fade|local={{ duration: 100 }}>
<Swiper on:close={() => removeDisplayNotification(toast.id)}>
{#if toast.alert}
<Alert type={toast.type} message={toast.message} id={toast.id} showDismiss />
{:else}
<Toast
type={toast.type}
message={toast.message}
subMessage={toast.subMessage}
progress={toast.progress}
actions={toast.actions}
id={toast.id}
showDismiss
/>
{/if}
</Swiper>
</li>
{/each}
</ul>
</toast-container>
{/if}