From aaff6b86315048d7c6d25dc79a6fd3ca80933213 Mon Sep 17 00:00:00 2001 From: Nicolas Frizzarin Date: Tue, 2 Jan 2024 11:18:56 +0100 Subject: [PATCH] refactor(module:description): refactor control flow (#8323) * docs(module:description): update doc * refactor(module:description): refactor control flow test * refactor(module:description): refactor control flow component --- .../descriptions/descriptions.component.ts | 129 +++++++++--------- components/descriptions/descriptions.spec.ts | 8 +- components/descriptions/doc/index.en-US.md | 13 +- 3 files changed, 76 insertions(+), 74 deletions(-) diff --git a/components/descriptions/descriptions.component.ts b/components/descriptions/descriptions.component.ts index 63caf90603..d04ab24ef0 100644 --- a/components/descriptions/descriptions.component.ts +++ b/components/descriptions/descriptions.component.ts @@ -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, @@ -51,56 +51,61 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = { exportAs: 'nzDescriptions', preserveWhitespaces: false, template: ` -
-
- {{ nzTitle }} -
-
- {{ nzExtra }} + @if (nzTitle || nzExtra) { +
+ @if (nzTitle) { +
+ {{ nzTitle }} +
+ } + @if (nzExtra) { +
+ {{ nzExtra }} +
+ }
-
+ } +
- - - - - - - - - - - - - - - + @if (nzLayout === 'horizontal') { + @for (row of itemMatrix; track row; let i = $index) { + + @for (item of row; track item; let isLast = $last) { + @if (!nzBordered) { + + } @else { + + + } + } + + } + } - - - - + @if (nzLayout === 'vertical') { + @if (!nzBordered) { + @for (row of itemMatrix; track row; let i = $index) { - + @for (item of row; track item; let isLast = $last) { - + } - + @for (item of row; track item; let isLast = $last) { - + } - - - - - + } + } @else { + @for (row of itemMatrix; track row; let i = $index) { - + @for (item of row; track item; let isLast = $last) { - + } - + @for (item of row; track item; let isLast = $last) { - + } - - - + } + } + }
-
- - - {{ item.title }} - - - - - -
- 		- - {{ item.title }} - - - -
+
+ + + {{ item.title }} + + + + + +
+ 		+ + {{ item.title }} + + + +
@@ -110,43 +115,41 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
- +
{{ item.title }}
- +
@@ -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 { diff --git a/components/descriptions/descriptions.spec.ts b/components/descriptions/descriptions.spec.ts index 3437248c3a..175e2f971c 100644 --- a/components/descriptions/descriptions.spec.ts +++ b/components/descriptions/descriptions.spec.ts @@ -154,11 +154,9 @@ describe('nz descriptions', () => { selector: 'nz-test-descriptions', template: ` - + @for (col of colspanArray; track i; let i = $index) { + + } ` }) diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md index 082601aceb..ee39f7804f 100644 --- a/components/descriptions/doc/index.en-US.md +++ b/components/descriptions/doc/index.en-US.md @@ -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` | `false` | | `[nzExtra]` | The action area of the description list, placed at the top-right | `string\|TemplateRef` | `-` | -| `[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` | | `[nzSpan]` | The number of columns included | `number` | `1` |