Scheduler: refactor Tooltip Strategies module (TS) (#33509)

Author: sjbur

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,
       _loopFocus: true,
     };

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

@@ -62,8 +62,8 @@ import {
 } from './r1/utils/index';
 import { validateRRule } from './recurrence/validate_rule';
 import { SchedulerOptionsBaseWidget } from './scheduler_options_base_widget';
-import { DesktopTooltipStrategy } from './tooltip_strategies/m_desktop_tooltip_strategy';
-import { MobileTooltipStrategy } from './tooltip_strategies/m_mobile_tooltip_strategy';
+import { DesktopTooltipStrategy } from './tooltip_strategies/desktop_tooltip_strategy';
+import { MobileTooltipStrategy } from './tooltip_strategies/mobile_tooltip_strategy';
 import type {
   AppointmentTooltipItem,
   SafeAppointment,

…strategies/m_desktop_tooltip_strategy.ts …p_strategies/desktop_tooltip_strategy.tspackages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts renamed to packages/devextreme/js/__internal/scheduler/tooltip_strategies/desktop_tooltip_strategy.ts packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts renamed to packages/devextreme/js/__internal/scheduler/tooltip_strategies/desktop_tooltip_strategy.ts

@@ -1,57 +1,65 @@
 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 { TooltipStrategyBase } from './m_tooltip_strategy_base';
+import type { AppointmentTooltipItem } from '../types';
+import { TooltipStrategyBase } from './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 },
-      _loopFocus: this.extraOptions._loopFocus,
-    });
+      // @ts-expect-error
+      _loopFocus: this.extraOptions?._loopFocus,
+    }) as Tooltip;
 
     tooltip.setAria({
       role: 'dialog',
@@ -61,11 +69,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);
   }