Toast

<script lang="ts">
    import { throttle } from 'es-toolkit';
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
        stack: true,
    };
    const throttleOpts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        onClose: () => throttled.cancel(),
        stack: true,
    };
    const throttled = throttle(() => Toast.info(throttleOpts), 10000, { edges: ['leading'] });
</script>

<div>
    <Button onclick={() => Toast.info(opts)}>Display Toast</Button>
    <br />
    <br />
    <Button onclick={throttled}>Throttled Toast</Button>
</div>

<script lang="ts">
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
    };
</script>

<Button style="color: var(--semi-color-success)" onclick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
<br />
<br />
<Button type="warning" onclick={() => Toast.warning(opts)}>Warning</Button>
<br />
<br />
<Button type="danger" onclick={() => Toast.error(opts)}>Error</Button>

<script lang="ts">
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 3,
        theme: 'light',
    } as const;
</script>

<Button onclick={() => Toast.info(opts)}>Info</Button>
<br />
<br />
<Button style="color: var(--semi-color-success)" onclick={() => Toast.success(opts)}>Success</Button>
<br />
<br />
<Button type="warning" onclick={() => Toast.warning(opts)}>Warning</Button>
<br />
<br />
<Button type="danger" onclick={() => Toast.error(opts)}>Error</Button>

<script lang="ts">
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
        stack: true,
    };
</script>

<Button onclick={() => Toast.info(opts)}>多次点击</Button>

<script lang="ts">
    import { Button, Toast, TypographyText } from '@fibrae/semi-ui-svelte';
</script>

{#snippet single()}
    <span>
        <TypographyText>Hi, Bytedance dance dance</TypographyText>
        <TypographyText link style="margin-left: 12px">更多</TypographyText>
    </span>
{/snippet}
{#snippet multiLine()}
    <div>Hi, Bytedance dance dance</div>
    <div style="margin-top: 8px">
        <TypographyText link>查看详情</TypographyText>
        <TypographyText link style="margin-left: 20px">一会再看</TypographyText>
    </div>
{/snippet}

<Button onclick={() => Toast.info({ content: single, duration: 3 })}>Display Toast</Button>
<br />
<br />
<Button onclick={() => Toast.info({ content: multiLine, duration: 3 })}>Display Multi-line Toast</Button>

<script lang="ts">
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const opts = {
        content: 'Hi, Bytedance dance dance',
        duration: 10,
    };
</script>

<Button onclick={() => Toast.info(opts)}>Close After 10s</Button>

<script lang="ts">
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    let toastId: string | null = null;

    const destroy = () => {
        toastId = null;
    };

    const opts = {
        content: 'Not auto close',
        duration: 0,
        onClose: destroy,
    };

    const show = () => {
        if (toastId) {
            return;
        }
        toastId = Toast.info(opts);
    };

    const hide = () => {
        if (toastId) {
            Toast.close(toastId);
        }
        destroy();
    };
</script>

<Button type="primary" onclick={show}>Show Toast</Button>
<br />
<br />
<Button type="primary" onclick={hide}>Hide Toast</Button>

<script lang="ts">
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const show = () => {
        const id = 'toastid';
        Toast.info({ content: 'Update Content By Id', id });
        setTimeout(() => {
            Toast.success({ content: 'Id By Content Update', id });
        }, 1000);
    };
</script>

<Button type="primary" onclick={show}>Update Content By Id</Button>

<script lang="ts">
    import { getContext, setContext } from 'svelte';
    import { Button, Toast } from '@fibrae/semi-ui-svelte';

    const reachableKey = Symbol('reachable');
    setContext(reachableKey, 'Light');

    const toast = Toast.useToast();
</script>

<!-- The snippet renders inside the toast list mounted with this component's contexts, so it reads the context set above -->
{#snippet reachable()}ReachableContext: {getContext(reachableKey)}{/snippet}

<div>
    <Button onclick={() => toast.success({ duration: 0, content: reachable })}>Hook Toast</Button>
</div>

<script lang="ts">
    import { onDestroy } from 'svelte';
    import { Button, Toast, ToastFactory } from '@fibrae/semi-ui-svelte';

    const ToastInCustomContainer = ToastFactory.create({
        getPopupContainer: () => document.getElementById('custom-toast-container') as HTMLElement,
    });
    onDestroy(() => ToastInCustomContainer.destroyAll());
</script>

<div>
    <Button onclick={() => Toast.info('Toast')}>Default Toast</Button>
    <br />
    <br />
    <Button onclick={() => ToastInCustomContainer.info('Toast in some container')}>Toast in custom container</Button>
    <div id="custom-toast-container">custom container</div>
</div>