chore(module:switch): refactor switch (#4771)

NG-ZORRO · Feb 12, 2020 · 6dc85c8 · 6dc85c8
1 parent 423a382
commit 6dc85c8
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 112 deletions.
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
@@ -13,9 +13,3 @@ title:
 
 The most basic usage.
 
-
-<style>
-.ant-switch {
-  margin-bottom: 8px;
-}
-</style>
diff --git a/components/switch/demo/disabled.ts b/components/switch/demo/disabled.ts
@@ -5,15 +5,9 @@ import { Component } from '@angular/core';
   template: `
     <nz-switch [(ngModel)]="switchValue" [nzDisabled]="isDisabled"></nz-switch>
     <br />
+    <br />
     <button nz-button [nzType]="'primary'" (click)="isDisabled = !isDisabled">Toggle disabled</button>
-  `,
-  styles: [
-    `
-      nz-switch {
-        margin-bottom: 8px;
-      }
-    `
-  ]
+  `
 })
 export class NzDemoSwitchDisabledComponent {
   switchValue = false;

diff --git a/components/switch/demo/loading.ts b/components/switch/demo/loading.ts
@@ -5,14 +5,8 @@ import { Component } from '@angular/core';
   template: `
     <nz-switch [ngModel]="true" nzLoading></nz-switch>
     <br />
+    <br />
     <nz-switch nzSize="small" [ngModel]="false" nzLoading></nz-switch>
-  `,
-  styles: [
-    `
-      nz-switch {
-        margin-bottom: 8px;
-      }
-    `
-  ]
+  `
 })
 export class NzDemoSwitchLoadingComponent {}
diff --git a/components/switch/demo/size.ts b/components/switch/demo/size.ts
@@ -5,14 +5,8 @@ import { Component } from '@angular/core';
   template: `
     <nz-switch [ngModel]="true"></nz-switch>
     <br />
+    <br />
     <nz-switch nzSize="small" [ngModel]="true"></nz-switch>
-  `,
-  styles: [
-    `
-      nz-switch {
-        margin-bottom: 8px;
-      }
-    `
-  ]
+  `
 })
 export class NzDemoSwitchSizeComponent {}
diff --git a/components/switch/demo/text.ts b/components/switch/demo/text.ts
@@ -5,18 +5,13 @@ import { Component } from '@angular/core';
   template: `
     <nz-switch [ngModel]="true" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch>
     <br />
+    <br />
     <nz-switch [ngModel]="false" nzCheckedChildren="1" nzUnCheckedChildren="0"></nz-switch>
     <br />
+    <br />
     <nz-switch [ngModel]="true" [nzCheckedChildren]="checkedTemplate" [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
     <ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
     <ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
-  `,
-  styles: [
-    `
-      nz-switch {
-        margin-bottom: 8px;
-      }
-    `
-  ]
+  `
 })
 export class NzDemoSwitchTextComponent {}
diff --git a/components/switch/nz-switch.component.html b/components/switch/nz-switch.component.html
diff --git a/components/switch/public-api.ts b/components/switch/public-api.ts
@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-switch.component';
-export * from './nz-switch.module';
+export * from './switch.component';
+export * from './switch.module';
diff --git a/components/switch/style/entry.less b/components/switch/style/entry.less
@@ -1 +1,2 @@
 @import './index.less';
+@import './patch.less';
diff --git a/components/switch/style/patch.less b/components/switch/style/patch.less
@@ -0,0 +1,3 @@
+nz-switch {
+  display: inline-block;
+}
diff --git a/components/switch/nz-switch.component.ts → components/switch/switch.component.ts b/components/switch/nz-switch.component.ts → components/switch/switch.component.ts
@@ -23,15 +23,15 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { InputBoolean, NzConfigService, NzSizeDSType, WithConfig } from 'ng-zorro-antd/core';
+import { InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core';
+import { NzSizeDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 
 const NZ_CONFIG_COMPONENT_NAME = 'switch';
 
 @Component({
   selector: 'nz-switch',
   exportAs: 'nzSwitch',
   preserveWhitespaces: false,
-  templateUrl: './nz-switch.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [
@@ -41,40 +41,59 @@ const NZ_CONFIG_COMPONENT_NAME = 'switch';
       multi: true
     }
   ],
+  template: `
+    <button
+      nz-wave
+      type="button"
+      class="ant-switch"
+      #switchElement
+      [disabled]="nzDisabled"
+      [class.ant-switch-checked]="isChecked"
+      [class.ant-switch-loading]="nzLoading"
+      [class.ant-switch-disabled]="nzDisabled"
+      [class.ant-switch-small]="nzSize === 'small'"
+      [nzWaveExtraNode]="true"
+      (keydown)="onKeyDown($event)"
+    >
+      <i *ngIf="nzLoading" nz-icon nzType="loading" class="ant-switch-loading-icon"></i>
+      <span class="ant-switch-inner">
+        <ng-container *ngIf="isChecked; else uncheckTemplate">
+          <ng-container *nzStringTemplateOutlet="nzCheckedChildren">{{ nzCheckedChildren }}</ng-container>
+        </ng-container>
+        <ng-template #uncheckTemplate>
+          <ng-container *nzStringTemplateOutlet="nzUnCheckedChildren">{{ nzUnCheckedChildren }}</ng-container>
+        </ng-template>
+      </span>
+      <div class="ant-click-animating-node"></div>
+    </button>
+  `,
   host: {
-    '(click)': 'hostClick($event)'
-  },
-  styles: [
-    `
-      nz-switch {
-        display: inline-block;
-      }
-    `
-  ]
+    '(click)': 'onHostClick($event)'
+  }
 })
 export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
-  checked = false;
-  onChange: (value: boolean) => void = () => null;
-  onTouched: () => void = () => null;
+  isChecked = false;
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   @ViewChild('switchElement', { static: true }) private switchElement: ElementRef;
   @Input() @InputBoolean() nzLoading = false;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzControl = false;
-  @Input() nzCheckedChildren: string | TemplateRef<void>;
-  @Input() nzUnCheckedChildren: string | TemplateRef<void>;
+  @Input() nzCheckedChildren: string | TemplateRef<void> | null = null;
+  @Input() nzUnCheckedChildren: string | TemplateRef<void> | null = null;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeDSType;
 
-  hostClick(e: MouseEvent): void {
+  onHostClick(e: MouseEvent): void {
     e.preventDefault();
     if (!this.nzDisabled && !this.nzLoading && !this.nzControl) {
-      this.updateValue(!this.checked);
+      this.updateValue(!this.isChecked);
     }
   }
 
   updateValue(value: boolean): void {
-    if (this.checked !== value) {
-      this.checked = value;
-      this.onChange(this.checked);
+    if (this.isChecked !== value) {
+      this.isChecked = value;
+      this.onChange(this.isChecked);
     }
   }
 
@@ -87,7 +106,7 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O
         this.updateValue(true);
         e.preventDefault();
       } else if (e.keyCode === SPACE || e.keyCode === ENTER) {
-        this.updateValue(!this.checked);
+        this.updateValue(!this.isChecked);
         e.preventDefault();
       }
     }
@@ -106,11 +125,7 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O
   ngAfterViewInit(): void {
     this.focusMonitor.monitor(this.switchElement.nativeElement, true).subscribe(focusOrigin => {
       if (!focusOrigin) {
-        // When a focused element becomes disabled, the browser *immediately* fires a blur event.
-        // Angular does not expect events to be raised during change detection, so any state change
-        // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
-        // See https://github.com/angular/angular/issues/17793. To work around this, we defer
-        // telling the form control it has been touched until the next tick.
+        /** https://github.com/angular/angular/issues/17793 **/
         Promise.resolve().then(() => this.onTouched());
       }
     });
@@ -121,20 +136,20 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, O
   }
 
   writeValue(value: boolean): void {
-    this.checked = value;
+    this.isChecked = value;
     this.cdr.markForCheck();
   }
 
-  registerOnChange(fn: (_: boolean) => void): void {
+  registerOnChange(fn: OnChangeType): void {
     this.onChange = fn;
   }
 
-  registerOnTouched(fn: () => void): void {
+  registerOnTouched(fn: OnTouchedType): void {
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
-    this.nzDisabled = isDisabled;
+  setDisabledState(disabled: boolean): void {
+    this.nzDisabled = disabled;
     this.cdr.markForCheck();
   }
 }
diff --git a/components/switch/nz-switch.module.ts → components/switch/switch.module.ts b/components/switch/nz-switch.module.ts → components/switch/switch.module.ts
@@ -12,7 +12,7 @@ import { NgModule } from '@angular/core';
 import { NzOutletModule, NzWaveModule } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { NzSwitchComponent } from './nz-switch.component';
+import { NzSwitchComponent } from './switch.component';
 
 @NgModule({
   exports: [NzSwitchComponent],

diff --git a/components/switch/nz-switch.spec.ts → components/switch/switch.spec.ts b/components/switch/nz-switch.spec.ts → components/switch/switch.spec.ts
@@ -3,12 +3,10 @@ import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-
 import { dispatchKeyboardEvent } from 'ng-zorro-antd/core';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-
-import { NzSwitchComponent } from './nz-switch.component';
-import { NzSwitchModule } from './nz-switch.module';
+import { NzSwitchComponent } from './switch.component';
+import { NzSwitchModule } from './switch.module';
 
 describe('switch', () => {
   beforeEach(fakeAsync(() => {
@@ -177,16 +175,12 @@ describe('switch', () => {
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild.firstElementChild!.classList).toContain(
-        'anticon-close'
-      );
+      expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild!.classList).toContain('anticon-close');
       switchElement.nativeElement.click();
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild.firstElementChild!.classList).toContain(
-        'anticon-check'
-      );
+      expect(switchElement.nativeElement.firstElementChild.firstElementChild.firstElementChild!.classList).toContain('anticon-check');
     }));
   });
   describe('switch form', () => {