fix(module:table): fix scrollbar calc (NG-ZORRO#1315)

close NG-ZORRO#1205

components/core/services/nz-measure-scrollbar.service.ts

@@ -0,0 +1,41 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import { isNotNil } from '../util/check';
+
+@Injectable()
+export class NzMeasureScrollbarService {
+  private _scrollbarWidth: number;
+  private scrollbarMeasure = {
+    position: 'absolute',
+    top     : '-9999px',
+    width   : '50px',
+    height  : '50px',
+    overflow: 'scroll'
+  };
+
+  get scrollBarWidth(): number {
+    if (isNotNil(this._scrollbarWidth)) {
+      return this._scrollbarWidth;
+    }
+    this.initScrollBarWidth();
+    return this._scrollbarWidth;
+  }
+
+  initScrollBarWidth(): void {
+    const scrollDiv = this.document.createElement('div');
+    for (const scrollProp in this.scrollbarMeasure) {
+      if (this.scrollbarMeasure.hasOwnProperty(scrollProp)) {
+        scrollDiv.style[ scrollProp ] = this.scrollbarMeasure[ scrollProp ];
+      }
+    }
+    this.document.body.appendChild(scrollDiv);
+    const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    this.document.body.removeChild(scrollDiv);
+    this._scrollbarWidth = width;
+  }
+
+  // tslint:disable-next-line:no-any
+  constructor(@Inject(DOCUMENT) private document: any) {
+    this.initScrollBarWidth();
+  }
+}

components/modal/nz-modal.component.ts

@@ -22,9 +22,9 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 
 import { InputBoolean } from '../core/util/convert';
-import { measureScrollbar } from '../core/util/mesure-scrollbar';
 import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import ModalUtil from './modal-util';
@@ -35,13 +35,13 @@ import { ModalButtonOptions, ModalOptions, ModalType, OnClickCallback } from './
 export const MODAL_ANIMATE_DURATION = 200; // Duration when perform animations (ms)
 
 interface ClassMap {
-  [index: string]: boolean;
+  [ index: string ]: boolean;
 }
 
 type AnimationState = 'enter' | 'leave' | null;
 
 @Component({
-  selector: 'nz-modal',
+  selector   : 'nz-modal',
   templateUrl: './nz-modal.component.html'
 })
 
@@ -74,6 +74,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   get afterOpen(): Observable<void> { // Observable alias for nzAfterOpen
     return this.nzAfterOpen.asObservable();
   }
+
   get afterClose(): Observable<R> { // Observable alias for nzAfterClose
     return this.nzAfterClose.asObservable();
   }
@@ -108,6 +109,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
     private cfr: ComponentFactoryResolver,
     private elementRef: ElementRef,
     private viewContainer: ViewContainerRef,
+    private nzMeasureScrollbarService: NzMeasureScrollbarService,
     private modalControl: NzModalControlService,
     @Inject(DOCUMENT) private document: any) { // tslint:disable-line:no-any
 
@@ -252,15 +254,15 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   // Do rest things when visible state changed
   private handleVisibleStateChange(visible: boolean, animation: boolean = true, closeResult?: R): Promise<void> {
     return Promise
-      .resolve(animation && this.animateTo(visible))
-      .then(() => { // Emit open/close event after animations over
-        if (visible) {
-          this.nzAfterOpen.emit();
-        } else {
-          this.nzAfterClose.emit(closeResult);
-        }
-      })
-      .then(() => this.changeBodyOverflow());
+    .resolve(animation && this.animateTo(visible))
+    .then(() => { // Emit open/close event after animations over
+      if (visible) {
+        this.nzAfterOpen.emit();
+      } else {
+        this.nzAfterClose.emit(closeResult);
+      }
+    })
+    .then(() => this.changeBodyOverflow());
   }
 
   // Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
@@ -348,8 +350,8 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   private createDynamicComponent(component: Type<T>): void {
     const factory = this.cfr.resolveComponentFactory(component);
     const childInjector = Injector.create({
-      providers: [ { provide : NzModalRef, useValue: this } ],
-      parent: this.viewContainer.parentInjector
+      providers: [ { provide: NzModalRef, useValue: this } ],
+      parent   : this.viewContainer.parentInjector
     });
     this.contentComponentRef = factory.create(childInjector);
     if (this.nzComponentParams) {
@@ -375,7 +377,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
     const openModals = this.modalControl.openModals;
 
     if (openModals.length) {
-      this.renderer.setStyle(this.document.body, 'padding-right', `${measureScrollbar()}px`);
+      this.renderer.setStyle(this.document.body, 'padding-right', `${this.nzMeasureScrollbarService.scrollBarWidth}px`);
       this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
     } else {
       this.renderer.removeStyle(this.document.body, 'padding-right');

components/modal/nz-modal.spec.ts

@@ -8,6 +8,7 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { NzButtonComponent } from '../button/nz-button.component';
 import { NzButtonModule } from '../button/nz-button.module';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 
 import { CssUnitPipe } from './css-unit.pipe';
 import { NzModalControlService } from './nz-modal-control.service';
@@ -29,7 +30,8 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ NzButtonModule, NzModalModule ],
-        declarations: [ NzDemoModalAsyncComponent ]
+        declarations: [ NzDemoModalAsyncComponent ],
+        providers   : [ NzMeasureScrollbarService ]
       }).compileComponents();
     }));
 
@@ -67,7 +69,8 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ NzButtonModule, NzModalModule ],
-        declarations: [ NzDemoModalConfirmPromiseComponent ]
+        declarations: [ NzDemoModalConfirmPromiseComponent ],
+        providers   : [ NzMeasureScrollbarService ]
       }).compileComponents();
     }));
 
@@ -113,7 +116,8 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ NzModalModule ],
-        declarations: [ TestBasicServiceComponent ]
+        declarations: [ TestBasicServiceComponent ],
+        providers   : [ NzMeasureScrollbarService ]
       }).compileComponents();
     }));
 
@@ -179,7 +183,8 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ NzModalModule ],
-        declarations: [ TestVaryServiceComponent, TestVaryServiceCustomComponent ]
+        declarations: [ TestVaryServiceComponent, TestVaryServiceCustomComponent ],
+        providers   : [ NzMeasureScrollbarService ]
       });
       TestBed.overrideModule(BrowserDynamicTestingModule, {
         set: { entryComponents: [ TestVaryServiceCustomComponent ] }
@@ -226,7 +231,8 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [ NzModalModule ],
-        declarations: [ TestConfirmModalComponent ]
+        declarations: [ TestConfirmModalComponent ],
+        providers   : [ NzMeasureScrollbarService ]
       }).compileComponents();
     }));
 
@@ -299,6 +305,7 @@ describe('NzModal', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [ NzModalModule ],
+      providers   : [ NzMeasureScrollbarService ],
       declarations: [
         ModalByServiceComponent
       ]

components/ng-zorro-antd.module.ts

@@ -14,6 +14,7 @@ import { NzCarouselModule } from './carousel/nz-carousel.module';
 import { NzCascaderModule } from './cascader/nz-cascader.module';
 import { NzCheckboxModule } from './checkbox/nz-checkbox.module';
 import { NzCollapseModule } from './collapse/nz-collapse.module';
+import { NzMeasureScrollbarService } from './core/services/nz-measure-scrollbar.service';
 import { NzDividerModule } from './divider/nz-divider.module';
 import { NzDropDownModule } from './dropdown/nz-dropdown.module';
 import { NzDropdownService } from './dropdown/nz-dropdown.service';
@@ -161,7 +162,8 @@ export class NgZorroAntdModule {
         // Services
         NzNotificationService,
         NzMessageService,
-        NzDropdownService
+        NzDropdownService,
+        NzMeasureScrollbarService
       ]
     };
   }

components/table/nz-table.component.ts

@@ -14,10 +14,10 @@ import {
   TemplateRef,
   ViewChild
 } from '@angular/core';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { isNotNil } from '../core/util/check';
 
 import { toBoolean } from '../core/util/convert';
-import { measureScrollbar } from '../core/util/mesure-scrollbar';
 import { NzThComponent } from './nz-th.component';
 
 import { NzTheadComponent } from './nz-thead.component';
@@ -397,7 +397,7 @@ export class NzTableComponent implements OnInit, AfterViewInit {
   }
 
   fitScrollBar(): void {
-    const scrollbarWidth = measureScrollbar();
+    const scrollbarWidth = this.nzMeasureScrollbarService.scrollBarWidth;
     if (scrollbarWidth) {
       this.headerBottomStyle = {
         marginBottom : `-${scrollbarWidth}px`,
@@ -425,7 +425,7 @@ export class NzTableComponent implements OnInit, AfterViewInit {
     setTimeout(() => this.setScrollPositionClassName());
   }
 
-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private overlay: Overlay) {
+  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private overlay: Overlay, private nzMeasureScrollbarService: NzMeasureScrollbarService) {
     this.el = this.elementRef.nativeElement;
   }
 }

components/table/nz-table.spec.ts

@@ -1,14 +1,16 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { NzTableComponent } from './nz-table.component';
 import { NzTableModule } from './nz-table.module';
 
 describe('nz-table', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzTestTableBasicComponent, NzTestTableScrollComponent ]
+      declarations: [ NzTestTableBasicComponent, NzTestTableScrollComponent ],
+      providers   : [ NzMeasureScrollbarService ]
     });
     TestBed.compileComponents();
   }));

components/table/nz-tbody.spec.ts

@@ -1,14 +1,16 @@
 import { Component } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { NzTableModule } from './nz-table.module';
 import { NzTbodyDirective } from './nz-tbody.directive';
 
 describe('nz-tbody', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzTbodyTestTableComponent, NzTbodyTestNzTableComponent ]
+      declarations: [ NzTbodyTestTableComponent, NzTbodyTestNzTableComponent ],
+      providers   : [ NzMeasureScrollbarService ]
     });
     TestBed.compileComponents();
   }));

components/table/nz-th.spec.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { NzTableComponent } from './nz-table.component';
 import { NzTableModule } from './nz-table.module';
 import { NzThComponent } from './nz-th.component';
@@ -9,7 +10,8 @@ describe('nz-th', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzThTestNzTableComponent ]
+      declarations: [ NzThTestNzTableComponent ],
+      providers   : [ NzMeasureScrollbarService ]
     });
     TestBed.compileComponents();
   }));

components/table/nz-thead.spec.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { NzTableComponent } from './nz-table.component';
 import { NzTableModule } from './nz-table.module';
 import { NzTheadComponent } from './nz-thead.component';
@@ -9,7 +10,8 @@ describe('nz-thead', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzTheadTestNzTableComponent ]
+      declarations: [ NzTheadTestNzTableComponent ],
+      providers   : [ NzMeasureScrollbarService ]
     });
     TestBed.compileComponents();
   }));

components/table/nz-tr.spec.ts

@@ -1,14 +1,16 @@
 import { Component } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { NzTableModule } from './nz-table.module';
 import { NzTrDirective } from './nz-tr.directive';
 
 describe('nz-tr', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzTrTestTableComponent, NzTrTestNzTableComponent ]
+      declarations: [ NzTrTestTableComponent, NzTrTestNzTableComponent ],
+      providers   : [ NzMeasureScrollbarService ]
     });
     TestBed.compileComponents();
   }));