feat(module:time-picker): support null value in time-picker-panel (#1388)

Author: vthinkxie

PROGRESS.md

@@ -38,8 +38,8 @@
 | modal | 90% | 100% | 100% | wilsoncook | √ |
 | message | x | x | x | wilsoncook | - |
 | notification | x | x | x | wilsoncook | - |
-| datepicker | x | x | x | trotyl | - |
-| time-picker | x | x | x | trotyl | - |
+| datepicker | x | x | x | wilsoncook | - |
+| time-picker | √ | 100% | 100% | trotyl  asnowwolf vthinkxie | √ |
 | calendar | √ | 100% | 100% | trotyl | √ |
 | affix | √ | 100% | 100% | cipchk | √ |
 | transfer | √ | 100% | 100% | cipchk | x |
@@ -50,8 +50,8 @@
 | backtop | √ | 100% | 100% | cipchk | x |
 | divider | √ | 100% | 100% | cipchk | x |
 | treeselect | x | x | x | simplejason | - |
-| tree | x | x | x | simplejason | - |
-| cascader | x | x | x | fbchen | - |
+| tree |  √ | 100% | 100% | simplejason | - |
+| cascader | √ | 100% | 100% | fbchen | - |
 | autocomplete | √ | 100% | 100% | HsuanXyz | - |
 | mention | √ | 100%  | 100%  | HsuanXyz | - |
 

components/time-picker/nz-time-picker-panel.component.spec.ts

@@ -53,8 +53,8 @@ describe('time-picker-panel', () => {
       fixture.detectChanges();
       expect(testComponent.nzTimePickerPanelComponent.hourEnabled).toBe(true);
       expect(testComponent.nzTimePickerPanelComponent.minuteEnabled).toBe(true);
-      expect(testComponent.nzTimePickerPanelComponent.secondEnabled).toBe(true);
-      expect(testComponent.nzTimePickerPanelComponent.enabledColumns).toBe(3);
+      expect(testComponent.nzTimePickerPanelComponent.secondEnabled).toBe(false);
+      expect(testComponent.nzTimePickerPanelComponent.enabledColumns).toBe(2);
     });
     it('should default open value work', fakeAsync(() => {
       testComponent.nzTimePickerPanelComponent.opened = true;

components/time-picker/nz-time-picker-panel.component.ts

@@ -36,12 +36,13 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
   private sub: Subscription;
   private onChange: (value: Date) => void;
   private onTouch: () => void;
-  private _format: string;
+  private _format = 'HH:mm:ss';
   private _disabledHours: () => number[];
   private _disabledMinutes: (hour: number) => number[];
   private _disabledSeconds: (hour: number, minute: number) => number[];
   private _defaultOpenValue = new Date();
   private _opened = false;
+  private _allowEmpty = true;
   time = new TimeHolder();
   hourEnabled = true;
   minuteEnabled = true;
@@ -58,9 +59,19 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
   @Input() nzHideDisabledOptions = false;
   @Input() nzClearText: string;
   @Input() nzPlaceHolder: string;
-  @Input() nzAllowEmpty = true;
   @Output() timeClear = new EventEmitter<void>();
 
+  @Input()
+  set nzAllowEmpty(value: boolean) {
+    if (isNotNil(value)) {
+      this._allowEmpty = value;
+    }
+  }
+
+  get nzAllowEmpty(): boolean {
+    return this._allowEmpty;
+  }
+
   @Input()
   set opened(value: boolean) {
     this._opened = value;
@@ -98,8 +109,8 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   @Input()
   set nzDisabledMinutes(value: (hour: number) => number[]) {
-    this._disabledMinutes = value;
-    if (this._disabledMinutes) {
+    if (isNotNil(value)) {
+      this._disabledMinutes = value;
       this.buildMinutes();
     }
   }
@@ -110,8 +121,8 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   @Input()
   set nzDisabledSeconds(value: (hour: number, minute: number) => number[]) {
-    this._disabledSeconds = value;
-    if (this._disabledSeconds) {
+    if (isNotNil(value)) {
+      this._disabledSeconds = value;
       this.buildSeconds();
     }
   }
@@ -122,28 +133,21 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   @Input()
   set format(value: string) {
-    if (value !== this._format) {
+    if (isNotNil(value)) {
       this._format = value;
-      if (isNotNil(value)) {
-        this.enabledColumns = 0;
-        const charSet = new Set(value);
-        this.hourEnabled = charSet.has('H') || charSet.has('h');
-        this.minuteEnabled = charSet.has('m');
-        this.secondEnabled = charSet.has('s');
-        if (this.hourEnabled) {
-          this.enabledColumns++;
-        }
-        if (this.minuteEnabled) {
-          this.enabledColumns++;
-        }
-        if (this.secondEnabled) {
-          this.enabledColumns++;
-        }
-      } else {
-        this.hourEnabled = true;
-        this.minuteEnabled = true;
-        this.secondEnabled = true;
-        this.enabledColumns = 3;
+      this.enabledColumns = 0;
+      const charSet = new Set(value);
+      this.hourEnabled = charSet.has('H') || charSet.has('h');
+      this.minuteEnabled = charSet.has('m');
+      this.secondEnabled = charSet.has('s');
+      if (this.hourEnabled) {
+        this.enabledColumns++;
+      }
+      if (this.minuteEnabled) {
+        this.enabledColumns++;
+      }
+      if (this.secondEnabled) {
+        this.enabledColumns++;
       }
     }
   }
@@ -154,7 +158,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   @Input()
   set nzHourStep(value: number) {
-    if (this._nzHourStep !== value) {
+    if (isNotNil(value)) {
       this._nzHourStep = value;
       this.buildHours();
     }
@@ -166,7 +170,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   @Input()
   set nzMinuteStep(value: number) {
-    if (this._nzMinuteStep !== value) {
+    if (isNotNil(value)) {
       this._nzMinuteStep = value;
       this.buildMinutes();
     }
@@ -178,7 +182,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
 
   @Input()
   set nzSecondStep(value: number) {
-    if (this._nzSecondStep !== value) {
+    if (isNotNil(value)) {
       this._nzSecondStep = value;
       this.buildSeconds();
     }

components/time-picker/nz-time-picker.component.ts

@@ -68,6 +68,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   private _autoFocus = false;
   private _onChange: (value: Date) => void;
   private _onTouched: () => void;
+  private _hideDisabledOptions = false;
   isInit = false;
   origin: CdkOverlayOrigin;
   overlayPositions: ConnectionPositionPair[] = [ {
@@ -87,7 +88,6 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   @Input() nzPopupClassName = '';
   @Input() nzPlaceHolder = '';
   @Input() nzAddOn: TemplateRef<void>;
-  @Input() nzHideDisabledOptions = false;
   @Input() nzDefaultOpenValue = new Date();
   @Input() nzDisabledHours: () => number[];
   @Input() nzDisabledMinutes: (hour: number) => number[];
@@ -96,6 +96,15 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   @Input() nzOpen = false;
   @Output() nzOpenChange = new EventEmitter<boolean>();
 
+  @Input()
+  set nzHideDisabledOptions(value: boolean) {
+    this._hideDisabledOptions = toBoolean(value);
+  }
+
+  get nzHideDisabledOptions(): boolean {
+    return this._hideDisabledOptions;
+  }
+
   @Input()
   set nzAllowEmpty(value: boolean) {
     this._allowEmpty = toBoolean(value);
@@ -205,7 +214,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   writeValue(time: Date | null): void {
-    this.value = time;
+    this._value = time;
   }
 
   registerOnChange(fn: (time: Date) => void): void {