From 70ca8bd337c5048fbf7360a0c405c8a028d8e91e Mon Sep 17 00:00:00 2001 From: VTHINKXIE Date: Thu, 24 May 2018 16:20:30 +0800 Subject: [PATCH] feat(module:switch): support fully control by user (#1514) --- components/switch/demo/control.md | 14 +++++++++++ components/switch/demo/control.ts | 21 ++++++++++++++++ components/switch/doc/index.en-US.md | 1 + components/switch/doc/index.zh-CN.md | 1 + components/switch/nz-switch.component.ts | 32 ++++++++++++++++-------- components/switch/nz-switch.spec.ts | 16 ++++++++++++ 6 files changed, 75 insertions(+), 10 deletions(-) create mode 100755 components/switch/demo/control.md create mode 100755 components/switch/demo/control.ts diff --git a/components/switch/demo/control.md b/components/switch/demo/control.md new file mode 100755 index 00000000000..aa2576f7a73 --- /dev/null +++ b/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. diff --git a/components/switch/demo/control.ts b/components/switch/demo/control.ts new file mode 100755 index 00000000000..76eff8ebfa5 --- /dev/null +++ b/components/switch/demo/control.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-switch-control', + template: `` +}) +export class NzDemoSwitchControlComponent { + switchValue = false; + loading = false; + + clickSwitch(): void { + if (!this.loading) { + this.loading = true; + setTimeout(() => { + this.switchValue = !this.switchValue; + this.loading = false; + }, 3000); + } + + } +} diff --git a/components/switch/doc/index.en-US.md b/components/switch/doc/index.en-US.md index 7b66458f568..07daa2a289a 100755 --- a/components/switch/doc/index.en-US.md +++ b/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 diff --git a/components/switch/doc/index.zh-CN.md b/components/switch/doc/index.zh-CN.md index 312b474af80..87d39f4d69f 100755 --- a/components/switch/doc/index.zh-CN.md +++ b/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 | ## 方法 diff --git a/components/switch/nz-switch.component.ts b/components/switch/nz-switch.component.ts index 0ad753301b1..fd669a4e392 100644 --- a/components/switch/nz-switch.component.ts +++ b/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; private _unCheckedChildren: string | TemplateRef; 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) { 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(); + } } } diff --git a/components/switch/nz-switch.spec.ts b/components/switch/nz-switch.spec.ts index 74c35263368..3ad9eef4959 100644 --- a/components/switch/nz-switch.spec.ts +++ b/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"> ` @@ -217,6 +232,7 @@ export class NzTestSwitchBasicComponent { checkedChildren = 'on'; unCheckedChildren = 'off'; value = false; + control = false; disabled = false; size = 'default'; loading = false;