diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 1b1c89b844..a0e697db49 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -2470,7 +2470,8 @@ export namespace Components { "_value"?: string; } interface KolToastContainer { - "enqueue": (toast: Toast) => Promise; + "closeAll": () => Promise; + "enqueue": (toast: Toast) => Promise<() => void>; } interface KolTooltipWc { /** diff --git a/packages/components/src/components/toaster/component.tsx b/packages/components/src/components/toaster/component.tsx index 1104069a69..9357e5f617 100644 --- a/packages/components/src/components/toaster/component.tsx +++ b/packages/components/src/components/toaster/component.tsx @@ -22,7 +22,7 @@ export class KolToastContainer implements API { // Stencil requires async function: // eslint-disable-next-line @typescript-eslint/require-await @Method() - async enqueue(toast: Toast) { + public async enqueue(toast: Toast) { const newToastState: ToastState = { toast, status: 'adding', @@ -37,7 +37,7 @@ export class KolToastContainer implements API { this.state = { ...this.state, _toastStates: this.state._toastStates.map((localToastState) => - localToastState === newToastState + localToastState.id === newToastState.id ? { ...localToastState, status: 'settled', @@ -46,13 +46,17 @@ export class KolToastContainer implements API { ), }; }, TRANSITION_TIMEOUT); + + return () => { + this.handleClose(newToastState); + }; } private handleClose(toastState: ToastState) { this.state = { ...this.state, _toastStates: this.state._toastStates.map((localToastState) => { - if (localToastState === toastState) { + if (localToastState.id === toastState.id) { localToastState.status = 'removing'; } return localToastState; @@ -62,12 +66,14 @@ export class KolToastContainer implements API { setTimeout(() => { this.state = { ...this.state, - _toastStates: this.state._toastStates.filter((localToastState) => localToastState !== toastState), + _toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id), }; }, TRANSITION_TIMEOUT); } - private handleCloseAllClick() { + // eslint-disable-next-line @typescript-eslint/require-await + @Method() + public async closeAll() { this.state = { ...this.state, _toastStates: this.state._toastStates.map((localToastState) => ({ @@ -88,7 +94,15 @@ export class KolToastContainer implements API { return ( <> {this.state._toastStates.length > 1 && ( - + { + void this.closeAll(); + }, + }} + > )} {this.state._toastStates.map((toastState) => ( this.handleClose(toastState)} key={toastState.id} /> diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md index cc33fa4e8a..d62cf3e6a4 100644 --- a/packages/components/src/components/toaster/readme.md +++ b/packages/components/src/components/toaster/readme.md @@ -23,6 +23,11 @@ toaster.enqueue({ }); ``` +### Weitere Service-Methoden + +- `closeAll`: Schließt alle Toasts +- `dispose`: Entfernt den Toast Container. Die Toaster-Instanz kann nicht weiter genutzt werden. + ## Verwendung ### Überschrift @@ -37,7 +42,7 @@ Alternativ zur statischen Description können Sie über das Attribut **`_render` HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeben, das eine `close`-Funktion zum Schließen des Toasts bereitstellt. ```ts -void toaster.enqueue({ +const closeToast = toaster.enqueue({ render: (element: HTMLElement, { close }) => { element.textContent = 'Mein Inhalt'; const customCloseButton = document.createElement('button'); @@ -46,6 +51,8 @@ void toaster.enqueue({ customCloseButton.addEventListener('click', close, { once: true }); }, }); + +/* Optional: Toast wieder schließen mit `closeToast()` */ ``` ### Anzeigetyp des Toast @@ -62,12 +69,18 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl ## Methods -### `enqueue(toast: Toast) => Promise` +### `closeAll() => Promise` #### Returns Type: `Promise` +### `enqueue(toast: Toast) => Promise<() => void>` + +#### Returns + +Type: `Promise<() => void>` + ## Dependencies ### Depends on diff --git a/packages/components/src/components/toaster/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx index 852b8b564b..4082d20a63 100644 --- a/packages/components/src/components/toaster/toaster.tsx +++ b/packages/components/src/components/toaster/toaster.tsx @@ -32,13 +32,19 @@ export class ToasterService { } } - public async enqueue(toast: Toast) { + public enqueue(toast: Toast): Promise<() => void> | undefined { /** * We need this condition for SSR. The toast container is not rendered on the server, * so we can't enqueue toasts. */ if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') { - await this.toastContainerElement.enqueue(toast); + return this.toastContainerElement.enqueue(toast); + } + } + + public closeAll(): void { + if (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') { + void this.toastContainerElement.closeAll(); } } } diff --git a/packages/samples/react/src/components/toast/basic.tsx b/packages/samples/react/src/components/toast/basic.tsx index 5d0177b73e..35a557da69 100644 --- a/packages/samples/react/src/components/toast/basic.tsx +++ b/packages/samples/react/src/components/toast/basic.tsx @@ -5,39 +5,63 @@ import { getRoot } from '../../shares/react-roots'; const toaster = ToasterService.getInstance(document); -const handleButtonClickSimple = () => { - void toaster.enqueue({ - description: 'Toasty', - label: `Initial Toast`, - type: 'warning', - }); -}; +export const ToastBasic: FC = () => { + const handleButtonClickSimple = () => { + void toaster.enqueue({ + description: 'Toasty', + label: `Initial Toast`, + type: 'warning', + }); + }; -const handleButtonClickComplex = () => { - void toaster.enqueue({ - render: (element: HTMLElement, { close }) => { - getRoot(element).render( - <> - { - console.log('Toast Button clicked!'); - close(); - }, - }} - /> - , - ); - }, - label: `Initial Toast`, - type: 'warning', - }); -}; + const handleButtonClickComplex = () => { + void toaster.enqueue({ + render: (element: HTMLElement, { close }) => { + getRoot(element).render( + <> + { + console.log('Toast Button clicked!'); + close(); + }, + }} + /> + , + ); + }, + label: `Initial Toast`, + type: 'warning', + }); + }; + + const handleButtonClickOpenAndClose = async () => { + const close = await toaster.enqueue({ + description: 'I will disappear in two seconds...', + label: `Good Bye`, + type: 'warning', + }); -export const ToastBasic: FC = () => ( -
- - -
-); + if (close) { + setTimeout(close, 2000); + } + }; + + const closeAll = () => { + toaster.closeAll(); + }; + + return ( +
+ + +
+
+ void handleButtonClickOpenAndClose() }}> +
+
+ +
+ ); +}; diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-toast-basic-firefox-darwin.png index 839f96df72..c20bfce217 100644 Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-toast-basic-firefox-darwin.png index 6b6ebe7e45..4be721c221 100644 Binary files a/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/bzst/snapshots/theme-bzst/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-darwin.png index f3af345d45..6a039ce8a1 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-toast-basic-firefox-darwin.png index be149fe941..89b5f4c6b2 100644 Binary files a/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-toast-basic-firefox-darwin.png index 49181a8d7d..b86599e41a 100644 Binary files a/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-toast-basic-firefox-darwin.png index 66ce16faa0..35c1fbc4e2 100644 Binary files a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-toast-basic-firefox-darwin.png index fa5d792a29..be69641b71 100644 Binary files a/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-toast-basic-firefox-darwin.png index 2a6f6e286f..65709712f5 100644 Binary files a/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-toast-basic-firefox-darwin.png index 551dd0361d..ad97b527c3 100644 Binary files a/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-toast-basic-firefox-darwin.png differ diff --git a/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-toast-basic-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-toast-basic-firefox-darwin.png index d79d80bc25..79754b4b58 100644 Binary files a/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-toast-basic-firefox-darwin.png and b/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-toast-basic-firefox-darwin.png differ