Skip to content

Commit

Permalink
refactor(module:description): refactor control flow (#8323)
Browse files Browse the repository at this point in the history 
* docs(module:description): update doc

* refactor(module:description): refactor control flow test

* refactor(module:description): refactor control flow component
  • Loading branch information
@Nicoss54
Nicoss54 authored Jan 2, 2024
1 parent 9b866bc commit aaff6b8
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 74 deletions.
129 changes: 66 additions & 63 deletions components/descriptions/descriptions.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { Direction, Directionality } from '@angular/cdk/bidi';
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import {
AfterContentInit,
ChangeDetectionStrategy,
Expand Down Expand Up @@ -51,56 +51,61 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
exportAs: 'nzDescriptions',
preserveWhitespaces: false,
template: `
<div *ngIf="nzTitle || nzExtra" class="ant-descriptions-header">
<div *ngIf="nzTitle" class="ant-descriptions-title">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
</div>
<div *ngIf="nzExtra" class="ant-descriptions-extra">
<ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
@if (nzTitle || nzExtra) {
<div class="ant-descriptions-header">
@if (nzTitle) {
<div class="ant-descriptions-title">
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
</div>
}
@if (nzExtra) {
<div class="ant-descriptions-extra">
<ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
</div>
}
</div>
</div>
}
<div class="ant-descriptions-view">
<table>
<tbody>
<ng-container *ngIf="nzLayout === 'horizontal'">
<tr class="ant-descriptions-row" *ngFor="let row of itemMatrix; let i = index">
<ng-container *ngFor="let item of row; let isLast = last">
<!-- Horizontal & NOT Bordered -->
<ng-container *ngIf="!nzBordered">
<td class="ant-descriptions-item" [colSpan]="item.span">
<div class="ant-descriptions-item-container">
<span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
<ng-container *nzStringTemplateOutlet="item.title">
{{ item.title }}
</ng-container>
</span>
<span class="ant-descriptions-item-content">
<ng-template [ngTemplateOutlet]="item.content"></ng-template>
</span>
</div>
</td>
</ng-container>
<!-- Horizontal & Bordered -->
<ng-container *ngIf="nzBordered">
<td class="ant-descriptions-item-label">
<ng-container *nzStringTemplateOutlet="item.title">
{{ item.title }}
</ng-container>
</td>
<td class="ant-descriptions-item-content" [colSpan]="item.span * 2 - 1">
<ng-template [ngTemplateOutlet]="item.content"></ng-template>
</td>
</ng-container>
</ng-container>
</tr>
</ng-container>
@if (nzLayout === 'horizontal') {
@for (row of itemMatrix; track row; let i = $index) {
<tr class="ant-descriptions-row">
@for (item of row; track item; let isLast = $last) {
@if (!nzBordered) {
<td class="ant-descriptions-item" [colSpan]="item.span">
<div class="ant-descriptions-item-container">
<span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
<ng-container *nzStringTemplateOutlet="item.title">
{{ item.title }}
</ng-container>
</span>
<span class="ant-descriptions-item-content">
<ng-template [ngTemplateOutlet]="item.content"></ng-template>
</span>
</div>
</td>
} @else {
<td class="ant-descriptions-item-label">
<ng-container *nzStringTemplateOutlet="item.title">
{{ item.title }}
</ng-container>
</td>
<td class="ant-descriptions-item-content" [colSpan]="item.span * 2 - 1">
<ng-template [ngTemplateOutlet]="item.content"></ng-template>
</td>
}
}
</tr>
}
}
<ng-container *ngIf="nzLayout === 'vertical'">
<!-- Vertical & NOT Bordered -->
<ng-container *ngIf="!nzBordered">
<ng-container *ngFor="let row of itemMatrix; let i = index">
@if (nzLayout === 'vertical') {
@if (!nzBordered) {
@for (row of itemMatrix; track row; let i = $index) {
<tr class="ant-descriptions-row">
<ng-container *ngFor="let item of row; let isLast = last">
@for (item of row; track item; let isLast = $last) {
<td class="ant-descriptions-item" [colSpan]="item.span">
<div class="ant-descriptions-item-container">
<span class="ant-descriptions-item-label" [class.ant-descriptions-item-no-colon]="!nzColon">
Expand All @@ -110,43 +115,41 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
</span>
</div>
</td>
</ng-container>
}
</tr>
<tr class="ant-descriptions-row">
<ng-container *ngFor="let item of row; let isLast = last">
@for (item of row; track item; let isLast = $last) {
<td class="ant-descriptions-item" [colSpan]="item.span">
<div class="ant-descriptions-item-container">
<span class="ant-descriptions-item-content">
<ng-template [ngTemplateOutlet]="item.content"></ng-template>
<ng-template [ngTemplateOutlet]="item.content" />
</span>
</div>
</td>
</ng-container>
}
</tr>
</ng-container>
</ng-container>
<!-- Vertical & Bordered -->
<ng-container *ngIf="nzBordered">
<ng-container *ngFor="let row of itemMatrix; let i = index">
}
} @else {
@for (row of itemMatrix; track row; let i = $index) {
<tr class="ant-descriptions-row">
<ng-container *ngFor="let item of row; let isLast = last">
@for (item of row; track item; let isLast = $last) {
<td class="ant-descriptions-item-label" [colSpan]="item.span">
<ng-container *nzStringTemplateOutlet="item.title">
{{ item.title }}
</ng-container>
</td>
</ng-container>
}
</tr>
<tr class="ant-descriptions-row">
<ng-container *ngFor="let item of row; let isLast = last">
@for (item of row; track item; let isLast = $last) {
<td class="ant-descriptions-item-content" [colSpan]="item.span">
<ng-template [ngTemplateOutlet]="item.content"></ng-template>
<ng-template [ngTemplateOutlet]="item.content" />
</td>
</ng-container>
}
</tr>
</ng-container>
</ng-container>
</ng-container>
}
}
}
</tbody>
</table>
</div>
Expand All @@ -158,7 +161,7 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
'[class.ant-descriptions-small]': 'nzSize === "small"',
'[class.ant-descriptions-rtl]': 'dir === "rtl"'
},
imports: [NgIf, NzOutletModule, NgForOf, NgTemplateOutlet],
imports: [NzOutletModule, NgTemplateOutlet],
standalone: true
})
export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterContentInit, OnInit {
Expand Down
8 changes: 3 additions & 5 deletions components/descriptions/descriptions.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,11 +154,9 @@ describe('nz descriptions', () => {
selector: 'nz-test-descriptions',
template: `
<nz-descriptions [nzTitle]="title" [nzBordered]="bordered" [nzColumn]="column">
<nz-descriptions-item
*ngFor="let col of colspanArray; let i = index"
[nzTitle]="itemTitle + i"
[nzSpan]="col"
></nz-descriptions-item>
@for (col of colspanArray; track i; let i = $index) {
<nz-descriptions-item [nzTitle]="itemTitle + i" [nzSpan]="col" />
}
</nz-descriptions>
`
})
Expand Down
13 changes: 7 additions & 6 deletions components/descriptions/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,18 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
### nz-descriptions:standalone

| Property | Description | Type | Default | Global Config |
| -------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------- | ------------- |
|----------------|-----------------------------------------------------------------------------------------------------------------|------------------------------------|-------------------------------------------------|---------------|
| `[nzTitle]` | Describe the title of the list, displayed at the top | `string\|TemplateRef<void>` | `false` |
| `[nzExtra]` | The action area of the description list, placed at the top-right | `string\|TemplateRef<void>` | `-` |
| `[nzBordered]` | Whether to display the border | `boolean` | `false` | ✅ |
| `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ |
| `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ |
| `[nzColon]` | Show colon after title | `boolean` | `true` | ✅ |
| `[nzBordered]` | Whether to display the border | `boolean` | `false` | ✅ |
| `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ |
| `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ |
| `[nzColon]` | Show colon after title | `boolean` | `true` | ✅ |
| `[nzLayout]` | Set the layout of the list | `'horizontal' \| 'vertical'` | `'horizontal'` | |

### nz-descriptions-item:standalone

| Property | Description | Type | Default |
| ----------- | ------------------------------ | --------- | --------------------------- |
|-------------|--------------------------------|-----------|-----------------------------|
| `[nzTitle]` | Description of the content | `boolean` | `string\|TemplateRef<void>` |
| `[nzSpan]` | The number of columns included | `number` | `1` |

0 comments on commit aaff6b8

Please sign in to comment.