feat: add tooltip + refactor

Author: sjbur

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_year.ts

@@ -1,15 +1,20 @@
 /* eslint-disable class-methods-use-this */
-import registerComponent from '@js/core/component_registrator';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { noop } from '@js/core/utils/common';
 import dateUtils from '@js/core/utils/date';
 import type { ViewType } from '@js/ui/scheduler';
 import { formatWeekday } from '@ts/scheduler/r1/utils/index';
 
+import type NotifyScheduler from '../base/m_widget_notify_scheduler';
+import type Scheduler from '../m_scheduler';
+import type { SafeAppointment } from '../types';
+import type { AppointmentDataAccessor } from '../utils/data_accessor/appointment_data_accessor';
 import { VIEWS } from '../utils/options/constants_view';
+import type { ResourceManager } from '../utils/resource_manager/resource_manager';
 import type { ListEntity } from '../view_model/types';
 import SchedulerWorkSpace from './m_work_space';
+import type { CellClickArgs, YearCalendarProperties } from './m_year_calendar';
 import YearCalendar from './m_year_calendar';
 
 const YEAR_CLASS = 'dx-scheduler-work-space-year';
@@ -71,6 +76,10 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
     return { left: 0, top: 0 };
   }
 
+  getScrollableContainer() {
+    return this.$element();
+  }
+
   _getViewStartByOptions(): Date {
     const currentDate = this.option('currentDate') as Date;
     const yearStart = new Date(currentDate.getFullYear(), 0, 1);
@@ -110,18 +119,24 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
     const firstDayOfWeek = this.option('firstDayOfWeek') as number;
     const hasAppointment = this._createHasAppointmentChecker();
     const getAppointmentColor = this._createGetAppointmentColor();
+    const getAppointmentsForDate = this._createGetAppointmentsForDate();
+    const showAppointmentTooltip = this._createShowAppointmentTooltip();
+    const hideAppointmentTooltip = this._createHideAppointmentTooltip();
 
     for (let month = 0; month < 12; month++) {
       const $calendarItem = $('<div>').addClass(YEAR_CALENDAR_ITEM_CLASS);
       const monthDate = new Date(currentYear, month, 1);
 
-      const calendarOptions: any = {
+      const calendarOptions: YearCalendarProperties = {
         date: monthDate,
         firstDayOfWeek,
         showMonthLabel: true,
         hasAppointment,
         getAppointmentColor,
-        onCellClick: (e: any) => {
+        getAppointmentsForDate,
+        showAppointmentTooltip,
+        hideAppointmentTooltip,
+        onCellClick: (e: CellClickArgs) => {
           this._handleYearCalendarCellClick(e);
         },
       };
@@ -136,89 +151,76 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
     this._$dateTable.appendTo(this._$workSpace);
   }
 
-  _createHasAppointmentChecker(): (date: Date) => boolean {
-    const notifyScheduler = this.option('notifyScheduler') as any;
-    const scheduler = notifyScheduler?.scheduler;
-
-    if (!scheduler) {
-      return () => false;
-    }
-
+  _getSchedulerAndDataAccessors(): {
+    scheduler: Scheduler;
+    dataAccessors: AppointmentDataAccessor;
+  } {
+    const notifyScheduler = this.option('notifyScheduler') as NotifyScheduler;
+    const { scheduler } = notifyScheduler;
     const dataAccessors = scheduler._dataAccessors;
+    return { scheduler, dataAccessors };
+  }
 
-    if (!dataAccessors) {
-      return () => false;
-    }
-
-    return (date: Date): boolean => {
-      const dataSource = scheduler.getDataSource()?.items() || [];
-
-      const dayStart = new Date(date);
-      dayStart.setHours(0, 0, 0, 0);
-      const dayStartTime = dayStart.getTime();
-      const dayEnd = new Date(date);
-      dayEnd.setHours(23, 59, 59, 999);
-      const dayEndTime = dayEnd.getTime();
-
-      return dataSource.some((appointment: any) => {
-        const startDate = dataAccessors.get('startDate', appointment);
-        const endDate = dataAccessors.get('endDate', appointment);
+  _getDayTimeRange(date: Date): { dayStartTime: number; dayEndTime: number } {
+    const dayStart = new Date(date);
+    dayStart.setHours(0, 0, 0, 0);
+    const dayStartTime = dayStart.getTime();
+    const dayEnd = new Date(date);
+    dayEnd.setHours(23, 59, 59, 999);
+    const dayEndTime = dayEnd.getTime();
+    return { dayStartTime, dayEndTime };
+  }
 
-        if (!startDate || !endDate) {
-          return false;
-        }
+  _appointmentIntersectsDay(
+    appointment: SafeAppointment,
+    dataAccessors: AppointmentDataAccessor,
+    dayStartTime: number,
+    dayEndTime: number,
+  ): boolean {
+    const startDate = dataAccessors.get('startDate', appointment);
+    const endDate = dataAccessors.get('endDate', appointment);
+
+    const start = new Date(startDate);
+    const startTime = start.getTime();
+    const end = new Date(endDate);
+    const endTime = end.getTime();
+
+    return startTime <= dayEndTime && endTime >= dayStartTime;
+  }
 
-        const start = new Date(startDate);
-        const startTime = start.getTime();
-        const end = new Date(endDate);
-        const endTime = end.getTime();
+  _createHasAppointmentChecker(): (date: Date) => boolean {
+    const { scheduler, dataAccessors } = this._getSchedulerAndDataAccessors();
 
-        return startTime <= dayEndTime && endTime >= dayStartTime;
-      });
+    return (date: Date): boolean => {
+      const dataSource = scheduler._dataSource.items() as SafeAppointment[];
+      const { dayStartTime, dayEndTime } = this._getDayTimeRange(date);
+
+      return dataSource.some((appointment: SafeAppointment) => this._appointmentIntersectsDay(
+        appointment,
+        dataAccessors,
+        dayStartTime,
+        dayEndTime,
+      ));
     };
   }
 
   _createGetAppointmentColor(): (date: Date) => Promise<string | undefined> {
-    const notifyScheduler = this.option('notifyScheduler') as any;
-    const scheduler = notifyScheduler?.scheduler;
-
-    if (!scheduler) {
-      return () => Promise.resolve(undefined);
-    }
-
-    const dataAccessors = scheduler._dataAccessors;
-    const getResourceManager = this.option('getResourceManager') as any;
-
-    if (!dataAccessors || !getResourceManager) {
-      return () => Promise.resolve(undefined);
-    }
+    const { scheduler, dataAccessors } = this._getSchedulerAndDataAccessors();
+    const getResourceManager = this.option('getResourceManager') as () => ResourceManager;
 
     return async (date: Date): Promise<string | undefined> => {
       try {
-        const dataSource = scheduler.getDataSource()?.items() || [];
-
-        const dayStart = new Date(date);
-        dayStart.setHours(0, 0, 0, 0);
-        const dayStartTime = dayStart.getTime();
-        const dayEnd = new Date(date);
-        dayEnd.setHours(23, 59, 59, 999);
-        const dayEndTime = dayEnd.getTime();
-
-        const appointment = dataSource.find((appt: any) => {
-          const startDate = dataAccessors.get('startDate', appt);
-          const endDate = dataAccessors.get('endDate', appt);
-
-          if (!startDate || !endDate) {
-            return false;
-          }
-
-          const start = new Date(startDate);
-          const startTime = start.getTime();
-          const end = new Date(endDate);
-          const endTime = end.getTime();
-
-          return startTime <= dayEndTime && endTime >= dayStartTime;
-        });
+        const dataSource = scheduler._dataSource.items() as SafeAppointment[];
+        const { dayStartTime, dayEndTime } = this._getDayTimeRange(date);
+
+        const appointment = dataSource.find(
+          (appt: SafeAppointment) => this._appointmentIntersectsDay(
+            appt,
+            dataAccessors,
+            dayStartTime,
+            dayEndTime,
+          ),
+        );
 
         if (!appointment) {
           return undefined;
@@ -238,13 +240,59 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
     };
   }
 
+  _createGetAppointmentsForDate() {
+    const { scheduler, dataAccessors } = this._getSchedulerAndDataAccessors();
+
+    return (date: Date): SafeAppointment[] => {
+      const dataSource = scheduler._dataSource.items() as SafeAppointment[];
+      const { dayStartTime, dayEndTime } = this._getDayTimeRange(date);
+
+      return dataSource.filter((appointment: SafeAppointment) => this._appointmentIntersectsDay(
+        appointment,
+        dataAccessors,
+        dayStartTime,
+        dayEndTime,
+      ));
+    };
+  }
+
+  _createShowAppointmentTooltip() {
+    const { scheduler } = this._getSchedulerAndDataAccessors();
+    const getResourceManager = this.option('getResourceManager') as () => ResourceManager;
+
+    return (appointments: SafeAppointment[], target: dxElementWrapper) => {
+      if (!appointments || appointments.length === 0) {
+        return;
+      }
+
+      const resourceManager = getResourceManager();
+      const tooltipItems = appointments.map((appointment) => ({
+        appointment,
+        targetedAppointment: undefined,
+        color: resourceManager.getAppointmentColor({
+          itemData: appointment,
+          groupIndex: 0,
+        }),
+      }));
+
+      scheduler.showAppointmentTooltipCore(target, tooltipItems);
+    };
+  }
+
+  _createHideAppointmentTooltip() {
+    const { scheduler } = this._getSchedulerAndDataAccessors();
+
+    return (): void => {
+      scheduler.hideAppointmentTooltip();
+    };
+  }
+
   _createCellClickAction(): void {
     this._cellClickAction = this._createActionByOption('onCellClick', {
       afterExecute: (actionArgs: any) => {
         const args = actionArgs.args[0];
         if (!args.cancel) {
-          const notifyScheduler = this.option('notifyScheduler') as any;
-          const scheduler = notifyScheduler?.scheduler;
+          const { scheduler } = this._getSchedulerAndDataAccessors();
           if (scheduler && scheduler.showAddAppointmentPopup) {
             scheduler.showAddAppointmentPopup(args.cellData, args.cellData.groups || {});
           }
@@ -253,9 +301,8 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
     });
   }
 
-  _handleYearCalendarCellClick(e: any): void {
-    const notifyScheduler = this.option('notifyScheduler') as any;
-    const scheduler = notifyScheduler?.scheduler;
+  _handleYearCalendarCellClick(e: CellClickArgs): void {
+    const { scheduler } = this._getSchedulerAndDataAccessors();
 
     const args = {
       cancel: false,
@@ -306,7 +353,7 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
     this._renderView();
   }
 
-  _optionChanged(args: any): void {
+  _optionChanged(args: Record<string, unknown>): void {
     const { name } = args;
 
     if (name === 'currentDate' || name === 'firstDayOfWeek') {
@@ -335,6 +382,4 @@ class SchedulerWorkSpaceYear extends SchedulerWorkSpace {
   }
 }
 
-registerComponent('dxSchedulerWorkSpaceYear', SchedulerWorkSpaceYear as any);
-
 export default SchedulerWorkSpaceYear;