feat(datepicker): add tooltip module to datepicker module, use it as …

…a tooltip
valor-software · Aug 6, 2020 · 620081d · 620081d
1 parent 81f352b
commit 620081d
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 20 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -310,14 +310,6 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>You can manage datepicker's options by using its <code>setConfig()</code> method</p>`,
         outlet: DemoDatepickerConfigMethodComponent
       },
-      {
-        title: 'Tooltip for selected dates',
-        anchor: 'tooltip-for-selected-dates',
-        component: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts'),
-        html: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html'),
-        description: ``,
-        outlet: DemoDatePickerTooltipToSelectedDates
-      },
       {
         title: 'Visibility Events',
         anchor: 'visibility-events',
@@ -401,6 +393,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Style dates with custom classes</p>`,
         outlet: DemoDatepickerDateCustomClassesComponent
       },
+      {
+        title: 'Tooltip for selected dates',
+        anchor: 'tooltip-for-selected-dates',
+        component: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts'),
+        html: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html'),
+        description: ``,
+        outlet: DemoDatePickerTooltipToSelectedDates
+      },
       {
         title: 'Quick select ranges',
         anchor: 'quick-select-ranges',

diff --git a/...c/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts b/...c/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts
@@ -6,8 +6,8 @@ import { DatepickerDateTooltipText } from 'ngx-bootstrap/datepicker';
   templateUrl: './tooltip-to-selected-dates.html'
 })
 export class DemoDatePickerTooltipToSelectedDates {
-  selectedDates : DatepickerDateTooltipText[] = [{ date: new Date('2020-03-03'), tooltipText: '3rd of March'},
-    { date: new Date('2020-03-04'), tooltipText: '4th of March'},
-    { date: new Date('2020-03-05'), tooltipText: '5th of March'}
+  selectedDates : DatepickerDateTooltipText[] = [{ date: new Date('2020-08-08'), tooltipText: '8th of August'},
+    { date: new Date('2020-08-09'), tooltipText: '9th of August'},
+    { date: new Date('2020-08-07'), tooltipText: '7th of August'}
   ]
 }
diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
@@ -1,3 +1,4 @@
+// tslint:disable:max-file-line-count
 import {
   ComponentRef, Directive, ElementRef, EventEmitter, Input, OnChanges,
   OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewContainerRef, AfterViewInit

diff --git a/src/datepicker/bs-datepicker.module.ts b/src/datepicker/bs-datepicker.module.ts
@@ -3,6 +3,8 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { PositioningService } from 'ngx-bootstrap/positioning';
 
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+
 import { BsDatepickerInputDirective } from './bs-datepicker-input.directive';
 import { BsDatepickerDirective } from './bs-datepicker.component';
 import { BsDatepickerConfig } from './bs-datepicker.config';
@@ -37,7 +39,7 @@ import { BsTimepickerViewComponent } from './themes/bs/bs-timepicker-view.compon
 import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view.component';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, TooltipModule.forRoot()],
   declarations: [
     BsCalendarLayoutComponent,
     BsCurrentDateViewComponent,

diff --git a/src/datepicker/engine/flag-days.calendar.spec.ts b/src/datepicker/engine/flag-days.calendar.spec.ts
@@ -35,6 +35,7 @@ describe('flag-days-calendar:', () => {
       selectedRange: [],
       displayMonths: 1,
       monthIndex: 1,
+      dateTooltipTexts: [{date: new Date('2019-03-08'), tooltipText: 'test'}],
       dateCustomClasses: []
     });
 
@@ -76,6 +77,7 @@ describe('flag-days-calendar:', () => {
       selectedRange: [],
       displayMonths: 1,
       monthIndex: 1,
+      dateTooltipTexts: [{date: new Date('2019-03-08'), tooltipText: 'test'}],
       dateCustomClasses: []
     });
 

diff --git a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts
@@ -46,9 +46,5 @@ export class BsDatepickerDayDecoratorComponent implements OnInit {
           this._renderer.addClass(this._elRef.nativeElement, className);
         });
     }
-
-    if (typeof this.day.tooltipText === 'string' && this.day.tooltipText.length > 0) {
-      this._renderer.setAttribute(this._elRef.nativeElement, 'tooltip', this.day.tooltipText);
-    }
   }
 }
diff --git a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts
@@ -5,11 +5,13 @@ import {
   Output
 } from '@angular/core';
 
+import { isSameDay } from 'ngx-bootstrap/chronos';
+
 import {
   BsDatepickerViewMode,
   BsNavigationDirection,
   BsNavigationEvent,
-  CellHoverEvent,
+  CellHoverEvent, DatepickerDateTooltipText,
   DatepickerRenderOptions,
   DaysCalendarViewModel,
   DayViewModel, WeekViewModel
@@ -49,14 +51,25 @@ import { BsDatepickerConfig } from '../../bs-datepicker.config';
                 (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }}</span>
           </td>
           <td *ngFor="let day of week.days" role="gridcell">
-          <span *ngIf="!isiOS" bsDatepickerDayDecorator
+
+            <!-- When we want to show tooltips for dates -->
+            <span *ngIf="!isiOS && isShowTooltip" bsDatepickerDayDecorator
                 [day]="day"
                 (click)="selectDay(day)"
+                tooltip="{{day.tooltipText}}"
                 (mouseenter)="hoverDay(day, true)"
-                (mouseleave)="hoverDay(day, false)">{{ day.label }}</span>
+                (mouseleave)="hoverDay(day, false)">{{ day.label }} 3</span>
+            <!-- When tooltips for dates are disabled -->
+            <span *ngIf="!isiOS && !isShowTooltip" bsDatepickerDayDecorator
+                  [day]="day"
+                  (click)="selectDay(day)"
+                  (mouseenter)="hoverDay(day, true)"
+                  (mouseleave)="hoverDay(day, false)">{{ day.label }} 2</span>
+
+            <!-- For mobile iOS view, tooltips are not needed -->
             <span *ngIf="isiOS" bsDatepickerDayDecorator
                   [day]="day"
-                  (click)="selectDay(day)">{{ day.label }}</span>
+                  (click)="selectDay(day)">{{ day.label }} 1</span>
           </td>
         </tr>
         </tbody>
@@ -78,9 +91,13 @@ export class BsDaysCalendarViewComponent  {
 
   isWeekHovered: boolean;
   isiOS: boolean;
+  isShowTooltip: boolean;
 
   constructor(private _config: BsDatepickerConfig) {
     this.isiOS = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (this._config.dateTooltipTexts && this._config.dateTooltipTexts.length > 0) {
+      this.isShowTooltip = true;
+    }
   }
 
   navigateTo(event: BsNavigationDirection): void {
@@ -157,6 +174,18 @@ export class BsDaysCalendarViewComponent  {
       cell.isOtherMonthHovered = isHovered;
     }
 
+    if (this._config.dateTooltipTexts) {
+      cell.tooltipText = '';
+      this._config.dateTooltipTexts.forEach((dateData: DatepickerDateTooltipText) => {
+
+        if (isSameDay(dateData.date, cell.date)) {
+          cell.tooltipText = dateData.tooltipText;
+
+          return;
+        }
+      });
+    }
+
     this.onHover.emit({ cell, isHovered });
   }
 }