Scheduler: remove usage of non-public methods from m_work_space.ts (DevExpress#33519)

Author: sjbur

packages/devextreme/eslint-scheduler-allowlist.mjs

@@ -66,23 +66,6 @@ const schedulerR1Overrides = [
 ];
 
 const schedulerLegacyMembers = [
-    // workspaces/m_work_space.ts
-    '_$allDayPanel',
-    '_$dateTable',
-    '_$dateTableScrollableContent',
-    '_$flexContainer',
-    '_$groupTable',
-    '_$headerPanel',
-    '_$headerPanelContainer',
-    '_$thead',
-    '_dateTableScrollable',
-    '_getCellCount',
-    '_getGroupCount',
-    '_groupedStrategy',
-    '_isHorizontalGroupedWorkSpace',
-    '_shader',
-    '_sidebarScrollable',
-
     // m_scheduler.ts
     '_appointments',
     '_compactAppointmentsHelper',

packages/devextreme/js/__internal/scheduler/__tests__/workspace.base.test.ts

@@ -215,7 +215,7 @@ describe('scheduler workspace skipped days support', () => {
     });
 
     expect(workspace.getStartViewDate()).toEqual(new Date(2026, 2, 29));
-    expect((workspace as any)._getCellCount()).toBe(7);
+    expect((workspace as any).getCellCount()).toBe(7);
   });
 
   it('should use custom skippedDays in work week runtime layout', () => {
@@ -226,7 +226,7 @@ describe('scheduler workspace skipped days support', () => {
     });
 
     expect(workspace.getStartViewDate()).toEqual(new Date(2026, 2, 29));
-    expect((workspace as any)._getCellCount()).toBe(6);
+    expect((workspace as any).getCellCount()).toBe(6);
   });
 
   it('should skip configured hidden days when incrementing timeline header dates', () => {

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

@@ -233,7 +233,7 @@ const subscribes = {
   },
 
   getGroupCount() {
-    return this._workSpace._getGroupCount();
+    return this._workSpace.getGroupCount();
   },
 
   // TODO<Appointments>: delete this method when old impl is removed

packages/devextreme/js/__internal/scheduler/shaders/current_time_shader.ts

@@ -6,7 +6,7 @@ import type SchedulerWorkSpace from '../workspaces/m_work_space';
 const DATE_TIME_SHADER_CLASS = 'dx-scheduler-date-time-shader';
 
 class CurrentTimeShader {
-  protected $container = this.workSpace._dateTableScrollable.$content();
+  protected $container = this.workSpace.getScrollable().$content();
 
   protected shader!: dxElementWrapper[];
 
@@ -15,10 +15,10 @@ class CurrentTimeShader {
   constructor(protected workSpace: SchedulerWorkSpace) {
   }
 
-  render(): void {
+  render(isHorizontalGroupedWorkSpace: boolean, groupCount: number, cellCount: number): void {
     this.initShaderElements();
 
-    this.renderShader();
+    this.renderShader(isHorizontalGroupedWorkSpace, groupCount, cellCount);
 
     this.shader.forEach((shader) => {
       this.$container.append(shader);
@@ -31,7 +31,8 @@ class CurrentTimeShader {
     this.shader.push(this.$shader);
   }
 
-  renderShader(): void {}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  renderShader(isHorizontalGroupedWorkSpace: boolean, groupCount: number, cellCount: number):void {}
 
   createShader(): dxElementWrapper {
     return $('<div>').addClass(DATE_TIME_SHADER_CLASS);

packages/devextreme/js/__internal/scheduler/shaders/current_time_shader_horizontal.ts

@@ -5,19 +5,17 @@ import { setWidth } from '@js/core/utils/size';
 import CurrentTimeShader from './current_time_shader';
 
 class HorizontalCurrentTimeShader extends CurrentTimeShader {
-  renderShader(): void {
-    const groupCount = this.workSpace._isHorizontalGroupedWorkSpace()
-      ? this.workSpace._getGroupCount()
-      : 1;
+  renderShader(isHorizontalGroupedWorkSpace: boolean, groupCount: number, cellCount: number): void {
+    const effectiveGroupCount = isHorizontalGroupedWorkSpace ? groupCount : 1;
 
-    for (let i = 0; i < groupCount; i += 1) {
+    for (let i = 0; i < effectiveGroupCount; i += 1) {
       const isFirstShader = i === 0;
       const $shader = isFirstShader ? this.$shader : this.createShader();
 
       if (this.workSpace.isGroupedByDate()) {
-        this.customizeGroupedByDateShader($shader, i);
+        this.customizeGroupedByDateShader($shader, i, groupCount, cellCount);
       } else {
-        this.customizeShader($shader, i);
+        this.customizeShader($shader, i, cellCount);
       }
 
       if (!isFirstShader) {
@@ -26,15 +24,19 @@ class HorizontalCurrentTimeShader extends CurrentTimeShader {
     }
   }
 
-  private customizeShader($shader: dxElementWrapper, groupIndex: number): void {
+  private customizeShader(
+    $shader: dxElementWrapper,
+    groupIndex: number,
+    dateTableCellCount: number,
+  ): void {
     // @ts-expect-error
     const shaderWidth = this.workSpace.getIndicationWidth() as number;
 
     this.applyShaderWidth($shader, shaderWidth);
 
     if (groupIndex >= 1) {
       const { workSpace } = this;
-      const indicationWidth = workSpace._getCellCount() * workSpace.getCellWidth();
+      const indicationWidth = dateTableCellCount * workSpace.getCellWidth();
       $shader.css('left', indicationWidth);
     } else {
       $shader.css('left', 0);
@@ -48,11 +50,16 @@ class HorizontalCurrentTimeShader extends CurrentTimeShader {
     }
   }
 
-  private customizeGroupedByDateShader($shader: dxElementWrapper, groupIndex: number): void {
+  private customizeGroupedByDateShader(
+    $shader: dxElementWrapper,
+    groupIndex: number,
+    shaderGroupCount: number,
+    dateTableCellCount: number,
+  ): void {
     // @ts-expect-error
-    const cellCount = this.workSpace.getIndicationCellCount() as number;
-    const integerPart = Math.floor(cellCount);
-    const fractionPart = cellCount - integerPart;
+    const indicationCellCount = this.workSpace.getIndicationCellCount() as number;
+    const integerPart = Math.floor(indicationCellCount);
+    const fractionPart = indicationCellCount - integerPart;
     const isFirstShaderPart = groupIndex === 0;
     const { workSpace } = this;
     const shaderWidth = isFirstShaderPart
@@ -64,9 +71,9 @@ class HorizontalCurrentTimeShader extends CurrentTimeShader {
     this.applyShaderWidth($shader, shaderWidth);
 
     if (isFirstShaderPart) {
-      shaderLeft = workSpace._getCellCount() * workSpace.getCellWidth() * groupIndex;
+      shaderLeft = dateTableCellCount * workSpace.getCellWidth() * groupIndex;
     } else {
-      shaderLeft = workSpace.getCellWidth() * integerPart * workSpace._getGroupCount()
+      shaderLeft = workSpace.getCellWidth() * integerPart * shaderGroupCount
         + groupIndex * workSpace.getCellWidth();
     }
 

packages/devextreme/js/__internal/scheduler/shaders/current_time_shader_vertical.ts

@@ -4,6 +4,9 @@ import { setHeight, setWidth } from '@js/core/utils/size';
 import CurrentTimeShader from './current_time_shader';
 
 const DATE_TIME_SHADER_ALL_DAY_CLASS = 'dx-scheduler-date-time-shader-all-day';
+
+const ALL_DAY_PANEL_CLASS = 'dx-scheduler-all-day-panel';
+
 const DATE_TIME_SHADER_TOP_CLASS = 'dx-scheduler-date-time-shader-top';
 const DATE_TIME_SHADER_BOTTOM_CLASS = 'dx-scheduler-date-time-shader-bottom';
 
@@ -14,7 +17,8 @@ class VerticalCurrentTimeShader extends CurrentTimeShader {
 
   private $allDayIndicator!: dxElementWrapper;
 
-  renderShader(): void {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  renderShader(isHorizontalGroupedWorkSpace: boolean, groupCount: number, cellCount: number): void {
     let shaderHeight = this.getShaderHeight();
     const maxHeight = this.getShaderMaxHeight();
     const isSolidShader = shaderHeight > maxHeight;
@@ -24,7 +28,6 @@ class VerticalCurrentTimeShader extends CurrentTimeShader {
     }
 
     setHeight(this.$shader, shaderHeight);
-    const groupCount = this.workSpace._getGroupCount() || 1;
 
     if (this.workSpace.isGroupedByDate()) {
       this.renderGroupedByDateShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader);
@@ -125,7 +128,10 @@ class VerticalCurrentTimeShader extends CurrentTimeShader {
       setWidth(this.$allDayIndicator, shaderWidth);
       this.$allDayIndicator.css('left', this.getShaderOffset(i, shaderWidth));
 
-      this.workSpace._$allDayPanel.prepend(this.$allDayIndicator);
+      const $allDayPanel = this.workSpace.$element().find(`.${ALL_DAY_PANEL_CLASS}`);
+      if ($allDayPanel.length) {
+        $allDayPanel.first().prepend(this.$allDayIndicator);
+      }
     }
   }
 
@@ -152,9 +158,7 @@ class VerticalCurrentTimeShader extends CurrentTimeShader {
   clean(): void {
     super.clean();
 
-    if (this.workSpace?._$allDayPanel) {
-      this.workSpace._$allDayPanel.find(`.${DATE_TIME_SHADER_ALL_DAY_CLASS}`).remove();
-    }
+    this.workSpace?.$element().find(`.${DATE_TIME_SHADER_ALL_DAY_CLASS}`).remove();
   }
 }
 

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

@@ -86,14 +86,14 @@ class SchedulerAgenda extends WorkSpace {
         break;
       case 'groups':
         if (!value?.length) {
-          if (this._$groupTable) {
-            this._$groupTable.remove();
-            this._$groupTable = null;
+          if (this.$groupTable) {
+            this.$groupTable.remove();
+            this.$groupTable = null;
             this.detachGroupCountClass();
           }
-        } else if (!this._$groupTable) {
+        } else if (!this.$groupTable) {
           this.initGroupTable();
-          this._dateTableScrollable.$content().prepend(this._$groupTable);
+          this.$dateTableScrollable.$content().prepend(this.$groupTable);
         }
         super._optionChanged(args);
         break;
@@ -124,7 +124,7 @@ class SchedulerAgenda extends WorkSpace {
     return this.option('agendaDuration') as number;
   }
 
-  _getCellCount() {
+  getCellCount() {
     return 1;
   }
 
@@ -139,15 +139,15 @@ class SchedulerAgenda extends WorkSpace {
   protected override initWorkSpaceUnits() {
     this.initGroupTable();
     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.$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');
   }
 
   private initGroupTable() {
     const groups = this.option('groups');
     if (groups?.length) {
-      this._$groupTable = $('<table>').attr('aria-hidden', true).addClass(GROUP_TABLE_CLASS);
+      this.$groupTable = $('<table>').attr('aria-hidden', true).addClass(GROUP_TABLE_CLASS);
     }
   }
 
@@ -169,22 +169,22 @@ class SchedulerAgenda extends WorkSpace {
     }
     this.rows = rows;
 
-    if (this._$groupTable) {
+    if (this.$groupTable) {
       cellTemplates = this.renderGroupHeader();
       this.setGroupHeaderCellsHeight();
     }
 
     this.renderTimePanel();
     this.renderDateTable();
     this.applyCellTemplates(cellTemplates);
-    this._dateTableScrollable.update();
+    this.$dateTableScrollable.update();
   }
 
   private renderNoData() {
     this.$noDataContainer = $('<div>').addClass(NODATA_CONTAINER_CLASS)
       .html(this.option('noDataText') as any);
 
-    this._dateTableScrollable.$content().append(this.$noDataContainer);
+    this.$dateTableScrollable.$content().append(this.$noDataContainer);
   }
 
   protected override setTableSizes() { return noop(); }
@@ -246,7 +246,7 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override getGroupHeaderContainer() {
-    return this._$groupTable;
+    return this.$groupTable;
   }
 
   protected override makeGroupRows() {
@@ -306,11 +306,11 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override cleanView() {
-    this._$dateTable.empty();
+    this.$dateTable.empty();
     this.$timePanel.empty();
 
-    if (this._$groupTable) {
-      this._$groupTable.empty();
+    if (this.$groupTable) {
+      this.$groupTable.empty();
     }
 
     if (this.$noDataContainer) {
@@ -326,20 +326,20 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   protected override createWorkSpaceStaticElements() {
-    this.$dateTableContainer.append(this._$dateTable);
-    this._dateTableScrollable.$content().append(this._$dateTableScrollableContent);
+    this.$dateTableContainer.append(this.$dateTable);
+    this.$dateTableScrollable.$content().append(this.$dateTableScrollableContent);
 
-    if (this._$groupTable) {
-      this._$dateTableScrollableContent.prepend(this._$groupTable);
+    if (this.$groupTable) {
+      this.$dateTableScrollableContent.prepend(this.$groupTable);
     }
 
-    this._$dateTableScrollableContent.append(this.$timePanel, this.$dateTableContainer);
-    this.$element().append(this._dateTableScrollable.$element());
+    this.$dateTableScrollableContent.append(this.$timePanel, this.$dateTableContainer);
+    this.$element().append(this.$dateTableScrollable.$element());
   }
 
   protected override renderDateTable() {
     this.renderTableBody({
-      container: getPublicElement(this._$dateTable),
+      container: getPublicElement(this.$dateTable),
       rowClass: DATE_TABLE_ROW_CLASS,
       cellClass: this.getDateTableCellClass(),
     });