Skip to content

Commit

Permalink
feat(core): add ability to close toasts via event incl. a result (#596)
Browse files Browse the repository at this point in the history
* feat(core): add ability to close toasts via event incl. a result

* chore: cleanup
  • Loading branch information
fynnfeldpausch authored Oct 24, 2024
1 parent d1c956b commit 84db69d
Showing 1 changed file with 27 additions and 11 deletions.
38 changes: 27 additions & 11 deletions core/src/components/cat-notification/cat-notification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
interface ToastRef {
toast?: {
showToast: () => void;
hideToast: () => void;
hideToast: (result?: any) => void;

Check failure on line 7 in core/src/components/cat-notification/cat-notification.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
};
}

type ToastResultRef = ToastRef & { result?: any };

Check failure on line 11 in core/src/components/cat-notification/cat-notification.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type

export interface ToastOptions {
/** The appearance mode of the notification. (Default: `dark`) */
mode: 'dark' | 'light';
Expand All @@ -27,8 +29,8 @@ export interface ToastOptions {
onAction: (toast: ToastRef) => void;
/** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */
onClick: (toast: ToastRef) => void;
/** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */
onDismiss: (toast: ToastRef) => void;
/** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument and an optional result as second argument. */
onDismiss: (toast: ToastRef, result?: any) => void;

Check failure on line 33 in core/src/components/cat-notification/cat-notification.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
}

/**
Expand All @@ -49,17 +51,23 @@ export class CatNotificationService {
return CatNotificationService.instance;
}

show(content: string | Node, options?: Partial<ToastOptions>): () => void {
const ref: ToastRef = {};
show(content: string | Node, options?: Partial<ToastOptions>): (result?: any) => void {

Check failure on line 54 in core/src/components/cat-notification/cat-notification.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
const ref: ToastResultRef = {};
const toastContent = this.getNode(content, ref, options);
const toastOptions = this.getOptions(toastContent, ref, options);
const toast = Toastify(toastOptions);
ref.toast = toast;
toast.showToast();
return () => toast.hideToast();
ref.toast = {
showToast: () => toast.showToast(),
hideToast: (result?: any) => {

Check failure on line 61 in core/src/components/cat-notification/cat-notification.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
ref.result = result;
toast.hideToast();
}
};
ref.toast.showToast();
return (result?: any) => ref.toast?.hideToast(result);

Check failure on line 67 in core/src/components/cat-notification/cat-notification.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
}

private getNode(content: string | Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {
private getNode(content: string | Node, ref: ToastResultRef, options?: Partial<ToastOptions>): HTMLElement {
const template = document.createElement('template');
template.innerHTML = `<div class="cat-toastify-wrapper">
${options?.icon ? `<cat-icon class="cat-toastify-icon" icon="${options.icon}" size="l"></cat-icon>` : ''}
Expand Down Expand Up @@ -94,10 +102,15 @@ export class CatNotificationService {
}
}

node.addEventListener('cat-close', event => {
const { detail } = (event as CustomEvent) || {};
ref.toast?.hideToast(detail);
});

return node;
}

private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {
private getOptions(node: Node, ref: ToastResultRef, options?: Partial<ToastOptions>): Options {
const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [
Options['gravity'],
Options['position']
Expand All @@ -112,7 +125,10 @@ export class CatNotificationService {
className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',
stopOnFocus: true,
onClick: () => options?.onClick?.(ref),
callback: () => options?.onDismiss?.(ref),
callback: () => {
const { toast, result } = ref;
options?.onDismiss?.({ toast }, result);
},
offset: {
x: '1rem',
y: '1rem'
Expand Down

0 comments on commit 84db69d

Please sign in to comment.