chore: fix related bugs (NG-ZORRO#3634)

* fix(module:table): fix table sort default to ascend close NG-ZORRO#3398 * fix(module:table): fix virtual scroll no data height close NG-ZORRO#3419 * fix(module:table): fix table border error when small or bordered close NG-ZORRO#3373 close NG-ZORRO#3032 * docs(module:table): fix table drag style * fix(module:collapse): fix expand bug in Safari & animation bug close NG-ZORRO#3098 close NG-ZORRO#3346
Ricbet · Apr 9, 2020 · d101fc4 · d101fc4
1 parent ff46445
commit d101fc4
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 34 deletions.
diff --git a/components/collapse/nz-collapse-panel.component.ts b/components/collapse/nz-collapse-panel.component.ts
@@ -13,7 +13,6 @@ import {
   ElementRef,
   EventEmitter,
   Host,
-  HostBinding,
   Input,
   OnDestroy,
   OnInit,
@@ -42,12 +41,14 @@ import { NzCollapseComponent } from './nz-collapse.component';
     `
   ],
   host: {
-    '[class.ant-collapse-no-arrow]': '!nzShowArrow'
+    '[class.ant-collapse-no-arrow]': '!nzShowArrow',
+    '[class.ant-collapse-item-active]': 'nzActive',
+    '[class.ant-collapse-item-disabled]': 'nzDisabled'
   }
 })
 export class NzCollapsePanelComponent implements OnInit, OnDestroy {
-  @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-active') nzActive = false;
-  @Input() @InputBoolean() @HostBinding('class.ant-collapse-item-disabled') nzDisabled = false;
+  @Input() @InputBoolean() nzActive = false;
+  @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzShowArrow = true;
   @Input() nzExtra: string | TemplateRef<void>;
   @Input() nzHeader: string | TemplateRef<void>;

diff --git a/components/core/animation/collapse.ts b/components/core/animation/collapse.ts
@@ -12,7 +12,7 @@ import { AnimationCurves } from './animation-consts';
 export const collapseMotion: AnimationTriggerMetadata = trigger('collapseMotion', [
   state('expanded', style({ height: '*' })),
   state('collapsed', style({ height: 0, overflow: 'hidden' })),
-  state('hidden', style({ height: 0, display: 'none' })),
+  state('hidden', style({ height: 0, overflow: 'hidden', borderTopWidth: '0' })),
   transition('expanded => collapsed', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
   transition('expanded => hidden', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
   transition('collapsed => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),

diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html
@@ -40,6 +40,7 @@
   <ng-template #scrollViewTpl>
     <cdk-virtual-scroll-viewport
       class="ant-table-body"
+      [hidden]="!data.length"
       [itemSize]="nzVirtualItemSize"
       [maxBufferPx]="nzVirtualMaxBufferPx"
       [minBufferPx]="nzVirtualMinBufferPx"
@@ -70,7 +71,7 @@
     [nzShowQuickJumper]="nzShowQuickJumper"
     [nzHideOnSinglePage]="nzHideOnSinglePage"
     [nzShowTotal]="nzShowTotal"
-    [nzSize]="(nzSize === 'middle' || nzSize=='small') ? 'small' : ''"
+    [nzSize]="nzSize === 'default' ? 'default' : 'small'"
     [nzPageSize]="nzPageSize"
     [nzTotal]="nzTotal"
     [nzSimple]="nzSimple"

diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -205,20 +205,18 @@ export class NzTableComponent<T = any> implements OnInit, AfterViewInit, OnDestr
   }
 
   updateFrontPaginationDataIfNeeded(isPageSizeOrDataChange: boolean = false): void {
-    let data: any[] = []; // tslint:disable-line:no-any
+    let data = this.nzData || [];
     if (this.nzFrontPagination) {
-      this.nzTotal = this.nzData.length;
+      this.nzTotal = data.length;
       if (isPageSizeOrDataChange) {
-        const maxPageIndex = Math.ceil(this.nzData.length / this.nzPageSize) || 1;
+        const maxPageIndex = Math.ceil(data.length / this.nzPageSize) || 1;
         const pageIndex = this.nzPageIndex > maxPageIndex ? maxPageIndex : this.nzPageIndex;
         if (pageIndex !== this.nzPageIndex) {
           this.nzPageIndex = pageIndex;
           Promise.resolve().then(() => this.nzPageIndexChange.emit(pageIndex));
         }
       }
-      data = this.nzData.slice((this.nzPageIndex - 1) * this.nzPageSize, this.nzPageIndex * this.nzPageSize);
-    } else {
-      data = this.nzData;
+      data = data.slice((this.nzPageIndex - 1) * this.nzPageSize, this.nzPageIndex * this.nzPageSize);
     }
     this.data = [...data];
     this.nzCurrentPageDataChange.next(this.data);

diff --git a/components/table/nz-th.component.html b/components/table/nz-th.component.html
@@ -30,8 +30,8 @@
       </div>
       <ng-content></ng-content>
     </span>
-    <ng-content selector="[nz-dropdown]"></ng-content>
-    <ng-content selector="nz-dropdown"></ng-content>
+    <ng-content select="[nz-dropdown]"></ng-content>
+    <ng-content select="nz-dropdown"></ng-content>
     <div class="ant-table-column-sorter" *ngIf="nzShowSort">
       <div class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full">
         <i nz-icon

diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts
@@ -97,12 +97,12 @@ export class NzThComponent implements OnChanges, OnInit, OnDestroy {
 
   updateSortValue(): void {
     if (this.nzShowSort) {
-      if (this.nzSort === 'descend') {
-        this.setSortValue('ascend');
-      } else if (this.nzSort === 'ascend') {
+      if (this.nzSort === 'ascend') {
+        this.setSortValue('descend');
+      } else if (this.nzSort === 'descend') {
         this.setSortValue(null);
       } else {
-        this.setSortValue('descend');
+        this.setSortValue('ascend');
       }
     }
   }

diff --git a/components/table/nz-th.spec.ts b/components/table/nz-th.spec.ts
@@ -136,16 +136,16 @@ describe('nz-th', () => {
       expect(th.nativeElement.querySelector('.ant-table-column-sorter-down').classList).toContain('off');
       th.nativeElement.querySelector('.ant-table-column-sorters').firstElementChild.click();
       fixture.detectChanges();
-      expect(testComponent.sort).toBe('descend');
+      expect(testComponent.sort).toBe('ascend');
       expect(testComponent.sortChange).toHaveBeenCalledTimes(1);
-      expect(th.nativeElement.querySelector('.ant-table-column-sorter-up').classList).toContain('off');
-      expect(th.nativeElement.querySelector('.ant-table-column-sorter-down').classList).toContain('on');
+      expect(th.nativeElement.querySelector('.ant-table-column-sorter-up').classList).toContain('on');
+      expect(th.nativeElement.querySelector('.ant-table-column-sorter-down').classList).toContain('off');
       th.nativeElement.querySelector('.ant-table-column-sorters').firstElementChild.click();
       fixture.detectChanges();
       expect(testComponent.sortChange).toHaveBeenCalledTimes(2);
-      expect(testComponent.sort).toBe('ascend');
-      expect(th.nativeElement.querySelector('.ant-table-column-sorter-up').classList).toContain('on');
-      expect(th.nativeElement.querySelector('.ant-table-column-sorter-down').classList).toContain('off');
+      expect(testComponent.sort).toBe('descend');
+      expect(th.nativeElement.querySelector('.ant-table-column-sorter-up').classList).toContain('off');
+      expect(th.nativeElement.querySelector('.ant-table-column-sorter-down').classList).toContain('on');
       th.nativeElement.querySelector('.ant-table-column-sorters').firstElementChild.click();
       fixture.detectChanges();
       expect(testComponent.sortChange).toHaveBeenCalledTimes(3);

diff --git a/components/table/nz-thead.spec.ts b/components/table/nz-thead.spec.ts
@@ -32,11 +32,11 @@ describe('nz-thead', () => {
       upButtons[0].click();
       fixture.detectChanges();
       expect(testComponent.sortChange).toHaveBeenCalledTimes(1);
-      expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('on');
+      expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('off');
       upButtons[1].click();
       fixture.detectChanges();
-      expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('on');
-      expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('on');
+      expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('off');
+      expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('off');
       expect(testComponent.sortChange).toHaveBeenCalledTimes(2);
     });
     it('should singleSort change', () => {
@@ -47,11 +47,11 @@ describe('nz-thead', () => {
       upButtons[0].click();
       fixture.detectChanges();
       expect(testComponent.sortChange).toHaveBeenCalledTimes(1);
-      expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('on');
+      expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('off');
       upButtons[1].click();
       fixture.detectChanges();
       expect(upButtons[0].querySelector('.ant-table-column-sorter-down').classList).toContain('off');
-      expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('on');
+      expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('off');
       expect(testComponent.sortChange).toHaveBeenCalledTimes(2);
     });
 

diff --git a/components/table/style/patch.less b/components/table/style/patch.less
@@ -39,8 +39,8 @@ nz-table {
 }
 
 .border-right() {
-  .@{table-th-left-cls}-sticky,
-  .@{table-td-left-cls}-sticky {
+  tr > th:first-child.@{table-th-left-cls}-sticky,
+  tr > td:first-child.@{table-td-left-cls}-sticky {
     border-left: @border-width-base @border-style-base @border-color-split;
   }
 }
@@ -56,6 +56,14 @@ nz-table {
   }
 }
 
+.@{table-prefix-cls}-scroll-position-middle,
+.@{table-prefix-cls}-scroll-position-right {
+  table {
+    &.@{table-prefix-cls}-fixed {
+      border-left: none;
+    }
+  }
+}
 
 .@{table-th-left-cls}-sticky,
 .@{table-th-right-cls}-sticky,
@@ -103,7 +111,7 @@ nz-table {
   .box-shadow-right;
 }
 
-.@{table-prefix-cls}-bordered {
+.@{table-prefix-cls}-bordered:not(.@{table-prefix-cls}-small) {
   &.@{table-prefix-cls}-scroll-position-middle {
     .border-right;
     .border-left;
@@ -131,6 +139,17 @@ nz-table {
 }
 
 .@{table-prefix-cls}-small {
+  &.@{table-prefix-cls}-bordered {
+    .@{table-prefix-cls}-thead > tr > th:last-child,
+    .@{table-prefix-cls}-tbody > tr > td:last-child {
+      border-right: @border-width-base @border-style-base @border-color-split;
+    }
+    .@{table-prefix-cls}-thead > tr:first-child > th:last-child,
+    .@{table-prefix-cls}-tbody > tr:first-child > td:last-child {
+      border-right: none;
+    }
+  }
+
   > .@{table-prefix-cls}-content {
     > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
     > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,

diff --git a/components/upload/nz-upload-btn.component.ts b/components/upload/nz-upload-btn.component.ts
@@ -72,7 +72,9 @@ export class NzUploadBtnComponent implements OnInit, OnChanges, OnDestroy {
 
   @HostListener('drop', ['$event'])
   @HostListener('dragover', ['$event'])
-  onFileDrop(e: DragEvent): void {
+  // skip safari bug
+  // tslint:disable-next-line:no-any
+  onFileDrop(e: any): void {
     if (this.options.disabled || e.type === 'dragover') {
       e.preventDefault();
       return;

diff --git a/components/upload/nz-upload.component.ts b/components/upload/nz-upload.component.ts
@@ -244,7 +244,9 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
 
   private dragState: string;
 
-  fileDrop(e: DragEvent): void {
+  // skip safari bug
+  // tslint:disable-next-line:no-any
+  fileDrop(e: any): void {
     if (e.type === this.dragState) {
       return;
     }