Skip to content

Commit

Permalink
feat(month picker): various bug fixes and enhancements #3126
Browse files Browse the repository at this point in the history
  • Loading branch information
@SAndreeva
SAndreeva committed Feb 13, 2019
1 parent 58e24e3 commit 0d080f4
Show file tree
Hide file tree
Showing 10 changed files with 238 additions and 86 deletions.
15 changes: 8 additions & 7 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
</ng-template>

<ng-template let-result #defaultMonth>
<span tabindex="0" (keydown)="activeViewYearKB($event)" (click)="activeViewYear()" class="igx-calendar-picker__date">
<span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()" class="igx-calendar-picker__date">
{{ formattedMonth(viewDate) }}
</span>
<span tabindex="0" (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
<span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
{{ formattedYear(viewDate) }}
</span>
</ng-template>
Expand All @@ -22,14 +22,14 @@ <h2 class="igx-calendar__header-date">

<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
<div class="igx-calendar-picker">
<div tabindex="0" class="igx-calendar-picker__prev" (keydown.space)="previousMonthKB($event)" (click)="previousMonth()">
<div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)" (click)="previousMonth()">
<igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
</div>
<div>
<ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: context">
</ng-container>
</div>
<div tabindex="0" class="igx-calendar-picker__next" (keydown.space)="nextMonthKB($event)" (click)="nextMonth()">
<div tabindex="0" class="igx-calendar-picker__next" (keydown)="nextMonthKB($event)" (click)="nextMonth()">
<igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
</div>
</div>
Expand All @@ -39,11 +39,12 @@ <h2 class="igx-calendar__header-date">
[locale]="locale"
[value]="value"
[weekStart]="weekStart"
[formatOptions]="formatOptions"
[viewDate]="viewDate"
[selection]="selection"
[disabledDates]="disabledDates"
[specialDates]="specialDates"
(onViewChnaged)="viewChanged($event)"
(onViewChanged)="viewChanged($event)"
(onDateSelection)="childClicked($event)">
</igx-days-view>
</div>
Expand All @@ -52,12 +53,12 @@ <h2 class="igx-calendar__header-date">
[date]="viewDate"
[locale]="locale"
[monthFormat]="_formatOptions.month"
(onMonthSelection)="changeMonth($event)" >
(onSelection)="changeMonth($event)" >
</igx-months-view>

<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
[date]="viewDate"
[locale]="locale"
[yearFormat]="_formatOptions.year"
(onYearSelection)="changeYear($event)">
(onSelection)="changeYear($event)">
</igx-years-view>
6 changes: 3 additions & 3 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1630,7 +1630,7 @@ describe('IgxCalendar', () => {

expect(prev.nativeElement).toBe(document.activeElement);

UIInteractions.simulateKeyDownEvent(prev.nativeElement, 'Space');
UIInteractions.simulateKeyDownEvent(prev.nativeElement, 'Enter');
fixture.detectChanges();

expect(calendar.viewDate.getMonth()).toEqual(4);
Expand All @@ -1640,8 +1640,8 @@ describe('IgxCalendar', () => {

expect(next.nativeElement).toBe(document.activeElement);

UIInteractions.simulateKeyDownEvent(next.nativeElement, 'Space');
UIInteractions.simulateKeyDownEvent(next.nativeElement, 'Space');
UIInteractions.simulateKeyDownEvent(next.nativeElement, 'Enter');
UIInteractions.simulateKeyDownEvent(next.nativeElement, 'Enter');
fixture.detectChanges();

expect(calendar.viewDate.getMonth()).toEqual(6);
Expand Down
100 changes: 71 additions & 29 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import { transition, trigger, useAnimation } from '@angular/animations';
import {
Component,
ContentChild,
EventEmitter,
forwardRef,
HostBinding,
HostListener,
Input,
Output,
ViewChild,
ElementRef
} from '@angular/core';
Expand Down Expand Up @@ -111,17 +109,6 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
@Input()
public vertical = false;

/**
* Emits an event when a selection is made in the calendar.
* Provides reference the `selectedDates` property in the `IgxCalendarComponent`.
* ```html
* <igx-calendar (onSelection) = "onSelection($event)"></igx-calendar>
* ```
* @memberof IgxCalendarComponent
*/
@Output()
public onSelection = new EventEmitter<Date | Date[]>();

/**
* The default `tabindex` attribute for the component.
*
Expand Down Expand Up @@ -174,6 +161,18 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
@ViewChild('days', {read: IgxDaysViewComponent})
public daysView: IgxDaysViewComponent;

/**
* @hidden
*/
@ViewChild('monthsBtn')
public monthsBtn: ElementRef;

/**
* @hidden
*/
@ViewChild('yearsBtn')
public yearsBtn: ElementRef;

/**
* @hidden
*/
Expand Down Expand Up @@ -372,17 +371,24 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', -1);
this._monthAction = 'prev';

this.daysView.isKeydownTrigger = false;
if (this.daysView) {
this.daysView.isKeydownTrigger = false;
}
}

/**
* @hidden
*/
public previousMonthKB(event) {
event.preventDefault();
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
event.preventDefault();
event.stopPropagation();

this.previousMonth();
this.daysView.isKeydownTrigger = true;
this.previousMonth();
if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
}
}

/**
Expand All @@ -392,17 +398,24 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', 1);
this._monthAction = 'next';

this.daysView.isKeydownTrigger = false;
if (this.daysView) {
this.daysView.isKeydownTrigger = false;
}
}

/**
* @hidden
*/
public nextMonthKB(event) {
event.preventDefault();
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
event.preventDefault();
event.stopPropagation();

this.nextMonth();
this.daysView.isKeydownTrigger = true;
this.nextMonth();
if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
}
}

/**
Expand Down Expand Up @@ -462,7 +475,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
this.viewDate = new Date(event.getFullYear(), this.viewDate.getMonth());
this._activeView = CalendarView.DEFAULT;

this.elementRef.nativeElement.focus();
requestAnimationFrame(() => {
this.yearsBtn.nativeElement.focus();
});
}

/**
Expand All @@ -472,7 +487,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
this.viewDate = new Date(this.viewDate.getFullYear(), event.getMonth());
this._activeView = CalendarView.DEFAULT;

this.elementRef.nativeElement.focus();
requestAnimationFrame(() => {
this.monthsBtn.nativeElement.focus();
});
}

/**
Expand Down Expand Up @@ -515,6 +532,19 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
}
}

/**
* Deselects date(s) (based on the selection type).
*```typescript
* this.calendar.deselectDate(new Date(`2018-06-12`));
*````
*/
public deselectDate(value?: Date | Date[]) {
super.deselectDate(value);

this.daysView.selectedDates = this.selectedDates;
this._onChangeCallback(this.selectedDates);
}

/**
* @hidden
*/
Expand All @@ -523,7 +553,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
event.preventDefault();
this.previousMonth();

this.daysView.isKeydownTrigger = true;
if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
}

/**
Expand All @@ -534,7 +566,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
event.preventDefault();
this.nextMonth();

this.daysView.isKeydownTrigger = true;
if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
}

/**
Expand All @@ -545,7 +579,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
event.preventDefault();
this.previousYear();

this.daysView.isKeydownTrigger = true;
if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
}

/**
Expand All @@ -556,23 +592,29 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
event.preventDefault();
this.nextYear();

this.daysView.isKeydownTrigger = true;
if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
}

/**
* @hidden
*/
@HostListener('keydown.home', ['$event'])
public onKeydownHome(event: KeyboardEvent) {
this.daysView.onKeydownHome(event);
if (this.daysView) {
this.daysView.onKeydownHome(event);
}
}

/**
* @hidden
*/
@HostListener('keydown.end', ['$event'])
public onKeydownEnd(event: KeyboardEvent) {
this.daysView.onKeydownEnd(event);
if (this.daysView) {
this.daysView.onKeydownEnd(event);
}
}

/**
Expand Down
Loading

0 comments on commit 0d080f4

Please sign in to comment.