feat(month picker): clean up and circular dependencies fix #3126

IgniteUI · Feb 20, 2019 · 30c5c61 · 30c5c61
1 parent b206098
commit 30c5c61
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 73 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -15,10 +15,12 @@ import {
     IgxCalendarHeaderTemplateDirective,
     IgxCalendarSubheaderTemplateDirective
 } from './calendar.directives';
-import { IgxMonthsViewComponent } from './months-view/months-view.component';
 import { KEYS } from '../core/utils';
 import { ICalendarDate, monthRange } from './calendar';
 import { CalendarView, IgxMonthPickerBase } from './month-picker-base';
+import { IgxMonthsViewComponent } from './months-view/months-view.component';
+import { IgxYearsViewComponent } from './years-view/years-view.component';
+import { IgxDaysViewComponent } from './days-view/days-view.component';
 
 let NEXT_ID = 0;
 
@@ -142,6 +144,18 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
     @ViewChild('monthsBtn')
     public monthsBtn: ElementRef;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('decade', { read: IgxYearsViewComponent })
+    public dacadeView: IgxYearsViewComponent;
+
+    /**
+     * @hidden
+     */
+    @ViewChild('days', {read: IgxDaysViewComponent})
+    public daysView: IgxDaysViewComponent;
+
     /**
      * @hidden
      */
@@ -320,6 +334,29 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
         }
     }
 
+    /**
+     * @hidden
+     */
+    public activeViewDecade() {
+        super.activeViewDecade();
+
+        requestAnimationFrame(() => {
+            this.dacadeView.el.nativeElement.focus();
+        });
+    }
+
+
+    /**
+     * @hidden
+     */
+    public activeViewDecadeKB(event) {
+        super.activeViewDecadeKB(event);
+
+        requestAnimationFrame(() => {
+            this.dacadeView.el.nativeElement.focus();
+        });
+    }
+
     /**
      * @hidden
      */
@@ -474,10 +511,14 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
      */
     @HostListener('keydown.shift.pageup', ['$event'])
     public onKeydownShiftPageUp(event: KeyboardEvent) {
-        this.keydownPageUpHandler(event);
+        event.preventDefault();
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);
+
+        this.daysView.animationAction = 'prev';
+        this.daysView.isKeydownTrigger = true;
 
         const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
-        if (activeDate && this.daysView) {
+        if (activeDate) {
             this.daysView.nextDate = new Date(activeDate.date.date);
 
             const year = this.daysView.nextDate.getFullYear() - 1;
@@ -502,10 +543,14 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
      */
     @HostListener('keydown.shift.pagedown', ['$event'])
     public onKeydownShiftPageDown(event: KeyboardEvent) {
-        this.keydownPageDownHandler(event);
+        event.preventDefault();
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);
+
+        this.daysView.animationAction = 'next';
+        this.daysView.isKeydownTrigger = true;
 
         const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
-        if (activeDate && this.daysView) {
+        if (activeDate) {
             this.daysView.nextDate = new Date(activeDate.date.date);
 
             const year = this.daysView.nextDate.getFullYear() + 1;

diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts b/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts
@@ -1,7 +1,5 @@
 import { IgxCalendarBase } from './calendar-base';
 import { ViewChild, ElementRef, Input, HostBinding } from '@angular/core';
-import { IgxYearsViewComponent } from './years-view/years-view.component';
-import { IgxDaysViewComponent } from './days-view/days-view.component';
 import { IFormattingViews } from './calendar';
 import { KEYS } from '../core/utils';
 
@@ -38,18 +36,6 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
     @ViewChild('yearsBtn')
     public yearsBtn: ElementRef;
 
-    /**
-     * @hidden
-     */
-    @ViewChild('days', {read: IgxDaysViewComponent})
-    public daysView: IgxDaysViewComponent;
-
-    /**
-     * @hidden
-     */
-    @ViewChild('decade', { read: IgxYearsViewComponent })
-    public dacadeView: IgxYearsViewComponent;
-
     /**
      * The default `tabindex` attribute for the component.
      *
@@ -117,9 +103,6 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
      */
     public activeViewDecade(): void {
         this._activeView = CalendarView.DECADE;
-        requestAnimationFrame(() => {
-            this.dacadeView.el.nativeElement.focus();
-        });
     }
 
     /**
@@ -132,30 +115,6 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
         }
     }
 
-    /**
-     * @hidden
-     */
-    public previousYear(isKeydownTrigger = false) {
-        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);
-
-        if (this.daysView) {
-            this.daysView.animationAction = 'prev';
-            this.daysView.isKeydownTrigger = isKeydownTrigger;
-        }
-    }
-
-    /**
-     * @hidden
-     */
-    public nextYear(isKeydownTrigger = false) {
-        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);
-
-        if (this.daysView) {
-            this.daysView.animationAction = 'next';
-            this.daysView.isKeydownTrigger = isKeydownTrigger;
-        }
-    }
-
     /**
      * Returns the locale representation of the year in the year view if enabled,
      * otherwise returns the default `Date.getFullYear()` value.
@@ -168,20 +127,4 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
         }
         return `${value.getFullYear()}`;
     }
-
-    /**
-     * @hidden
-     */
-    public keydownPageUpHandler(event: KeyboardEvent) {
-        event.preventDefault();
-        this.previousYear(true);
-    }
-
-    /**
-     * @hidden
-     */
-    public keydownPageDownHandler(event: KeyboardEvent) {
-        event.preventDefault();
-        this.nextYear(true);
-    }
 }
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
@@ -11,6 +11,8 @@ import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from '../../animatio
 import { KEYS } from '../../core/utils';
 import { IgxMonthsViewComponent } from '../months-view/months-view.component';
 import { IgxMonthPickerBase, CalendarView } from '../month-picker-base';
+import { IgxYearsViewComponent } from '../years-view/years-view.component';
+import { IgxDaysViewComponent } from '../days-view/days-view.component';
 
 let NEXT_ID = 0;
 @Component({
@@ -70,6 +72,18 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
     @ViewChild('months', {read: IgxMonthsViewComponent})
     public monthsView: IgxMonthsViewComponent;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('decade', { read: IgxYearsViewComponent })
+    public dacadeView: IgxYearsViewComponent;
+
+    /**
+     * @hidden
+     */
+    @ViewChild('days', {read: IgxDaysViewComponent})
+    public daysView: IgxDaysViewComponent;
+
     /**
      * @hidden
      */
@@ -90,21 +104,36 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
 
         if (event.key === KEYS.RIGHT_ARROW || event.key === KEYS.RIGHT_ARROW_IE) {
             event.preventDefault();
-            this.nextYear(true);
+            this.nextYear();
         }
 
         if (event.key === KEYS.LEFT_ARROW || event.key === KEYS.LEFT_ARROW_IE) {
             event.preventDefault();
-            this.previousYear(true);
+            this.previousYear();
         }
+
+        requestAnimationFrame(() => {
+            this.dacadeView.el.nativeElement.focus();
+        });
     }
 
     /**
      * @hidden
      */
-    public nextYear(kbTrigger = false) {
+    public activeViewDecade() {
+        super.activeViewDecade();
+
+        requestAnimationFrame(() => {
+            this.dacadeView.el.nativeElement.focus();
+        });
+    }
+
+    /**
+     * @hidden
+     */
+    public nextYear() {
         this.yearAction = 'next';
-        super.nextYear(kbTrigger);
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);
 
         this._onChangeCallback(this.viewDate);
         this.onSelection.emit(this.viewDate);
@@ -118,16 +147,16 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
             event.preventDefault();
             event.stopPropagation();
 
-            this.nextYear(true);
+            this.nextYear();
         }
     }
 
     /**
      * @hidden
      */
-    public previousYear(kbTrigger = false) {
+    public previousYear() {
         this.yearAction = 'prev';
-        super.previousYear(kbTrigger);
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);
 
         this._onChangeCallback(this.viewDate);
         this.onSelection.emit(this.viewDate);
@@ -141,7 +170,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
             event.preventDefault();
             event.stopPropagation();
 
-            this.previousYear(true);
+            this.previousYear();
         }
     }
 
@@ -202,15 +231,19 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
      */
     @HostListener('keydown.pageup', ['$event'])
     public onKeydownPageUp(event: KeyboardEvent) {
-        this.keydownPageUpHandler(event);
+        event.preventDefault();
+        this.yearAction = 'prev';
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);
     }
 
     /**
      * @hidden
      */
     @HostListener('keydown.pagedown', ['$event'])
     public onKeydownPageDown(event: KeyboardEvent) {
-        this.keydownPageDownHandler(event);
+        event.preventDefault();
+        this.yearAction = 'next';
+        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, Output, EventEmitter, Input, HostBinding, HostListener, ElementRef, Injectable} from '@angular/core';
-import { range, Calendar } from '../../calendar';
+import { range, Calendar } from '../calendar';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';