refactor(snackbar): separation files and remove function action button handler params

Co-authored-by: arashagp <[email protected]>

Author: njfamirm

packages/snackbar/src/lib/handler.ts

@@ -1,72 +1,21 @@
-import {AlwatrSignal, AlwatrTrigger} from '@alwatr/flux';
 import {createLogger} from '@alwatr/logger';
-import {parseDuration, type Duration} from '@alwatr/parse-duration';
+import {parseDuration} from '@alwatr/parse-duration';
 import {waitForTimeout} from '@alwatr/wait';
 
-import type {SnackbarComponent} from './element.js';
+import {snackbarActionButtonClickedSignal, snackbarSignal} from './signal.js';
 
-const logger = createLogger(`${__package_name__}/handler`);
+import type {SnackbarOptions} from './type.js';
 
-/**
- * @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.handler - The handler function for the action button.
- * @property duration - Duration for which the snackbar is displayed. `infinite` for infinite duration.
- * @property addCloseButton - Whether to add a close button to the snackbar.
- */
-export type SnackbarOptions = {
-  content: string;
-  action?: {
-    label: string;
-    handler: () => void;
-  };
-  duration?: Duration;
-  addCloseButton?: boolean;
-};
+const logger = createLogger(`${__package_name__}/handler`);
 
 /**
- * Signal triggered when the snackbar action button is clicked.
- *
- * This signal is used to notify listeners that the action button
- * on the snackbar component has been clicked. It can be used to
- * perform any necessary actions in response to the button click.
- *
- * @example
- * snackbarActionButtonClickedSignal.addListener(() => {
- *   console.log('Snackbar action button was clicked!');
- * });
+ * Store the function to close the last snackbar.
  */
-export const snackbarActionButtonClickedSignal = new AlwatrTrigger({
-  name: 'snackbar-action-button-clicked',
-});
+let closeLastSnackbar: (() => Promise<void>) | null = null;
 
 /**
- * Signal for displaying the snackbar.
- *
- * @example
- * import {snackbarSignal} from '@nexim/snackbar';
- *
- * snackbarSignal.notify({
- *   content: 'This is a snackbar message',
- *   action: {
- *     label: 'Undo',
- *     handler: () => {
- *       console.log('Action button clicked');
- *     },
- *   },
- *   duration: '5s',
- *   addCloseButton: true,
- * });
+ * Store the function to unsubscribe the action button handler after close or action button clicked.
  */
-export const snackbarSignal = new AlwatrSignal<SnackbarOptions>({name: 'snackbar'});
-
-// Subscribe to the snackbar signal to show the snackbar when the signal is emitted.
-snackbarSignal.subscribe((options) => {
-  showSnackbar(options);
-});
-
-let closeLastSnackbar: (() => Promise<void>) | null = null;
 let unsubscribeActionButtonHandler: (() => void) | null = null;
 
 /**
@@ -80,7 +29,7 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
   // Set default duration if not provided
   options.duration ??= '5s';
 
-  const element = document.createElement('snack-bar') as SnackbarComponent;
+  const element = document.createElement('snack-bar');
 
   element.setAttribute('content', options.content);
 
@@ -91,13 +40,16 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
   if (options.action != null) {
     element.setAttribute('action-button-label', options.action.label);
 
-    // Subscribe to the action button click
-    unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(() => {
-      logger.logOther?.('Snackbar action button clicked.');
-
-      options.action!.handler();
+    const actionButtonClickHandler = (event: {id: string}) => {
+      if (event.id !== options.action!.id) return;
+      logger.logOther?.('Snackbar action button clicked.', event);
 
       return closeSnackbar();
+    };
+
+    // Subscribe to the action button click
+    unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), {
+      once: true,
     }).unsubscribe;
   }
 
@@ -121,3 +73,8 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
     waitForTimeout(parseDuration(options.duration)).then(closeSnackbar);
   }
 }
+
+// Subscribe to the snackbar signal to show the snackbar when the signal is emitted.
+snackbarSignal.subscribe((options) => {
+  showSnackbar(options);
+});

packages/snackbar/src/lib/signal.ts

@@ -0,0 +1,39 @@
+import {AlwatrSignal} from '@alwatr/flux';
+
+import type {SnackbarOptions} from './type.js';
+
+/**
+ * Signal triggered when the snackbar action button is clicked.
+ *
+ * This signal is used to notify listeners that the action button
+ * on the snackbar component has been clicked. It can be used to
+ * perform any necessary actions in response to the button click.
+ *
+ * @example
+ * snackbarActionButtonClickedSignal.addListener(() => {
+ *   console.log('Snackbar action button was clicked!');
+ * });
+ */
+export const snackbarActionButtonClickedSignal = /* @__PURE__ */ new AlwatrSignal<{id: string}>({
+  name: 'snackbar-action-button-clicked',
+});
+
+/**
+ * Signal for displaying the snackbar.
+ *
+ * @example
+ * import {snackbarSignal} from '@nexim/snackbar';
+ *
+ * snackbarSignal.notify({
+ *   content: 'This is a snackbar message',
+ *   action: {
+ *     label: 'Undo',
+ *     handler: () => {
+ *       console.log('Action button clicked');
+ *     },
+ *   },
+ *   duration: '5s',
+ *   addCloseButton: true,
+ * });
+ */
+export const snackbarSignal = /* @__PURE__ */ new AlwatrSignal<SnackbarOptions>({name: 'snackbar'});

packages/snackbar/src/lib/type.ts

@@ -0,0 +1,19 @@
+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.handler - The handler function for the action button.
+ * @property duration - Duration for which the snackbar is displayed. `infinite` for infinite duration.
+ * @property addCloseButton - Whether to add a close button to the snackbar.
+ */
+export type SnackbarOptions = {
+  content: string;
+  action?: {
+    id: string;
+    label: string;
+  };
+  duration?: Duration | 'infinite';
+  addCloseButton?: boolean;
+};