69 lines
1.9 KiB
Svelte
69 lines
1.9 KiB
Svelte
|
<script>
|
||
|
|
import { fly } from 'svelte/transition';
|
||
|
|
import Information24 from 'carbon-icons-svelte/lib/Information24';
|
||
|
|
import Warning24 from 'carbon-icons-svelte/lib/Warning24';
|
||
|
|
import CheckmarkOutline24 from 'carbon-icons-svelte/lib/CheckmarkOutline24';
|
||
|
|
|
||
|
|
import CloseButton from '../Buttons/Close/index.svelte';
|
||
|
|
import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
|
||
|
|
import { snackbarStore } from './store';
|
||
|
|
|
||
|
|
let severityColor = SNACKBAR_SEVERITY_COLOR[$snackbarStore.severity];
|
||
|
|
|
||
|
|
function handleClose() {
|
||
|
|
if (typeof $snackbarStore.handleClose === 'number') {
|
||
|
|
$snackbarStore.handleClose();
|
||
|
|
}
|
||
|
|
|
||
|
|
$snackbarStore.open = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// When open is true trigger autoHideDuration
|
||
|
|
function handleOpen(open) {
|
||
|
|
if (!open) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { autoHideDuration } = $snackbarStore;
|
||
|
|
|
||
|
|
if (typeof autoHideDuration === 'number') {
|
||
|
|
setTimeout(handleClose, autoHideDuration);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$: handleOpen($snackbarStore.open);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if $snackbarStore.open}
|
||
|
|
<div
|
||
|
|
transition:fly={{ y: 200, duration: 1000 }}
|
||
|
|
class="root text-white rounded-md flex justify-between items-center z-50 absolute {severityColor}"
|
||
|
|
>
|
||
|
|
<div class="flex items-center">
|
||
|
|
{#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
|
||
|
|
<CheckmarkOutline24 class="carbon-icon" />
|
||
|
|
{:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
|
||
|
|
<Warning24 class="carbon-icon" />
|
||
|
|
{:else}
|
||
|
|
<Information24 class="carbon-icon" />
|
||
|
|
{/if}
|
||
|
|
<p class="ml-2 text-lg">{$snackbarStore.message}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<CloseButton onClick={handleClose} contained={true} color="text-white" />
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.root {
|
||
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||
|
|
left: 50%;
|
||
|
|
right: auto;
|
||
|
|
bottom: 24px;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
min-width: 288px;
|
||
|
|
padding: 6px 16px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
</style>
|