fix(module:descriptions): fix span calculation (#3799)

* fix(module:description): fix span calculation * test: add test case
NG-ZORRO · Jul 16, 2019 · aaa5852 · aaa5852
1 parent 39d1f45
commit aaa5852
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/components/descriptions/demo/responsive.ts b/components/descriptions/demo/responsive.ts
@@ -3,7 +3,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-descriptions-responsive',
   template: `
-    <nz-descriptions nzTitle="Responsive Descriptions" [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
+    <nz-descriptions
+      nzTitle="Responsive Descriptions"
+      nzBordered
+      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
+    >
       <nz-descriptions-item nzTitle="Product">
         Cloud Database
       </nz-descriptions-item>

diff --git a/components/descriptions/nz-descriptions.component.html b/components/descriptions/nz-descriptions.component.html
@@ -1,27 +1,22 @@
-<div *ngIf="nzTitle"
-     class="ant-descriptions-title">
+<div *ngIf="nzTitle" class="ant-descriptions-title">
   <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
 </div>
 <div class="ant-descriptions-view">
   <table>
     <tbody>
-      <tr class="ant-descriptions-row"
-          *ngFor="let row of itemMatrix; let i = index">
+      <tr class="ant-descriptions-row" *ngFor="let row of itemMatrix; let i = index">
         <ng-container *ngFor="let item of row; let isLast = last">
           <ng-container *ngIf="!nzBordered">
-            <td class="ant-descriptions-item"
-                [colSpan]="isLast ? (realColumn - (row.length - 1)) * 2 - 1 : item.span">
+            <td class="ant-descriptions-item" [colSpan]="item.span">
               <span class="ant-descriptions-item-label">{{ item.title }}</span>
               <span class="ant-descriptions-item-content">
                 <ng-template [ngTemplateOutlet]="item.content"></ng-template>
               </span>
             </td>
           </ng-container>
           <ng-container *ngIf="nzBordered">
-            <td class="ant-descriptions-item-label"
-                *nzStringTemplateOutlet="item.title">{{ item.title }}</td>
-            <td class="ant-descriptions-item-content"
-                [colSpan]="isLast ? (realColumn - (row.length - 1)) * 2 - 1 : item.span">
+            <td class="ant-descriptions-item-label" *nzStringTemplateOutlet="item.title">{{ item.title }}</td>
+            <td class="ant-descriptions-item-content" [colSpan]="isLast ? item.span * 2 - 1 : item.span">
               <ng-template [ngTemplateOutlet]="item.content"></ng-template>
             </td>
           </ng-container>

diff --git a/components/descriptions/nz-descriptions.component.ts b/components/descriptions/nz-descriptions.component.ts
@@ -129,17 +129,18 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
 
     const column = (this.realColumn = this.getColumn());
     const items = this.items.toArray();
+    const length = items.length;
     const matrix: NzDescriptionsItemRenderProps[][] = [];
     const flushRow = () => {
       matrix.push(currentRow);
       currentRow = [];
       width = 0;
     };
 
-    items.forEach(item => {
+    for (let i = 0; i < length; i++) {
+      const item = items[i];
       const { nzTitle: title, content, nzSpan: span } = item;
 
-      currentRow.push({ title, content, span });
       width += span;
 
       // If the last item make the row's length exceeds `nzColumn`, the last
@@ -149,12 +150,14 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
         if (width > column) {
           warn(`"nzColumn" is ${column} but we have row length ${width}`);
         }
+        currentRow.push({ title, content, span: column - (width - span) });
         flushRow();
+      } else if (i === length - 1) {
+        currentRow.push({ title, content, span: column - (width - span) });
+        flushRow();
+      } else {
+        currentRow.push({ title, content, span });
       }
-    });
-
-    if (currentRow.length) {
-      flushRow();
     }
 
     this.itemMatrix = matrix;

diff --git a/components/descriptions/nz-descriptions.spec.ts b/components/descriptions/nz-descriptions.spec.ts
@@ -83,6 +83,14 @@ describe('nz descriptions', () => {
       fixture.detectChanges();
       rows = componentElement.querySelectorAll('.ant-descriptions-row');
       expect(rows.length).toBe(1);
+
+      // Should the last fill the rest space.
+      testComponent.colspanArray = [1, 1];
+      fixture.detectChanges();
+      rows = componentElement.querySelectorAll('.ant-descriptions-row');
+      const tds = componentElement.querySelectorAll('.ant-descriptions-item');
+      expect(rows.length).toBe(1);
+      expect((tds[1] as HTMLTableDataCellElement).colSpan).toBe(4);
     });
 
     it('should responsive work', fakeAsync(() => {