perf(module:table): improve table performance (NG-ZORRO#2157)

hsuanxyz · Sep 19, 2018 · 46c870d · 46c870d
1 parent ea5b8b5
commit 46c870d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html
@@ -11,7 +11,6 @@
     #tableHeaderElement
     *ngIf="nzScroll.x || nzScroll.y"
     class="ant-table-header"
-    (scroll)="syncScrollTable($event)"
     [ngStyle]="headerBottomStyle">
     <table
       [class.ant-table-fixed]="nzScroll.x"
@@ -25,7 +24,6 @@
   <div
     #tableBodyElement
     class="ant-table-body"
-    (scroll)="syncScrollTable($event)"
     [style.maxHeight]="nzScroll.y"
     [style.overflow-y]="nzScroll.y?'scroll':''"
     [style.overflow-x]="nzScroll.x?'auto':''">
@@ -62,10 +60,8 @@
     <div>
       <div
         class="ant-table"
+        #tableMainElement
         [class.ant-table-fixed-header]="nzScroll.x || nzScroll.y"
-        [class.ant-table-scroll-position-left]="scrollPosition==='left'"
-        [class.ant-table-scroll-position-right]="scrollPosition==='right'"
-        [class.ant-table-scroll-position-middle]="scrollPosition==='middle'"
         [class.ant-table-bordered]="nzBordered"
         [class.ant-table-large]="nzSize=='default'"
         [class.ant-table-middle]="nzSize=='middle'"

diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -1,4 +1,3 @@
-import { Overlay } from '@angular/cdk/overlay';
 import {
   AfterViewInit,
   ChangeDetectorRef,
@@ -8,15 +7,17 @@ import {
   EventEmitter,
   HostListener,
   Input,
+  NgZone,
   OnDestroy,
   OnInit,
   Output,
   QueryList,
+  Renderer2,
   TemplateRef,
   ViewChild
 } from '@angular/core';
 
-import { Subject } from 'rxjs';
+import { fromEvent, merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
@@ -56,7 +57,6 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   isTitleString: boolean;
   isNoResultString: boolean;
   el: HTMLElement;
-  scrollPosition: string;
   lastScrollLeft = 0;
   /* tslint:disable-next-line:no-any */
   rawData: any[] = [];
@@ -69,6 +69,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   isWidthConfigSet = false;
   @ViewChild('tableHeaderElement') tableHeaderElement: ElementRef;
   @ViewChild('tableBodyElement') tableBodyElement: ElementRef;
+  @ViewChild('tableMainElement') tableMainElement: ElementRef;
   @ContentChildren(NzThComponent, { descendants: true }) listOfNzThComponent: QueryList<NzThComponent>;
 
   @Output() nzPageSizeChange: EventEmitter<number> = new EventEmitter();
@@ -91,6 +92,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   get nzSimple(): boolean {
     return this._simple;
   }
+
   @Input()
   set nzFrontPagination(value: boolean) {
     this._frontPagination = toBoolean(value);
@@ -308,17 +310,28 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   setScrollPositionClassName(): void {
     if (this.tableBodyElement && this.nzScroll && this.nzScroll.x) {
       if ((this.tableBodyElement.nativeElement.scrollWidth === this.tableBodyElement.nativeElement.clientWidth) && (this.tableBodyElement.nativeElement.scrollWidth !== 0)) {
-        this.scrollPosition = 'default';
+        this.setScrollName();
       } else if (this.tableBodyElement.nativeElement.scrollLeft === 0) {
-        this.scrollPosition = 'left';
+        this.setScrollName('left');
       } else if (this.tableBodyElement.nativeElement.scrollWidth === (this.tableBodyElement.nativeElement.scrollLeft + this.tableBodyElement.nativeElement.clientWidth)) {
-        this.scrollPosition = 'right';
+        this.setScrollName('right');
       } else {
-        this.scrollPosition = 'middle';
+        this.setScrollName('middle');
       }
     }
   }
 
+  setScrollName(position?: string): void {
+    const prefix = 'ant-table-scroll-position';
+    const classList = [ 'left', 'right', 'middle' ];
+    classList.forEach(name => {
+      this.renderer.removeClass(this.tableMainElement.nativeElement, `${prefix}-${name}`);
+    });
+    if (position) {
+      this.renderer.addClass(this.tableMainElement.nativeElement, `${prefix}-${position}`);
+    }
+  }
+
   fitScrollBar(): void {
     const scrollbarWidth = this.nzMeasureScrollbarService.scrollBarWidth;
     if (scrollbarWidth) {
@@ -338,23 +351,31 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.locale = this.i18n.getLocaleData('Table'));
     this.fitScrollBar();
-    if (this.nzScroll && this.nzScroll.x && this.nzScroll.y) {
-      /** magic code to sync scroll **/
-      const overlay = this.overlay.create();
-      overlay.dispose();
-    }
   }
 
   ngAfterViewInit(): void {
     setTimeout(() => this.setScrollPositionClassName());
+    this.ngZone.runOutsideAngular(() => {
+      if (this.tableHeaderElement
+        && this.tableHeaderElement.nativeElement
+        && this.tableBodyElement
+        && this.tableBodyElement.nativeElement) {
+        merge(
+          fromEvent(this.tableHeaderElement.nativeElement, 'scroll'),
+          fromEvent(this.tableBodyElement.nativeElement, 'scroll')
+        ).pipe(takeUntil(this.unsubscribe$)).subscribe((data: MouseEvent) => {
+          this.syncScrollTable(data);
+        });
+      }
+    });
   }
 
   ngOnDestroy(): void {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
   }
 
-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private overlay: Overlay, private nzMeasureScrollbarService: NzMeasureScrollbarService, private i18n: NzI18nService) {
+  constructor(private renderer: Renderer2, private ngZone: NgZone, private elementRef: ElementRef, private cdr: ChangeDetectorRef, private nzMeasureScrollbarService: NzMeasureScrollbarService, private i18n: NzI18nService) {
     this.el = this.elementRef.nativeElement;
   }
 }