Scheduler - Remove old render

packages/devextreme-angular/src/server/render.ts

@@ -25,6 +25,9 @@ export class DxServerModule {
           temp.innerHTML = renderToString(el);
 
           const mainElement = temp.childNodes[0];
+          if (!mainElement) {
+            return;
+          }
           const childString = mainElement.innerHTML;
 
           for (let i = 0; i < mainElement.attributes.length; i++) {

packages/devextreme-angular/tests/src/ui/form.spec.ts

@@ -64,6 +64,7 @@ describe('DxForm', () => {
       formGroupItemType: 'itemType="group"',
       formValidationItem: 'dxi-validation-rule',
       formValidationRequiredItemType: 'type="required"',
+      formCustomValidationItem: 'dxi-validation-rule',
       formValidationCustomItemType: 'type="custom"',
     },
     {
@@ -73,6 +74,7 @@ describe('DxForm', () => {
       formGroupItemType: '',
       formValidationItem: 'dxi-form-required-rule',
       formValidationRequiredItemType: '',
+      formCustomValidationItem: 'dxi-form-custom-rule',
       formValidationCustomItemType: '',
     },
   ].forEach(({
@@ -82,6 +84,7 @@ describe('DxForm', () => {
     formGroupItemType,
     formValidationItem,
     formValidationRequiredItemType,
+    formCustomValidationItem,
     formValidationCustomItemType,
   }) => {
     it(`should be able to accept items via nested dxi components (T459714) (with ${testName} nested items)`, () => {
@@ -178,8 +181,8 @@ describe('DxForm', () => {
                     <dx-form [formData]="{ text: 1 }">
                         <${formGroupItem} ${formGroupItemType} *ngIf="true">
                             <${formSimpleItem} dataField="text">
-                                <${formValidationItem} ${formValidationCustomItemType} [validationCallback]="validateForm">
-                                </${formValidationItem}>
+                                <${formCustomValidationItem} ${formValidationCustomItemType} [validationCallback]="validateForm">
+                                </${formCustomValidationItem}>
                             </${formSimpleItem}>
                         </${formGroupItem}>
                     </dx-form>

packages/devextreme/js/__internal/__tests__/draggable_dispose.test.ts

@@ -0,0 +1,19 @@
+import $ from '@js/core/renderer';
+import Sortable from '@js/ui/sortable';
+
+describe('Draggable dispose safety', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should not crash on _stopAnimator when _scrollAnimator is not initialized', () => {
+    const $container = $('<div>').appendTo(document.body);
+    const sortable = new Sortable($container, {});
+
+    (sortable as any)._scrollAnimator = undefined;
+
+    expect(() => {
+      sortable.dispose();
+    }).not.toThrow();
+  });
+});

packages/devextreme/js/__internal/m_draggable.ts

@@ -439,7 +439,7 @@ class Draggable extends DOMComponent<Draggable, Properties> {
   }
 
   _stopAnimator() {
-    this._scrollAnimator.stop();
+    this._scrollAnimator?.stop();
   }
 
   _addWidgetPrefix(className?) {

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

@@ -579,9 +579,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
         this.updateAppointmentDataSource();
         this.updateOption('workSpace', args.fullName, value);
         break;
-      case 'renovateRender':
-        this.updateOption('workSpace', name, value);
-        break;
       case '_draggingMode':
         this.updateOption('workSpace', 'draggingMode', value);
         break;
@@ -1491,8 +1488,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       getHeaderHeight: () => utils.DOM.getHeaderHeight(this.header),
       onScrollEnd: () => this._appointments.updateResizableArea(),
 
-      // TODO: SSR does not work correctly with renovated render
-      renovateRender: this.isRenovatedRender(isVirtualScrolling),
     }, currentViewOptions);
 
     result.notifyScheduler = this.notifyScheduler;
@@ -1511,10 +1506,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     return result;
   }
 
-  private isRenovatedRender(isVirtualScrolling) {
-    return (this.option('renovateRender') && hasWindow()) || isVirtualScrolling;
-  }
-
   private waitAsyncTemplate(callback) {
     if (this._options.silent('templatesRenderAsynchronously')) {
       const timer = setTimeout(() => {

packages/devextreme/js/__internal/scheduler/utils/options/constants.ts

@@ -102,7 +102,6 @@ export const DEFAULT_SCHEDULER_OPTIONS: Properties = {
 
 export const DEFAULT_SCHEDULER_INTERNAL_OPTIONS: SchedulerInternalOptions = {
   indicatorTime: undefined,
-  renovateRender: true,
   editing: {
     // @ts-expect-error copy from default so that you can rewrite it
     ...DEFAULT_SCHEDULER_OPTIONS.editing,

packages/devextreme/js/__internal/scheduler/utils/options/types.ts

@@ -22,7 +22,6 @@ export type NormalizedView = View | AgendaView;
 
 export interface SchedulerInternalOptions {
   indicatorTime?: Date;
-  renovateRender: boolean;
   editing: Properties['editing'];
   _draggingMode: 'outlook' | 'default';
   // TODO: legacy option property name

packages/devextreme/js/__internal/scheduler/workspaces/helpers/m_position_helper.ts

@@ -76,7 +76,6 @@ export const getGroupWidth = (groupIndex, viewDataProvider, options) => {
 
   const cellWidth = getCellWidth(DOMMetaData);
   let result = viewDataProvider.getCellCount(options) * cellWidth;
-  // TODO: refactor after deleting old render
   if (isVirtualScrolling) {
     const groupedData = viewDataProvider.groupedDataMap.dateTableGroupedMap;
     const groupLength = groupedData[groupIndex][0].length;

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

@@ -132,7 +132,7 @@ class SchedulerAgenda extends WorkSpace {
     return this.option('agendaDuration') as number;
   }
 
-  protected override renderAllDayPanel() { return noop(); }
+  protected renderAllDayPanel() { return noop(); }
 
   protected override updateAllDayVisibility() { return noop(); }
 
@@ -337,7 +337,7 @@ class SchedulerAgenda extends WorkSpace {
     this.$element().append(this._dateTableScrollable.$element());
   }
 
-  protected override renderDateTable() {
+  protected renderDateTable() {
     this.renderTableBody({
       container: getPublicElement(this._$dateTable),
       rowClass: DATE_TABLE_ROW_CLASS,
@@ -371,7 +371,7 @@ class SchedulerAgenda extends WorkSpace {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected override renderTableBody(options: any, delayCellTemplateRendering?: any) {
+  protected renderTableBody(options: any, delayCellTemplateRendering?: any) {
     const cellTemplates: any[] = [];
     const cellTemplateOpt = options.cellTemplate;
 
@@ -431,7 +431,7 @@ class SchedulerAgenda extends WorkSpace {
     }
   }
 
-  protected override renderTimePanel() {
+  protected renderTimePanel() {
     this.renderTableBody({
       container: getPublicElement(this.$timePanel),
       rowCount: this.getTimePanelRowCount(),
@@ -532,6 +532,8 @@ class SchedulerAgenda extends WorkSpace {
 
   renovatedRenderSupported() { return false; }
 
+  override isVirtualScrolling() { return false; }
+
   protected override getTotalViewDuration() {
     return dateUtils.dateToMilliseconds('day') * (this.option('intervalCount') as any);
   }

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

@@ -8,12 +8,11 @@ import { getOuterHeight, getOuterWidth, setHeight } from '@js/core/utils/size';
 import { hasWindow } from '@js/core/utils/window';
 // NOTE: Renovation component import.
 import { HeaderPanelTimelineComponent } from '@ts/scheduler/r1/components/index';
-import { formatWeekdayAndDay, timelineWeekUtils } from '@ts/scheduler/r1/utils/index';
+import { timelineWeekUtils } from '@ts/scheduler/r1/utils/index';
 
 import {
   GROUP_HEADER_CONTENT_CLASS,
   GROUP_ROW_CLASS,
-  HEADER_CURRENT_TIME_CELL_CLASS,
 } from '../m_classes';
 import tableCreatorModule from '../m_table_creator';
 import timezoneUtils from '../m_utils_time_zone';
@@ -30,7 +29,6 @@ const HORIZONTAL_GROUPED_WORKSPACE_CLASS = 'dx-scheduler-work-space-horizontal-g
 
 const HEADER_PANEL_CELL_CLASS = 'dx-scheduler-header-panel-cell';
 const HEADER_PANEL_WEEK_CELL_CLASS = 'dx-scheduler-header-panel-week-cell';
-const HEADER_ROW_CLASS = 'dx-scheduler-header-row';
 
 const HORIZONTAL = 'horizontal';
 const toMs = dateUtils.dateToMilliseconds;
@@ -298,8 +296,6 @@ class SchedulerTimeline extends SchedulerWorkSpace {
 
   renderRTimeTable() {}
 
-  protected override renderGroupAllDayPanel() {}
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   generateRenderOptions(argument?: any) {
     const options = super.generateRenderOptions(true);
@@ -348,28 +344,18 @@ class SchedulerTimeline extends SchedulerWorkSpace {
   }
 
   protected override renderView() {
-    let groupCellTemplates;
-    if (!this.isRenovatedRender()) {
-      groupCellTemplates = this.renderGroupHeader();
-    }
-
     this.renderWorkSpace();
-
-    if (this.isRenovatedRender()) {
-      this.virtualScrollingDispatcher.updateDimensions();
-    }
+    this.virtualScrollingDispatcher.updateDimensions();
 
     this._shader = new HorizontalShader(this);
 
     this.$sidebarTable.appendTo(this._sidebarScrollable.$content());
 
-    if (this.isRenovatedRender() && this.isVerticalGroupedWorkSpace()) {
+    if (this.isVerticalGroupedWorkSpace()) {
       this.renderRGroupPanel();
     }
 
     this.updateHeaderEmptyCellWidth();
-
-    this.applyCellTemplates(groupCellTemplates);
   }
 
   protected override setHorizontalGroupHeaderCellsHeight() { return noop(); }
@@ -397,76 +383,6 @@ class SchedulerTimeline extends SchedulerWorkSpace {
       .map((_, groupIndex) => columnCountPerGroup * groupIndex + currentTimeColumnIndex);
   }
 
-  // --------------
-  // These methods should be deleted when we get rid of old render
-  // --------------
-
-  protected override renderTimePanel() { return noop(); }
-
-  protected override renderAllDayPanel() { return noop(); }
-
-  protected override createAllDayPanelElements() { return noop(); }
-
-  protected override renderDateHeader() {
-    const $headerRow = super.renderDateHeader();
-    if (this.needRenderWeekHeader()) {
-      const firstViewDate = new Date(this.getStartViewDate());
-      let currentDate = new Date(firstViewDate);
-
-      const $cells: any[] = [];
-      const groupCount = this._getGroupCount();
-      const cellCountInDay = this.getCellCountInDay();
-      const colSpan = this.isGroupedByDate()
-        ? cellCountInDay * groupCount
-        : cellCountInDay;
-      const cellTemplate: any = this.option('dateCellTemplate');
-
-      const horizontalGroupCount = this._isHorizontalGroupedWorkSpace() && !this.isGroupedByDate()
-        ? groupCount
-        : 1;
-      const cellsInGroup = this.viewDataProvider.viewDataGenerator.daysInInterval * (this.option('intervalCount') as any);
-
-      const cellsCount = cellsInGroup * horizontalGroupCount;
-
-      for (let templateIndex = 0; templateIndex < cellsCount; templateIndex++) {
-        const $th = $('<th>');
-        const text = formatWeekdayAndDay(currentDate);
-
-        if (cellTemplate) {
-          const templateOptions = {
-            model: {
-              text,
-              date: new Date(currentDate),
-              ...this.getGroupsForDateHeaderTemplate(templateIndex, colSpan),
-            },
-            container: $th,
-            index: templateIndex,
-          };
-
-          cellTemplate.render(templateOptions);
-        } else {
-          $th.text(text);
-        }
-
-        $th
-          .addClass(HEADER_PANEL_CELL_CLASS)
-          .addClass(HEADER_PANEL_WEEK_CELL_CLASS)
-          .attr('colSpan', colSpan);
-
-        $cells.push($th);
-
-        if ((templateIndex % cellsInGroup) === (cellsInGroup - 1)) {
-          currentDate = new Date(firstViewDate);
-        } else {
-          this.incrementDate(currentDate);
-        }
-      }
-
-      const $row = $('<tr>').addClass(HEADER_ROW_CLASS).append($cells as any);
-      $headerRow.before($row);
-    }
-  }
-
   protected override renderIndicator(height, rtlOffset, $container, groupCount) {
     let $indicator;
     const width = this.getIndicationWidth();
@@ -504,18 +420,6 @@ class SchedulerTimeline extends SchedulerWorkSpace {
       groupByDate,
     );
   }
-
-  // Old render methods.
-  // TODO Old render: delete these methods with the old render.
-
-  protected override setCurrentTimeCells(): void {
-    const timePanelCells = this.getTimePanelCells();
-    const currentTimeCellIndices = this.getCurrentTimePanelCellIndices();
-    currentTimeCellIndices.forEach((timePanelCellIndex) => {
-      timePanelCells.eq(timePanelCellIndex)
-        .addClass(HEADER_CURRENT_TIME_CELL_CLASS);
-    });
-  }
 }
 
 registerComponent('dxSchedulerTimeline', SchedulerTimeline as any);