fix(module:th): fix table th filter & style bug (#1674)

close #1671 close #1660
NG-ZORRO · Jun 16, 2018 · 1a4332a · 1a4332a
1 parent 69d6899
commit 1a4332a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 8 deletions.
diff --git a/components/table/demo/custom-filter-panel.ts b/components/table/demo/custom-filter-panel.ts
@@ -102,7 +102,7 @@ export class NzDemoTableCustomFilterPanelComponent {
 
   search(): void {
     const filterFunc = (item) => {
-      return (this.searchAddress.length ? this.searchAddress.some(address => item.address.indexOf(address.name) !== -1) : true) &&
+      return (this.searchAddress.length ? this.searchAddress.some(address => item.address.indexOf(address) !== -1) : true) &&
         (item.name.indexOf(this.searchValue) !== -1);
     };
     const data = this.data.filter(item => filterFunc(item));

diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts
@@ -2,6 +2,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  HostBinding,
   Input,
   Output,
   Renderer2,
@@ -55,6 +56,11 @@ export class NzThComponent {
   /* tslint:disable-next-line:no-any */
   @Output() nzFilterChange = new EventEmitter<any[] | any>();
 
+  @HostBinding('class.ant-table-column-has-filters')
+  get hasFiltersClass(): boolean {
+    return this.nzShowSort || this.nzShowFilter;
+  }
+
   @Input()
   set nzShowSort(value: boolean) {
     this._showSort = toBoolean(value);
@@ -157,16 +163,30 @@ export class NzThComponent {
     this.nzSortChange.emit(this.nzSort);
   }
 
+  get filterList(): NzThItemInterface[] {
+    return this.multipleFilterList.filter(item => item.checked).map(item => item.value);
+  }
+
+  /* tslint:disable-next-line:no-any */
+  get filterValue(): any {
+    const checkedFilter = this.singleFilterList.find(item => item.checked);
+    return checkedFilter ? checkedFilter.value : null;
+  }
+
+  updateFilterStatus(): void {
+    if (this.nzFilterMultiple) {
+      this.hasFilterValue = this.filterList.length > 0;
+    } else {
+      this.hasFilterValue = isNotNil(this.filterValue);
+    }
+  }
+
   search(): void {
+    this.updateFilterStatus();
     if (this.nzFilterMultiple) {
-      const filterList = this.multipleFilterList.filter(item => item.checked).map(item => item.value);
-      this.hasFilterValue = filterList.length > 0;
-      this.nzFilterChange.emit(filterList);
+      this.nzFilterChange.emit(this.filterList);
     } else {
-      const checkedFilter = this.singleFilterList.find(item => item.checked);
-      const filterValue = checkedFilter ? checkedFilter.value : null;
-      this.hasFilterValue = isNotNil(filterValue);
-      this.nzFilterChange.emit(filterValue);
+      this.nzFilterChange.emit(this.filterValue);
     }
     this.hideDropDown();
   }
@@ -204,6 +224,7 @@ export class NzThComponent {
       this._filters = value;
       this.initMultipleFilterList();
       this.initSingleFilterList();
+      this.updateFilterStatus();
     } else {
       console.warn('nzFilters only accept type of Array<{ text: string; value: any }>');
     }

diff --git a/components/table/nz-th.spec.ts b/components/table/nz-th.spec.ts
@@ -77,9 +77,11 @@ describe('nz-th', () => {
     });
     it('should showSort work', () => {
       fixture.detectChanges();
+      expect(th.nativeElement.classList).not.toContain('ant-table-column-has-filters');
       expect(th.nativeElement.querySelector('.ant-table-column-sorter')).toBeNull();
       testComponent.showSort = true;
       fixture.detectChanges();
+      expect(th.nativeElement.classList).toContain('ant-table-column-has-filters');
       expect(th.nativeElement.querySelector('.ant-table-column-sorter')).toBeDefined();
     });
     it('should sort change work', () => {
@@ -167,9 +169,11 @@ describe('nz-th', () => {
     });
     it('should showFilter work', () => {
       fixture.detectChanges();
+      expect(th.nativeElement.classList).not.toContain('ant-table-column-has-filters');
       expect(th.nativeElement.querySelector('.anticon anticon-filter')).toBeNull();
       testComponent.showFilter = true;
       fixture.detectChanges();
+      expect(th.nativeElement.classList).toContain('ant-table-column-has-filters');
       expect(th.nativeElement.querySelector('.anticon anticon-filter')).toBeDefined();
     });
     it('should filterChange work', () => {
@@ -184,6 +188,35 @@ describe('nz-th', () => {
       expect(testComponent.nzThComponent.hasFilterValue).toBe(true);
       expect(testComponent.filterChange).toHaveBeenCalledWith([ '1' ]);
     });
+    it('should hasFilter change after filters change with multiple', () => {
+      testComponent.showFilter = true;
+      fixture.detectChanges();
+      testComponent.nzThComponent.checkMultiple(testComponent.nzThComponent.multipleFilterList[ 0 ]);
+      testComponent.nzThComponent.search();
+      fixture.detectChanges();
+      expect(testComponent.nzThComponent.hasFilterValue).toBe(true);
+      testComponent.filters = [
+        { text: 'filter1', value: '4' },
+        { text: 'filter2', value: '3' }
+      ];
+      fixture.detectChanges();
+      expect(testComponent.nzThComponent.hasFilterValue).toBe(false);
+    });
+    it('should hasFilter change after filters change with single', () => {
+      testComponent.showFilter = true;
+      testComponent.filterMultiple = false;
+      fixture.detectChanges();
+      testComponent.nzThComponent.checkSingle(testComponent.nzThComponent.singleFilterList[ 0 ]);
+      testComponent.nzThComponent.search();
+      fixture.detectChanges();
+      expect(testComponent.nzThComponent.hasFilterValue).toBe(true);
+      testComponent.filters = [
+        { text: 'filter1', value: '5' },
+        { text: 'filter2', value: '3' }
+      ];
+      fixture.detectChanges();
+      expect(testComponent.nzThComponent.hasFilterValue).toBe(false);
+    });
     it('should reset work', () => {
       testComponent.showFilter = true;
       fixture.detectChanges();