feat(month picker): bug fixing #3126

IgniteUI · Feb 7, 2019 · 608ab7c · 608ab7c
1 parent b5d3199
commit 608ab7c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 42 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -9,9 +9,7 @@ import {
     Input,
     Output,
     ViewChild,
-    ElementRef,
-    AfterViewInit,
-    OnDestroy
+    ElementRef
 } from '@angular/core';
 import { fadeIn, scaleInCenter } from '../animations/main';
 import {
@@ -23,9 +21,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IgxYearsViewComponent } from './years-view/years-view.component';
 import { IgxMonthsViewComponent } from './months-view/months-view.component';
 import { KEYS } from '../core/utils';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { ICalendarDate } from './calendar';
+import { ICalendarDate, IGX_CALENDAR_COMPONENT } from './calendar';
 
 let NEXT_ID = 0;
 
@@ -47,6 +43,10 @@ let NEXT_ID = 0;
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: IgxCalendarComponent
+        },
+        {
+            provide: IGX_CALENDAR_COMPONENT,
+            useExisting: IgxCalendarComponent
         }
     ],
     animations: [
@@ -63,7 +63,7 @@ let NEXT_ID = 0;
     selector: 'igx-calendar',
     templateUrl: 'calendar.component.html'
 })
-export class IgxCalendarComponent extends IgxDaysViewComponent implements AfterViewInit, OnDestroy {
+export class IgxCalendarComponent extends IgxDaysViewComponent {
     /**
      * Sets/gets the `id` of the calendar.
      * If not set, the `id` will have value `"igx-calendar-0"`.
@@ -323,33 +323,12 @@ export class IgxCalendarComponent extends IgxDaysViewComponent implements AfterV
         month: true,
         year: false
     };
-    /**
-     *@hidden
-     */
-    private destroy$ = new Subject<boolean>();
 
     /**
      *@hidden
      */
     constructor(public elementRef: ElementRef) {
-        super();
-    }
-
-    /**
-     *@hidden
-     */
-    public ngAfterViewInit() {
-        this.daysView.onViewChanged.pipe(takeUntil(this.destroy$)).subscribe((event) => {
-            this.viewDate = this.calendarModel.timedelta(event, 'month', 0);
-        });
-    }
-
-    /**
-     *@hidden
-     */
-    public ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.complete();
+        super(null);
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.ts b/projects/igniteui-angular/src/lib/calendar/calendar.ts
@@ -332,3 +332,10 @@ export class Calendar {
         return date.getFullYear() > year;
     }
 }
+
+
+export const IGX_CALENDAR_COMPONENT = 'IgxCalendarComponentToken';
+
+export interface IgxCalendarBase {
+    viewDate: Date;
+}
diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts
@@ -8,9 +8,11 @@ import {
     QueryList,
     HostBinding,
     forwardRef,
-    DoCheck
+    DoCheck,
+    Inject,
+    Optional
 } from '@angular/core';
-import { ICalendarDate, Calendar, WEEKDAYS, isDateInRanges } from '../../calendar';
+import { ICalendarDate, Calendar, WEEKDAYS, isDateInRanges, IGX_CALENDAR_COMPONENT, IgxCalendarBase } from '../../calendar';
 import { trigger, transition, useAnimation } from '@angular/animations';
 import { slideInLeft, slideInRight } from '../../animations/main';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@@ -312,12 +314,6 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @Output()
     public onDateSelection = new EventEmitter<ICalendarDate>();
 
-    /**
-     *@hidden
-     */
-    @Output()
-    public onViewChanged = new EventEmitter<any>();
-
     /**
      * @hidden
      */
@@ -434,7 +430,7 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     /**
      * @hidden
      */
-    constructor() {
+    constructor(@Optional() @Inject(IGX_CALENDAR_COMPONENT) public calendar: IgxCalendarBase) {
         this.calendarModel = new Calendar();
 
         this.calendarModel.firstWeekDay = this.weekStart;
@@ -654,7 +650,9 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
 
             this.animationAction = 'prev';
             this.isKeydownTrigger = true;
-            this.onViewChanged.emit(this._nextDate);
+            if (this.calendar) {
+                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
+            }
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
@@ -689,7 +687,9 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
 
             this.animationAction = 'next';
             this.isKeydownTrigger = true;
-            this.onViewChanged.emit(this._nextDate);
+            if (this.calendar) {
+                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
+            }
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
@@ -722,7 +722,9 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
 
             this.animationAction = 'prev';
             this.isKeydownTrigger = true;
-            this.onViewChanged.emit(this._nextDate);
+            if (this.calendar) {
+                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
+            }
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
@@ -756,7 +758,9 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
 
             this.animationAction = 'next';
             this.isKeydownTrigger = true;
-            this.onViewChanged.emit(this._nextDate);
+            if (this.calendar) {
+                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
+            }
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;