Skip to content

refactor(module:input): deprecate nzAutoSize directive #9431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor(module:input): deprecate nzAutoSize directive #9431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions components/drawer/demo/from-drawer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { Component } from '@angular/core';

import { NzButtonModule } from 'ng-zorro-antd/button';
Expand All @@ -9,7 +10,15 @@ import { NzSelectModule } from 'ng-zorro-antd/select';

@Component({
selector: 'nz-demo-drawer-from-drawer',
imports: [NzButtonModule, NzDrawerModule, NzDatePickerModule, NzFormModule, NzInputModule, NzSelectModule],
imports: [
NzButtonModule,
NzDrawerModule,
NzDatePickerModule,
NzFormModule,
NzInputModule,
NzSelectModule,
CdkTextareaAutosize
],
template: `
<button nz-button nzType="primary" (click)="open()">Create</button>
<nz-drawer
Expand Down Expand Up @@ -86,7 +95,9 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
<textarea
nz-input
placeholder="please enter url description"
[nzAutosize]="{ minRows: 4, maxRows: 4 }"
cdkTextareaAutosize
cdkAutosizeMinRows="4"
cdkAutosizeMaxRows="4"
></textarea>
</nz-form-control>
</nz-form-item>
Expand Down
6 changes: 6 additions & 0 deletions components/input/autosize.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,17 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

import { NzResizeService } from 'ng-zorro-antd/core/services';

/**
* @deprecated Will be removed in v22.
*/
export interface AutoSizeType {
minRows?: number;
maxRows?: number;
}

/**
* @deprecated Will be removed in v22. It is recommended to use {@link CdkTextareaAutosize} instead.
*/
@Directive({
selector: 'textarea[nzAutosize]',
exportAs: 'nzAutosize',
Expand Down
5 changes: 2 additions & 3 deletions components/input/demo/autosize-textarea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ title:

## zh-CN

`nzAutosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `nzAutosize` 可以设定为一个对象，指定最小行数和最大行数。
使用 `@angular/cdk` 提供的 [`CdkTextareaAutosize`](https://material.angular.dev/cdk/text-field/overview#automatically-resizing-a-lesstextareagreater) 指令实现文本域高度自适应。

## en-US

`nzAutosize` prop for a `textarea` type of `nz-input` makes the height to automatically adjust based on the content.
An options object can be provided to `nzAutosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
Use [`CdkTextareaAutosize`](https://material.angular.dev/cdk/text-field/overview#automatically-resizing-a-lesstextareagreater) directive provided by `@angular/cdk` to achieve textarea height adaptation.
31 changes: 18 additions & 13 deletions components/input/demo/autosize-textarea.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
selector: 'nz-demo-input-autosize-textarea',
imports: [FormsModule, NzInputModule],
imports: [NzInputModule, CdkTextareaAutosize],
template: `
<textarea nz-input placeholder="Autosize height based on content lines" nzAutosize></textarea>
<textarea nz-input placeholder="Autosize height based on content lines" cdkTextareaAutosize></textarea>
<br />
<br />
<textarea
nz-input
placeholder="Autosize height with minimum and maximum number of lines"
[nzAutosize]="{ minRows: 2, maxRows: 6 }"
cdkTextareaAutosize
cdkAutosizeMinRows="2"
cdkAutosizeMaxRows="6"
></textarea>
<textarea nz-input placeholder="Controlled autosize" [nzAutosize]="{ minRows: 3, maxRows: 5 }"></textarea>
`,
styles: [
`
textarea + textarea {
margin-top: 24px;
}
`
]
<br />
<br />
<textarea
nz-input
placeholder="Controlled autosize"
cdkTextareaAutosize
cdkAutosizeMinRows="3"
cdkAutosizeMaxRows="5"
></textarea>
`
})
export class NzDemoInputAutosizeTextareaComponent {}
16 changes: 8 additions & 8 deletions components/input/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ description: Through mouse or keyboard input content, it is the most basic form

All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`.

| Property | Description | Type | Default |
| -------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------ |
| `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` |
| `[nzAutosize]` | Only used for `textarea`, height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
| ~~`[nzBorderless]`~~ | ~~Whether hide border~~ | ~~`boolean`~~ | ~~`false`~~ |
| `[nzVariant]` | Variants of Input | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `'outlined'` |
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
| `[nzStepperless]` | Whether hide stepper when input type is number | `boolean` | `true` |
| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------ |
| `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` |
| ~~`[nzAutosize]`~~ | ~~Only used for `textarea`, height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }`~~ | ~~`boolean \| { minRows: number, maxRows: number }`~~ | ~~`false`~~ |
| ~~`[nzBorderless]`~~ | ~~Whether hide border~~ | ~~`boolean`~~ | ~~`false`~~ |
| `[nzVariant]` | Variants of Input | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `'outlined'` |
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
| `[nzStepperless]` | Whether hide stepper when input type is number | `boolean` | `true` |

### nz-input-group

Expand Down
14 changes: 7 additions & 7 deletions components/input/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ description: 通过鼠标或键盘输入内容，是最基础的表单域的包

nz-input 可以使用所有的 W3C 标准下的所有 [使用方式](https://www.w3schools.com/tags/tag_input.asp) 和 Angular 对 input 的全部额外功能支持。

| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------ |
| `[nzSize]` | 控件大小。注：标准表单内的输入框大小限制为 `large` | `'large' \| 'small' \| 'default'` | `'default'` |
| `[nzAutosize]` | 只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
| ~~`[nzBorderless]`~~ | ~~是否隐藏边框~~ | ~~`boolean`~~ | ~~`false`~~ |
| `[nzVariant]` | 形态变体 | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `'outlined'` |
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
| 参数 | 说明 | 类型 | 默认值 |
| -------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------ |
| `[nzSize]` | 控件大小。注：标准表单内的输入框大小限制为 `large` | `'large' \| 'small' \| 'default'` | `'default'` |
| ~~`[nzAutosize]`~~ | ~~只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }`~~ | ~~`boolean \| { minRows: number, maxRows: number }`~~ | ~~`false`~~ |
| ~~`[nzBorderless]`~~ | ~~是否隐藏边框~~ | ~~`boolean`~~ | ~~`false`~~ |
| `[nzVariant]` | 形态变体 | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `'outlined'` |
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |

### nz-input-group

Expand Down
7 changes: 5 additions & 2 deletions components/mention/demo/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
Expand All @@ -8,14 +9,16 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';

@Component({
selector: 'nz-demo-mention-preview',
imports: [FormsModule, NzInputModule, NzMentionModule, NzTabsModule],
imports: [FormsModule, NzInputModule, NzMentionModule, NzTabsModule, CdkTextareaAutosize],
template: `
<nz-tabs>
<nz-tab nzTitle="Write">
<nz-mention [nzSuggestions]="suggestions">
<textarea
nz-input
[nzAutosize]="{ minRows: 4, maxRows: 4 }"
cdkTextareaAutosize
cdkAutosizeMinRows="4"
cdkAutosizeMaxRows="4"
[(ngModel)]="inputValue"
(ngModelChange)="renderPreView()"
nzMentionTrigger
Expand Down
13 changes: 4 additions & 9 deletions components/mention/mention.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -753,12 +753,7 @@ describe('mention', () => {
template: `
<nz-mention [nzSuggestions]="suggestions">
@if (!inputTrigger) {
<textarea
nz-input
[nzAutosize]="{ minRows: 4, maxRows: 4 }"
[(ngModel)]="inputValue"
nzMentionTrigger
></textarea>
<textarea nz-input [(ngModel)]="inputValue" nzMentionTrigger></textarea>
} @else {
<textarea rows="1" nz-input [(ngModel)]="inputValue" nzMentionTrigger></textarea>
}
Expand All @@ -784,7 +779,7 @@ class NzTestSimpleMentionComponent {
[nzLoading]="loading"
(nzOnSearchChange)="onSearchChange()"
>
<textarea nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger></textarea>
<textarea nz-input [(ngModel)]="inputValue" nzMentionTrigger></textarea>
<ng-container *nzMentionSuggestion="let framework">
<span class="custom">{{ framework.name }} - {{ framework.type }}</span>
</ng-container>
Expand Down Expand Up @@ -877,7 +872,7 @@ class NzTestMentionInFormComponent {
imports: [FormsModule, NzInputModule, NzMentionModule],
template: `
<nz-mention [nzSuggestions]="suggestions" [nzVariant]="variant">
<textarea nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger></textarea>
<textarea nz-input [(ngModel)]="inputValue" nzMentionTrigger></textarea>
</nz-mention>
`
})
Expand All @@ -897,7 +892,7 @@ class NzTestVariantMentionComponent {
[nzClearIcon]="useCustomClearIcon ? clearIconTemplate : null"
(nzOnClear)="onClear()"
>
<textarea nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger></textarea>
<textarea nz-input [(ngModel)]="inputValue" nzMentionTrigger></textarea>
<ng-template #clearIconTemplate>
<span class="custom-clear-icon">×</span>
</ng-template>
Expand Down