fix: update overlay config objects in setters

Instead of using `ngOnChanges` as it won't be called if some properties have been changed on component instances directly (not in the template).
akveo · Aug 31, 2020 · 1763905 · 1763905
1 parent 7b51c6f
commit 1763905
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 24 deletions.
diff --git a/src/framework/theme/components/context-menu/context-menu.directive.ts b/src/framework/theme/components/context-menu/context-menu.directive.ts
@@ -133,7 +133,16 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
    * Can be top, right, bottom and left.
    * */
   @Input('nbContextMenuPlacement')
-  position: NbPosition = NbPosition.BOTTOM;
+  get position(): NbPosition {
+    return this._position;
+  }
+  set position(value: NbPosition) {
+    if (value !== this.position) {
+      this._position = value;
+      this.updateOverlayContext();
+    }
+  }
+  _position: NbPosition = NbPosition.BOTTOM;
 
   /**
    * Container position will be changes automatically based on this strategy if container can't fit view port.
@@ -147,7 +156,16 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
    * Set NbMenu tag, which helps identify menu when working with NbMenuService.
    * */
   @Input('nbContextMenuTag')
-  tag: string;
+  get tag(): string {
+    return this._tag;
+  }
+  set tag(value: string) {
+    if (value !== this.tag) {
+      this._tag = value;
+      this.updateOverlayContext();
+    }
+  }
+  _tag: string;
 
   /**
    * Basic menu items, will be passed to the internal NbMenuComponent.
@@ -159,6 +177,7 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
   set items(items: NbMenuItem[]) {
     this.validateItems(items);
     this._items = items;
+    this.updateOverlayContext();
   };
 
   /**
@@ -170,7 +189,15 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
   static ngAcceptInputType_trigger: NbTriggerValues;
 
   @Input('nbContextMenuClass')
-  contextMenuClass: string = '';
+  get contextMenuClass(): string {
+    return this._contextMenuClass;
+  }
+  set contextMenuClass(value: string) {
+    if (value !== this.contextMenuClass) {
+      this.overlayConfig = { panelClass: this.contextMenuClass };
+    }
+  }
+  _contextMenuClass: string = '';
 
   protected ref: NbOverlayRef;
   protected container: ComponentRef<any>;
@@ -193,15 +220,7 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
       .componentType(NbContextMenuComponent);
   }
 
-  ngOnChanges({ contextMenuClass, items, position, tag }: SimpleChanges) {
-    if (contextMenuClass) {
-      this.overlayConfig = { panelClass: this.contextMenuClass };
-    }
-
-    if (items || position || tag) {
-      this.overlayContext = { items: this.items, position: this.position, tag: this.tag };
-    }
-
+  ngOnChanges() {
     this.rebuild();
   }
 
@@ -259,4 +278,8 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
       )
       .subscribe(() => this.hide());
   }
+
+  protected updateOverlayContext() {
+    this.overlayContext = { items: this.items, position: this.position, tag: this.tag };
+  }
 }
diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts
@@ -180,7 +180,16 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges
   offset = 15;
 
   @Input('nbPopoverClass')
-  popoverClass: string = '';
+  get popoverClass(): string {
+    return this._popoverClass;
+  }
+  set popoverClass(value: string) {
+    if (value !== this.popoverClass) {
+      this._popoverClass = value;
+      this.overlayConfig = { panelClass: this.popoverClass };
+    }
+  }
+  _popoverClass: string = '';
 
   @Output()
   nbPopoverShowStateChange = new EventEmitter<{ isShown: boolean }>();
@@ -201,11 +210,7 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges
       .componentType(this.popoverComponent);
   }
 
-  ngOnChanges({ popoverClass }: SimpleChanges) {
-    if (popoverClass) {
-      this.overlayConfig = { panelClass: this.popoverClass };
-    }
-
+  ngOnChanges() {
     this.rebuild();
   }
 

diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts
@@ -116,7 +116,16 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD
   static ngAcceptInputType_adjustment: NbAdjustmentValues;
 
   @Input('nbTooltipClass')
-  tooltipClass: string = '';
+  get tooltipClass(): string {
+    return this._tooltipClass;
+  }
+  set tooltipClass(value: string) {
+    if (value !== this.tooltipClass) {
+      this._tooltipClass = value;
+      this.overlayConfig = { panelClass: this.tooltipClass };
+    }
+  }
+  _tooltipClass: string = '';
 
   /**
    * Accepts icon name or icon config object
@@ -163,11 +172,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD
       .offset(this.offset);
   }
 
-  ngOnChanges({ tooltipClass }: SimpleChanges) {
-    if (tooltipClass) {
-      this.overlayConfig = { panelClass: this.tooltipClass };
-    }
-
+  ngOnChanges() {
     this.rebuild();
   }