refactor(module:radio): refactor radio to support OnPush

components/collapse/nz-collapse.component.ts

@@ -9,8 +9,8 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { merge, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { merge, Subject, Subscription } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
 import { InputBoolean } from '../core/util/convert';
 import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
 
@@ -29,7 +29,8 @@ export class NzCollapseComponent implements AfterContentInit, OnDestroy {
   @ContentChildren(NzCollapsePanelComponent) listOfNzCollapsePanelComponent: QueryList<NzCollapsePanelComponent>;
   @Input() @InputBoolean() nzAccordion = false;
   @Input() @InputBoolean() nzBordered = true;
-  destroy$ = new Subject();
+  private destroy$ = new Subject();
+  private clickSubscription: Subscription;
 
   click(collapse: NzCollapsePanelComponent): void {
     if (this.nzAccordion && !collapse.nzActive) {
@@ -46,9 +47,20 @@ export class NzCollapseComponent implements AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit(): void {
-    merge(...this.listOfNzCollapsePanelComponent.map(item => item.click$)).pipe(takeUntil(this.destroy$)).subscribe((data) => {
-      this.click(data);
+    this.listOfNzCollapsePanelComponent.changes.pipe(
+      startWith(null),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      if (this.clickSubscription) {
+        this.clickSubscription.unsubscribe();
+      }
+      this.clickSubscription = merge(...this.listOfNzCollapsePanelComponent.map(item => item.click$)).pipe(
+        takeUntil(this.destroy$)
+      ).subscribe((data) => {
+        this.click(data);
+      });
     });
+
   }
 
   ngOnDestroy(): void {

components/layout/nz-sider.component.html

@@ -9,7 +9,7 @@
 <div class="ant-layout-sider-trigger"
   *ngIf="isSiderTrigger"
   (click)="toggleCollapse()"
-  [style.width.px]="nzCollapsed?nzCollapsedWidth:nzWidth">
+  [style.width.px]="nzCollapsed ? nzCollapsedWidth : nzWidth">
   <ng-template [ngTemplateOutlet]="nzTrigger"></ng-template>
 </div>
 <ng-template #defaultTrigger>

components/layout/nz-sider.component.ts

@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Host,
@@ -82,6 +83,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
       this.below = matchBelow;
       this.nzCollapsed = matchBelow;
       this.nzCollapsedChange.emit(matchBelow);
+      this.cdr.markForCheck();
     }
   }
 
@@ -98,7 +100,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
     return this.nzCollapsible && this.nzTrigger && (this.nzCollapsedWidth !== 0);
   }
 
-  constructor(@Optional() @Host() private nzLayoutComponent: NzLayoutComponent, private mediaMatcher: MediaMatcher, private ngZone: NgZone, private platform: Platform) {
+  constructor(@Optional() @Host() private nzLayoutComponent: NzLayoutComponent, private mediaMatcher: MediaMatcher, private ngZone: NgZone, private platform: Platform, private cdr: ChangeDetectorRef) {
   }
 
   ngOnInit(): void {

components/radio/nz-radio-button.component.html

@@ -1,5 +1,5 @@
-<span [ngClass]="classMap">
-  <input type="radio" #inputElement class="ant-radio-button-input" [disabled]="nzDisabled" [(ngModel)]="nzChecked" (blur)="onBlur()" [attr.name]="name">
+<span class="ant-radio-button" [class.ant-radio-button-checked]="checked" [class.ant-radio-button-disabled]="nzDisabled">
+  <input type="radio" #inputElement class="ant-radio-button-input" [disabled]="nzDisabled" [checked]="checked" [attr.name]="name">
   <span class="ant-radio-button-inner"></span>
 </span>
 <span><ng-content></ng-content></span>

components/radio/nz-radio-button.component.ts

@@ -1,29 +1,45 @@
 import { DOCUMENT } from '@angular/common';
 import {
+  forwardRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  ElementRef,
   Inject,
-  OnInit,
-  Optional,
-  Renderer2
+  Renderer2,
+  ViewEncapsulation
 } from '@angular/core';
 
-import { NzRadioGroupComponent } from './nz-radio-group.component';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NzRadioComponent } from './nz-radio.component';
 
 @Component({
   selector           : '[nz-radio-button]',
+  providers          : [
+    {
+      provide    : NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => NzRadioComponent),
+      multi      : true
+    },
+    {
+      provide    : NzRadioComponent,
+      useExisting: forwardRef(() => NzRadioButtonComponent)
+    }
+  ],
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
   templateUrl        : './nz-radio-button.component.html',
   host               : {
     '[class.ant-radio-button-wrapper]'         : 'true',
-    '[class.ant-radio-button-wrapper-checked]' : 'nzChecked',
+    '[class.ant-radio-button-wrapper-checked]' : 'checked',
     '[class.ant-radio-button-wrapper-disabled]': 'nzDisabled'
   }
 })
-export class NzRadioButtonComponent extends NzRadioComponent implements OnInit {
-  prefixCls = 'ant-radio-button';
+export class NzRadioButtonComponent extends NzRadioComponent {
   /* tslint:disable-next-line:no-any */
-  constructor(@Optional() nzRadioGroup: NzRadioGroupComponent, renderer: Renderer2, @Inject(DOCUMENT) document: any) {
-    super(nzRadioGroup, renderer, document);
+  constructor(elementRef: ElementRef, renderer: Renderer2, @Inject(DOCUMENT) document: any, cdr: ChangeDetectorRef, focusMonitor: FocusMonitor) {
+    super(elementRef, renderer, document, cdr, focusMonitor);
   }
 }

components/radio/nz-radio-group.component.ts

@@ -1,147 +1,127 @@
 import {
   forwardRef,
   AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  ElementRef,
-  HostBinding,
-  Input
+  ContentChildren,
+  Input,
+  OnChanges,
+  OnDestroy,
+  QueryList,
+  SimpleChanges,
+  ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { merge, Subject, Subscription } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
 import { NzSizeLDSType } from '../core/types/size';
 import { isNotNil } from '../core/util/check';
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
+import { NzRadioComponent } from './nz-radio.component';
 
 export type NzRadioButtonStyle = 'outline' | 'solid';
 
-import { NzRadioButtonComponent } from './nz-radio-button.component';
-import { NzRadioComponent } from './nz-radio.component';
-
 @Component({
   selector           : 'nz-radio-group',
   preserveWhitespaces: false,
   templateUrl        : './nz-radio-group.component.html',
-  host               : {
-    '[class.ant-radio-group]': 'true'
-  },
+  encapsulation      : ViewEncapsulation.None,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
   providers          : [
     {
       provide    : NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NzRadioGroupComponent),
       multi      : true
     }
-  ]
+  ],
+  host               : {
+    '[class.ant-radio-group]'      : 'true',
+    '[class.ant-radio-group-large]': `nzSize === 'large'`,
+    '[class.ant-radio-group-small]': `nzSize === 'small'`,
+    '[class.ant-radio-group-solid]': `nzButtonStyle === 'solid'`
+  }
 })
-export class NzRadioGroupComponent implements AfterContentInit, ControlValueAccessor {
-  private _size: NzSizeLDSType = 'default';
-  private _name: string;
-  private _disabled: boolean;
-  el: HTMLElement = this.elementRef.nativeElement;
-  value: string;
-
-  // ngModel Access
+export class NzRadioGroupComponent implements AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
+  /* tslint:disable-next-line:no-any */
+  private value: any;
+  private destroy$ = new Subject();
+  private selectSubscription: Subscription;
+  private touchedSubscription: Subscription;
   onChange: (_: string) => void = () => null;
   onTouched: () => void = () => null;
-
-  radios: Array<NzRadioComponent | NzRadioButtonComponent> = [];
-
-  @Input()
-  set nzSize(value: NzSizeLDSType) {
-    this._size = value;
-  }
-
-  get nzSize(): NzSizeLDSType {
-    return this._size;
-  }
-
-  @Input()
-  set nzDisabled(value: boolean) {
-    this._disabled = toBoolean(value);
-    this.updateDisabledState();
-  }
-
-  get nzDisabled(): boolean {
-    return this._disabled;
-  }
-
-  @Input()
-  set nzName(value: string) {
-    this._name = value;
-    this.updateChildrenName();
-  }
-
-  get nzName(): string {
-    return this._name;
-  }
-
+  @ContentChildren(forwardRef(() => NzRadioComponent)) radios: QueryList<NzRadioComponent>;
+  @Input() @InputBoolean() nzDisabled: boolean;
   @Input() nzButtonStyle: NzRadioButtonStyle = 'outline';
-
-  updateDisabledState(): void {
-    if (isNotNil(this.nzDisabled)) {
-      this.radios.forEach((radio) => {
-        radio.nzDisabled = this.nzDisabled;
+  @Input() nzSize: NzSizeLDSType = 'default';
+  @Input() nzName: string;
+
+  updateChildrenStatus(): void {
+    if (this.radios) {
+      Promise.resolve().then(() => {
+        this.radios.forEach(radio => {
+          radio.checked = radio.nzValue === this.value;
+          if (isNotNil(this.nzDisabled)) {
+            radio.nzDisabled = this.nzDisabled;
+          }
+          if (this.nzName) {
+            radio.name = this.nzName;
+          }
+          radio.markForCheck();
+        });
       });
     }
   }
 
-  updateChildrenName(): void {
-    if (this.nzName) {
-      this.radios.forEach((item) => {
-        item.name = this.nzName;
-      });
-    }
+  constructor(private cdr: ChangeDetectorRef) {
   }
 
-  syncCheckedValue(): void {
-    this.radios.forEach((item) => {
-      item.nzChecked = item.nzValue === this.value;
+  ngAfterContentInit(): void {
+    this.radios.changes.pipe(
+      startWith(null),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.updateChildrenStatus();
+      if (this.selectSubscription) {
+        this.selectSubscription.unsubscribe();
+      }
+      this.selectSubscription = merge(...this.radios.map(radio => radio.select$)).pipe(
+        takeUntil(this.destroy$)
+      ).subscribe((radio) => {
+        if (this.value !== radio.nzValue) {
+          this.value = radio.nzValue;
+          this.updateChildrenStatus();
+          this.onChange(this.value);
+        }
+      });
+      if (this.touchedSubscription) {
+        this.touchedSubscription.unsubscribe();
+      }
+      this.touchedSubscription = merge(...this.radios.map(radio => radio.touched$)).pipe(
+        takeUntil(this.destroy$)
+      ).subscribe(() => {
+        Promise.resolve().then(() => this.onTouched());
+      });
     });
-  }
-
-  @HostBinding('class.ant-radio-group-large')
-  get isLarge(): boolean {
-    return this.nzSize === 'large';
-  }
-
-  @HostBinding('class.ant-radio-group-small')
-  get isSmall(): boolean {
-    return this.nzSize === 'small';
-  }
 
-  @HostBinding('class.ant-radio-group-solid')
-  get isSolid(): boolean {
-    return this.nzButtonStyle === 'solid';
   }
 
-  addRadio(radio: NzRadioComponent | NzRadioButtonComponent): void {
-    this.radios.push(radio);
-    radio.nzChecked = radio.nzValue === this.value;
-  }
-
-  selectRadio(radio: NzRadioComponent | NzRadioButtonComponent): void {
-    this.updateValue(radio.nzValue, true);
-  }
-
-  updateValue(value: string, emit: boolean): void {
-    this.value = value;
-    this.syncCheckedValue();
-    if (emit) {
-      this.onChange(value);
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzDisabled || changes.nzName) {
+      this.updateChildrenStatus();
     }
   }
 
-  constructor(private elementRef: ElementRef) {
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
-  ngAfterContentInit(): void {
-    this.syncCheckedValue();
-    this.updateChildrenName();
-    Promise.resolve().then(() => {
-      this.updateDisabledState();
-    });
-  }
-
-  writeValue(value: string): void {
-    this.updateValue(value, false);
+  /* tslint:disable-next-line:no-any */
+  writeValue(value: any): void {
+    this.value = value;
+    this.updateChildrenStatus();
+    this.cdr.markForCheck();
   }
 
   registerOnChange(fn: (_: string) => void): void {
@@ -154,5 +134,6 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
 
   setDisabledState(isDisabled: boolean): void {
     this.nzDisabled = isDisabled;
+    this.cdr.markForCheck();
   }
 }

components/radio/nz-radio.component.html

@@ -1,5 +1,5 @@
-<span [ngClass]="classMap">
-  <input #inputElement type="radio" class="ant-radio-input" [disabled]="nzDisabled" [(ngModel)]="nzChecked" (blur)="onBlur()" [attr.name]="name">
+<span class="ant-radio" [class.ant-radio-checked]="checked" [class.ant-radio-disabled]="nzDisabled">
+  <input #inputElement type="radio" class="ant-radio-input" [disabled]="nzDisabled" [checked]="checked" [attr.name]="name">
   <span class="ant-radio-inner"></span>
 </span>
 <span><ng-content></ng-content></span>