fix(window): reattach overlay after window expand (#1022)

akveo · Nov 29, 2018 · 4b9c648 · 4b9c648
1 parent 949b050
commit 4b9c648
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/src/framework/theme/components/cdk/overlay/overlay-container.ts b/src/framework/theme/components/cdk/overlay/overlay-container.ts
@@ -44,6 +44,8 @@ export abstract class NbPositionedContainer {
   `,
 })
 export class NbOverlayContainerComponent {
+  isAttached: boolean = false;
+
   content: string;
 
   constructor(protected vcr: ViewContainerRef, protected injector: Injector) {
@@ -56,15 +58,20 @@ export class NbOverlayContainerComponent {
   attachComponentPortal<T>(portal: NbComponentPortal<T>): ComponentRef<T> {
     const factory = portal.cfr.resolveComponentFactory(portal.component);
     const injector = this.createChildInjector(portal.cfr);
-    return this.vcr.createComponent(factory, null, injector);
+    const componentRef = this.vcr.createComponent(factory, null, injector);
+    this.isAttached = true;
+    return componentRef;
   }
 
   attachTemplatePortal<C>(portal: NbTemplatePortal<C>): EmbeddedViewRef<C> {
-    return this.vcr.createEmbeddedView(portal.templateRef, portal.context);
+    const embeddedView = this.vcr.createEmbeddedView(portal.templateRef, portal.context);
+    this.isAttached = true;
+    return embeddedView;
   }
 
   attachStringContent(content: string) {
     this.content = content;
+    this.isAttached = true;
   }
 
   protected createChildInjector(cfr: ComponentFactoryResolver): NbPortalInjector {

diff --git a/src/framework/theme/components/window/window.component.ts b/src/framework/theme/components/window/window.component.ts
@@ -7,7 +7,11 @@ import {
   OnInit,
   TemplateRef,
   Renderer2,
-  ViewChild, AfterViewInit, Type, ComponentFactoryResolver, Input,
+  ViewChild,
+  Type,
+  ComponentFactoryResolver,
+  Input,
+  AfterViewChecked,
 } from '@angular/core';
 import {
   NbComponentPortal,
@@ -49,7 +53,7 @@ import { NbWindowRef } from './window-ref';
   `,
   styleUrls: ['./window.component.scss'],
 })
-export class NbWindowComponent implements OnInit, AfterViewInit, OnDestroy {
+export class NbWindowComponent implements OnInit, AfterViewChecked, OnDestroy {
   @Input() cfr: ComponentFactoryResolver;
 
   @HostBinding('class.full-screen')
@@ -91,7 +95,11 @@ export class NbWindowComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  ngAfterViewInit() {
+  ngAfterViewChecked() {
+    if (!this.overlayContainer || this.overlayContainer.isAttached) {
+      return;
+    }
+
     if (this.content instanceof TemplateRef) {
       this.attachTemplate();
     } else {

diff --git a/src/framework/theme/components/window/window.service.spec.ts b/src/framework/theme/components/window/window.service.spec.ts
@@ -183,4 +183,24 @@ describe('window-service', () => {
     firstWindow.componentRef.changeDetectorRef.detectChanges();
     expect(queryBackdrop().hasAttribute('hidden')).toBeFalsy();
   });
+
+  it(`shouldn't render window content when minimized`, function() {
+    const windowRef = windowService.open(NbTestWindowComponent);
+    windowRef.minimize();
+    windowRef.componentRef.changeDetectorRef.detectChanges();
+
+    const windowElement: HTMLElement = windowRef.componentRef.location.nativeElement;
+    expect(windowElement.querySelector('nb-card-body')).toBeNull();
+  });
+
+  it(`should render window content when unminimized`, function() {
+    const windowRef = windowService.open(NbTestWindowComponent);
+    windowRef.minimize();
+    windowRef.componentRef.changeDetectorRef.detectChanges();
+    windowRef.maximize();
+    windowRef.componentRef.changeDetectorRef.detectChanges();
+
+    const windowElement: HTMLElement = windowRef.componentRef.location.nativeElement;
+    expect(windowElement.querySelector('nb-card-body')).not.toBeNull();
+  });
 });