Scheduler: migrate DateHeaderTimeline + GroupPanel (DevExpress#27162) (…

…DevExpress#27163)

packages/devextreme/js/__internal/scheduler/__migration/components/base/date_header.ts

@@ -24,9 +24,10 @@ export interface DateHeaderProps {
   dateHeaderData: DateHeaderData;
   groups: Group[];
   dateCellTemplate?: JSXTemplate<DateTimeCellTemplateProps>;
+  timeCellTemplate?: JSXTemplate<DateTimeCellTemplateProps>;
 }
 
-const DateHeaderDefaultProps = {
+export const DateHeaderDefaultProps = {
   groupOrientation: 'horizontal',
   groupByDate: false,
   groups: [],

packages/devextreme/js/__internal/scheduler/__migration/components/index.ts

@@ -10,9 +10,15 @@ export {
 export {
   DateTableMonthComponent,
 } from './wrappers/date_table_month';
+export {
+  GroupPanelComponent,
+} from './wrappers/group_panel';
 export {
   HeaderPanelComponent,
 } from './wrappers/header_panel';
+export {
+  HeaderPanelTimelineComponent,
+} from './wrappers/header_panel_timeline';
 export {
   TimePanelComponent,
 } from './wrappers/time_panel';

packages/devextreme/js/__internal/scheduler/__migration/components/timeline/date_header_timeline.ts

@@ -0,0 +1,108 @@
+import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
+import { getTemplate } from '@ts/core/component_wrappers/utils/index';
+import { getThemeType } from '@ts/scheduler/__migration/utils/themes';
+import type { VNode } from 'inferno';
+import {
+  createComponentVNode,
+  createFragment,
+} from 'inferno';
+
+import { isHorizontalGroupingApplied } from '../../utils/index';
+import type { DateHeaderProps } from '../base/date_header';
+import { DateHeaderDefaultProps } from '../base/date_header';
+import { DateHeaderCell } from '../base/date_header_cell';
+import { Row } from '../base/row';
+
+const {
+  isMaterialBased,
+} = getThemeType();
+
+export class TimelineDateHeaderLayout extends BaseInfernoComponent<DateHeaderProps> {
+  render(): VNode {
+    const {
+      groupByDate,
+      groupOrientation,
+      groups,
+      dateHeaderData,
+      dateCellTemplate,
+      timeCellTemplate,
+    } = this.props;
+    const {
+      dataMap,
+      isMonthDateHeader,
+      leftVirtualCellCount,
+      leftVirtualCellWidth,
+      rightVirtualCellCount,
+      rightVirtualCellWidth,
+      weekDayLeftVirtualCellCount,
+      weekDayLeftVirtualCellWidth,
+      weekDayRightVirtualCellCount,
+      weekDayRightVirtualCellWidth,
+    } = dateHeaderData;
+    const isHorizontalGrouping = isHorizontalGroupingApplied(groups, groupOrientation)
+      && !groupByDate;
+    const dateCellTemplateComponent = getTemplate(dateCellTemplate);
+    const timeCellTemplateComponent = getTemplate(timeCellTemplate);
+
+    return createFragment(dataMap.map((dateHeaderRow, rowIndex) => {
+      const rowsCount = dataMap.length;
+      const isTimeCellTemplate = rowsCount - 1 === rowIndex;
+      const isWeekDayRow = rowsCount > 1 && rowIndex === 0;
+      const splitText = isMaterialBased && (isMonthDateHeader || isWeekDayRow);
+
+      let validLeftVirtualCellCount: number | undefined = leftVirtualCellCount;
+      let validRightVirtualCellCount: number | undefined = rightVirtualCellCount;
+      let validRightVirtualCellWidth: number | undefined = rightVirtualCellWidth;
+      let validLeftVirtualCellWidth: number | undefined = leftVirtualCellWidth;
+
+      if (isWeekDayRow) {
+        validLeftVirtualCellCount = weekDayLeftVirtualCellCount;
+        validRightVirtualCellCount = weekDayRightVirtualCellCount;
+        validRightVirtualCellWidth = weekDayRightVirtualCellWidth;
+        validLeftVirtualCellWidth = weekDayLeftVirtualCellWidth;
+      }
+
+      return createComponentVNode(2, Row, {
+        className: 'dx-scheduler-header-row',
+        leftVirtualCellWidth: validLeftVirtualCellWidth,
+        leftVirtualCellCount: validLeftVirtualCellCount,
+        rightVirtualCellWidth: validRightVirtualCellWidth,
+        rightVirtualCellCount: validRightVirtualCellCount,
+        children: dateHeaderRow.map((_ref2) => {
+          const {
+            colSpan,
+            endDate,
+            groupIndex,
+            groups: cellGroups,
+            index,
+            isFirstGroupCell,
+            isLastGroupCell,
+            key,
+            startDate,
+            text,
+            today,
+          } = _ref2;
+          return createComponentVNode(2, DateHeaderCell, {
+            startDate,
+            endDate,
+            groups: isHorizontalGrouping ? cellGroups : undefined,
+            groupIndex: isHorizontalGrouping ? groupIndex : undefined,
+            today,
+            index,
+            text,
+            isFirstGroupCell,
+            isLastGroupCell,
+            isWeekDayCell: isWeekDayRow,
+            colSpan,
+            splitText,
+            dateCellTemplate: dateCellTemplateComponent,
+            timeCellTemplate: timeCellTemplateComponent,
+            isTimeCellTemplate,
+          }, key);
+        }),
+      }, rowIndex.toString());
+    }), 0);
+  }
+}
+
+TimelineDateHeaderLayout.defaultProps = DateHeaderDefaultProps;

packages/devextreme/js/__internal/scheduler/__migration/components/timeline/header_panel_timeline.ts

@@ -0,0 +1,46 @@
+import type { InfernoEffect } from '@devextreme/runtime/inferno';
+import { createReRenderEffect, InfernoWrapperComponent } from '@devextreme/runtime/inferno';
+import { getTemplate } from '@ts/core/component_wrappers/utils/index';
+import type { VNode } from 'inferno';
+import { createComponentVNode } from 'inferno';
+
+import type { HeaderPanelProps } from '../base/header_panel';
+import { HeaderPanel, HeaderPanelDefaultProps } from '../base/header_panel';
+import { TimelineDateHeaderLayout } from './date_header_timeline';
+
+export class HeaderPanelTimeline extends InfernoWrapperComponent<HeaderPanelProps> {
+  createEffects(): InfernoEffect[] {
+    return [createReRenderEffect()];
+  }
+
+  render(): VNode {
+    const {
+      dateCellTemplate,
+      dateHeaderData,
+      groupByDate,
+      groupOrientation,
+      groupPanelData,
+      groups,
+      isRenderDateHeader,
+      resourceCellTemplate,
+      timeCellTemplate,
+    } = this.props;
+    const dateCellTemplateComponent = getTemplate(dateCellTemplate);
+    const resourceCellTemplateComponent = getTemplate(resourceCellTemplate);
+    const timeCellTemplateComponent = getTemplate(timeCellTemplate);
+
+    return createComponentVNode(2, HeaderPanel, {
+      dateHeaderTemplate: TimelineDateHeaderLayout,
+      dateHeaderData,
+      groupPanelData,
+      groupByDate,
+      groups,
+      groupOrientation,
+      isRenderDateHeader,
+      resourceCellTemplate: resourceCellTemplateComponent,
+      dateCellTemplate: dateCellTemplateComponent,
+      timeCellTemplate: timeCellTemplateComponent,
+    });
+  }
+}
+HeaderPanelTimeline.defaultProps = HeaderPanelDefaultProps;

packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/group_panel.ts

@@ -0,0 +1,39 @@
+import registerComponent from '@js/core/component_registrator';
+import { ComponentWrapper } from '@ts/core/component_wrappers/index';
+
+import { GroupPanel } from '../base/group_panel';
+
+export class GroupPanelComponent extends ComponentWrapper {
+  _setOptionsByReference(): void {
+    // @ts-expect-error badly typed DomComponent
+    super._setOptionsByReference();
+    // @ts-expect-error badly typed DomComponent
+    this._optionsByReference = {
+      // @ts-expect-error badly typed DomComponent
+      ...this._optionsByReference,
+      resourceCellTemplate: true,
+    };
+  }
+
+  /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+  /* eslint-disable @typescript-eslint/explicit-function-return-type */
+  get _propsInfo() {
+    return {
+      twoWay: [],
+      allowNull: [],
+      elements: [],
+      templates: ['resourceCellTemplate'],
+      props: ['groups', 'groupOrientation', 'groupPanelData', 'groupByDate', 'height', 'className', 'resourceCellTemplate'],
+    };
+  }
+
+  /* eslint-enable @typescript-eslint/explicit-module-boundary-types */
+  /* eslint-enable @typescript-eslint/explicit-function-return-type */
+
+  // @ts-expect-error types error in R1
+  get _viewComponent(): typeof GroupPanel {
+    return GroupPanel;
+  }
+}
+
+registerComponent('dxGroupPanel', GroupPanelComponent);

packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/header_panel_timeline.ts

@@ -0,0 +1,25 @@
+import registerComponent from '@js/core/component_registrator';
+
+import { HeaderPanelTimeline } from '../timeline/header_panel_timeline';
+import { HeaderPanelComponent } from './header_panel';
+
+export class HeaderPanelTimelineComponent extends HeaderPanelComponent {
+  /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+  /* eslint-disable @typescript-eslint/explicit-function-return-type */
+  get _propsInfo() {
+    return {
+      twoWay: [],
+      allowNull: [],
+      elements: [],
+      templates: ['dateCellTemplate', 'timeCellTemplate', 'dateHeaderTemplate', 'resourceCellTemplate'],
+      props: ['dateHeaderData', 'isRenderDateHeader', 'dateCellTemplate', 'timeCellTemplate', 'dateHeaderTemplate', 'groups', 'groupOrientation', 'groupPanelData', 'groupByDate', 'height', 'className', 'resourceCellTemplate'],
+    };
+  }
+  /* eslint-enable @typescript-eslint/explicit-module-boundary-types */
+  /* eslint-enable @typescript-eslint/explicit-function-return-type */
+
+  get _viewComponent(): typeof HeaderPanelTimeline {
+    return HeaderPanelTimeline;
+  }
+}
+registerComponent('dxTimelineHeaderPanelLayout', HeaderPanelTimelineComponent);

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

@@ -8,8 +8,7 @@ import { getOuterHeight, getOuterWidth, setHeight } from '@js/core/utils/size';
 import { hasWindow } from '@js/core/utils/window';
 
 // NOTE: Renovation component import.
-// @ts-expect-error
-import dxrTimelineDateHeader from '../../../renovation/ui/scheduler/workspaces/timeline/header_panel/layout.j';
+import { HeaderPanelTimelineComponent } from '../__migration/components/index';
 import { formatWeekdayAndDay, timelineWeekUtils } from '../__migration/utils/index';
 import {
   GROUP_HEADER_CONTENT_CLASS,
@@ -42,7 +41,7 @@ class SchedulerTimeline extends SchedulerWorkSpace {
 
   readonly viewDirection = 'horizontal';
 
-  get renovatedHeaderPanelComponent() { return dxrTimelineDateHeader; }
+  get renovatedHeaderPanelComponent() { return HeaderPanelTimelineComponent; }
 
   getGroupTableWidth() {
     return this._$sidebarTable ? getOuterWidth(this._$sidebarTable) : 0;

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

@@ -32,13 +32,11 @@ import Scrollable from '@js/ui/scroll_view/ui.scrollable';
 import errors from '@js/ui/widget/ui.errors';
 import { getMemoizeScrollTo } from '@ts/core/utils/scroll';
 
-// NOTE: Renovation component section
-// @ts-expect-error
-import dxrGroupPanel from '../../../renovation/ui/scheduler/workspaces/base/group_panel/group_panel.j';
 import {
   AllDayPanelTitleComponent,
   AllDayTableComponent,
   DateTableComponent,
+  GroupPanelComponent,
   HeaderPanelComponent,
   TimePanelComponent,
 } from '../__migration/components/index';
@@ -2095,7 +2093,7 @@ class SchedulerWorkSpace extends WidgetObserver {
       utils.renovation.renderComponent(
         this,
         this._getGroupHeaderContainer(),
-        dxrGroupPanel,
+        GroupPanelComponent,
         'renovatedGroupPanel',
         options,
       );