mirror of https://github.com/immich-app/immich.git
feat: toasts (#23298)
Jason Rasmussen
GitHub
parent
106effca2e
commit
52596255c8
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { Button, ToastContainer, ToastContent, type Color, type IconLike } from '@immich/ui';
|
||||
|
||||
type Props = {
|
||||
onClose?: () => void;
|
||||
color?: Color;
|
||||
title: string;
|
||||
icon?: IconLike | false;
|
||||
description: string;
|
||||
button?: {
|
||||
text: string;
|
||||
color?: Color;
|
||||
onClick: () => void;
|
||||
};
|
||||
};
|
||||
|
||||
const { onClose, title, description, color, icon, button }: Props = $props();
|
||||
|
||||
const onClick = () => {
|
||||
button?.onClick();
|
||||
onClose?.();
|
||||
};
|
||||
</script>
|
||||
|
||||
<ToastContainer {color}>
|
||||
<ToastContent {color} {title} {description} {onClose} {icon}>
|
||||
{#if button}
|
||||
<div class="flex justify-end gap-2 px-2 pb-2">
|
||||
<Button color={button.color ?? 'secondary'} size="small" onclick={onClick}>{button.text}</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</ToastContent>
|
||||
</ToastContainer>
|
||||
@ -1,86 +0,0 @@
|
||||
import NotificationComponentTest from '$lib/components/shared-components/notification/__tests__/notification-component-test.svelte';
|
||||
import '@testing-library/jest-dom';
|
||||
import { cleanup, render, type RenderResult } from '@testing-library/svelte';
|
||||
import { NotificationType } from '../notification';
|
||||
import NotificationCard from '../notification-card.svelte';
|
||||
|
||||
describe('NotificationCard component', () => {
|
||||
let sut: RenderResult<typeof NotificationCard>;
|
||||
|
||||
it('disposes timeout if already removed from the DOM', () => {
|
||||
vi.spyOn(globalThis, 'clearTimeout');
|
||||
|
||||
sut = render(NotificationCard, {
|
||||
notification: {
|
||||
id: 1234,
|
||||
message: 'Notification message',
|
||||
timeout: 1000,
|
||||
type: NotificationType.Info,
|
||||
action: { type: 'discard' },
|
||||
},
|
||||
});
|
||||
|
||||
cleanup();
|
||||
expect(globalThis.clearTimeout).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows message and title', () => {
|
||||
sut = render(NotificationCard, {
|
||||
notification: {
|
||||
id: 1234,
|
||||
message: 'Notification message',
|
||||
timeout: 1000,
|
||||
type: NotificationType.Info,
|
||||
action: { type: 'discard' },
|
||||
},
|
||||
});
|
||||
|
||||
expect(sut.getByTestId('title')).toHaveTextContent('info');
|
||||
expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
|
||||
});
|
||||
|
||||
it('makes all buttons non-focusable and hidden from screen readers', () => {
|
||||
sut = render(NotificationCard, {
|
||||
notification: {
|
||||
id: 1234,
|
||||
message: 'Notification message',
|
||||
timeout: 1000,
|
||||
type: NotificationType.Info,
|
||||
action: { type: 'discard' },
|
||||
button: {
|
||||
text: 'button',
|
||||
onClick: vi.fn(),
|
||||
},
|
||||
},
|
||||
});
|
||||
const buttons = sut.container.querySelectorAll('button');
|
||||
|
||||
expect(buttons).toHaveLength(2);
|
||||
for (const button of buttons) {
|
||||
expect(button.getAttribute('tabindex')).toBe('-1');
|
||||
expect(button.getAttribute('aria-hidden')).toBe('true');
|
||||
}
|
||||
});
|
||||
|
||||
it('shows title and renders component', () => {
|
||||
sut = render(NotificationCard, {
|
||||
notification: {
|
||||
id: 1234,
|
||||
type: NotificationType.Info,
|
||||
timeout: 1,
|
||||
action: { type: 'discard' },
|
||||
component: {
|
||||
type: NotificationComponentTest,
|
||||
props: {
|
||||
href: 'link',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(sut.getByTestId('title')).toHaveTextContent('info');
|
||||
expect(sut.getByTestId('message').innerHTML.replaceAll('<!---->', '')).toEqual(
|
||||
'Notification <b>message</b> with <a href="link">link</a>',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
href: string;
|
||||
}
|
||||
|
||||
let { href }: Props = $props();
|
||||
</script>
|
||||
|
||||
Notification <b>message</b> with <a {href}>link</a>
|
||||
@ -1,41 +0,0 @@
|
||||
import { getAnimateMock } from '$lib/__mocks__/animate.mock';
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, waitFor, type RenderResult } from '@testing-library/svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import { NotificationType, notificationController } from '../notification';
|
||||
import NotificationList from '../notification-list.svelte';
|
||||
|
||||
function _getNotificationListElement(): HTMLAnchorElement | null {
|
||||
return document.body.querySelector('#notification-list');
|
||||
}
|
||||
|
||||
describe('NotificationList component', () => {
|
||||
beforeAll(() => {
|
||||
Element.prototype.animate = getAnimateMock();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it('shows a notification when added and closes it automatically after the delay timeout', async () => {
|
||||
const sut: RenderResult<NotificationList> = render(NotificationList, { intro: false });
|
||||
const status = await sut.findAllByRole('status');
|
||||
|
||||
expect(status).toHaveLength(1);
|
||||
expect(_getNotificationListElement()).not.toBeInTheDocument();
|
||||
|
||||
notificationController.show({
|
||||
message: 'Notification',
|
||||
type: NotificationType.Info,
|
||||
timeout: 1,
|
||||
});
|
||||
|
||||
await waitFor(() => expect(_getNotificationListElement()).toBeInTheDocument());
|
||||
await waitFor(() => expect(_getNotificationListElement()?.children).toHaveLength(1));
|
||||
expect(get(notificationController.notificationList)).toHaveLength(1);
|
||||
|
||||
await waitFor(() => expect(_getNotificationListElement()).not.toBeInTheDocument());
|
||||
expect(get(notificationController.notificationList)).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
@ -1,125 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
isComponentNotification,
|
||||
notificationController,
|
||||
NotificationType,
|
||||
type ComponentNotification,
|
||||
type Notification,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { Button, Icon, IconButton, type Color } from '@immich/ui';
|
||||
import { mdiCloseCircleOutline, mdiInformationOutline, mdiWindowClose } from '@mdi/js';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
interface Props {
|
||||
notification: Notification | ComponentNotification;
|
||||
}
|
||||
|
||||
let { notification }: Props = $props();
|
||||
|
||||
let icon = $derived(notification.type === NotificationType.Error ? mdiCloseCircleOutline : mdiInformationOutline);
|
||||
let hoverStyle = $derived(notification.action.type === 'discard' ? 'hover:cursor-pointer' : '');
|
||||
|
||||
const backgroundColor: Record<NotificationType, string> = {
|
||||
[NotificationType.Info]: '#E0E2F0',
|
||||
[NotificationType.Error]: '#FBE8E6',
|
||||
[NotificationType.Warning]: '#FFF6DC',
|
||||
};
|
||||
|
||||
const borderColor: Record<NotificationType, string> = {
|
||||
[NotificationType.Info]: '#D8DDFF',
|
||||
[NotificationType.Error]: '#F0E8E7',
|
||||
[NotificationType.Warning]: '#FFE6A5',
|
||||
};
|
||||
|
||||
const primaryColor: Record<NotificationType, string> = {
|
||||
[NotificationType.Info]: '#4250AF',
|
||||
[NotificationType.Error]: '#E64132',
|
||||
[NotificationType.Warning]: '#D08613',
|
||||
};
|
||||
|
||||
const colors: Record<NotificationType, Color> = {
|
||||
[NotificationType.Info]: 'primary',
|
||||
[NotificationType.Error]: 'danger',
|
||||
[NotificationType.Warning]: 'warning',
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const timeoutId = setTimeout(discard, notification.timeout);
|
||||
return () => clearTimeout(timeoutId);
|
||||
});
|
||||
|
||||
const discard = () => {
|
||||
notificationController.removeNotificationById(notification.id);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (notification.action.type === 'discard') {
|
||||
discard();
|
||||
}
|
||||
};
|
||||
|
||||
const handleButtonClick = () => {
|
||||
const button = notification.button;
|
||||
if (button) {
|
||||
discard();
|
||||
return notification.button?.onClick();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
transition:fade={{ duration: 250 }}
|
||||
style:background-color={backgroundColor[notification.type]}
|
||||
style:border-color={borderColor[notification.type]}
|
||||
class="border mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md {hoverStyle}"
|
||||
onclick={handleClick}
|
||||
onkeydown={handleClick}
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex place-items-center gap-2">
|
||||
<Icon {icon} color={primaryColor[notification.type]} size="20" />
|
||||
<h2 style:color={primaryColor[notification.type]} class="font-medium" data-testid="title">
|
||||
{#if notification.type == NotificationType.Error}{$t('error')}
|
||||
{:else if notification.type == NotificationType.Warning}{$t('warning')}
|
||||
{:else if notification.type == NotificationType.Info}{$t('info')}{/if}
|
||||
</h2>
|
||||
</div>
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
shape="round"
|
||||
color="secondary"
|
||||
icon={mdiWindowClose}
|
||||
aria-label={$t('close')}
|
||||
class="dark:text-immich-dark-gray"
|
||||
size="medium"
|
||||
onclick={discard}
|
||||
aria-hidden={true}
|
||||
tabindex={-1}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="whitespace-pre-wrap ps-[28px] pe-[16px] text-sm text-black/80" data-testid="message">
|
||||
{#if isComponentNotification(notification)}
|
||||
<notification.component.type {...notification.component.props} />
|
||||
{:else}
|
||||
{notification.message}
|
||||
{/if}
|
||||
</p>
|
||||
|
||||
{#if notification.button}
|
||||
<p class="ps-[28px] mt-2.5 light text-light">
|
||||
<Button
|
||||
size="small"
|
||||
color={colors[notification.type]}
|
||||
onclick={handleButtonClick}
|
||||
aria-hidden="true"
|
||||
tabindex={-1}
|
||||
>
|
||||
{notification.button.text}
|
||||
</Button>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Portal from '$lib/elements/Portal.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { notificationController } from './notification';
|
||||
import NotificationCard from './notification-card.svelte';
|
||||
|
||||
const { notificationList } = notificationController;
|
||||
</script>
|
||||
|
||||
<Portal>
|
||||
<div role="status" aria-relevant="additions" aria-label={$t('notifications')}>
|
||||
{#if $notificationList.length > 0}
|
||||
<section transition:fade={{ duration: 250 }} id="notification-list" class="fixed end-5 top-[80px]">
|
||||
{#each $notificationList as notification (notification.id)}
|
||||
<div animate:flip={{ duration: 250, easing: quintOut }}>
|
||||
<NotificationCard {notification} />
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</Portal>
|
||||
@ -1,87 +0,0 @@
|
||||
import type { Component as ComponentType } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export enum NotificationType {
|
||||
Info = 'Info',
|
||||
Error = 'Error',
|
||||
Warning = 'Warning',
|
||||
}
|
||||
|
||||
export type NotificationButton = {
|
||||
text: string;
|
||||
onClick: () => unknown;
|
||||
};
|
||||
|
||||
export type Notification = {
|
||||
id: number;
|
||||
type: NotificationType;
|
||||
message: string;
|
||||
/** The action to take when the notification is clicked */
|
||||
action: NotificationAction;
|
||||
button?: NotificationButton;
|
||||
/** Timeout in milliseconds */
|
||||
timeout: number;
|
||||
};
|
||||
|
||||
type DiscardAction = { type: 'discard' };
|
||||
type NoopAction = { type: 'noop' };
|
||||
|
||||
export type NotificationAction = DiscardAction | NoopAction;
|
||||
|
||||
type Props = Record<string, unknown>;
|
||||
type Component<T extends Props> = {
|
||||
type: ComponentType<T>;
|
||||
props: T;
|
||||
};
|
||||
|
||||
type BaseNotificationOptions<T, R extends keyof T> = Partial<Omit<T, 'id'>> & Pick<T, R>;
|
||||
|
||||
export type NotificationOptions = BaseNotificationOptions<Notification, 'message'>;
|
||||
export type ComponentNotificationOptions<T extends Props> = BaseNotificationOptions<
|
||||
ComponentNotification<T>,
|
||||
'component'
|
||||
>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export type ComponentNotification<T extends Props = any> = Omit<Notification, 'message'> & {
|
||||
component: Component<T>;
|
||||
};
|
||||
|
||||
export const isComponentNotification = <T extends Props>(
|
||||
notification: Notification | ComponentNotification<T>,
|
||||
): notification is ComponentNotification<T> => {
|
||||
return 'component' in notification;
|
||||
};
|
||||
|
||||
function createNotificationList() {
|
||||
const notificationList = writable<(Notification | ComponentNotification)[]>([]);
|
||||
let count = 1;
|
||||
|
||||
const show = <T>(options: T extends Props ? ComponentNotificationOptions<T> : NotificationOptions) => {
|
||||
notificationList.update((currentList) => {
|
||||
currentList.push({
|
||||
id: count++,
|
||||
type: NotificationType.Info,
|
||||
action: {
|
||||
type: options.button ? 'noop' : 'discard',
|
||||
},
|
||||
timeout: 3000,
|
||||
...options,
|
||||
});
|
||||
|
||||
return currentList;
|
||||
});
|
||||
};
|
||||
|
||||
const removeNotificationById = (id: number) => {
|
||||
notificationList.update((currentList) => currentList.filter((n) => n.id !== id));
|
||||
};
|
||||
|
||||
return {
|
||||
show,
|
||||
removeNotificationById,
|
||||
notificationList,
|
||||
};
|
||||
}
|
||||
|
||||
export const notificationController = createNotificationList();
|
||||
Loading…
Reference in New Issue