refactor: applyTooltipState logic

Author: rkaraivanov

src/components/tooltip/tooltip-event-controller.ts

@@ -10,13 +10,28 @@ type TooltipCallbacks = {
 };
 
 class TooltipController implements ReactiveController {
-  private readonly _tooltip: IgcTooltipComponent;
+  private readonly _host: IgcTooltipComponent;
   private _anchor: TooltipAnchor;
 
   private _options!: TooltipCallbacks;
   private _showTriggers = new Set(['pointerenter']);
   private _hideTriggers = new Set(['pointerleave']);
 
+  private _open = false;
+
+  /** Whether the tooltip is in shown state. */
+  public get open(): boolean {
+    return this._open;
+  }
+
+  /** Sets the shown state of the current tooltip. */
+  public set open(value: boolean) {
+    this._open = value;
+    this._open
+      ? service.add(this._host, this._options.onHide)
+      : service.remove(this._host);
+  }
+
   /**
    * Returns the current tooltip anchor target if any.
    */
@@ -90,9 +105,9 @@ class TooltipController implements ReactiveController {
   }
 
   constructor(tooltip: IgcTooltipComponent, options: TooltipCallbacks) {
-    this._tooltip = tooltip;
+    this._host = tooltip;
     this._options = options;
-    this._tooltip.addController(this);
+    this._host.addController(this);
   }
 
   private _toggleTriggers(previous: Set<string>, current: Set<string>): void {
@@ -119,29 +134,28 @@ class TooltipController implements ReactiveController {
 
   /** @internal */
   public hostConnected(): void {
-    this._tooltip.addEventListener('pointerenter', this);
-    this._tooltip.addEventListener('pointerleave', this);
+    this._host.addEventListener('pointerenter', this);
+    this._host.addEventListener('pointerleave', this);
   }
 
   /** @internal */
   public hostDisconnected(): void {
-    // console.log('disconnected callback');
-    this._tooltip.hide();
-    service.remove(this._tooltip);
-    this._tooltip.removeEventListener('pointerenter', this);
-    this._tooltip.removeEventListener('pointerleave', this);
+    this._dispose();
+    service.remove(this._host);
+    this._host.removeEventListener('pointerenter', this);
+    this._host.removeEventListener('pointerleave', this);
   }
 
   /** @internal */
   public handleEvent(event: Event): void {
     // Tooltip handlers
-    if (event.target === this._tooltip) {
+    if (event.target === this._host) {
       switch (event.type) {
         case 'pointerenter':
-          this._options.onShow.call(this._tooltip, event);
+          this._options.onShow.call(this._host, event);
           break;
         case 'pointerleave':
-          this._options.onHide.call(this._tooltip, event);
+          this._options.onHide.call(this._host, event);
           break;
         default:
           return;
@@ -151,11 +165,11 @@ class TooltipController implements ReactiveController {
     // Anchor handlers
     if (event.target === this._anchor) {
       if (this._showTriggers.has(event.type)) {
-        this._options.onShow.call(this._tooltip, event);
+        this._options.onShow.call(this._host, event);
       }
 
       if (this._hideTriggers.has(event.type)) {
-        this._options.onHide.call(this._tooltip, event);
+        this._options.onHide.call(this._host, event);
       }
     }
   }

src/components/tooltip/tooltip-service.ts

@@ -9,6 +9,7 @@ class TooltipEscapeCallbacks {
   private _collection = new Map<IgcTooltipComponent, TooltipHideCallback>();
 
   private _setListener(state = true): void {
+    /* c8 ignore next 3 */
     if (isServer) {
       return;
     }

src/components/tooltip/tooltip.spec.ts

@@ -615,7 +615,7 @@ describe('Tooltip', () => {
       );
       expect(eventSpy.secondCall).calledWith(
         state.open ? 'igcOpened' : 'igcClosed',
-        { detail: anchor }
+        { cancelable: false, detail: anchor }
       );
     };
 

src/components/tooltip/tooltip.ts

@@ -17,7 +17,6 @@ import { styles as shared } from './themes/shared/tooltip.common.css';
 import { all } from './themes/themes.js';
 import { styles } from './themes/tooltip.base.css.js';
 import { addTooltipController } from './tooltip-event-controller.js';
-import service from './tooltip-service.js';
 
 export interface IgcTooltipComponentEventMap {
   igcOpening: CustomEvent<Element | null>;
@@ -77,7 +76,6 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   });
 
   private _timeoutId?: number;
-  private _open = false;
   private _showDelay = 200;
   private _hideDelay = 300;
 
@@ -92,14 +90,11 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
    */
   @property({ type: Boolean, reflect: true })
   public set open(value: boolean) {
-    this._open = value;
-    this._open
-      ? service.add(this, this._hideOnInteraction)
-      : service.remove(this);
+    this._controller.open = value;
   }
 
   public get open(): boolean {
-    return this._open;
+    return this._controller.open;
   }
 
   /**
@@ -254,57 +249,55 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
     this._controller.anchor = target;
   }
 
+  private _emitEvent(name: keyof IgcTooltipComponentEventMap): boolean {
+    return this.emitEvent(name, {
+      cancelable: name === 'igcOpening' || name === 'igcClosing',
+      detail: this._controller.anchor,
+    });
+  }
+
   private async _applyTooltipState({
     show,
     withDelay = false,
     withEvents = false,
   }: TooltipStateOptions): Promise<boolean> {
-    if (show === this.open) return false;
-
-    const delay = show ? this.showDelay : this.hideDelay;
-
-    if (withEvents) {
-      const eventName = show ? 'igcOpening' : 'igcClosing';
-      const allowed = this.emitEvent(eventName, {
-        cancelable: true,
-        detail: this._controller.anchor,
-      });
+    if (show === this.open) {
+      return false;
+    }
 
-      if (!allowed) return false;
+    if (withEvents && !this._emitEvent(show ? 'igcOpening' : 'igcClosing')) {
+      return false;
     }
 
-    const _commitStateChange = async () => {
+    const commitStateChange = async (): Promise<boolean> => {
       if (show) {
         this.open = true;
       }
 
-      const result = await this._player.playExclusive(
+      const animationComplete = await this._player.playExclusive(
         show ? this._showAnimation : this._hideAnimation
       );
-      this.open = result ? show : !show;
 
-      if (!result) {
-        return false;
-      }
+      this.open = show;
 
-      if (withEvents) {
-        const eventName = show ? 'igcOpened' : 'igcClosed';
-        this.emitEvent(eventName, { detail: this._controller.anchor });
+      if (animationComplete && withEvents) {
+        this._emitEvent(show ? 'igcOpened' : 'igcClosed');
       }
 
-      return result;
+      return animationComplete;
     };
 
     if (withDelay) {
       clearTimeout(this._timeoutId);
-      return new Promise((resolve) => {
-        this._timeoutId = setTimeout(() => {
-          _commitStateChange().then(resolve);
-        }, delay);
+      return new Promise(() => {
+        this._timeoutId = setTimeout(
+          async () => await commitStateChange(),
+          show ? this.showDelay : this.hideDelay
+        );
       });
     }
 
-    return _commitStateChange();
+    return commitStateChange();
   }
 
   /** Shows the tooltip if not already showing. */

stories/tooltip.stories.ts

@@ -334,16 +334,19 @@ export const Default: Story = {
   `,
 };
 
-let tooltip!: IgcTooltipComponent;
-
 function createDynamicTooltip() {
-  tooltip ??= document.createElement('igc-tooltip');
+  const tooltip = document.createElement('igc-tooltip');
   tooltip.message = `I'm created on demand at ${new Date().toLocaleTimeString()}`;
   tooltip.anchor = 'dynamic-target';
   tooltip.id = 'dynamic';
 
-  tooltip.addEventListener('igcClosed', () => tooltip.remove());
-  document.body.appendChild(tooltip);
+  const previousTooltip = document.querySelector('#dynamic');
+  const target = document.querySelector('#dynamic-target')!;
+
+  previousTooltip
+    ? previousTooltip.replaceWith(tooltip)
+    : target.after(tooltip);
+
   tooltip.show();
 }