feat(tooltip, popover): add disabled property (#2841)

akveo · Nov 8, 2021 · b7fe861 · b7fe861
1 parent baee608
commit b7fe861
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 69 deletions.
diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts
@@ -13,7 +13,6 @@ import { NbDynamicOverlay } from './dynamic-overlay';
 import { NbOverlayConfig } from '../mapping';
 
 export class NbDynamicOverlayChange extends SimpleChange {
-
   constructor(previousValue: any, currentValue: any, firstChange: boolean = false) {
     super(previousValue, currentValue, firstChange);
   }
@@ -25,12 +24,12 @@ export class NbDynamicOverlayChange extends SimpleChange {
 
 @Injectable()
 export class NbDynamicOverlayHandler {
-
   protected _componentType: Type<NbRenderableContainer>;
   protected _host: ElementRef;
   protected _context: Object = {};
   protected _content: NbOverlayContent;
   protected _trigger: NbTrigger = NbTrigger.NOOP;
+  protected _disabled: boolean = false;
   protected _position: NbPosition = NbPosition.TOP;
   protected _adjustment: NbAdjustment = NbAdjustment.NOOP;
   protected _offset: number = 15;
@@ -43,10 +42,11 @@ export class NbDynamicOverlayHandler {
 
   protected changes: { [key: string]: NbDynamicOverlayChange } = {};
 
-  constructor(private positionBuilder: NbPositionBuilderService,
-              private triggerStrategyBuilder: NbTriggerStrategyBuilderService,
-              private dynamicOverlayService: NbDynamicOverlay) {
-  }
+  constructor(
+    private positionBuilder: NbPositionBuilderService,
+    private triggerStrategyBuilder: NbTriggerStrategyBuilderService,
+    private dynamicOverlayService: NbDynamicOverlay,
+  ) {}
 
   host(host: ElementRef) {
     this.changes.host = new NbDynamicOverlayChange(this._host, host);
@@ -60,6 +60,12 @@ export class NbDynamicOverlayHandler {
     return this;
   }
 
+  disabled(disabled: boolean) {
+    this.changes.disabled = new NbDynamicOverlayChange(this._disabled, disabled);
+    this._disabled = disabled;
+    return this;
+  }
+
   position(position: NbPosition) {
     this.changes.position = new NbDynamicOverlayChange(this._position, position);
     this._position = position;
@@ -105,14 +111,15 @@ export class NbDynamicOverlayHandler {
   build() {
     if (!this._componentType || !this._host) {
       throw Error(`NbDynamicOverlayHandler: at least 'componentType' and 'host' should be
-      passed before building a dynamic overlay.`)
+      passed before building a dynamic overlay.`);
     }
     this.dynamicOverlay = this.dynamicOverlayService.create(
       this._componentType,
       this._content,
       this._context,
       this.createPositionStrategy(),
       this._overlayConfig,
+      this._disabled,
     );
 
     this.connect();
@@ -152,6 +159,10 @@ export class NbDynamicOverlayHandler {
       this.dynamicOverlay.setOverlayConfig(this._overlayConfig);
     }
 
+    if (this.isDisabledUpdated()) {
+      this.dynamicOverlay.setDisabled(this._disabled);
+    }
+
     this.clearChanges();
     return this.dynamicOverlay;
   }
@@ -199,9 +210,7 @@ export class NbDynamicOverlayHandler {
   }
 
   protected isContainerRerenderRequired() {
-    return this.isContentUpdated()
-      || this.isContextUpdated()
-      || this.isPositionStrategyUpdateRequired();
+    return this.isContentUpdated() || this.isContextUpdated() || this.isPositionStrategyUpdateRequired();
   }
 
   protected isPositionStrategyUpdateRequired(): boolean {
@@ -256,6 +265,10 @@ export class NbDynamicOverlayHandler {
     return this.changes.overlayConfig && this.changes.overlayConfig.isChanged();
   }
 
+  protected isDisabledUpdated(): boolean {
+    return this.changes.disabled && this.changes.disabled.isChanged();
+  }
+
   protected clearChanges() {
     this.changes = {};
   }

diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts
@@ -2,10 +2,7 @@ import { ComponentFactoryResolver, ComponentRef, Injectable, NgZone, Type } from
 import { filter, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import { Subject, BehaviorSubject, Observable, merge } from 'rxjs';
 
-import {
-  NbAdjustableConnectedPositionStrategy,
-  NbPosition,
-} from '../overlay-position';
+import { NbAdjustableConnectedPositionStrategy, NbPosition } from '../overlay-position';
 
 import { NbRenderableContainer } from '../overlay-container';
 import { createContainer, NbOverlayContent, NbOverlayService, patch } from '../overlay-service';
@@ -20,7 +17,6 @@ export interface NbDynamicOverlayController {
 
 @Injectable()
 export class NbDynamicOverlay {
-
   protected ref: NbOverlayRef;
   protected container: ComponentRef<NbRenderableContainer>;
   protected componentType: Type<NbRenderableContainer>;
@@ -29,6 +25,7 @@ export class NbDynamicOverlay {
   protected positionStrategy: NbAdjustableConnectedPositionStrategy;
   protected overlayConfig: NbOverlayConfig = {};
   protected lastAppliedPosition: NbPosition;
+  protected disabled = false;
 
   protected positionStrategyChange$ = new Subject();
   protected isShown$ = new BehaviorSubject<boolean>(false);
@@ -47,19 +44,22 @@ export class NbDynamicOverlay {
     protected overlay: NbOverlayService,
     protected componentFactoryResolver: ComponentFactoryResolver,
     protected zone: NgZone,
-    protected overlayContainer: NbOverlayContainer) {
-  }
-
-  create(componentType: Type<NbRenderableContainer>,
-         content: NbOverlayContent,
-         context: Object,
-         positionStrategy: NbAdjustableConnectedPositionStrategy,
-         overlayConfig: NbOverlayConfig = {}) {
-
+    protected overlayContainer: NbOverlayContainer,
+  ) {}
+
+  create(
+    componentType: Type<NbRenderableContainer>,
+    content: NbOverlayContent,
+    context: Object,
+    positionStrategy: NbAdjustableConnectedPositionStrategy,
+    overlayConfig: NbOverlayConfig = {},
+    disabled = false,
+  ) {
     this.setContentAndContext(content, context);
     this.setComponent(componentType);
     this.setPositionStrategy(positionStrategy);
     this.setOverlayConfig(overlayConfig);
+    this.setDisabled(disabled);
 
     return this;
   }
@@ -110,12 +110,7 @@ export class NbDynamicOverlay {
     this.positionStrategy.positionChange
       .pipe(
         filter(() => !!this.container),
-        takeUntil(
-          merge(
-            this.positionStrategyChange$,
-            this.destroy$,
-          ),
-        ),
+        takeUntil(merge(this.positionStrategyChange$, this.destroy$)),
       )
       .subscribe((position: NbPosition) => {
         this.lastAppliedPosition = position;
@@ -137,7 +132,18 @@ export class NbDynamicOverlay {
     }
   }
 
+  setDisabled(disabled: boolean) {
+    if (disabled && this.isShown$.value) {
+      this.hide();
+    }
+    this.disabled = disabled;
+  }
+
   show() {
+    if (this.disabled) {
+      return;
+    }
+
     if (!this.ref) {
       this.createOverlay();
     }
@@ -228,9 +234,7 @@ export class NbDynamicOverlay {
       filter((destroyedOverlay: NbOverlayRef) => destroyedOverlay === overlay),
     );
 
-    this.zone.onStable
-      .pipe(takeUntil(merge(this.destroy$, overlayDestroy$)))
-      .subscribe(() => this.updatePosition());
+    this.zone.onStable.pipe(takeUntil(merge(this.destroy$, overlayDestroy$))).subscribe(() => this.updatePosition());
   }
 
   protected updatePosition() {

diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts
@@ -14,7 +14,6 @@ import {
   OnInit,
   Output,
   EventEmitter,
-  SimpleChanges,
 } from '@angular/core';
 
 import { NbDynamicOverlay, NbDynamicOverlayController } from '../cdk/overlay/dynamic/dynamic-overlay';
@@ -27,7 +26,6 @@ import { NbPopoverComponent } from './popover.component';
 import { takeUntil, skip } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
-
 /**
  * Powerful popover directive, which provides the best UX for your users.
  *
@@ -118,7 +116,6 @@ import { Subject } from 'rxjs';
   providers: [NbDynamicOverlayHandler, NbDynamicOverlay],
 })
 export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit {
-
   protected popoverComponent = NbPopoverComponent;
   protected dynamicOverlay: NbDynamicOverlay;
   protected destroy$ = new Subject<void>();
@@ -140,6 +137,7 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges
    * Position will be calculated relatively host element based on the position.
    * Can be top, right, bottom, left, start or end.
    * */
+  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('nbPopoverPlacement')
   position: NbPosition = NbPosition.TOP;
   static ngAcceptInputType_position: NbPositionValues;
@@ -173,6 +171,10 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges
   @Input('nbPopoverOffset')
   offset = 15;
 
+  /** Disables the display of the tooltip. */
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('nbTooltipDisabled') disabled: boolean = false;
+
   @Input('nbPopoverClass')
   get popoverClass(): string {
     return this._popoverClass;
@@ -188,41 +190,32 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges
   @Output()
   nbPopoverShowStateChange = new EventEmitter<{ isShown: boolean }>();
 
-  protected overlayConfig: NbOverlayConfig = { panelClass: this.popoverClass }
+  protected overlayConfig: NbOverlayConfig = { panelClass: this.popoverClass };
 
   get isShown(): boolean {
     return !!(this.dynamicOverlay && this.dynamicOverlay.isAttached);
   }
 
-  constructor(protected hostRef: ElementRef,
-              protected dynamicOverlayHandler: NbDynamicOverlayHandler) {
-  }
+  constructor(protected hostRef: ElementRef, protected dynamicOverlayHandler: NbDynamicOverlayHandler) {}
 
   ngOnInit() {
-    this.dynamicOverlayHandler
-      .host(this.hostRef)
-      .componentType(this.popoverComponent);
+    this.dynamicOverlayHandler.host(this.hostRef).componentType(this.popoverComponent);
   }
 
   ngOnChanges() {
     this.rebuild();
   }
 
   ngAfterViewInit() {
-    this.dynamicOverlay = this.configureDynamicOverlay()
-      .build();
+    this.dynamicOverlay = this.configureDynamicOverlay().build();
 
     this.dynamicOverlay.isShown
-      .pipe(
-        skip(1),
-        takeUntil(this.destroy$),
-      )
+      .pipe(skip(1), takeUntil(this.destroy$))
       .subscribe((isShown: boolean) => this.nbPopoverShowStateChange.emit({ isShown }));
   }
 
   rebuild() {
-    this.dynamicOverlay = this.configureDynamicOverlay()
-      .rebuild();
+    this.dynamicOverlay = this.configureDynamicOverlay().rebuild();
   }
 
   show() {
@@ -247,6 +240,7 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges
     return this.dynamicOverlayHandler
       .position(this.position)
       .trigger(this.trigger)
+      .disabled(this.disabled)
       .offset(this.offset)
       .adjustment(this.adjustment)
       .content(this.content)

diff --git a/src/framework/theme/components/popover/popover.spec.ts b/src/framework/theme/components/popover/popover.spec.ts
@@ -111,6 +111,7 @@ export class NbDynamicOverlayHandlerMock {
   _adjustment: NbAdjustment = NbAdjustment.NOOP;
   _offset = 15;
   _overlayConfig: NbOverlayConfig = {};
+  _disabled = false;
 
   constructor() {}
 
@@ -159,6 +160,11 @@ export class NbDynamicOverlayHandlerMock {
     return this;
   }
 
+  disabled(disabled: boolean) {
+    this._disabled = disabled;
+    return this;
+  }
+
   build() {
     return dynamicOverlay;
   }