Skip to content

Commit

Permalink
fix(module:table): fix scrollbar calc (#1315)
Browse files Browse the repository at this point in the history
close #1205
  • Loading branch information
vthinkxie authored Apr 12, 2018
1 parent 818bd0b commit 0416900
Show file tree
Hide file tree
Showing 12 changed files with 108 additions and 76 deletions.
41 changes: 41 additions & 0 deletions components/core/services/nz-measure-scrollbar.service.ts
Original file line number Diff line number Diff line change
@@ -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();
}
}
30 changes: 0 additions & 30 deletions components/core/util/mesure-scrollbar.ts

This file was deleted.

32 changes: 17 additions & 15 deletions components/modal/nz-modal.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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'
})

Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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) {
Expand All @@ -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');
Expand Down
17 changes: 12 additions & 5 deletions components/modal/nz-modal.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,7 +30,8 @@ describe('modal testing (legacy)', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ NzButtonModule, NzModalModule ],
declarations: [ NzDemoModalAsyncComponent ]
declarations: [ NzDemoModalAsyncComponent ],
providers : [ NzMeasureScrollbarService ]
}).compileComponents();
}));

Expand Down Expand Up @@ -67,7 +69,8 @@ describe('modal testing (legacy)', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ NzButtonModule, NzModalModule ],
declarations: [ NzDemoModalConfirmPromiseComponent ]
declarations: [ NzDemoModalConfirmPromiseComponent ],
providers : [ NzMeasureScrollbarService ]
}).compileComponents();
}));

Expand Down Expand Up @@ -113,7 +116,8 @@ describe('modal testing (legacy)', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ NzModalModule ],
declarations: [ TestBasicServiceComponent ]
declarations: [ TestBasicServiceComponent ],
providers : [ NzMeasureScrollbarService ]
}).compileComponents();
}));

Expand Down Expand Up @@ -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 ] }
Expand Down Expand Up @@ -226,7 +231,8 @@ describe('modal testing (legacy)', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ NzModalModule ],
declarations: [ TestConfirmModalComponent ]
declarations: [ TestConfirmModalComponent ],
providers : [ NzMeasureScrollbarService ]
}).compileComponents();
}));

Expand Down Expand Up @@ -299,6 +305,7 @@ describe('NzModal', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [ NzModalModule ],
providers : [ NzMeasureScrollbarService ],
declarations: [
ModalByServiceComponent
]
Expand Down
4 changes: 3 additions & 1 deletion components/ng-zorro-antd.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -161,7 +162,8 @@ export class NgZorroAntdModule {
// Services
NzNotificationService,
NzMessageService,
NzDropdownService
NzDropdownService,
NzMeasureScrollbarService
]
};
}
Expand Down
6 changes: 3 additions & 3 deletions components/table/nz-table.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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`,
Expand Down Expand Up @@ -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;
}
}
4 changes: 3 additions & 1 deletion components/table/nz-table.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
}));
Expand Down
4 changes: 3 additions & 1 deletion components/table/nz-tbody.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
}));
Expand Down
4 changes: 3 additions & 1 deletion components/table/nz-th.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -9,7 +10,8 @@ describe('nz-th', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ NzTableModule ],
declarations: [ NzThTestNzTableComponent ]
declarations: [ NzThTestNzTableComponent ],
providers : [ NzMeasureScrollbarService ]
});
TestBed.compileComponents();
}));
Expand Down
4 changes: 3 additions & 1 deletion components/table/nz-thead.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -9,7 +10,8 @@ describe('nz-thead', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ NzTableModule ],
declarations: [ NzTheadTestNzTableComponent ]
declarations: [ NzTheadTestNzTableComponent ],
providers : [ NzMeasureScrollbarService ]
});
TestBed.compileComponents();
}));
Expand Down
4 changes: 3 additions & 1 deletion components/table/nz-tr.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
}));
Expand Down
Loading

0 comments on commit 0416900

Please sign in to comment.