@gluonjs/molecules


@gluonjs/molecules / packages/molecules/src / ToastController

Interface: ToastController

Properties

active

readonly active: boolean


disposed

readonly disposed: boolean


items

readonly items: readonly ToastRecord[]

Visible records only. Reading this property never changes controller state.

Methods

activate()

activate(): void

Returns

void


add()

add(request): string

Parameters

request

ToastRequest

Returns

string


clear()

clear(): void

Returns

void


deactivate()

deactivate(): void

Returns

void


dismiss()

dismiss(id): void

Parameters

id

string

Returns

void


dispose()

dispose(): void

Returns

void


pause()

pause(id, owner?): void

Parameters

id

string

owner?

string

Returns

void


resume()

resume(id, owner?): void

Parameters

id

string

owner?

string

Returns

void

Example

Own bounded notification lifecycle:

ts
import { Toast, ToastViewport, createToastController, toastStyles, type ToastProps, type ToastRequest, type ToastContent, type ToastController, type ToastControllerOptions, type ToastRecord, type ToastViewportProps, type ToastAnnouncement, type ToastAttributes, type ToastDismissLabel, type ToastPauseOwner, type ToastTone, type ToastViewportAttributes } from '@gluonjs/molecules';
const options: ToastControllerOptions = { maxVisible: 3, maxQueue: 8, minimumDuration: 5000 };
const controller: ToastController = createToastController(options);
controller.activate();
const content: ToastContent = { title: 'Added to bag', children: 'A configured product is ready.', tone: 'success', announcement: 'polite' as ToastAnnouncement };
const request: ToastRequest = { id: 'bag-added', ...content };
const props: ToastProps = { id: 'bag-added', ...content };
const record: ToastRecord = { ...request, id: request.id!, timeout: 5000 };
const attributes: ToastAttributes = { class: 'shop-toast' };
const viewportAttributes: ToastViewportAttributes = { class: 'shop-toast-viewport' };
const dismissLabel: ToastDismissLabel = (item) => `Dismiss ${item.id}`;
const pauseOwner: ToastPauseOwner = 'focus';
const viewport: ToastViewportProps = { controller, attributes: viewportAttributes, dismissLabel };
controller.pause('bag-added', pauseOwner); controller.resume('bag-added', pauseOwner);
console.log(Toast(props), ToastViewport(viewport), toastStyles, content, record, attributes, controller.add(request), controller.items, controller.dismiss('bag-added'), controller.clear(), controller.dispose(), 'success' as ToastTone, 'Toast ToastViewport createToastController ToastProps ToastRequest ToastContent ToastController ToastControllerOptions ToastRecord ToastViewportProps ToastAnnouncement ToastAttributes ToastDismissLabel ToastPauseOwner ToastTone ToastViewportAttributes toastStyles');