Skip to content

Commit

Permalink
perf(module:radio): refactor radio group data flow (#4770)
Browse files Browse the repository at this point in the history
  • Loading branch information
Yadong Xie authored Feb 11, 2020
1 parent 299ba6d commit 423a382
Show file tree
Hide file tree
Showing 23 changed files with 428 additions and 464 deletions.
6 changes: 3 additions & 3 deletions components/radio/demo/disable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { Component } from '@angular/core';
<label nz-radio [nzDisabled]="disabled">Disabled</label>
<br />
<label nz-radio [nzDisabled]="disabled" [ngModel]="true">Disabled</label>
<div style="margin-top:20px;">
<button nz-button nzType="primary" (click)="disabled = !disabled">Toggle disabled</button>
</div>
<br />
<br />
<button nz-button nzType="primary" (click)="disabled = !disabled">Toggle disabled</button>
</div>
`
})
Expand Down
46 changes: 22 additions & 24 deletions components/radio/demo/radiobutton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,28 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-radiobutton',
template: `
<div>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
</div>
<div style="margin-top:16px;">
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
</div>
<div style="margin-top:16px;">
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A" nzDisabled>Hangzhou</label>
<label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
<label nz-radio-button nzValue="C" nzDisabled>Beijing</label>
<label nz-radio-button nzValue="D" nzDisabled>Chengdu</label>
</nz-radio-group>
</div>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
<br />
<br />
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
<br />
<br />
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A" nzDisabled>Hangzhou</label>
<label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
<label nz-radio-button nzValue="C" nzDisabled>Beijing</label>
<label nz-radio-button nzValue="D" nzDisabled>Chengdu</label>
</nz-radio-group>
`
})
export class NzDemoRadioRadiobuttonComponent {
Expand Down
6 changes: 5 additions & 1 deletion components/radio/demo/radiogroup-more.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Component } from '@angular/core';
<label nz-radio [ngStyle]="style" nzValue="C">Option C</label>
<label nz-radio [ngStyle]="style" nzValue="M">
More...
<input type="text" nz-input *ngIf="radioValue == 'M'" style="width: 100px; margin-left: 10px;" />
<input type="text" nz-input *ngIf="radioValue === 'M'" />
</label>
</nz-radio-group>
`,
Expand All @@ -18,6 +18,10 @@ import { Component } from '@angular/core';
[nz-radio] {
display: block;
}
input {
width: 100px;
margin-left: 10px;
}
`
]
})
Expand Down
20 changes: 9 additions & 11 deletions components/radio/demo/radiogroup-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-radiogroup-options',
template: `
<div>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
</nz-radio-group>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
</nz-radio-group>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
</nz-radio-group>
</div>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
</nz-radio-group>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
</nz-radio-group>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
</nz-radio-group>
`
})
export class NzDemoRadioRadiogroupOptionsComponent {
Expand Down
46 changes: 22 additions & 24 deletions components/radio/demo/size.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,28 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-size',
template: `
<div>
<nz-radio-group [(ngModel)]="radioValue" [nzSize]="'large'">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
</div>
<div style="margin-top:16px;">
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
</div>
<div style="margin-top:16px;">
<nz-radio-group [(ngModel)]="radioValue" [nzSize]="'small'">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
</div>
<nz-radio-group [(ngModel)]="radioValue" nzSize="large">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
<br />
<br />
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
<br />
<br />
<nz-radio-group [(ngModel)]="radioValue" nzSize="small">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
`
})
export class NzDemoRadioSizeComponent {
Expand Down
14 changes: 6 additions & 8 deletions components/radio/demo/solid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,12 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-radio-solid',
template: `
<div>
<nz-radio-group [(ngModel)]="radioValue" [nzButtonStyle]="'solid'">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
</div>
<nz-radio-group [(ngModel)]="radioValue" nzButtonStyle="solid">
<label nz-radio-button nzValue="A">Hangzhou</label>
<label nz-radio-button nzValue="B">Shanghai</label>
<label nz-radio-button nzValue="C">Beijing</label>
<label nz-radio-button nzValue="D">Chengdu</label>
</nz-radio-group>
`
})
export class NzDemoRadioSolidComponent {
Expand Down
4 changes: 2 additions & 2 deletions components/radio/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
| `[nzDisabled]` | Disable radio | `boolean` | `false` |
| `[ngModel]` | Specifies whether the radio is selected, double binding | `boolean` | `false` |
| `[nzValue]` | use with `nz-radio-group` | `string` | - |
| `[nzValue]` | use with `nz-radio-group` | `any` | - |
| `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter<boolean>` | - |

### nz-radio-group
Expand All @@ -33,7 +33,7 @@ radio group，wrap a group of `nz-radio`。

| Property | Description | Type | Default |
| -------- | ----------- | ---- | -------- | ------- |
| `[ngModel]` | current selected `nz-radio` value, double binding | `string` | - |
| `[ngModel]` | current selected `nz-radio` value, double binding | `any` | - |
| `[nzName]` | The `name` property of all `input[type="radio"]` children | `string` | - |
| `[nzDisabled]` | Disable all radio buttons | `boolean` | `false` |
| `[nzSize]` | Size, only on radio style | `'large' \| 'small' \| 'default'` | `'default'` |
Expand Down
4 changes: 2 additions & 2 deletions components/radio/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
| `[nzDisabled]` | 设定 disable 状态 | `boolean` | `false` |
| `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
| `[nzValue]` | 设置 value，与 `nz-radio-group` 配合使用 | `string` | - |
| `[nzValue]` | 设置 value，与 `nz-radio-group` 配合使用 | `any` | - |
| `(ngModelChange)` | 选中变化时回调 | `EventEmitter<boolean>` | - |


Expand All @@ -35,7 +35,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[ngModel]` | 指定选中的 `nz-radio` 的 value 值 | `string` | - |
| `[ngModel]` | 指定选中的 `nz-radio` 的 value 值 | `any` | - |
| `[nzName]` | `nz-radio-group` 下所有 `input[type="radio"]` 的 `name` 属性 | `string` | - |
| `[nzDisabled]` | 设定所有 `nz-radio` disable 状态 | `boolean` | `false` |
| `[nzSize]` | 大小，只对按钮样式生效 | `'large' \| 'small' \| 'default'` | `'default'` |
Expand Down
16 changes: 0 additions & 16 deletions components/radio/nz-radio-button.component.html
View file

This file was deleted.

45 changes: 0 additions & 45 deletions components/radio/nz-radio-button.component.ts
View file

This file was deleted.

1 change: 0 additions & 1 deletion components/radio/nz-radio-group.component.html
View file

This file was deleted.

Loading

0 comments on commit 423a382

Please sign in to comment.