feat(calendar): emit event from animationDon #7039

IgniteUI · Jul 9, 2020 · 8dce09f · 8dce09f
1 parent 1527573
commit 8dce09f
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 56 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -22,7 +22,7 @@ <h2 class="igx-calendar__header-date">
     </h2>
 </div>
 
-<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()"
+<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" (swiperight)="previousMonth()"
     (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
@@ -63,15 +63,15 @@ <h2 class="igx-calendar__header-date">
     </div>
 </div>
 
-<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
+<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months (@animateView.done)="viewRendered($event)"
                  [date]="viewDate"
                  [locale]="locale"
                  [formatView]="formatViews.month"
                  [monthFormat]="formatOptions.month"
                  (onSelection)="changeMonth($event)">
 </igx-months-view>
 
-<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade (@animateView.done)="viewRendered($event)"
                 [date]="viewDate"
                 [locale]="locale"
                 [formatView]="formatViews.year"

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -466,13 +466,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public previousMonth(isKeydownTrigger = false) {
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
         this.animationAction = ScrollMonth.PREV;
         this.isKeydownTrigger = isKeydownTrigger;
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-        });
     }
 
     /**
@@ -482,13 +479,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public nextMonth(isKeydownTrigger = false) {
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
         this.animationAction = ScrollMonth.NEXT;
         this.isKeydownTrigger = isKeydownTrigger;
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-        });
     }
 
     /**
@@ -617,9 +611,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
             if (day) {
                 this.daysView.daysNavService.focusNextDate(day.nativeElement, args.key, true);
             }
-            this.onViewDateChanged.emit({previousValue, currentValue: this.viewDate});
         };
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.nextDate;
     }
 
@@ -628,15 +621,13 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @intenal
      */
     public changeMonth(event: Date) {
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getFirstViewDate(event, 'month', this.activeViewIdx);
         this.activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {
             const elem = this.monthsBtns.find((e: ElementRef, idx: number) => idx === this.activeViewIdx);
             if (elem) { elem.nativeElement.focus(); }
-            this.onViewDateChanged.emit({previousValue, currentValue: this.viewDate});
-            this.onActiveViewChanged.emit(this.activeView);
         });
     }
 
@@ -650,7 +641,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         requestAnimationFrame(() => {
             this.monthsView.date = args;
             this.focusMonth(event.target);
-            this.onActiveViewChanged.emit(this.activeView);
         });
     }
 
@@ -725,6 +715,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public animationDone(event) {
+        if ((event.fromState === ScrollMonth.NONE && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT)) ||
+             (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
+            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+        }
+
         if (this.monthScrollDirection !== ScrollMonth.NONE) {
             this.scrollMonth$.next();
         }
@@ -750,6 +745,16 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this.animationAction = ScrollMonth.NONE;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public viewRendered(event) {
+        if (event.fromState !== 'void') {
+            this.onActiveViewChanged.emit(this.activeView);
+        }
+    }
+
     /**
      * Keyboard navigation of the calendar
      * @hidden
@@ -827,7 +832,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
 
         const isPageDown = event.key === 'PageDown';
         const step = isPageDown ? 1 : -1;
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', step);
 
         this.animationAction = isPageDown ? ScrollMonth.NEXT : ScrollMonth.PREV;
@@ -864,10 +869,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
                 if (dayItem && dayItem.isFocusable) { dayItem.nativeElement.focus(); }
             };
         }
-
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({previousValue, currentValue: this.viewDate});
-        });
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts b/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts
@@ -35,6 +35,11 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
     @ViewChildren('yearsBtn')
     public yearsBtns: QueryList<ElementRef>;
 
+    /**
+     * @hidden @internal
+     */
+    public previousViewDate: Date;
+
 
     @Input()
     /**
@@ -83,16 +88,14 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
      * @hidden
      */
     public changeYear(event: Date) {
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getFirstViewDate(event, 'month', this.activeViewIdx);
         this.activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {
             if (this.yearsBtns && this.yearsBtns.length) {
                 this.yearsBtns.find((e: ElementRef, idx: number) => idx === this.activeViewIdx).nativeElement.focus();
             }
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-            this.onActiveViewChanged.emit(this.activeView);
         });
     }
 
@@ -102,9 +105,6 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
     public activeViewDecade(activeViewIdx = 0): void {
         this.activeView = CalendarView.DECADE;
         this.activeViewIdx = activeViewIdx;
-        requestAnimationFrame(() => {
-            this.onActiveViewChanged.emit(this.activeView);
-        });
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isDefaultView" [@animateView]="activeView" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
+<div *ngIf="isDefaultView" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="previousYearKB($event)" [ngStyle]="{
             'min-width.%': 25,
@@ -20,15 +20,16 @@
     </div>
 
     <igx-months-view [@animateChange]="yearAction" #months
-                     (@animateChange.done)="animationDone()"
+                     (@animateChange.done)="animationDone($event)"
+                     (@animateView.done)="viewRendered($event)"
                      [date]="viewDate"
                      [locale]="locale"
                      [formatView]="formatViews.month"
                      [monthFormat]="formatOptions.month"
                      (onSelection)="selectMonth($event)">
     </igx-months-view>
 </div>
-<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade (@animateView.done)="viewRendered($event)"
                 [date]="viewDate"
                 [locale]="locale"
                 [formatView]="formatViews.year"

diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
@@ -14,6 +14,7 @@ import { IgxMonthsViewComponent } from '../months-view/months-view.component';
 import { IgxMonthPickerBaseDirective, CalendarView } from '../month-picker-base';
 import { IgxYearsViewComponent } from '../years-view/years-view.component';
 import { IgxDaysViewComponent } from '../days-view/days-view.component';
+import { ScrollMonth } from '../calendar-base';
 
 let NEXT_ID = 0;
 @Component({
@@ -99,10 +100,23 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     /**
      * @hidden
      */
-    public animationDone() {
+    public animationDone(event) {
+        if ((event.fromState === 'void' && event.toState === '') ||
+        (event.fromState === '' && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT))) {
+            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+        }
         this.yearAction = '';
     }
 
+    /**
+     * @hidden
+     */
+    public viewRendered(event) {
+        if (event.fromState !== 'void') {
+            this.onActiveViewChanged.emit(this.activeView);
+        }
+    }
+
     /**
      * @hidden
      */
@@ -121,7 +135,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
 
         requestAnimationFrame(() => {
             if (this.dacadeView) { this.dacadeView.el.nativeElement.focus(); }
-            this.onActiveViewChanged.emit(this.activeView);
         });
     }
 
@@ -141,15 +154,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      */
     public nextYear() {
         this.yearAction = 'next';
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextYear(this.viewDate);
 
         this.selectDate(this.viewDate);
         this.onSelection.emit(this.selectedDates);
-
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-        });
     }
 
     /**
@@ -169,15 +178,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      */
     public previousYear() {
         this.yearAction = 'prev';
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
 
         this.selectDate(this.viewDate);
         this.onSelection.emit(this.selectedDates);
-
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-        });
     }
 
     /**
@@ -196,7 +201,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      * @hidden
      */
     public selectYear(event: Date) {
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
         this.activeView = CalendarView.DEFAULT;
 
@@ -205,8 +210,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
 
         requestAnimationFrame(() => {
             if (this.yearsBtn) { this.yearsBtn.nativeElement.focus(); }
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-            this.onActiveViewChanged.emit(this.activeView);
         });
     }
 
@@ -252,12 +255,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     public onKeydownPageUp(event: KeyboardEvent) {
         event.preventDefault();
         this.yearAction = 'prev';
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
-
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-        });
     }
 
     /**
@@ -267,12 +266,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     public onKeydownPageDown(event: KeyboardEvent) {
         event.preventDefault();
         this.yearAction = 'next';
-        const previousValue = this.viewDate;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextYear(this.viewDate);
-
-        requestAnimationFrame(() => {
-            this.onViewDateChanged.emit({ previousValue, currentValue: this.viewDate });
-        });
     }
 
     /**