Skip to content

Commit 037a146

Browse files
hanastasovhanastasov
committed
feat(calendar): emit event from animationDon #7039 
1 parent 94a68fd commit 037a146

File tree

5 files changed

+53
-56
lines changed

5 files changed

+53
-56
lines changed

‎projects/igniteui-angular/src/lib/calendar/calendar.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h2 class="igx-calendar__header-date">
2222
</h2>
2323
</div>
2424

25-
<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()"
25+
<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" (swiperight)="previousMonth()"
2626
(swipeleft)="nextMonth()">
2727
<div class="igx-calendar-picker">
2828
<div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
@@ -63,15 +63,15 @@ <h2 class="igx-calendar__header-date">
6363
</div>
6464
</div>
6565

66-
<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
66+
<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months (@animateView.done)="viewRendered($event)"
6767
[date]="viewDate"
6868
[locale]="locale"
6969
[formatView]="formatViews.month"
7070
[monthFormat]="formatOptions.month"
7171
(onSelection)="changeMonth($event)">
7272
</igx-months-view>
7373

74-
<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
74+
<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade (@animateView.done)="viewRendered($event)"
7575
[date]="viewDate"
7676
[locale]="locale"
7777
[formatView]="formatViews.year"

‎projects/igniteui-angular/src/lib/calendar/calendar.component.ts‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -466,13 +466,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
466466
* @internal
467467
*/
468468
public previousMonth(isKeydownTrigger = false) {
469-
const previousValue = this.viewDate;
469+
this.previousViewDate = this.viewDate;
470470
this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
471471
this.animationAction = ScrollMonth.PREV;
472472
this.isKeydownTrigger = isKeydownTrigger;
473-
requestAnimationFrame(() => {
474-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
475-
});
476473
}
477474

478475
/**
@@ -482,13 +479,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
482479
* @internal
483480
*/
484481
public nextMonth(isKeydownTrigger = false) {
485-
const previousValue = this.viewDate;
482+
this.previousViewDate = this.viewDate;
486483
this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
487484
this.animationAction = ScrollMonth.NEXT;
488485
this.isKeydownTrigger = isKeydownTrigger;
489-
requestAnimationFrame(() => {
490-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
491-
});
492486
}
493487

494488
/**
@@ -617,9 +611,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
617611
if (day) {
618612
this.daysView.daysNavService.focusNextDate(day.nativeElement, args.key, true);
619613
}
620-
this.onViewDateChanged.emit({previousValue, currentValue: this.viewDate});
621614
};
622-
const previousValue = this.viewDate;
615+
this.previousViewDate = this.viewDate;
623616
this.viewDate = this.nextDate;
624617
}
625618

@@ -628,15 +621,13 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
628621
* @intenal
629622
*/
630623
public changeMonth(event: Date) {
631-
const previousValue = this.viewDate;
624+
this.previousViewDate = this.viewDate;
632625
this.viewDate = this.calendarModel.getFirstViewDate(event, 'month', this.activeViewIdx);
633626
this.activeView = CalendarView.DEFAULT;
634627

635628
requestAnimationFrame(() => {
636629
const elem = this.monthsBtns.find((e: ElementRef, idx: number) => idx === this.activeViewIdx);
637630
if (elem) { elem.nativeElement.focus(); }
638-
this.onViewDateChanged.emit({previousValue, currentValue: this.viewDate});
639-
this.onActiveViewChanged.emit(this.activeView);
640631
});
641632
}
642633

@@ -650,7 +641,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
650641
requestAnimationFrame(() => {
651642
this.monthsView.date = args;
652643
this.focusMonth(event.target);
653-
this.onActiveViewChanged.emit(this.activeView);
654644
});
655645
}
656646

@@ -725,6 +715,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
725715
* @internal
726716
*/
727717
public animationDone(event) {
718+
if ((event.fromState === ScrollMonth.NONE && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT)) ||
719+
(event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
720+
this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
721+
}
722+
728723
if (this.monthScrollDirection !== ScrollMonth.NONE) {
729724
this.scrollMonth$.next();
730725
}
@@ -750,6 +745,16 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
750745
this.animationAction = ScrollMonth.NONE;
751746
}
752747

748+
/**
749+
* @hidden
750+
* @internal
751+
*/
752+
public viewRendered(event) {
753+
if (event.fromState !== 'void') {
754+
this.onActiveViewChanged.emit(this.activeView);
755+
}
756+
}
757+
753758
/**
754759
* Keyboard navigation of the calendar
755760
* @hidden
@@ -827,7 +832,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
827832

828833
const isPageDown = event.key === 'PageDown';
829834
const step = isPageDown ? 1 : -1;
830-
const previousValue = this.viewDate;
835+
this.previousViewDate = this.viewDate;
831836
this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', step);
832837

833838
this.animationAction = isPageDown ? ScrollMonth.NEXT : ScrollMonth.PREV;
@@ -864,10 +869,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
864869
if (dayItem && dayItem.isFocusable) { dayItem.nativeElement.focus(); }
865870
};
866871
}
867-
868-
requestAnimationFrame(() => {
869-
this.onViewDateChanged.emit({previousValue, currentValue: this.viewDate});
870-
});
871872
}
872873

873874
/**

‎projects/igniteui-angular/src/lib/calendar/month-picker-base.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
3535
@ViewChildren('yearsBtn')
3636
public yearsBtns: QueryList<ElementRef>;
3737

38+
/**
39+
* @hidden @internal
40+
*/
41+
public previousViewDate: Date;
42+
3843

3944
@Input()
4045
/**
@@ -83,16 +88,14 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
8388
* @hidden
8489
*/
8590
public changeYear(event: Date) {
86-
const previousValue = this.viewDate;
91+
this.previousViewDate = this.viewDate;
8792
this.viewDate = this.calendarModel.getFirstViewDate(event, 'month', this.activeViewIdx);
8893
this.activeView = CalendarView.DEFAULT;
8994

9095
requestAnimationFrame(() => {
9196
if (this.yearsBtns && this.yearsBtns.length) {
9297
this.yearsBtns.find((e: ElementRef, idx: number) => idx === this.activeViewIdx).nativeElement.focus();
9398
}
94-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
95-
this.onActiveViewChanged.emit(this.activeView);
9699
});
97100
}
98101

@@ -102,9 +105,6 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
102105
public activeViewDecade(activeViewIdx = 0): void {
103106
this.activeView = CalendarView.DECADE;
104107
this.activeViewIdx = activeViewIdx;
105-
requestAnimationFrame(() => {
106-
this.onActiveViewChanged.emit(this.activeView);
107-
});
108108
}
109109

110110
/**

‎projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div *ngIf="isDefaultView" [@animateView]="activeView" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
1+
<div *ngIf="isDefaultView" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
22
<div class="igx-calendar-picker">
33
<div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="previousYearKB($event)" [ngStyle]="{
44
'min-width.%': 25,
@@ -20,15 +20,16 @@
2020
</div>
2121

2222
<igx-months-view [@animateChange]="yearAction" #months
23-
(@animateChange.done)="animationDone()"
23+
(@animateChange.done)="animationDone($event)"
24+
(@animateView.done)="viewRendered($event)"
2425
[date]="viewDate"
2526
[locale]="locale"
2627
[formatView]="formatViews.month"
2728
[monthFormat]="formatOptions.month"
2829
(onSelection)="selectMonth($event)">
2930
</igx-months-view>
3031
</div>
31-
<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
32+
<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade (@animateView.done)="viewRendered($event)"
3233
[date]="viewDate"
3334
[locale]="locale"
3435
[formatView]="formatViews.year"

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

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { IgxMonthsViewComponent } from '../months-view/months-view.component';
1414
import { IgxMonthPickerBaseDirective, CalendarView } from '../month-picker-base';
1515
import { IgxYearsViewComponent } from '../years-view/years-view.component';
1616
import { IgxDaysViewComponent } from '../days-view/days-view.component';
17+
import { ScrollMonth } from '../calendar-base';
1718

1819
let NEXT_ID = 0;
1920
@Component({
@@ -99,10 +100,23 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
99100
/**
100101
* @hidden
101102
*/
102-
public animationDone() {
103+
public animationDone(event) {
104+
if ((event.fromState === 'void' && event.toState === '') ||
105+
(event.fromState === '' && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT))) {
106+
this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
107+
}
103108
this.yearAction = '';
104109
}
105110

111+
/**
112+
* @hidden
113+
*/
114+
public viewRendered(event) {
115+
if (event.fromState !== 'void') {
116+
this.onActiveViewChanged.emit(this.activeView);
117+
}
118+
}
119+
106120
/**
107121
* @hidden
108122
*/
@@ -121,7 +135,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
121135

122136
requestAnimationFrame(() => {
123137
if (this.dacadeView) { this.dacadeView.el.nativeElement.focus(); }
124-
this.onActiveViewChanged.emit(this.activeView);
125138
});
126139
}
127140

@@ -141,15 +154,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
141154
*/
142155
public nextYear() {
143156
this.yearAction = 'next';
144-
const previousValue = this.viewDate;
157+
this.previousViewDate = this.viewDate;
145158
this.viewDate = this.calendarModel.getNextYear(this.viewDate);
146159

147160
this.selectDate(this.viewDate);
148161
this.onSelection.emit(this.selectedDates);
149-
150-
requestAnimationFrame(() => {
151-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
152-
});
153162
}
154163

155164
/**
@@ -169,15 +178,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
169178
*/
170179
public previousYear() {
171180
this.yearAction = 'prev';
172-
const previousValue = this.viewDate;
181+
this.previousViewDate = this.viewDate;
173182
this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
174183

175184
this.selectDate(this.viewDate);
176185
this.onSelection.emit(this.selectedDates);
177-
178-
requestAnimationFrame(() => {
179-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
180-
});
181186
}
182187

183188
/**
@@ -196,7 +201,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
196201
* @hidden
197202
*/
198203
public selectYear(event: Date) {
199-
const previousValue = this.viewDate;
204+
this.previousViewDate = this.viewDate;
200205
this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
201206
this.activeView = CalendarView.DEFAULT;
202207

@@ -205,8 +210,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
205210

206211
requestAnimationFrame(() => {
207212
if (this.yearsBtn) { this.yearsBtn.nativeElement.focus(); }
208-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
209-
this.onActiveViewChanged.emit(this.activeView);
210213
});
211214
}
212215

@@ -252,12 +255,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
252255
public onKeydownPageUp(event: KeyboardEvent) {
253256
event.preventDefault();
254257
this.yearAction = 'prev';
255-
const previousValue = this.viewDate;
258+
this.previousViewDate = this.viewDate;
256259
this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
257-
258-
requestAnimationFrame(() => {
259-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
260-
});
261260
}
262261

263262
/**
@@ -267,12 +266,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
267266
public onKeydownPageDown(event: KeyboardEvent) {
268267
event.preventDefault();
269268
this.yearAction = 'next';
270-
const previousValue = this.viewDate;
269+
this.previousViewDate = this.viewDate;
271270
this.viewDate = this.calendarModel.getNextYear(this.viewDate);
272-
273-
requestAnimationFrame(() => {
274-
this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
275-
});
276271
}
277272

278273
/**

0 commit comments

Comments
 (0)