fix(module:table & i18n): fix table style & export i18n interface (#1163

) * fix(module:table & i18n): fix table style & export i18n interface * test(module:table): add test for table
NG-ZORRO · Mar 17, 2018 · fdd03d7 · fdd03d7
1 parent 3bcd50d
commit fdd03d7
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 11 deletions.
diff --git a/components/core/style/index.less b/components/core/style/index.less
@@ -29,7 +29,6 @@
   z-index: 1000;
 }
 
-
 .box-shadow-left() {
   .ant-table-th-right-sticky, .ant-table-td-right-sticky {
     box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
@@ -54,6 +53,14 @@
   }
 }
 
+.ant-table-td-right-sticky + .ant-table-td-right-sticky {
+  box-shadow: none;
+}
+
+.ant-table-th-right-sticky + .ant-table-th-right-sticky {
+  box-shadow: none;
+}
+
 .ant-table-th-left-sticky, .ant-table-th-right-sticky, .ant-table-td-right-sticky, .ant-table-td-left-sticky {
   position: sticky;
   z-index: 1;

diff --git a/components/i18n/public-api.ts b/components/i18n/public-api.ts
@@ -1,6 +1,7 @@
 export { NzI18nModule } from './nz-i18n.module';
 export { NZ_I18N } from './nz-i18n.token';
 export { NzI18nService } from './nz-i18n.service';
+export { NzI18nInterface } from './nz-i18n.interface';
 export { default as ar_EG } from './languages/ar_EG';
 export { default as bg_BG } from './languages/bg_BG';
 export { default as ca_ES } from './languages/ca_ES';

diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -1,10 +1,12 @@
 import { Overlay } from '@angular/cdk/overlay';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ContentChildren,
   ElementRef,
   EventEmitter,
+  HostListener,
   Input,
   OnInit,
   Output,
@@ -129,7 +131,7 @@ import { NzTheadComponent } from './nz-thead.component';
     </div>
   `
 })
-export class NzTableComponent implements OnInit {
+export class NzTableComponent implements OnInit, AfterViewInit {
   private _bordered = false;
   private _showPagination = true;
   private _loading = false;
@@ -278,9 +280,7 @@ export class NzTableComponent implements OnInit {
       this._scroll = { x: null, y: null };
     }
     this.cdr.detectChanges();
-    if (value && value.x) {
-      this.scrollPosition = 'left';
-    }
+    this.setScrollPositionClassName();
   }
 
   get nzScroll(): { x: string; y: string } {
@@ -383,8 +383,10 @@ export class NzTableComponent implements OnInit {
   }
 
   setScrollPositionClassName(): void {
-    if (this.tableBodyElement) {
-      if (this.tableBodyElement.nativeElement.scrollLeft === 0) {
+    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';
+      } else if (this.tableBodyElement.nativeElement.scrollLeft === 0) {
         this.scrollPosition = 'left';
       } else if (this.tableBodyElement.nativeElement.scrollWidth === (this.tableBodyElement.nativeElement.scrollLeft + this.tableBodyElement.nativeElement.clientWidth)) {
         this.scrollPosition = 'right';
@@ -394,22 +396,35 @@ export class NzTableComponent implements OnInit {
     }
   }
 
-  ngOnInit(): void {
+  fitScrollBar(): void {
     const scrollbarWidth = measureScrollbar();
     if (scrollbarWidth) {
       this.headerBottomStyle = {
         marginBottom : `-${scrollbarWidth}px`,
         paddingBottom: `0px`
       };
     }
+  }
+
+  @HostListener('window:resize')
+  onWindowResize(): void {
+    this.fitScrollBar();
+    this.setScrollPositionClassName();
+  }
 
+  ngOnInit(): void {
+    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());
+  }
+
   constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private overlay: Overlay) {
     this.el = this.elementRef.nativeElement;
   }

diff --git a/components/table/nz-table.spec.ts b/components/table/nz-table.spec.ts
@@ -273,6 +273,17 @@ describe('nz-table', () => {
       fixture.detectChanges();
       expect(table.nativeElement.querySelector('.ant-table').classList).toContain('ant-table-scroll-position-right');
     });
+    it('should change width affect scroll', () => {
+      fixture.detectChanges();
+      table.nativeElement.querySelector('.ant-spin-container').removeAttribute('hidden');
+      fixture.detectChanges();
+      expect(table.nativeElement.querySelector('.ant-table').classList).toContain('ant-table-scroll-position-left');
+      testComponent.width = 1000;
+      window.dispatchEvent(new Event('resize'));
+      fixture.detectChanges();
+      const tableBody = table.nativeElement.querySelector('.ant-table-body');
+      expect(tableBody.scrollWidth).toBe(tableBody.clientWidth);
+    });
   });
 });
 
@@ -359,8 +370,8 @@ export class NzTestTableBasicComponent implements OnInit {
 @Component({
   selector     : 'nz-test-table-scroll',
   template     : `
-    <div style="width: 300px; display: block;">
-      <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" [nzScroll]="{ x:'1300px',y: '240px' }">
+    <div style="display: block;" [style.width.px]="width">
+      <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" [nzScroll]="{ x:'600px',y: '240px' }">
         <thead>
           <tr>
             <th>Full Name</th>
@@ -405,6 +416,7 @@ export class NzTestTableBasicComponent implements OnInit {
 export class NzTestTableScrollComponent implements OnInit {
   @ViewChild(NzTableComponent) nzTableComponent: NzTableComponent;
   dataSet = [];
+  width = 300;
 
   ngOnInit(): void {
     for (let i = 0; i < 100; i++) {

diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts
@@ -74,7 +74,7 @@ export interface NzThItemInterface {
       </span>
     </div>
     <nz-dropdown nzTrigger="click" *ngIf="nzShowFilter" [nzClickHide]="false" [hasFilterButton]="true" (nzVisibleChange)="dropDownVisibleChange($event)">
-      <i class="anticon anticon-filter" nz-dropdown></i>
+      <i class="anticon anticon-filter" [class.ant-table-filter-selected]="filterVisible" nz-dropdown></i>
       <ul nz-menu>
         <ng-container *ngIf="nzFilterMultiple">
           <li nz-menu-item *ngFor="let filter of multipleFilterList" (click)="checkMultiple(filter)">
@@ -106,6 +106,7 @@ export class NzThComponent {
   private _showCheckbox = false;
   private _showRowSelection = false;
   el: HTMLElement;
+  filterVisible = false;
   multipleFilterList: NzThItemInterface[] = [];
   singleFilterList: NzThItemInterface[] = [];
   /* tslint:disable-next-line:no-any */
@@ -256,6 +257,7 @@ export class NzThComponent {
   }
 
   dropDownVisibleChange(value: boolean): void {
+    this.filterVisible = value;
     if (!value) {
       this.search();
     }