fix(tooltip): allow tooltip text to be updated while shown

Fixes #1002
mattlewis92 · Jun 7, 2019 · c079805 · c079805
1 parent 4d1026c
commit c079805
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts b/projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts
@@ -12,7 +12,9 @@ import {
   ComponentFactory,
   Inject,
   Renderer2,
-  TemplateRef
+  TemplateRef,
+  OnChanges,
+  SimpleChanges
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { PlacementArray, positionElements } from 'positioning';
@@ -58,7 +60,7 @@ export class CalendarTooltipWindowComponent {
 @Directive({
   selector: '[mwlCalendarTooltip]'
 })
-export class CalendarTooltipDirective implements OnDestroy {
+export class CalendarTooltipDirective implements OnDestroy, OnChanges {
   @Input('mwlCalendarTooltip') contents: string; // tslint:disable-line no-input-rename
 
   @Input('tooltipPlacement') placement: PlacementArray = 'auto'; // tslint:disable-line no-input-rename
@@ -88,6 +90,18 @@ export class CalendarTooltipDirective implements OnDestroy {
     );
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      this.tooltipRef &&
+      (changes.contents || changes.customTemplate || changes.event)
+    ) {
+      this.tooltipRef.instance.contents = this.contents;
+      this.tooltipRef.instance.customTemplate = this.customTemplate;
+      this.tooltipRef.instance.event = this.event;
+      this.tooltipRef.changeDetectorRef.markForCheck();
+    }
+  }
+
   ngOnDestroy(): void {
     this.hide();
   }

diff --git a/projects/angular-calendar/test/calendar-month-view.component.spec.ts b/projects/angular-calendar/test/calendar-month-view.component.spec.ts
@@ -1012,4 +1012,38 @@ describe('calendarMonthView component', () => {
     );
     document.head.removeChild(style);
   });
+
+  it('should allow the tooltip text to be updated dynamically', fakeAsync(() => {
+    const fixture: ComponentFixture<
+      CalendarMonthViewComponent
+    > = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [
+      {
+        start: new Date('2016-05-30'),
+        end: new Date('2016-06-02'),
+        title: 'foo'
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+    const event: HTMLElement = fixture.nativeElement.querySelector(
+      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'
+    );
+    triggerDomEvent('mouseenter', event);
+    fixture.detectChanges();
+    flush();
+    const tooltip = document.body.querySelector('.cal-tooltip');
+    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(
+      'foo'
+    );
+    fixture.componentInstance.events[0].title = 'bar';
+    fixture.detectChanges();
+    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(
+      'bar'
+    );
+    triggerDomEvent('mouseleave', event);
+    fixture.detectChanges();
+    fixture.destroy();
+  }));
 });