Scheduler: refactor Tooltip Strategies module (TS)

packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts

@@ -58,7 +58,9 @@ export class CompactAppointmentsHelper {
   private getExtraOptionsForTooltip(options: CompactAppointmentOptions, $appointmentCollector) {
     return {
       clickEvent: this.clickEvent(options.onAppointmentClick).bind(this),
-      dragBehavior: options.allowDrag && this.createTooltipDragBehavior($appointmentCollector).bind(this),
+      dragBehavior: options.allowDrag
+        ? this.createTooltipDragBehavior($appointmentCollector).bind(this)
+        : undefined,
       isButtonClick: true,
       tabFocusLoopEnabled: true,
     };

packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts

@@ -1,57 +1,64 @@
 import messageLocalization from '@js/common/core/localization/message';
+import type { dxElementWrapper } from '@js/core/renderer';
+import type { ContentReadyEvent, ItemContextMenuEvent, Properties as ListProperties } from '@js/ui/list';
 import supportUtils from '@ts/core/utils/m_support';
 import Tooltip from '@ts/ui/m_tooltip';
 
+import type { AppointmentTooltipItem } from '../types';
 import { TooltipStrategyBase } from './m_tooltip_strategy_base';
 
 const APPOINTMENT_TOOLTIP_WRAPPER_CLASS = 'dx-scheduler-appointment-tooltip-wrapper';
 const MAX_TOOLTIP_HEIGHT = 200;
 
 export class DesktopTooltipStrategy extends TooltipStrategyBase {
-  protected override prepareBeforeVisibleChanged(dataList) {
-    this.tooltip.option('position', {
+  protected override prepareBeforeVisibleChanged(dataList: AppointmentTooltipItem[]): void {
+    this.tooltip?.option('position', {
       my: 'bottom',
       at: 'top',
       boundary: this.getBoundary(dataList),
-      offset: this.extraOptions.offset,
+      offset: this.extraOptions?.offset,
       collision: 'fit flipfit',
     });
   }
 
-  private getBoundary(dataList) {
-    return this._options.isAppointmentInAllDayPanel(dataList[0].appointment) ? this._options.container : this._options.getScrollableContainer();
+  private getBoundary(dataList: AppointmentTooltipItem[]): dxElementWrapper {
+    return this._options.isAppointmentInAllDayPanel(dataList[0].appointment)
+      ? this._options.container
+      : this._options.getScrollableContainer();
   }
 
-  protected override onShown() {
+  protected override onShown(): void {
     super.onShown();
-    if (this.extraOptions.isButtonClick) {
+    if (this.extraOptions?.isButtonClick) {
       this.list.focus();
       this.list.option('focusedElement', null);
     }
   }
 
-  // @ts-expect-error
-  protected override createListOption(target, dataList) {
-    // @ts-expect-error
-    const result: any = super.createListOption(target, dataList);
+  protected override createListOption(
+    dataList: AppointmentTooltipItem[],
+  ): ListProperties<AppointmentTooltipItem> {
+    const result = super.createListOption(dataList);
     // T724287 this condition is not covered by tests, because touch variable cannot be overridden.
     // In the future, it is necessary to cover the tests
     result.showScrollbar = supportUtils.touch ? 'always' : 'onHover';
     return result;
   }
 
-  protected override createTooltip(dataList) {
+  protected override createTooltip(
+    dataList: AppointmentTooltipItem[],
+  ): Tooltip {
     const tooltipElement = this.createTooltipElement(APPOINTMENT_TOOLTIP_WRAPPER_CLASS);
 
     const tooltip = this._options.createComponent(tooltipElement, Tooltip, {
       target: this.$target,
       maxHeight: MAX_TOOLTIP_HEIGHT,
-      rtlEnabled: this.extraOptions.rtlEnabled,
+      rtlEnabled: this.extraOptions?.rtlEnabled,
       onShown: this.onShown.bind(this),
       contentTemplate: this.getContentTemplate(dataList),
       wrapperAttr: { class: APPOINTMENT_TOOLTIP_WRAPPER_CLASS },
-      tabFocusLoopEnabled: this.extraOptions.tabFocusLoopEnabled,
-    });
+      tabFocusLoopEnabled: this.extraOptions?.tabFocusLoopEnabled,
+    }) as Tooltip;
 
     tooltip.setAria({
       role: 'dialog',
@@ -61,11 +68,17 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase {
     return tooltip;
   }
 
-  protected override onListRender(e) {
-    return this.extraOptions.dragBehavior && this.extraOptions.dragBehavior(e);
+  protected override onListRender(
+    e: ContentReadyEvent<AppointmentTooltipItem>,
+  ): void {
+    if (this.extraOptions?.dragBehavior) {
+      this.extraOptions.dragBehavior(e);
+    }
   }
 
-  protected override onListItemContextMenu(e) {
+  protected override onListItemContextMenu(
+    e: ItemContextMenuEvent<AppointmentTooltipItem>,
+  ): void {
     const contextMenuEventArgs = this._options.createEventArgs(e);
     this._options.onItemContextMenu(contextMenuEventArgs);
   }

packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts

@@ -1,7 +1,10 @@
 import { getHeight, getOuterHeight, getWidth } from '@js/core/utils/size';
 import { getWindow } from '@js/core/utils/window';
+import type dxOverlay from '@js/ui/overlay';
+import type { Properties as OverlayProperties } from '@js/ui/overlay';
 import Overlay from '@js/ui/overlay/ui.overlay';
 
+import type { AppointmentTooltipItem } from '../types';
 import { TooltipStrategyBase } from './m_tooltip_strategy_base';
 
 const CLASS = {
@@ -22,7 +25,7 @@ const MAX_WIDTH = {
   TABLET: '80%',
 };
 
-const animationConfig = {
+const animationConfig: OverlayProperties['animation'] = {
   show: {
     type: 'slide',
     duration: 300,
@@ -37,7 +40,7 @@ const animationConfig = {
   },
 };
 
-const createPhoneDeviceConfig = (listHeight) => ({
+const createPhoneDeviceConfig = (listHeight: number): OverlayProperties => ({
   shading: false,
   width: MAX_WIDTH.PHONE,
   height: listHeight > MAX_HEIGHT.PHONE ? MAX_HEIGHT.PHONE : MAX_HEIGHT.DEFAULT,
@@ -48,7 +51,7 @@ const createPhoneDeviceConfig = (listHeight) => ({
   },
 });
 
-const createTabletDeviceConfig = (listHeight) => {
+const createTabletDeviceConfig = (listHeight: number): OverlayProperties => {
   const currentMaxHeight = getHeight(getWindow()) * MAX_TABLET_OVERLAY_HEIGHT_FACTOR;
 
   return {
@@ -64,23 +67,23 @@ const createTabletDeviceConfig = (listHeight) => {
 };
 
 export class MobileTooltipStrategy extends TooltipStrategyBase {
-  protected override isDesktop() {
+  protected override isDesktop(): boolean {
     return false;
   }
 
   private setTooltipConfig(): void {
     const isTabletWidth = getWidth(getWindow()) > 700;
 
     const listHeight = getOuterHeight(this.list.$element().find(CLASS.scrollableContent));
-    this.tooltip.option(
+    this.tooltip?.option(
       isTabletWidth
         ? createTabletDeviceConfig(listHeight)
         : createPhoneDeviceConfig(listHeight),
     );
   }
 
   private async onShowing(): Promise<void> {
-    this.tooltip.option('height', MAX_HEIGHT.DEFAULT);
+    this.tooltip?.option('height', MAX_HEIGHT.DEFAULT);
     /*
     NOTE: there are two setTooltipConfig calls to reduce blinking of overlay.
     The first one sets initial sizes, the second updates them after rendering async templates
@@ -91,7 +94,9 @@ export class MobileTooltipStrategy extends TooltipStrategyBase {
     this.setTooltipConfig();
   }
 
-  protected override createTooltip(dataList) {
+  protected override createTooltip(
+    dataList: AppointmentTooltipItem[],
+  ): dxOverlay<OverlayProperties> {
     const element = this.createTooltipElement(CLASS.slidePanel);
 
     return this._options.createComponent(element, Overlay, {
@@ -103,6 +108,6 @@ export class MobileTooltipStrategy extends TooltipStrategyBase {
       onShown: this.onShown.bind(this),
       contentTemplate: this.getContentTemplate(dataList),
       wrapperAttr: { class: CLASS.slidePanel },
-    });
+    }) as dxOverlay<OverlayProperties>;
   }
 }