fix(time-picker): More code refactoring. #3978

Author: valadzhov

projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts

@@ -40,3 +40,11 @@ export interface IgxTimePickerBase {
     parseMask(preserveAmPm?: boolean): string;
 }
 
+/** @hidden */
+export const enum TimeParts {
+    Hour = 'hour',
+    Minute = 'minute',
+    Seconds = 'seconds',
+    amPM = 'ampm'
+}
+

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -62,22 +62,22 @@ <h2 class="igx-time-picker__header-hour">
         <div class="igx-time-picker__body">
             <div *ngIf="showHoursList" #hourList [igxItemList]="'hourList'">
                 <span [igxHourItem]="hour"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForHours(hour)}"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('hour', hour)}"
                 *ngFor="let hour of hourView">{{ hour }}</span>
             </div>
             <div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
                 <span [igxMinuteItem]="minute"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForMinutes(minute)}"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('minute', minute)}"
                 *ngFor="let minute of minuteView" >{{ minute }}</span>
             </div>
             <div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
                 <span [igxSecondsItem]="seconds"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForSeconds(seconds)}"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('seconds', seconds)}"
                 *ngFor="let seconds of secondsView">{{ seconds }}</span>
             </div>
             <div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
                 <span [igxAmPmItem]="ampm"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForAmPm(ampm)}"
+                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('ampm', ampm)}"
                 *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -50,6 +50,7 @@ import { ITimePickerResourceStrings } from '../core/i18n/time-picker-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { KEYS, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { InteractionMode } from '../core/enums';
+import { TimeParts } from './time-picker.common';
 
 let NEXT_ID = 0;
 const ITEMS_COUNT = 7;
@@ -636,78 +637,43 @@ export class IgxTimePickerComponent implements
     }
 
     /** @hidden @internal */
-    applyDisabledStyleForHours(hourString: string): boolean {
-        const minValueDate: Date = this.convertMinMaxValue(this.minValue)
-        const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
-        if (!minValueDate || !maxValueDate) {
+    applyDisabledStyleForItem(period: string, value: string) {
+        if (!this.minValue || !this.maxValue) {
             return false;
         }
-        let hour = parseInt(hourString, 10);
-        if (this.selectedAmPm === 'PM') {
-            hour += 12;
-        }
+        const minValueDate: Date = this.convertMinMaxValue(this.minValue);
+        const maxValueDate: Date = this.convertMinMaxValue(this.maxValue);
+        let hour: number = parseInt(this.selectedHour, 10);
+        let minute: number = parseInt(this.selectedMinute, 10);
+        let seconds: number = parseInt(this.selectedSeconds, 10);
+        let amPM: string = this.selectedAmPm;
         const date = new Date(minValueDate);
-        date.setHours(hour);
-        return date < minValueDate || date > maxValueDate;
-    }
+        switch (period) {
+            case TimeParts.Hour:
+                hour = parseInt(value, 10);
+                break;
 
-    /** @hidden @internal */
-    applyDisabledStyleForMinutes(minuteString: string): boolean {
-        const minValueDate: Date = this.convertMinMaxValue(this.minValue)
-        const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
-        if (!minValueDate || !maxValueDate) {
-            return false;
-        }
-        const minute = parseInt(minuteString, 10);
-        let hour = parseInt(this.selectedHour, 10);
-        if (this.selectedAmPm === 'PM') {
-            hour += 12;
-        }
-        const date = new Date(minValueDate);
-        date.setHours(hour);
-        date.setMinutes(minute);
-        return date < minValueDate || date > maxValueDate;
-    }
+            case TimeParts.Minute:
+                minute = parseInt(value, 10);
+                break;
 
-    /** @hidden @internal */
-    applyDisabledStyleForSeconds(secondsString: string): boolean {
-        const minValueDate: Date = this.convertMinMaxValue(this.minValue)
-        const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
-        if (!minValueDate || !maxValueDate) {
-            return false;
-        }
-        const minute = parseInt(this.selectedMinute, 10);
-        let hour = parseInt(this.selectedHour, 10);
-        const second = parseInt(secondsString, 10);
-        if (this.selectedAmPm === 'PM') {
-            hour += 12;
-        }
-        const date = new Date(minValueDate);
-        date.setHours(hour);
-        date.setMinutes(minute);
-        date.setSeconds(second);
-        return date < minValueDate || date > maxValueDate;
-    }
+            case TimeParts.Seconds:
+                seconds = parseInt(value, 10);
+                break;
 
-    /** @hidden @internal */
-    applyDisabledStyleForAmPm(selectedAmPm): boolean {
-        const minValueDate: Date = this.convertMinMaxValue(this.minValue)
-        const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
-        if (!minValueDate || !maxValueDate) {
-            return false;
+            case TimeParts.amPM:
+                amPM = value;
+                break;
         }
-        const minute = parseInt(this.selectedMinute, 10);
-        let hour = parseInt(this.selectedHour, 10);
-        const second = parseInt(this.selectedSeconds, 10);
-        const amPM = selectedAmPm;
+
         if (amPM === 'PM') {
             hour += 12;
         }
-        const date = new Date(minValueDate);
         date.setHours(hour);
         date.setMinutes(minute);
-        date.setSeconds(second);
+        date.setSeconds(seconds);
         return date < minValueDate || date > maxValueDate;
+
     }
 
     /** @hidden @internal */