Skip to content

Commit

Permalink
feat(module:radio): use nz-radio components alone (#825)
Browse files Browse the repository at this point in the history
  • Loading branch information
cipchk authored and wilsoncook committed Dec 30, 2017
1 parent bda29de commit 15c968c
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 8 deletions.
58 changes: 50 additions & 8 deletions src/components/radio/nz-radio.component.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import {
forwardRef,
Component,
ElementRef,
HostBinding,
HostListener,
Input,
OnInit,
Optional,
Renderer2,
ViewEncapsulation,
ViewEncapsulation
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { toBoolean } from '../util/convert';
import { NzRadioGroupComponent } from './nz-radio-group.component';
Expand All @@ -24,9 +27,16 @@ import { NzRadioGroupComponent } from './nz-radio-group.component';
`,
styleUrls : [
'./style/index.less'
],
providers : [
{
provide : NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NzRadioComponent),
multi : true
}
]
})
export class NzRadioComponent implements OnInit {
export class NzRadioComponent implements OnInit, ControlValueAccessor {
private _checked = false;
private _disabled = false;
private _focused = false;
Expand All @@ -36,6 +46,9 @@ export class NzRadioComponent implements OnInit {
_prefixCls = 'ant-radio';
_innerPrefixCls = `${this._prefixCls}-inner`;
_inputPrefixCls = `${this._prefixCls}-input`;
// ngModel Access
onChange: (_: boolean) => void = () => null;
onTouched: () => void = () => null;

@Input()
@HostBinding('class.ant-radio-wrapper-checked')
Expand Down Expand Up @@ -75,9 +88,13 @@ export class NzRadioComponent implements OnInit {
onClick(e: MouseEvent): void {
e.preventDefault();
if (!this._disabled) {
this._checked = true;
this.setClassMap();
this._nzRadioGroup.selectRadio(this);
if (this._nzRadioGroup) {
this._checked = true;
this.setClassMap();
this._nzRadioGroup.selectRadio(this);
} else {
this.updateValue(!this._checked);
}
}
}

Expand All @@ -89,7 +106,7 @@ export class NzRadioComponent implements OnInit {
nzBlur(): void {
this._focused = false;
this.setClassMap();
this._nzRadioGroup.onTouched();
if (this._nzRadioGroup) this._nzRadioGroup.onTouched();
}

setClassMap(): void {
Expand All @@ -101,13 +118,38 @@ export class NzRadioComponent implements OnInit {
};
}

constructor(private _elementRef: ElementRef, public _renderer: Renderer2, public _nzRadioGroup: NzRadioGroupComponent) {
constructor(private _elementRef: ElementRef, public _renderer: Renderer2, @Optional() public _nzRadioGroup: NzRadioGroupComponent) {
this._el = this._elementRef.nativeElement;
}

ngOnInit(): void {
this._nzRadioGroup.addRadio(this);
if (this._nzRadioGroup) this._nzRadioGroup.addRadio(this);
this._renderer.addClass(this._el, `${this._prefixCls}-wrapper`);
this.setClassMap();
}

// region: value accessor
updateValue(value: boolean): void {
if (value === this._checked) {
return;
}
this.onChange(value);
this._focused = false;
this._checked = value;
this.setClassMap();
}

writeValue(value: boolean): void {
this._checked = value;
this.setClassMap();
}

registerOnChange(fn: (_: boolean) => {}): void {
this.onChange = fn;
}

registerOnTouched(fn: () => {}): void {
this.onTouched = fn;
}
// endregion
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'nz-demo-radio-group-disabled',
template: `
<div>
<label nz-radio [(ngModel)]="singleValue" [nzDisabled]="isDisabled">
<span>独立使用 {{ singleValue }}</span>
</label>
</div>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="'A'">
<span>A</span>
Expand All @@ -25,6 +30,7 @@ import { Component, OnInit } from '@angular/core';
})
export class NzDemoRadioGroupDisabledComponent {
radioValue = 'A';
singleValue = false;
isDisabled = true;
toggleDisabled = () => {
this.isDisabled = !this.isDisabled;
Expand Down
6 changes: 6 additions & 0 deletions src/showcase/nz-demo-radio/nz-demo-radio-group.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'nz-demo-radio-group',
template: `
<div>
<label nz-radio [(ngModel)]="singleValue">
<span>独立使用 {{ singleValue }}</span>
</label>
</div>
<nz-radio-group [(ngModel)]="radioValue">
<label nz-radio [nzValue]="'A'">
<span>A</span>
Expand All @@ -21,4 +26,5 @@ import { Component, OnInit } from '@angular/core';
})
export class NzDemoRadioGroupComponent {
radioValue = 'A';
singleValue = true;
}

0 comments on commit 15c968c

Please sign in to comment.