refactor(snackbar): separation of concern

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

Author: njfamirm

packages/snackbar/src/lib/element.ts

@@ -3,17 +3,17 @@ import {LightDomMixin, LoggerMixin} from '@nexim/element';
 import {html, LitElement, nothing, type PropertyValues, type TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-import {snackbarActionButtonClickedSignal} from './handler.js';
+import {snackbarActionButtonClickedSignal} from './signal.js';
 import {waitForNextFrame} from './utils.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'snack-bar': SnackbarComponent;
+    'snack-bar': SnackbarElement;
   }
 }
 
 @customElement('snack-bar')
-export class SnackbarComponent extends LightDomMixin(LoggerMixin(LitElement)) {
+export class SnackbarElement extends LightDomMixin(LoggerMixin(LitElement)) {
   /**
    * The content to be displayed inside the snackbar.
    */
@@ -52,7 +52,7 @@ export class SnackbarComponent extends LightDomMixin(LoggerMixin(LitElement)) {
 
     this.removeAttribute('open');
 
-    await waitForTimeout(SnackbarComponent.openAndCloseAnimationDuration__);
+    await waitForTimeout(SnackbarElement.openAndCloseAnimationDuration__);
     this.remove();
   }
 

packages/snackbar/src/lib/handler.ts

@@ -4,6 +4,7 @@ import {waitForTimeout} from '@alwatr/wait';
 
 import {snackbarActionButtonClickedSignal, snackbarSignal} from './signal.js';
 
+import type {SnackbarElement} from './element.js';
 import type {SnackbarOptions} from './type.js';
 
 const logger = createLogger(`${__package_name__}/handler`);
@@ -19,18 +20,13 @@ let closeLastSnackbar: (() => Promise<void>) | null = null;
 let unsubscribeActionButtonHandler: (() => void) | null = null;
 
 /**
- * Displays the snackbar with the given options.
+ * Create snackbar element with given options.
  *
  * @param options - Options for configuring the snackbar.
+ * @returns The created snackbar element.
  */
-async function showSnackbar(options: SnackbarOptions): Promise<void> {
-  logger.logMethodArgs?.('showSnackbar', {options});
-
-  // Set default duration if not provided
-  options.duration ??= '5s';
-
+function createSnackbarElement(options: SnackbarOptions): SnackbarElement {
   const element = document.createElement('snack-bar');
-
   element.setAttribute('content', options.content);
 
   if (options.addCloseButton === true) {
@@ -39,19 +35,43 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
 
   if (options.action != null) {
     element.setAttribute('action-button-label', options.action.label);
+  }
 
-    const actionButtonClickHandler = (event: {id: string}) => {
-      if (event.id !== options.action!.id) return;
-      logger.logOther?.('Snackbar action button clicked.', event);
+  return element;
+}
 
-      return closeSnackbar();
-    };
+/**
+ * Handle action button click.
+ *
+ * @param options - Options for configuring the snackbar.
+ * @param closeSnackbar - Function to close the snackbar.
+ */
+function handleActionButtonClick(options: SnackbarOptions, closeSnackbar: () => Promise<void>): void {
+  const actionButtonClickHandler = (event: {id: string}) => {
+    if (event.id !== options.action!.id) return;
+    logger.logOther?.('Snackbar action button clicked.', event);
 
-    // Subscribe to the action button click
-    unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), {
-      once: true,
-    }).unsubscribe;
-  }
+    return closeSnackbar();
+  };
+
+  // Subscribe to the action button click
+  unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), {
+    once: true,
+  }).unsubscribe;
+}
+
+/**
+ * Displays the snackbar with the given options.
+ *
+ * @param options - Options for configuring the snackbar.
+ */
+async function showSnackbar(options: SnackbarOptions): Promise<void> {
+  logger.logMethodArgs?.('showSnackbar', {options});
+
+  // Set default duration if not provided
+  options.duration ??= '5s';
+
+  const element = createSnackbarElement(options);
 
   let closed = false;
   const closeSnackbar = async () => {
@@ -63,6 +83,10 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
     closed = true;
   };
 
+  if (options.action != null) {
+    handleActionButtonClick(options, closeSnackbar);
+  }
+
   // Close the last snackbar if it exists
   await closeLastSnackbar?.();
   closeLastSnackbar = closeSnackbar;