Scheduler: refactor and remove utils.ts

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -154,7 +154,7 @@ class SchedulerAppointments extends CollectionWidget<any> {
   }
 
   public getAppointmentSettings($item: dxElementWrapper): AppointmentViewModelPlain {
-    return $item.data(APPOINTMENT_SETTINGS_KEY) as unknown as AppointmentViewModelPlain;
+    return $($item).data(APPOINTMENT_SETTINGS_KEY) as unknown as AppointmentViewModelPlain;
   }
 
   _moveFocus() {}

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

@@ -7,6 +7,7 @@ import $ from '@js/core/renderer';
 import { getPathParts } from '@js/core/utils/data';
 import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
+import { getOuterHeight } from '@js/core/utils/size';
 import type { ItemClickEvent } from '@js/ui/button_group';
 import type { DateNavigatorTextInfo, ToolbarItem } from '@js/ui/scheduler';
 import Toolbar from '@js/ui/toolbar';
@@ -285,6 +286,10 @@ export class SchedulerHeader extends Widget<HeaderOptions> {
     return getCaption(options, Boolean(useShortDateFormat), customizeDateNavigatorText);
   }
 
+  public getHeight(): number {
+    return parseInt(getOuterHeight(this.$element()), 10);
+  }
+
   public updateDateByDirection(direction: Direction): void {
     const date = this.getNextDate(direction);
 

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

@@ -71,7 +71,6 @@ import type {
   ScrollToGroupValuesOrOptions, ScrollToOptions, TargetedAppointment,
   ViewType,
 } from './types';
-import { utils } from './utils';
 import { AppointmentAdapter } from './utils/appointment_adapter/appointment_adapter';
 import { AppointmentDataAccessor } from './utils/data_accessor/appointment_data_accessor';
 import { getTargetedAppointment } from './utils/get_targeted_appointment';
@@ -1551,7 +1550,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       onSelectedCellsClick: this.showAddAppointmentPopup.bind(this),
       renderAppointments: () => { this.renderAppointments(); },
       onShowAllDayPanel: (value) => this.option('showAllDayPanel', value),
-      getHeaderHeight: () => utils.DOM.getHeaderHeight(this.header),
+      getHeaderHeight: () => this.header?.getHeight() ?? 0,
       onScrollEnd: () => this._appointments.updateResizableArea(),
       onInitialized: (e) => {
         if (this.option('_newAppointments')) {
@@ -1925,7 +1924,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
 
   // TODO<Appointments>: delete this method when old impl is removed
   getTargetedAppointment(appointment: SafeAppointment, element: dxElementWrapper): TargetedAppointment {
-    const settings = utils.dataAccessors.getAppointmentSettings(element)!;
+    const settings = this._appointments.getAppointmentSettings(element);
     return getTargetedAppointment(
       appointment,
       settings,
@@ -2203,7 +2202,7 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     targetedAppointment?: SafeAppointment,
   ) {
     if (appointment) {
-      const settings: any = utils.dataAccessors.getAppointmentSettings(element);
+      const settings: any = this._appointments.getAppointmentSettings(element);
       const appointmentConfig = {
         itemData: targetedAppointment ?? appointment,
         groupIndex: settings?.groupIndex,

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

@@ -15,7 +15,6 @@ import type {
   SafeAppointment,
   TargetedAppointment,
 } from './types';
-import { utils } from './utils';
 import { AppointmentAdapter } from './utils/appointment_adapter/appointment_adapter';
 import type { AppointmentItemViewModel } from './view_model/types';
 
@@ -65,7 +64,7 @@ const subscribes = {
   },
 
   updateAppointmentAfterResize(options) {
-    const { info } = utils.dataAccessors.getAppointmentSettings(options.$appointment) as AppointmentItemViewModel;
+    const { info } = this._appointments.getAppointmentSettings(options.$appointment) as AppointmentItemViewModel;
     const { startDate } = info.sourceAppointment;
 
     this.checkRecurringAppointment(options.target, options.data, startDate, () => {
@@ -84,7 +83,7 @@ const subscribes = {
   updateAppointmentAfterDrag({
     event, element, rawAppointment, isDropToTheSameCell, isDropToSelfScheduler,
   }) {
-    const { info } = utils.dataAccessors.getAppointmentSettings(element) as AppointmentItemViewModel;
+    const { info } = this._appointments.getAppointmentSettings(element) as AppointmentItemViewModel;
     // NOTE: enrich target appointment with additional data from the source
     // in case of one appointment of series will change
     const targetedRawAppointment = extend({}, rawAppointment, this.getUpdatedData(rawAppointment));

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

@@ -25,6 +25,7 @@ import {
   getOuterHeight,
   getOuterWidth,
   getWidth,
+  setHeight,
   setOuterHeight,
   setWidth,
 } from '@js/core/utils/size';
@@ -95,8 +96,6 @@ import type {
   GroupBoundsOffset,
   ViewCellData,
 } from '../types';
-import type { RenovationWidget } from '../utils';
-import { utils } from '../utils';
 import type { ResourceLoader } from '../utils/loader/resource_loader';
 import {
   getAppointmentGroupIndex,
@@ -131,6 +130,18 @@ interface RenderComponentOptions {
   allDayPanel?: boolean;
 }
 
+interface RenovationWidget {
+  $element: () => dxElementWrapper;
+  option: (options: Record<string, unknown>) => void;
+  dispose: () => void;
+}
+
+type CreateRenovationComponentFn = (
+  element: string | HTMLElement | dxElementWrapper | Element,
+  component: unknown,
+  config: Record<string, unknown>,
+) => RenovationWidget;
+
 interface RenderRWorkspaceOptions {
   renderComponents: RenderComponentOptions;
   generateNewData: boolean;
@@ -2356,8 +2367,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
   }
 
   renderRDateTable(): void {
-    utils.renovation.renderComponent(
-      this,
+    this.renderRenovatedComponent(
       this.$dateTable,
       DateTableComponent,
       'renovatedDateTable',
@@ -2382,8 +2392,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       this.attachGroupCountClass();
       const $groupHeaderContainer = this.getGroupHeaderContainer();
       if ($groupHeaderContainer) {
-        utils.renovation.renderComponent(
-          this,
+        this.renderRenovatedComponent(
           $groupHeaderContainer,
           GroupPanelComponent,
           'renovatedGroupPanel',
@@ -2395,6 +2404,36 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     }
   }
 
+  protected renderRenovatedComponent(
+    parentElement: dxElementWrapper,
+    componentClass: unknown,
+    componentName: string,
+    viewModel: Record<string, unknown>,
+  ): void {
+    const host = this as unknown as Record<string, unknown>;
+    let component = host[componentName] as RenovationWidget | undefined;
+    if (!component) {
+      const container = getPublicElement(parentElement);
+      const createFn = host._createComponent as CreateRenovationComponentFn;
+      component = createFn.call(this, container, componentClass, viewModel);
+      host[componentName] = component;
+    } else {
+      const $element = component.$element();
+      const elementStyle = ($element.get(0) as HTMLElement).style;
+      const { height } = elementStyle;
+      const { width } = elementStyle;
+
+      component.option(viewModel);
+
+      if (height) {
+        setHeight($element, height);
+      }
+      if (width) {
+        setWidth($element, width);
+      }
+    }
+  }
+
   renderRAllDayPanel(): void {
     const visible = this.isAllDayPanelVisible && !this.isGroupedAllDayPanel();
 
@@ -2410,18 +2449,17 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       };
 
       if (this.$allDayTable) {
-        utils.renovation.renderComponent(this, this.$allDayTable, AllDayTableComponent, 'renovatedAllDayPanel', options);
+        this.renderRenovatedComponent(this.$allDayTable, AllDayTableComponent, 'renovatedAllDayPanel', options);
       }
-      utils.renovation.renderComponent(this, this.$allDayTitle, AllDayPanelTitleComponent, 'renovatedAllDayPanelTitle', {});
+      this.renderRenovatedComponent(this.$allDayTitle, AllDayPanelTitleComponent, 'renovatedAllDayPanelTitle', {});
     }
 
     this.updateAllDayVisibility();
     this.updateScrollable();
   }
 
   renderRTimeTable(): void {
-    utils.renovation.renderComponent(
-      this,
+    this.renderRenovatedComponent(
       this.$timePanel,
       TimePanelComponent,
       'renovatedTimePanel',
@@ -2441,8 +2479,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
       this.detachGroupCountClass();
     }
 
-    utils.renovation.renderComponent(
-      this,
+    this.renderRenovatedComponent(
       this.$thead,
       this.renovatedHeaderPanelComponent,
       'renovatedHeaderPanel',

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

@@ -7,7 +7,6 @@ import type { ViewType } from '@js/ui/scheduler';
 import { DateTableMonthComponent } from '@ts/scheduler/r1/components/index';
 import { formatWeekday, monthUtils } from '@ts/scheduler/r1/utils/index';
 
-import { utils } from '../utils';
 import { VIEWS } from '../utils/options/constants_view';
 import type { ViewDateGenerationOptions } from './work_space';
 import SchedulerWorkSpace from './work_space_indicator';
@@ -142,8 +141,7 @@ class SchedulerWorkSpaceMonth extends SchedulerWorkSpace {
   renderRTimeTable(): void {}
 
   renderRDateTable(): void {
-    utils.renovation.renderComponent(
-      this,
+    this.renderRenovatedComponent(
       this.$dateTable,
       DateTableMonthComponent,
       'renovatedDateTable',