refactor(module:time-picker): place the clear button to outside of th…

…e time picker panel (NG-ZORRO#2948)
wzhudev · Feb 21, 2019 · ffb6665 · ffb6665
1 parent 9fd7752
commit ffb6665
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 25 deletions.
diff --git a/components/time-picker/nz-time-picker-panel.component.html b/components/time-picker/nz-time-picker-panel.component.html
@@ -10,13 +10,6 @@
         [nzTime]="format"
         [(ngModel)]="time.value"
         (blur)="time.changed()">
-      <a
-        *ngIf="nzAllowEmpty"
-        class="{{ prefixCls }}-clear-btn"
-        [attr.title]="nzClearText"
-        (click)="clear()">
-        <i nz-icon type="close-circle" theme="fill" class="ant-time-picker-panel-clear-btn-icon"></i>
-      </a>
     </div>
     <div class="{{ prefixCls }}-combobox">
       <div

diff --git a/components/time-picker/nz-time-picker-panel.component.spec.ts b/components/time-picker/nz-time-picker-panel.component.spec.ts
@@ -29,15 +29,6 @@ describe('time-picker-panel', () => {
       fixture.detectChanges();
       expect(panelElement.nativeElement.classList).toContain('ant-time-picker-panel');
     });
-    it('should clear work', fakeAsync(() => {
-      fixture.detectChanges();
-      testComponent.value = new Date(0, 0, 0, 0, 0, 0);
-      panelElement.nativeElement.querySelector('.ant-time-picker-panel-clear-btn').click();
-      fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
-      expect(testComponent.value).toBeUndefined();
-    }));
     it('should format work', () => {
       fixture.detectChanges();
       expect(testComponent.nzTimePickerPanelComponent.hourEnabled).toBe(true);

diff --git a/components/time-picker/nz-time-picker-panel.component.ts b/components/time-picker/nz-time-picker-panel.component.ts
@@ -69,7 +69,6 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
   @Input() nzHideDisabledOptions = false;
   @Input() nzClearText: string;
   @Input() nzPlaceHolder: string;
-  @Output() readonly timeClear = new EventEmitter<void>();
 
   @Input()
   set nzAllowEmpty(value: boolean) {
@@ -319,11 +318,6 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
     }
   }
 
-  clear(): void {
-    this.time.clear();
-    this.timeClear.emit();
-  }
-
   protected changed(): void {
     if (this.onChange) {
       this.onChange(this.time.value);

diff --git a/components/time-picker/nz-time-picker.component.html b/components/time-picker/nz-time-picker.component.html
@@ -10,6 +10,17 @@
 <span class="ant-time-picker-icon">
   <i nz-icon type="clock-circle"></i>
 </span>
+<i
+  *ngIf="nzAllowEmpty && value"
+  nz-icon
+  type="close-circle"
+  theme="fill"
+  class="anticon anticon-close-circle ant-time-picker-clear"
+  tabindex="-1"
+  [attr.aria-label]="nzClearText"
+  [attr.title]="nzClearText"
+  (click)="onClickClearBtn()"
+></i>
 
 <ng-template
   cdkConnectedOverlay
@@ -37,7 +48,6 @@
     [opened]="nzOpen"
     [nzClearText]="nzClearText"
     [nzAllowEmpty]="nzAllowEmpty"
-    (timeClear)="close()"
     [(ngModel)]="value">
   </nz-time-picker-panel>
 </ng-template>

diff --git a/components/time-picker/nz-time-picker.component.spec.ts b/components/time-picker/nz-time-picker.component.spec.ts
@@ -1,6 +1,6 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
-import { async, inject, TestBed } from '@angular/core/testing';
+import { async, fakeAsync, inject, tick, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -87,13 +87,23 @@ describe('time-picker', () => {
       expect(testComponent.openChange).toHaveBeenCalledTimes(3);
       expect(testComponent.open).toBe(true);
     });
+    it('should clear work', fakeAsync(() => {
+      fixture.detectChanges();
+      testComponent.date = new Date('2018-11-11 11:11:11');
+      fixture.detectChanges();
+      tick(500);
+      testComponent.nzTimePickerComponent.cdr.detectChanges();
+      timeElement.nativeElement.querySelector('.ant-time-picker-clear').click();
+      fixture.detectChanges();
+      expect(testComponent.date).toBeNull();
+    }));
   });
 });
 
 @Component({
   selector: 'nz-test-time-picker',
   template: `
-    <nz-time-picker [nzAutoFocus]="autoFocus" [(ngModel)]="date" [nzAllowEmpty]="false" [(nzOpen)]="open" (nzOpenChange)="openChange($event)" [nzDisabled]="disabled"></nz-time-picker>`
+    <nz-time-picker [nzAutoFocus]="autoFocus" [(ngModel)]="date" [(nzOpen)]="open" (nzOpenChange)="openChange($event)" [nzDisabled]="disabled"></nz-time-picker>`
 })
 export class NzTestTimePickerComponent {
   open = false;

diff --git a/components/time-picker/nz-time-picker.component.ts b/components/time-picker/nz-time-picker.component.ts
@@ -146,6 +146,10 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
     }
   }
 
+  onClickClearBtn(): void {
+    this.value = null;
+  }
+
   private setClassMap(): void {
     this.updateCls.updateHostClass(this.element.nativeElement, {
       [ `ant-time-picker` ]               : true,