diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts index 26add8462075..e6d2cce8dbb3 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts +++ b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts @@ -154,7 +154,7 @@ class SchedulerAppointments extends CollectionWidget { } 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() {} diff --git a/packages/devextreme/js/__internal/scheduler/header/header.ts b/packages/devextreme/js/__internal/scheduler/header/header.ts index 6da327f2d94f..c3409749314b 100644 --- a/packages/devextreme/js/__internal/scheduler/header/header.ts +++ b/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 { 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); diff --git a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts index 5a02a006afb0..d58100e7e217 100644 --- a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts +++ b/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: 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, diff --git a/packages/devextreme/js/__internal/scheduler/m_subscribes.ts b/packages/devextreme/js/__internal/scheduler/m_subscribes.ts index 6170ead29c8d..589da8474fdf 100644 --- a/packages/devextreme/js/__internal/scheduler/m_subscribes.ts +++ b/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)); diff --git a/packages/devextreme/js/__internal/scheduler/utils.ts b/packages/devextreme/js/__internal/scheduler/utils.ts deleted file mode 100644 index f330c8aef070..000000000000 --- a/packages/devextreme/js/__internal/scheduler/utils.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { getPublicElement } from '@js/core/element'; -import type { dxElementWrapper } from '@js/core/renderer'; -import $ from '@js/core/renderer'; -import { getOuterHeight, setHeight, setWidth } from '@js/core/utils/size'; - -import { APPOINTMENT_SETTINGS_KEY } from './constants'; -import type { AppointmentViewModelPlain } from './view_model/types'; - -export interface RenovationWidget { - $element: () => dxElementWrapper; - option: (options: Record) => void; - dispose: () => void; -} - -type CreateComponentFn = ( - element: string | HTMLElement | dxElementWrapper | Element, - component: unknown, - config: Record, -) => RenovationWidget; - -export const utils = { - dataAccessors: { - getAppointmentSettings: ( - element: dxElementWrapper, - ): AppointmentViewModelPlain | undefined => $(element) - .data(APPOINTMENT_SETTINGS_KEY) as unknown as AppointmentViewModelPlain | undefined, - }, - DOM: { - getHeaderHeight: (header: unknown): number => { - const h = header as Record | null | undefined; - const $element = h?._$element as dxElementWrapper | undefined; - return $element - ? parseInt(getOuterHeight($element), 10) - : 0; - }, - }, - renovation: { - renderComponent: ( - widget: unknown, - parentElement: dxElementWrapper, - componentClass: unknown, - componentName: string, - viewModel: Record, - ): void => { - const w = widget as Record; - let component = w[componentName] as RenovationWidget | undefined; - if (!component) { - const container = getPublicElement(parentElement); - const createFn = w._createComponent as CreateComponentFn; - component = createFn.call(w, container, componentClass, viewModel); - w[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); - } - } - }, - }, -}; diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/work_space.ts b/packages/devextreme/js/__internal/scheduler/workspaces/work_space.ts index b6f56ca6b301..278cf7f8ca7f 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/work_space.ts +++ b/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) => void; + dispose: () => void; +} + +type CreateRenovationComponentFn = ( + element: string | HTMLElement | dxElementWrapper | Element, + component: unknown, + config: Record, +) => RenovationWidget; + interface RenderRWorkspaceOptions { renderComponents: RenderComponentOptions; generateNewData: boolean; @@ -2356,8 +2367,7 @@ class SchedulerWorkSpace extends Widget { } renderRDateTable(): void { - utils.renovation.renderComponent( - this, + this.renderRenovatedComponent( this.$dateTable, DateTableComponent, 'renovatedDateTable', @@ -2382,8 +2392,7 @@ class SchedulerWorkSpace extends Widget { 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 { } } + protected renderRenovatedComponent( + parentElement: dxElementWrapper, + componentClass: unknown, + componentName: string, + viewModel: Record, + ): void { + const host = this as unknown as Record; + 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,9 +2449,9 @@ class SchedulerWorkSpace extends Widget { }; 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(); @@ -2420,8 +2459,7 @@ class SchedulerWorkSpace extends Widget { } renderRTimeTable(): void { - utils.renovation.renderComponent( - this, + this.renderRenovatedComponent( this.$timePanel, TimePanelComponent, 'renovatedTimePanel', @@ -2441,8 +2479,7 @@ class SchedulerWorkSpace extends Widget { this.detachGroupCountClass(); } - utils.renovation.renderComponent( - this, + this.renderRenovatedComponent( this.$thead, this.renovatedHeaderPanelComponent, 'renovatedHeaderPanel', diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/work_space_month.ts b/packages/devextreme/js/__internal/scheduler/workspaces/work_space_month.ts index 057442ddf883..5e4f52710575 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/work_space_month.ts +++ b/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',