fix(timepicker clock face): reset time after cancelation timepicker

Agranom · Sep 15, 2018 · 3398591 · 3398591
1 parent 9f8f9e8
commit 3398591
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 31 deletions.
diff --git a/src/app/material-timepicker/directives/ngx-timepicker.directive.ts b/src/app/material-timepicker/directives/ngx-timepicker.directive.ts
@@ -1,5 +1,11 @@
 import {
-    Directive, ElementRef, forwardRef, HostListener, Input, OnChanges, OnDestroy,
+    Directive,
+    ElementRef,
+    forwardRef,
+    HostListener,
+    Input,
+    OnChanges,
+    OnDestroy,
     SimpleChanges
 } from '@angular/core';
 import {NgxMaterialTimepickerComponent} from '../ngx-material-timepicker.component';
@@ -27,24 +33,38 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
 
     @Input() disabled: boolean;
     @Input() disableClick: boolean;
+    onTouched = () => {
+    };
+    private timepickerSubscriptions: Subscription[] = [];
+    private onChange: (value: any) => void = () => {
+    };
+
+    constructor(private elementRef: ElementRef) {
+    }
+
+    private _timepicker: NgxMaterialTimepickerComponent;
 
     @Input('ngxTimepicker')
     set timepicker(picker: NgxMaterialTimepickerComponent) {
         this.registerTimepicker(picker);
     }
 
-    private _timepicker: NgxMaterialTimepickerComponent;
+    private _format: number;
+
+    get format(): number {
+        return this._format;
+    }
 
     @Input()
     set format(value: number) {
         this._format = value === 24 ? 24 : 12;
     }
 
-    get format(): number {
-        return this._format;
-    }
+    private _min: string | Moment;
 
-    private _format: number;
+    get min(): string | Moment {
+        return this._min;
+    }
 
     @Input()
     set min(value: string | Moment) {
@@ -55,11 +75,11 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
         this._min = value;
     }
 
-    get min(): string | Moment {
-        return this._min;
-    }
+    private _max: string | Moment;
 
-    private _min: string | Moment;
+    get max(): string | Moment {
+        return this._max;
+    }
 
     @Input()
     set max(value: string | Moment) {
@@ -70,11 +90,11 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
         this._max = value;
     }
 
-    get max(): string | Moment {
-        return this._max;
-    }
+    private _value: string;
 
-    private _max: string | Moment;
+    get value(): string {
+        return this._value;
+    }
 
     @Input()
     set value(value: string) {
@@ -90,20 +110,6 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
         console.warn('Selected time doesn\'t match min or max value');
     }
 
-    get value(): string {
-        return this._value;
-    }
-
-    private _value: string;
-
-    private timepickerSubscription: Subscription;
-
-    private onChange: (value: any) => void = () => {};
-    onTouched = () => {};
-
-    constructor(private elementRef: ElementRef) {
-    }
-
     private set defaultTime(time: string) {
         if (this.isValueAvailableToUpdate()) {
             this._timepicker.setDefaultTime(TimeAdapter.formatTime(time, this._format));
@@ -147,18 +153,20 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
     }
 
     ngOnDestroy() {
-        this.timepickerSubscription.unsubscribe();
+        this.timepickerSubscriptions.forEach(s => s.unsubscribe());
     }
 
     private registerTimepicker(picker: NgxMaterialTimepickerComponent): void {
         if (picker) {
             this._timepicker = picker;
             this._timepicker.registerInput(this);
-            this.timepickerSubscription = this._timepicker.timeSet.subscribe((time: string) => {
+            this.timepickerSubscriptions.push(this._timepicker.timeSet.subscribe((time: string) => {
                 this.value = time;
                 this.onChange(this._value);
                 this.onTouched();
-            });
+            }));
+            this.timepickerSubscriptions.push(
+                this._timepicker.closed.subscribe(() => this.defaultTime = this._value));
         }
     }
 

diff --git a/src/app/material-timepicker/ngx-material-timepicker.component.ts b/src/app/material-timepicker/ngx-material-timepicker.component.ts
@@ -56,6 +56,7 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
     @Input() confirmBtnTmpl: TemplateRef<Node>;
     @Input('ESC') isEsc = true;
     @Output() timeSet = new EventEmitter<string>();
+    @Output() closed = new EventEmitter<null>();
 
     constructor(private timepickerService: NgxMaterialTimepickerService,
                 private eventService: NgxMaterialTimepickerEventService) {
@@ -142,6 +143,7 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
         if (event.phaseName === 'done' && event.toState === AnimationState.LEAVE) {
             this.isOpened = false;
             this.activeTimeUnit = TimeUnit.HOUR;
+            this.closed.next();
         }
     }
 

diff --git a/src/app/material-timepicker/services/ngx-material-timepicker.service.ts b/src/app/material-timepicker/services/ngx-material-timepicker.service.ts
@@ -55,6 +55,8 @@ export class NgxMaterialTimepickerService {
             this.hour = {...DEFAULT_HOUR, time: defaultTime.getHours() === 0 ? '00' : defaultTime.getHours()};
             this.minute = {...DEFAULT_MINUTE, time: defaultTime.getMinutes() === 0 ? '00' : defaultTime.getMinutes()};
             this.period = <TimePeriod>time.substr(time.length - 2).toUpperCase();
+        } else {
+            this.resetTime();
         }
     }
 
@@ -65,4 +67,10 @@ export class NgxMaterialTimepickerService {
 
         return TimeAdapter.formatTime(`${hour}:${minute} ${period}`, format);
     }
+
+    private resetTime(): void {
+        this.hour = {...DEFAULT_HOUR};
+        this.minute = {...DEFAULT_MINUTE};
+        this.period = TimePeriod.AM;
+    }
 }