From 30c5c61e51e666506c30dc33fe0fa087f0ed38f7 Mon Sep 17 00:00:00 2001 From: Stefana Andreeva Date: Wed, 20 Feb 2019 18:31:26 +0200 Subject: [PATCH] feat(month picker): clean up and circular dependencies fix #3126 --- .../src/lib/calendar/calendar.component.ts | 55 ++++++++++++++++-- .../src/lib/calendar/month-picker-base.ts | 57 ------------------- .../month-picker/month-picker.component.ts | 53 +++++++++++++---- .../years-view/years-view.component.ts | 2 +- 4 files changed, 94 insertions(+), 73 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index 36868511249..69b18531dc8 100644 --- 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 index bb8fbc50d20..884aabe3b95 100644 --- 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 index f6adba9b966..2866a717d3e 100644 --- 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,7 +231,9 @@ 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); } /** @@ -210,7 +241,9 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase { */ @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 index 6558d2b8d5d..f3d93d6d20b 100644 --- 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';