From 056a2a4bd4e4e885e36522eadb6b0dba814d1066 Mon Sep 17 00:00:00 2001 From: Ilya Vinogradov <48182348+williamvinogradov@users.noreply.github.com> Date: Sat, 13 Apr 2024 20:48:21 +0400 Subject: [PATCH] Scheduler: migrate DateHeaderTimeline + GroupPanel (#27162) (#27163) --- .../components/base/date_header.ts | 3 +- .../scheduler/__migration/components/index.ts | 6 + .../timeline/date_header_timeline.ts | 108 ++++++++++++++++++ .../timeline/header_panel_timeline.ts | 46 ++++++++ .../components/wrappers/group_panel.ts | 39 +++++++ .../wrappers/header_panel_timeline.ts | 25 ++++ .../scheduler/workspaces/m_timeline.ts | 5 +- .../scheduler/workspaces/m_work_space.ts | 6 +- 8 files changed, 230 insertions(+), 8 deletions(-) create mode 100644 packages/devextreme/js/__internal/scheduler/__migration/components/timeline/date_header_timeline.ts create mode 100644 packages/devextreme/js/__internal/scheduler/__migration/components/timeline/header_panel_timeline.ts create mode 100644 packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/group_panel.ts create mode 100644 packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/header_panel_timeline.ts diff --git a/packages/devextreme/js/__internal/scheduler/__migration/components/base/date_header.ts b/packages/devextreme/js/__internal/scheduler/__migration/components/base/date_header.ts index 4c0055f73d82..d5814b0076eb 100644 --- a/packages/devextreme/js/__internal/scheduler/__migration/components/base/date_header.ts +++ b/packages/devextreme/js/__internal/scheduler/__migration/components/base/date_header.ts @@ -24,9 +24,10 @@ export interface DateHeaderProps { dateHeaderData: DateHeaderData; groups: Group[]; dateCellTemplate?: JSXTemplate; + timeCellTemplate?: JSXTemplate; } -const DateHeaderDefaultProps = { +export const DateHeaderDefaultProps = { groupOrientation: 'horizontal', groupByDate: false, groups: [], diff --git a/packages/devextreme/js/__internal/scheduler/__migration/components/index.ts b/packages/devextreme/js/__internal/scheduler/__migration/components/index.ts index 3b524fc54e88..8e4c637d8c54 100644 --- a/packages/devextreme/js/__internal/scheduler/__migration/components/index.ts +++ b/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'; diff --git a/packages/devextreme/js/__internal/scheduler/__migration/components/timeline/date_header_timeline.ts b/packages/devextreme/js/__internal/scheduler/__migration/components/timeline/date_header_timeline.ts new file mode 100644 index 000000000000..7bf2360583e5 --- /dev/null +++ b/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 { + 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; diff --git a/packages/devextreme/js/__internal/scheduler/__migration/components/timeline/header_panel_timeline.ts b/packages/devextreme/js/__internal/scheduler/__migration/components/timeline/header_panel_timeline.ts new file mode 100644 index 000000000000..6682c81df494 --- /dev/null +++ b/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 { + 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; diff --git a/packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/group_panel.ts b/packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/group_panel.ts new file mode 100644 index 000000000000..036eabcefdf6 --- /dev/null +++ b/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); diff --git a/packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/header_panel_timeline.ts b/packages/devextreme/js/__internal/scheduler/__migration/components/wrappers/header_panel_timeline.ts new file mode 100644 index 000000000000..8b600f1655ed --- /dev/null +++ b/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); diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts index 6eeb1581cbd0..01841e5b8563 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts +++ b/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; diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts index 8574ddc0e62f..be75fbe7b368 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts +++ b/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, );