Scheduler — Replace underscore-prefixed: m_tooltip_strategy_base.ts, m_work_space.ts (#32962)

Author: aleksei-semikozov

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

@@ -9,11 +9,11 @@ const MAX_TOOLTIP_HEIGHT = 200;
 
 export class DesktopTooltipStrategy extends TooltipStrategyBase {
   protected override prepareBeforeVisibleChanged(dataList) {
-    this._tooltip.option('position', {
+    this.tooltip.option('position', {
       my: 'bottom',
       at: 'top',
       boundary: this.getBoundary(dataList),
-      offset: this._extraOptions.offset,
+      offset: this.extraOptions.offset,
       collision: 'fit flipfit',
     });
   }
@@ -24,9 +24,9 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase {
 
   protected override onShown() {
     super.onShown();
-    if (this._extraOptions.isButtonClick) {
-      this._list.focus();
-      this._list.option('focusedElement', null);
+    if (this.extraOptions.isButtonClick) {
+      this.list.focus();
+      this.list.option('focusedElement', null);
     }
   }
 
@@ -46,11 +46,11 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase {
     const tooltip = this._options.createComponent(tooltipElement, Tooltip, {
       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,
+      _loopFocus: this.extraOptions._loopFocus,
     });
 
     tooltip.setAria({
@@ -62,7 +62,7 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase {
   }
 
   protected override onListRender(e) {
-    return this._extraOptions.dragBehavior && this._extraOptions.dragBehavior(e);
+    return this.extraOptions.dragBehavior && this.extraOptions.dragBehavior(e);
   }
 
   protected override onListItemContextMenu(e) {

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

@@ -71,16 +71,16 @@ export class MobileTooltipStrategy extends TooltipStrategyBase {
   private setTooltipConfig(): void {
     const isTabletWidth = getWidth(getWindow()) > 700;
 
-    const listHeight = getOuterHeight(this._list.$element().find(CLASS.scrollableContent));
-    this._tooltip.option(
+    const listHeight = getOuterHeight(this.list.$element().find(CLASS.scrollableContent));
+    this.tooltip.option(
       isTabletWidth
         ? createTabletDeviceConfig(listHeight)
         : createPhoneDeviceConfig(listHeight),
     );
   }
 
-  private async _onShowing(): Promise<void> {
-    this._tooltip.option('height', MAX_HEIGHT.DEFAULT);
+  private async onShowing(): Promise<void> {
+    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
@@ -99,7 +99,7 @@ export class MobileTooltipStrategy extends TooltipStrategyBase {
       hideOnOutsideClick: true,
       animation: animationConfig,
 
-      onShowing: () => this._onShowing(),
+      onShowing: () => this.onShowing(),
       onShown: this.onShown.bind(this),
       contentTemplate: this.getContentTemplate(dataList),
       wrapperAttr: { class: CLASS.slidePanel },

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

@@ -20,40 +20,41 @@ const APPOINTMENT_TOOLTIP_TEMPLATE = 'appointmentTooltipTemplate';
 export class TooltipStrategyBase {
   protected asyncTemplatePromises = new Set<Promise<void>>();
 
-  _tooltip: any;
+  protected tooltip: any;
 
+  // TODO: make private once external usages in m_scheduler.ts are removed
   _options: any;
 
-  _extraOptions: any;
+  protected extraOptions: any;
 
-  _list: any;
+  protected list: any;
 
   constructor(options) {
-    this._tooltip = null;
+    this.tooltip = null;
     this._options = options;
-    this._extraOptions = null;
+    this.extraOptions = null;
   }
 
   show(target, dataList, extraOptions) {
     if (this.canShowTooltip(dataList)) {
       this.hide();
-      this._extraOptions = extraOptions;
+      this.extraOptions = extraOptions;
       this.showCore(target, dataList);
     }
   }
 
   private showCore(target, dataList) {
     const describedByValue = isRenderer(target) && target.attr('aria-describedby') as string;
 
-    if (!this._tooltip) {
-      this._tooltip = this.createTooltip(target, dataList);
+    if (!this.tooltip) {
+      this.tooltip = this.createTooltip(target, dataList);
     } else {
-      this.shouldUseTarget() && this._tooltip.option('target', target);
-      this._list.option('dataSource', dataList);
+      this.shouldUseTarget() && this.tooltip.option('target', target);
+      this.list.option('dataSource', dataList);
     }
 
     this.prepareBeforeVisibleChanged(dataList);
-    this._tooltip.option('visible', true);
+    this.tooltip.option('visible', true);
 
     describedByValue && target.attr('aria-describedby', describedByValue);
   }
@@ -64,7 +65,7 @@ export class TooltipStrategyBase {
   }
 
   private isDeletingAllowed(appointment) {
-    const { editing } = this._extraOptions;
+    const { editing } = this.extraOptions;
     const disabled = this._options.getAppointmentDisabled(appointment);
     const isDeletingAllowed = editing === true || editing?.allowDeleting === true;
     return !disabled && isDeletingAllowed;
@@ -74,18 +75,18 @@ export class TooltipStrategyBase {
     return (container) => {
       const listElement = $('<div>');
       $(container).append(listElement);
-      this._list = this.createList(listElement, dataList);
-      this._list.registerKeyHandler?.('escape', () => {
+      this.list = this.createList(listElement, dataList);
+      this.list.registerKeyHandler?.('escape', () => {
         this.hide();
-        this._tooltip.option('target').focus();
+        this.tooltip.option('target').focus();
       });
-      this._list.registerKeyHandler?.('del', () => {
-        const { focusedElement } = this._list.option();
+      this.list.registerKeyHandler?.('del', () => {
+        const { focusedElement } = this.list.option();
         if (!focusedElement) {
           return;
         }
 
-        const { appointment, targetedAppointment } = this._list._getItemData(focusedElement);
+        const { appointment, targetedAppointment } = this.list._getItemData(focusedElement);
         if (!appointment) {
           return;
         }
@@ -99,22 +100,22 @@ export class TooltipStrategyBase {
   }
 
   isAlreadyShown(target) {
-    if (this._tooltip && this._tooltip.option('visible')) {
-      return this._tooltip.option('target')[0] === target[0];
+    if (this.tooltip && this.tooltip.option('visible')) {
+      return this.tooltip.option('target')[0] === target[0];
     }
     return undefined;
   }
 
   protected onShown() {
-    this._list.option('focusStateEnabled', this._extraOptions.focusStateEnabled);
+    this.list.option('focusStateEnabled', this.extraOptions.focusStateEnabled);
   }
 
   dispose() {
   }
 
   hide() {
-    if (this._tooltip) {
-      this._tooltip.option('visible', false);
+    if (this.tooltip) {
+      this.tooltip.option('visible', false);
     }
   }
 
@@ -171,7 +172,7 @@ export class TooltipStrategyBase {
   }
 
   private createFunctionTemplate(template, appointmentData, targetedAppointmentData, index) {
-    const isButtonClicked = Boolean(this._extraOptions.isButtonClick);
+    const isButtonClicked = Boolean(this.extraOptions.isButtonClick);
 
     // @ts-expect-error
     return new FunctionTemplate((options) => {
@@ -196,7 +197,7 @@ export class TooltipStrategyBase {
 
   private onListItemClick(e) {
     this.hide();
-    this._extraOptions.clickEvent && this._extraOptions.clickEvent(e);
+    this.extraOptions.clickEvent && this.extraOptions.clickEvent(e);
     this._options.showAppointmentPopup(e.itemData.appointment, false, e.itemData.targetedAppointment);
   }
 

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

@@ -138,10 +138,10 @@ class SchedulerAgenda extends WorkSpace {
 
   protected override initWorkSpaceUnits() {
     this.initGroupTable();
-    this._$timePanel = $('<table>').attr('aria-hidden', true).addClass(TIME_PANEL_CLASS);
+    this.$timePanel = $('<table>').attr('aria-hidden', true).addClass(TIME_PANEL_CLASS);
     this._$dateTable = $('<table>').attr('aria-hidden', true).addClass(DATE_TABLE_CLASS);
     this._$dateTableScrollableContent = $('<div>').addClass('dx-scheduler-date-table-scrollable-content');
-    this._$dateTableContainer = $('<div>').addClass('dx-scheduler-date-table-container');
+    this.$dateTableContainer = $('<div>').addClass('dx-scheduler-date-table-container');
   }
 
   private initGroupTable() {
@@ -304,7 +304,7 @@ class SchedulerAgenda extends WorkSpace {
 
   protected override cleanView() {
     this._$dateTable.empty();
-    this._$timePanel.empty();
+    this.$timePanel.empty();
 
     if (this._$groupTable) {
       this._$groupTable.empty();
@@ -323,14 +323,14 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override createWorkSpaceStaticElements() {
-    this._$dateTableContainer.append(this._$dateTable);
+    this.$dateTableContainer.append(this._$dateTable);
     this._dateTableScrollable.$content().append(this._$dateTableScrollableContent);
 
     if (this._$groupTable) {
       this._$dateTableScrollableContent.prepend(this._$groupTable);
     }
 
-    this._$dateTableScrollableContent.append(this._$timePanel, this._$dateTableContainer);
+    this._$dateTableScrollableContent.append(this.$timePanel, this.$dateTableContainer);
     this.$element().append(this._dateTableScrollable.$element());
   }
 
@@ -430,7 +430,7 @@ class SchedulerAgenda extends WorkSpace {
 
   protected override renderTimePanel() {
     this.renderTableBody({
-      container: getPublicElement(this._$timePanel),
+      container: getPublicElement(this.$timePanel),
       rowCount: this.getTimePanelRowCount(),
       cellCount: 1,
       rowClass: TIME_PANEL_ROW_CLASS,