refactor(toast,snackbar): Abstracted show/hide logic and code clean-ups (#1777)

Author: rkaraivanov

src/animations/player.ts

@@ -110,3 +110,5 @@ export function startViewTransition(
 
   return { transition: document.startViewTransition(callback) };
 }
+
+export type { AnimationController };

src/components/common/mixins/alert.ts

@@ -1,21 +1,17 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-
-import type { addAnimationController } from '../../../animations/player.js';
+import type { AnimationController } from '../../../animations/player.js';
 import { fadeIn, fadeOut } from '../../../animations/presets/fade/index.js';
 import type { AbsolutePosition } from '../../types.js';
 import { addInternalsController } from '../controllers/internals.js';
-import { watch } from '../decorators/watch.js';
 
 // It'd be better to have this as a mixin rather than a base class once the analyzer
 // knows how to resolve multiple mixin chains
 
 export abstract class IgcBaseAlertLikeComponent extends LitElement {
-  protected _autoHideTimeout?: number;
+  declare protected abstract readonly _player: AnimationController;
 
-  declare protected abstract _animationPlayer: ReturnType<
-    typeof addAnimationController
-  >;
+  protected _autoHideTimeout?: ReturnType<typeof setTimeout>;
 
   /**
    * Whether the component is in shown state.
@@ -56,28 +52,33 @@ export abstract class IgcBaseAlertLikeComponent extends LitElement {
     });
   }
 
-  @watch('displayTime', { waitUntilFirstUpdate: true })
-  protected displayTimeChange() {
-    this.setAutoHideTimer();
-  }
+  protected override updated(props: PropertyValues<this>): void {
+    if (props.has('displayTime')) {
+      this._setAutoHideTimer();
+    }
 
-  @watch('keepOpen', { waitUntilFirstUpdate: true })
-  protected keepOpenChange() {
-    clearTimeout(this._autoHideTimeout);
+    if (props.has('keepOpen')) {
+      clearTimeout(this._autoHideTimeout);
+    }
   }
 
-  private async toggleAnimation(state: 'open' | 'close') {
-    const animation = state === 'open' ? fadeIn : fadeOut;
-
-    const [_, event] = await Promise.all([
-      this._animationPlayer.stopAll(),
-      this._animationPlayer.play(animation()),
-    ]);
+  private async _setOpenState(open: boolean): Promise<boolean> {
+    let state: boolean;
+
+    if (open) {
+      this.open = open;
+      state = await this._player.playExclusive(fadeIn());
+      this._setAutoHideTimer();
+    } else {
+      clearTimeout(this._autoHideTimeout);
+      state = await this._player.playExclusive(fadeOut());
+      this.open = open;
+    }
 
-    return event.type === 'finish';
+    return state;
   }
 
-  private setAutoHideTimer() {
+  private _setAutoHideTimer(): void {
     clearTimeout(this._autoHideTimeout);
     if (this.open && this.displayTime > 0 && !this.keepOpen) {
       this._autoHideTimeout = setTimeout(() => this.hide(), this.displayTime);
@@ -86,26 +87,12 @@ export abstract class IgcBaseAlertLikeComponent extends LitElement {
 
   /** Opens the component. */
   public async show(): Promise<boolean> {
-    if (this.open) {
-      return false;
-    }
-
-    this.open = true;
-    await this.toggleAnimation('open');
-    this.setAutoHideTimer();
-    return true;
+    return this.open ? false : this._setOpenState(true);
   }
 
   /** Closes the component. */
   public async hide(): Promise<boolean> {
-    if (!this.open) {
-      return false;
-    }
-
-    clearTimeout(this._autoHideTimeout);
-    await this.toggleAnimation('close');
-    this.open = false;
-    return true;
+    return this.open ? this._setOpenState(false) : false;
   }
 
   /** Toggles the open state of the component. */

src/components/snackbar/snackbar.ts

@@ -1,7 +1,6 @@
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-
+import { createRef, ref } from 'lit/directives/ref.js';
 import { addAnimationController } from '../../animations/player.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
@@ -45,10 +44,11 @@ export default class IgcSnackbarComponent extends EventEmitterMixin<
     registerComponent(IgcSnackbarComponent, IgcButtonComponent);
   }
 
-  protected contentRef: Ref<HTMLElement> = createRef();
-  protected override _animationPlayer: ReturnType<
-    typeof addAnimationController
-  > = addAnimationController(this, this.contentRef);
+  protected readonly _contentRef = createRef<HTMLElement>();
+  protected override readonly _player = addAnimationController(
+    this,
+    this._contentRef
+  );
 
   /**
    * The snackbar action button.
@@ -62,18 +62,18 @@ export default class IgcSnackbarComponent extends EventEmitterMixin<
     addThemingController(this, all);
   }
 
-  private handleClick() {
+  private _handleClick(): void {
     this.emitEvent('igcAction');
   }
 
   protected override render() {
     return html`
-      <div ${ref(this.contentRef)} part="base" .inert=${!this.open}>
+      <div ${ref(this._contentRef)} part="base" .inert=${!this.open}>
         <span part="message">
           <slot></slot>
         </span>
 
-        <slot name="action" part="action-container" @click=${this.handleClick}>
+        <slot name="action" part="action-container" @click=${this._handleClick}>
           ${this.actionText
             ? html`<igc-button type="button" part="action" variant="flat">
                 ${this.actionText}

src/components/toast/toast.ts

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-
 import { addAnimationController } from '../../animations/player.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -19,9 +18,7 @@ export default class IgcToastComponent extends IgcBaseAlertLikeComponent {
   public static readonly tagName = 'igc-toast';
   public static override styles = [styles, shared];
 
-  protected override _animationPlayer: ReturnType<
-    typeof addAnimationController
-  > = addAnimationController(this);
+  protected override readonly _player = addAnimationController(this);
 
   /* blazorSuppress */
   public static register(): void {