Skip to content

Commit f1a284b

Browse files
jackofdiamond5jackofdiamond5
committed
refactor(time-picker): update itemsDelta
1 parent 7ec7e3f commit f1a284b

File tree

4 files changed

+58
-57
lines changed

4 files changed

+58
-57
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ElementRef } from '@angular/core';
2+
import { DatePartDeltas } from '../directives/date-time-editor/public_api';
23
/** @hidden */
34
export const IGX_TIME_PICKER_COMPONENT = 'IgxTimePickerComponentToken';
45

@@ -10,7 +11,7 @@ export interface IgxTimePickerBase {
1011
secondsList: ElementRef;
1112
ampmList: ElementRef;
1213
inputFormat: string;
13-
itemsDelta: { hour: number; minute: number; second: number };
14+
itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>;
1415
selectedDate: Date;
1516
maxDropdownValue: Date;
1617
minDropdownValue: Date;

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -464,31 +464,31 @@ describe('IgxTimePicker', () => {
464464
timePicker.value = new Date(date);
465465
timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0);
466466
timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0);
467-
timePicker.itemsDelta = { hour: 2, minute: 20, second: 15 };
467+
timePicker.itemsDelta = { hours: 2, minutes: 20, seconds: 15 };
468468
fixture.detectChanges();
469469
spyOn(timePicker.valueChange, 'emit').and.callThrough();
470470

471471
timePicker.increment(DatePart.Hours);
472-
date.setHours(date.getHours() + timePicker.itemsDelta.hour);
472+
date.setHours(date.getHours() + timePicker.itemsDelta.hours);
473473
expect(timePicker.value).toEqual(date);
474474
expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(1);
475475
expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
476476

477477
timePicker.increment(DatePart.Minutes);
478-
date.setMinutes(date.getMinutes() + timePicker.itemsDelta.minute);
478+
date.setMinutes(date.getMinutes() + timePicker.itemsDelta.minutes);
479479
expect(timePicker.value).toEqual(date);
480480
expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(2);
481481
expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
482482

483483
timePicker.decrement(DatePart.Seconds);
484-
date.setSeconds(date.getSeconds() - timePicker.itemsDelta.second);
484+
date.setSeconds(date.getSeconds() - timePicker.itemsDelta.seconds);
485485
expect(timePicker.value).toEqual(date);
486486
expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(3);
487487
expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
488488
});
489489

490490
xit('should open/close the dropdown and keep the current selection on Space/Enter key press', fakeAsync(() => {
491-
timePicker.itemsDelta = {hour: 4, minute: 7, second: 1};
491+
timePicker.itemsDelta = {hours: 4, minutes: 7, seconds: 1};
492492
fixture.detectChanges();
493493

494494
timePicker.open();
@@ -539,9 +539,9 @@ describe('IgxTimePicker', () => {
539539
it('should initialize all input properties with their default values', () => {
540540
expect(timePicker.mode).toEqual(PickerInteractionMode.DropDown);
541541
expect(timePicker.inputFormat).toEqual(DateTimeUtil.DEFAULT_TIME_INPUT_FORMAT);
542-
expect(timePicker.itemsDelta.hour).toEqual(1);
543-
expect(timePicker.itemsDelta.minute).toEqual(1);
544-
expect(timePicker.itemsDelta.second).toEqual(1);
542+
expect(timePicker.itemsDelta.hours).toEqual(1);
543+
expect(timePicker.itemsDelta.minutes).toEqual(1);
544+
expect(timePicker.itemsDelta.seconds).toEqual(1);
545545
expect(timePicker.disabled).toEqual(false);
546546
});
547547

@@ -668,7 +668,7 @@ describe('IgxTimePicker', () => {
668668
timePicker.value = new Date(2021, 24, 2, 6, 42, 0);
669669
fixture.componentInstance.minValue = '06:30:00';
670670
fixture.componentInstance.maxValue = '18:30:00';
671-
timePicker.itemsDelta = {hour: 3, minute: 7, second: 1};
671+
timePicker.itemsDelta = {hours: 3, minutes: 7, seconds: 1};
672672
fixture.detectChanges();
673673

674674
timePicker.open();
@@ -714,7 +714,7 @@ describe('IgxTimePicker', () => {
714714
it('should select closest value when value does not match dropdown values', fakeAsync(() => {
715715
fixture.componentInstance.minValue = new Date(2021, 24, 2, 9, 0, 0);
716716
fixture.componentInstance.maxValue = new Date(2021, 24, 2, 16, 0, 0);
717-
timePicker.itemsDelta = { hour: 2, minute: 15, second: 30 };
717+
timePicker.itemsDelta = { hours: 2, minutes: 15, seconds: 30 };
718718
fixture.detectChanges();
719719

720720
timePicker.open();
@@ -734,7 +734,7 @@ describe('IgxTimePicker', () => {
734734
it('should select minValue when value is outside the min/max range', fakeAsync(() => {
735735
fixture.componentInstance.minValue = new Date(2021, 24, 2, 13, 0, 0);
736736
fixture.componentInstance.maxValue = new Date(2021, 24, 2, 19, 0, 0);
737-
timePicker.itemsDelta = { hour: 2, minute: 15, second: 30 };
737+
timePicker.itemsDelta = { hours: 2, minutes: 15, seconds: 30 };
738738
fixture.detectChanges();
739739

740740
timePicker.open();
@@ -755,7 +755,7 @@ describe('IgxTimePicker', () => {
755755
fixture.componentInstance.date = null;
756756
fixture.componentInstance.minValue = new Date(2021, 24, 2, 13, 0, 0);
757757
fixture.componentInstance.maxValue = new Date(2021, 24, 2, 19, 0, 0);
758-
timePicker.itemsDelta = { hour: 2, minute: 15, second: 30 };
758+
timePicker.itemsDelta = { hours: 2, minutes: 15, seconds: 30 };
759759
fixture.detectChanges();
760760

761761
timePicker.open();

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

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ import { IgxTextSelectionModule } from '../directives/text-selection/text-select
5959
import { IgxLabelDirective } from '../directives/label/label.directive';
6060
import { PickerBaseDirective } from '../date-common/picker-base.directive';
6161
import { DateTimeUtil } from '../date-common/util/date-time.util';
62-
import { DatePart } from '../directives/date-time-editor/public_api';
62+
import { DatePart, DatePartDeltas } from '../directives/date-time-editor/public_api';
6363
import { PickerHeaderOrientation } from '../date-common/types';
6464
import { IgxPickersCommonModule, IgxPickerToggleComponent } from '../date-common/picker-icons.common';
6565
import { TimeFormatPipe } from './time-picker.pipes';
@@ -471,7 +471,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
471471
private _resourceStrings = CurrentResourceStrings.TimePickerResStrings;
472472
private _okButtonLabel = null;
473473
private _cancelButtonLabel = null;
474-
private _itemsDelta: { hour: number; minute: number; second: number } = { hour: 1, minute: 1, second: 1 };
474+
private _itemsDelta: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> = { hours: 1, minutes: 1, seconds: 1 };
475475

476476
private _hourItems = [];
477477
private _minuteItems = [];
@@ -614,11 +614,11 @@ export class IgxTimePickerComponent extends PickerBaseDirective
614614
* ```
615615
*/
616616
@Input()
617-
public set itemsDelta(value) {
618-
this._itemsDelta = { hour: 1, minute: 1, second: 1, ...value };
617+
public set itemsDelta(value: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'>) {
618+
Object.assign(this._itemsDelta, value);
619619
}
620620

621-
public get itemsDelta(): { hour: number; minute: number; second: number } {
621+
public get itemsDelta(): Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> {
622622
return this._itemsDelta;
623623
}
624624

@@ -761,7 +761,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
761761
, settings);
762762

763763
this.toggleRef.open(overlaySettings);
764-
this.initializeContainer();
765764
}
766765

767766
/**
@@ -949,7 +948,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
949948
const minHours = this._minDropdownValue?.getHours() || 0;
950949
const maxHours = this._maxDropdownValue?.getHours() || 24;
951950
const previousHours = previousDate.getHours();
952-
let hours = previousHours + delta * this.itemsDelta.hour;
951+
let hours = previousHours + delta * this.itemsDelta.hours;
953952
if ((previousHours === maxHours && delta > 0) || (previousHours === minHours && delta < 0)) {
954953
hours = !this.spinLoop ? previousHours : delta > 0 ? minHours : maxHours;
955954
}
@@ -981,7 +980,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
981980
if ((delta < 0 && minutes === min) || (delta > 0 && minutes === max)) {
982981
minutes = this.spinLoop && minutes === min ? max : this.spinLoop && minutes === max ? min : minutes;
983982
} else {
984-
minutes = minutes + delta * this.itemsDelta.minute;
983+
minutes = minutes + delta * this.itemsDelta.minutes;
985984
}
986985

987986
this._selectedDate.setMinutes(minutes);
@@ -1004,7 +1003,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
10041003
if ((delta < 0 && seconds === min) || (delta > 0 && seconds === max)) {
10051004
seconds = this.spinLoop && seconds === min ? max : this.spinLoop && seconds === max ? min : seconds;
10061005
} else {
1007-
seconds = seconds + delta * this.itemsDelta.second;
1006+
seconds = seconds + delta * this.itemsDelta.seconds;
10081007
}
10091008

10101009
this._selectedDate.setSeconds(seconds);
@@ -1108,10 +1107,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
11081107
const leadZeroMinute = (item < 10 && this.inputFormat.indexOf('mm') !== -1);
11091108
const leadZeroSeconds = (item < 10 && this.inputFormat.indexOf('ss') !== -1);
11101109

1111-
const leadZero = {
1112-
hour: leadZeroHour,
1113-
minute: leadZeroMinute,
1114-
second: leadZeroSeconds
1110+
const leadZero: Pick<DatePartDeltas, 'hours' | 'minutes' | 'seconds'> = {
1111+
hours: leadZeroHour,
1112+
minutes: leadZeroMinute,
1113+
seconds: leadZeroSeconds
11151114
}[dateType];
11161115

11171116
item = (leadZero) ? '0' + item : `${item}`;
@@ -1122,13 +1121,13 @@ export class IgxTimePickerComponent extends PickerBaseDirective
11221121
private generateHours(): void {
11231122
this._hourItems = [];
11241123
let hoursCount = this.isTwelveHourFormat ? 13 : 24;
1125-
hoursCount /= this.itemsDelta.hour;
1124+
hoursCount /= this.itemsDelta.hours;
11261125
const minHours = this._minDropdownValue.getHours() || 0;
11271126
const maxHours = this._maxDropdownValue.getHours() || 24;
11281127

11291128
if (hoursCount > 1) {
11301129
for (let hourIndex = 0; hourIndex < 24; hourIndex++) {
1131-
let hours = hourIndex * this.itemsDelta.hour;
1130+
let hours = hourIndex * this.itemsDelta.hours;
11321131
if (hours >= minHours && hours <= maxHours) {
11331132
hours = this.isTwelveHourFormat ? this.toTwelveHourFormat(hours) : hours;
11341133
if (!this._hourItems.find((element => element === hours))) {
@@ -1150,7 +1149,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
11501149

11511150
private generateMinutes(): void {
11521151
this._minuteItems = [];
1153-
const minuteItemsCount = 60 / this.itemsDelta.minute;
1152+
const minuteItemsCount = 60 / this.itemsDelta.minutes;
11541153
const min = new Date(this._minDropdownValue);
11551154
const max = new Date(this._maxDropdownValue);
11561155
const time = new Date(this._selectedDate);
@@ -1161,7 +1160,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
11611160
}
11621161

11631162
for (let i = 0; i < minuteItemsCount; i++) {
1164-
const minutes = i * this.itemsDelta.minute;
1163+
const minutes = i * this.itemsDelta.minutes;
11651164
time.setMinutes(minutes);
11661165
if (time >= min && time <= max) {
11671166
this._minuteItems.push(minutes);
@@ -1178,14 +1177,14 @@ export class IgxTimePickerComponent extends PickerBaseDirective
11781177

11791178
private generateSeconds(): void {
11801179
this._secondsItems = [];
1181-
const secondsItemsCount = 60 / this.itemsDelta.second;
1180+
const secondsItemsCount = 60 / this.itemsDelta.seconds;
11821181
const time = new Date(this._selectedDate);
11831182

11841183
for (let i = 0; i < secondsItemsCount; i++) {
1185-
const seconds = i * this.itemsDelta.second;
1184+
const seconds = i * this.itemsDelta.seconds;
11861185
time.setSeconds(seconds);
11871186
if (time.getTime() >= this._minDropdownValue.getTime() && time.getTime() <= this._maxDropdownValue.getTime()) {
1188-
this._secondsItems.push(i * this.itemsDelta.second);
1187+
this._secondsItems.push(i * this.itemsDelta.seconds);
11891188
}
11901189
}
11911190

@@ -1369,14 +1368,14 @@ export class IgxTimePickerComponent extends PickerBaseDirective
13691368
const minutes = time.getMinutes();
13701369
const seconds = time.getSeconds();
13711370

1372-
if (this.showHoursList && hours % this.itemsDelta.hour > 0) {
1373-
delta = value === 'min' ? this.itemsDelta.hour - hours % this.itemsDelta.hour : hours % this.itemsDelta.hour;
1371+
if (this.showHoursList && hours % this.itemsDelta.hours > 0) {
1372+
delta = value === 'min' ? this.itemsDelta.hours - hours % this.itemsDelta.hours : hours % this.itemsDelta.hours;
13741373
time.setHours(hours + sign * delta, 0, 0);
1375-
} else if (this.showMinutesList && minutes % this.itemsDelta.minute > 0) {
1376-
delta = value === 'min' ? this.itemsDelta.minute - minutes % this.itemsDelta.minute : minutes % this.itemsDelta.minute;
1374+
} else if (this.showMinutesList && minutes % this.itemsDelta.minutes > 0) {
1375+
delta = value === 'min' ? this.itemsDelta.minutes - minutes % this.itemsDelta.minutes: minutes % this.itemsDelta.minutes;
13771376
time.setHours(hours, minutes + sign * delta, 0);
1378-
} else if (this.showSecondsList && seconds % this.itemsDelta.second > 0) {
1379-
delta = value === 'min' ? this.itemsDelta.second - seconds % this.itemsDelta.second : seconds % this.itemsDelta.second;
1377+
} else if (this.showSecondsList && seconds % this.itemsDelta.seconds > 0) {
1378+
delta = value === 'min' ? this.itemsDelta.seconds - seconds % this.itemsDelta.seconds : seconds % this.itemsDelta.seconds;
13801379
time.setHours(hours, minutes, seconds + sign * delta);
13811380
}
13821381

@@ -1398,25 +1397,25 @@ export class IgxTimePickerComponent extends PickerBaseDirective
13981397
return;
13991398
}
14001399

1401-
if (this._selectedDate.getHours() % this.itemsDelta.hour > 0) {
1400+
if (this._selectedDate.getHours() % this.itemsDelta.hours > 0) {
14021401
this._selectedDate.setHours(
1403-
this._selectedDate.getHours() + this.itemsDelta.hour - this._selectedDate.getHours() % this.itemsDelta.hour,
1402+
this._selectedDate.getHours() + this.itemsDelta.hours - this._selectedDate.getHours() % this.itemsDelta.hours,
14041403
0,
14051404
0
14061405
);
14071406
}
14081407

1409-
if (this._selectedDate.getMinutes() % this.itemsDelta.minute > 0) {
1408+
if (this._selectedDate.getMinutes() % this.itemsDelta.minutes > 0) {
14101409
this._selectedDate.setHours(
14111410
this._selectedDate.getHours(),
1412-
this._selectedDate.getMinutes() + this.itemsDelta.minute - this._selectedDate.getMinutes() % this.itemsDelta.minute,
1411+
this._selectedDate.getMinutes() + this.itemsDelta.minutes - this._selectedDate.getMinutes() % this.itemsDelta.minutes,
14131412
0
14141413
);
14151414
}
14161415

1417-
if (this._selectedDate.getSeconds() % this.itemsDelta.second > 0) {
1416+
if (this._selectedDate.getSeconds() % this.itemsDelta.seconds > 0) {
14181417
this._selectedDate.setSeconds(
1419-
this._selectedDate.getSeconds() + this.itemsDelta.second - this._selectedDate.getSeconds() % this.itemsDelta.second
1418+
this._selectedDate.getSeconds() + this.itemsDelta.seconds - this._selectedDate.getSeconds() % this.itemsDelta.seconds
14201419
);
14211420
}
14221421
}
@@ -1491,6 +1490,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
14911490
if (event.cancel) {
14921491
return;
14931492
}
1493+
this.initializeContainer();
14941494
});
14951495

14961496
this.toggleRef.onOpened.pipe(takeUntil(this._destroy$)).subscribe(() => {

0 commit comments

Comments
 (0)