Skip to content

Commit

Permalink
refactor(module:time-picker): place the clear button to outside of th…
Browse files Browse the repository at this point in the history
…e time picker panel (NG-ZORRO#2948)
  • Loading branch information
wilsoncook authored and vthinkxie committed Feb 21, 2019
1 parent 9fd7752 commit ffb6665
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 25 deletions.
7 changes: 0 additions & 7 deletions components/time-picker/nz-time-picker-panel.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 0 additions & 9 deletions components/time-picker/nz-time-picker-panel.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
6 changes: 0 additions & 6 deletions components/time-picker/nz-time-picker-panel.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down
12 changes: 11 additions & 1 deletion components/time-picker/nz-time-picker.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -37,7 +48,6 @@
[opened]="nzOpen"
[nzClearText]="nzClearText"
[nzAllowEmpty]="nzAllowEmpty"
(timeClear)="close()"
[(ngModel)]="value">
</nz-time-picker-panel>
</ng-template>
Expand Down
14 changes: 12 additions & 2 deletions components/time-picker/nz-time-picker.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions components/time-picker/nz-time-picker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit ffb6665

Please sign in to comment.