feat(module:switch): support fully control by user (#1514)

components/switch/demo/control.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 完整控制
+  en-US: Control
+---
+
+## zh-CN
+
+`Switch` 的状态完全由用户接管，不再自动根据点击事件改变数据。
+
+## en-US
+
+The status of `Switch` is completely up to the user and no longer automatically changes the data based on the click event.

components/switch/demo/control.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-switch-control',
+  template: `<nz-switch [(ngModel)]="switchValue" [nzControl]="true" (click)="clickSwitch()" [nzLoading]="loading"></nz-switch>`
+})
+export class NzDemoSwitchControlComponent {
+  switchValue = false;
+  loading = false;
+
+  clickSwitch(): void {
+    if (!this.loading) {
+      this.loading = true;
+      setTimeout(() => {
+        this.switchValue = !this.switchValue;
+        this.loading = false;
+      }, 3000);
+    }
+
+  }
+}

components/switch/doc/index.en-US.md

@@ -22,6 +22,7 @@ Switching Selector.
 | nzDisabled | Disable switch | boolean | false |
 | nzSize | the size of the `nz-switch`, options: `default` `small` | string | `default` |
 | nzLoading | loading state of switch | boolean | false |
+| nzControl | determine whether fully control state by user  | boolean | false |
 
 ## Methods
 

components/switch/doc/index.zh-CN.md

@@ -23,6 +23,7 @@ title: Switch
 | nzDisabled | disable 状态 | boolean | false |
 | nzSize | 开关大小，可选值：`default` `small` | string | `default` |
 | nzLoading | 加载中的开关 | boolean | false |
+| nzControl | 是否完全由用户控制状态 | boolean | false |
 
 ## 方法
 

components/switch/nz-switch.component.ts

@@ -52,6 +52,7 @@ export class NzSwitchComponent implements OnInit, ControlValueAccessor {
   private _disabled = false;
   private _size: NzSwitchSizeType;
   private _loading = false;
+  private _control = false;
   private _checkedChildren: string | TemplateRef<void>;
   private _unCheckedChildren: string | TemplateRef<void>;
   prefixCls = 'ant-switch';
@@ -64,6 +65,15 @@ export class NzSwitchComponent implements OnInit, ControlValueAccessor {
   onChange: (value: boolean) => void = () => null;
   onTouched: () => void = () => null;
 
+  @Input()
+  set nzControl(value: boolean) {
+    this._control = toBoolean(value);
+  }
+
+  get nzControl(): boolean {
+    return this._control;
+  }
+
   @Input()
   set nzCheckedChildren(value: string | TemplateRef<void>) {
     this.isCheckedChildrenString = !(value instanceof TemplateRef);
@@ -117,7 +127,7 @@ export class NzSwitchComponent implements OnInit, ControlValueAccessor {
   @HostListener('click', [ '$event' ])
   onClick(e: MouseEvent): void {
     e.preventDefault();
-    if ((!this.nzDisabled) && (!this.nzLoading)) {
+    if ((!this.nzDisabled) && (!this.nzLoading) && (!this.nzControl)) {
       this.updateValue(!this.checked, true);
     }
   }
@@ -144,15 +154,17 @@ export class NzSwitchComponent implements OnInit, ControlValueAccessor {
   }
 
   onKeyDown(e: KeyboardEvent): void {
-    if (e.keyCode === 37) { // Left
-      this.updateValue(false, true);
-      e.preventDefault();
-    } else if (e.keyCode === 39) { // Right
-      this.updateValue(true, true);
-      e.preventDefault();
-    } else if (e.keyCode === 32 || e.keyCode === 13) { // Space, Enter
-      this.updateValue(!this.checked, true);
-      e.preventDefault();
+    if (!this.nzControl) {
+      if (e.keyCode === 37) { // Left
+        this.updateValue(false, true);
+        e.preventDefault();
+      } else if (e.keyCode === 39) { // Right
+        this.updateValue(true, true);
+        e.preventDefault();
+      } else if (e.keyCode === 32 || e.keyCode === 13) { // Space, Enter
+        this.updateValue(!this.checked, true);
+        e.preventDefault();
+      }
     }
   }
 

components/switch/nz-switch.spec.ts

@@ -55,6 +55,14 @@ describe('switch', () => {
       fixture.detectChanges();
       expect(testComponent.value).toBe(false);
       expect(testComponent.modelChange).toHaveBeenCalledTimes(2);
+      testComponent.control = true;
+      fixture.detectChanges();
+      switchElement.nativeElement.click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(testComponent.value).toBe(false);
+      expect(testComponent.modelChange).toHaveBeenCalledTimes(2);
     }));
     it('should disable work', fakeAsync(() => {
       testComponent.disabled = true;
@@ -111,6 +119,12 @@ describe('switch', () => {
       fixture.detectChanges();
       expect(testComponent.value).toBe(false);
       expect(testComponent.modelChange).toHaveBeenCalledTimes(4);
+      testComponent.control = true;
+      fixture.detectChanges();
+      dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', 13);
+      fixture.detectChanges();
+      expect(testComponent.value).toBe(false);
+      expect(testComponent.modelChange).toHaveBeenCalledTimes(4);
     });
     it('should children work', fakeAsync(() => {
       fixture.detectChanges();
@@ -206,6 +220,7 @@ describe('switch', () => {
       [nzDisabled]="disabled"
       [nzLoading]="loading"
       [nzSize]="size"
+      [nzControl]="control"
       [nzCheckedChildren]="checkedChildren"
       [nzUnCheckedChildren]="unCheckedChildren">
     </nz-switch>`
@@ -217,6 +232,7 @@ export class NzTestSwitchBasicComponent {
   checkedChildren = 'on';
   unCheckedChildren = 'off';
   value = false;
+  control = false;
   disabled = false;
   size = 'default';
   loading = false;