refactor(snackbar): pass function for action handler

Author: njfamirm

packages/snackbar/README.md

@@ -34,10 +34,11 @@ import {snackbarSignal} from '@nexim/snackbar';
 
 snackbarSignal.notify({
   content: 'This is a snackbar message',
-  // The following properties are optional.
   action: {
     label: 'Undo',
-    signalId: 'undo-handler',
+    handler: () => {
+      console.log('Action button clicked');
+    },
   },
   duration: '5s',
   addCloseButton: true,

packages/snackbar/src/lib/handler.ts

@@ -5,7 +5,7 @@ import {waitForTimeout} from '@alwatr/wait';
 import {snackbarActionButtonClickedSignal, snackbarSignal} from './signal.js';
 
 import type {SnackbarElement} from './element.js';
-import type {SnackbarOptions} from './type.js';
+import type {SnackbarActionHandler, SnackbarOptions} from './type.js';
 
 const logger = createLogger(`${__package_name__}/handler`);
 
@@ -43,13 +43,14 @@ function createSnackbarElement(options: SnackbarOptions): SnackbarElement {
 /**
  * Handle action button click.
  *
- * @param options - Options for configuring the snackbar.
  * @param closeSnackbar - Function to close the snackbar.
+ * @param handler - Handler to be called when the action button is clicked.
  */
-function handleActionButtonClick(closeSnackbar: () => Promise<void>): void {
-  const actionButtonClickHandler = () => {
+function handleActionButtonClick(closeSnackbar: () => Promise<void>, handler?: SnackbarActionHandler): void {
+  const actionButtonClickHandler = async () => {
     logger.logOther?.('Snackbar action button clicked.');
 
+    await handler?.();
     return closeSnackbar();
   };
 
@@ -83,7 +84,7 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
   };
 
   if (options.action != null) {
-    handleActionButtonClick(closeSnackbar);
+    handleActionButtonClick(closeSnackbar, options.action.handler);
   }
 
   // Close the last snackbar if it exists

packages/snackbar/src/lib/type.ts

@@ -1,19 +1,41 @@
 import type {Duration} from '@alwatr/parse-duration';
 
 /**
- * @property content - Content to be displayed in the snackbar.
- * @property [action] - The action button configuration.
- * @property action.label - The label for the action button.
- * @property action.signalId - The signal ID to be emitted when the action button is clicked.
- * @property duration - Duration for which the snackbar is displayed. `infinite` for infinite duration.
- * @property addCloseButton - Whether to add a close button to the snackbar.
+ * Snackbar action handler.
+ */
+export type SnackbarActionHandler = () => Promise<void> | void;
+
+/**
+ * Snackbar config.
  */
 export type SnackbarOptions = {
+  /**
+   * Content to be displayed in the snackbar.
+   */
   content: string;
+
+  /**
+   * The action button configuration.
+   */
   action?: {
-    signalId: string;
+    /**
+     * The signal ID to be emitted when the action button is clicked.
+     */
+    handler: SnackbarActionHandler;
+
+    /**
+     * The label for the action button.
+     */
     label: string;
   };
+
+  /**
+   * Duration for which the snackbar is displayed. `infinite` for infinite duration.
+   */
   duration?: Duration | 'infinite';
+
+  /**
+   * Whether to add a close button to the snackbar.
+   */
   addCloseButton?: boolean;
 };