diff --git a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts index fa181c0b6140..986748d6a455 100644 --- a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts +++ b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts @@ -9,11 +9,11 @@ const MAX_TOOLTIP_HEIGHT = 200; export class DesktopTooltipStrategy extends TooltipStrategyBase { protected override prepareBeforeVisibleChanged(dataList) { - this._tooltip.option('position', { + this.tooltip.option('position', { my: 'bottom', at: 'top', boundary: this.getBoundary(dataList), - offset: this._extraOptions.offset, + offset: this.extraOptions.offset, collision: 'fit flipfit', }); } @@ -24,9 +24,9 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase { protected override onShown() { super.onShown(); - if (this._extraOptions.isButtonClick) { - this._list.focus(); - this._list.option('focusedElement', null); + if (this.extraOptions.isButtonClick) { + this.list.focus(); + this.list.option('focusedElement', null); } } @@ -46,11 +46,11 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase { const tooltip = this._options.createComponent(tooltipElement, Tooltip, { target, maxHeight: MAX_TOOLTIP_HEIGHT, - rtlEnabled: this._extraOptions.rtlEnabled, + rtlEnabled: this.extraOptions.rtlEnabled, onShown: this.onShown.bind(this), contentTemplate: this.getContentTemplate(dataList), wrapperAttr: { class: APPOINTMENT_TOOLTIP_WRAPPER_CLASS }, - _loopFocus: this._extraOptions._loopFocus, + _loopFocus: this.extraOptions._loopFocus, }); tooltip.setAria({ @@ -62,7 +62,7 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase { } protected override onListRender(e) { - return this._extraOptions.dragBehavior && this._extraOptions.dragBehavior(e); + return this.extraOptions.dragBehavior && this.extraOptions.dragBehavior(e); } protected override onListItemContextMenu(e) { diff --git a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts index 69668b54f68e..4c0d5b7017ac 100644 --- a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts +++ b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts @@ -71,16 +71,16 @@ export class MobileTooltipStrategy extends TooltipStrategyBase { private setTooltipConfig(): void { const isTabletWidth = getWidth(getWindow()) > 700; - const listHeight = getOuterHeight(this._list.$element().find(CLASS.scrollableContent)); - this._tooltip.option( + const listHeight = getOuterHeight(this.list.$element().find(CLASS.scrollableContent)); + this.tooltip.option( isTabletWidth ? createTabletDeviceConfig(listHeight) : createPhoneDeviceConfig(listHeight), ); } - private async _onShowing(): Promise { - this._tooltip.option('height', MAX_HEIGHT.DEFAULT); + private async onShowing(): Promise { + this.tooltip.option('height', MAX_HEIGHT.DEFAULT); /* NOTE: there are two setTooltipConfig calls to reduce blinking of overlay. The first one sets initial sizes, the second updates them after rendering async templates @@ -99,7 +99,7 @@ export class MobileTooltipStrategy extends TooltipStrategyBase { hideOnOutsideClick: true, animation: animationConfig, - onShowing: () => this._onShowing(), + onShowing: () => this.onShowing(), onShown: this.onShown.bind(this), contentTemplate: this.getContentTemplate(dataList), wrapperAttr: { class: CLASS.slidePanel }, diff --git a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts index dfe055939599..2b0b2822527b 100644 --- a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts +++ b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts @@ -20,24 +20,25 @@ const APPOINTMENT_TOOLTIP_TEMPLATE = 'appointmentTooltipTemplate'; export class TooltipStrategyBase { protected asyncTemplatePromises = new Set>(); - _tooltip: any; + protected tooltip: any; + // TODO: make private once external usages in m_scheduler.ts are removed _options: any; - _extraOptions: any; + protected extraOptions: any; - _list: any; + protected list: any; constructor(options) { - this._tooltip = null; + this.tooltip = null; this._options = options; - this._extraOptions = null; + this.extraOptions = null; } show(target, dataList, extraOptions) { if (this.canShowTooltip(dataList)) { this.hide(); - this._extraOptions = extraOptions; + this.extraOptions = extraOptions; this.showCore(target, dataList); } } @@ -45,15 +46,15 @@ export class TooltipStrategyBase { private showCore(target, dataList) { const describedByValue = isRenderer(target) && target.attr('aria-describedby') as string; - if (!this._tooltip) { - this._tooltip = this.createTooltip(target, dataList); + if (!this.tooltip) { + this.tooltip = this.createTooltip(target, dataList); } else { - this.shouldUseTarget() && this._tooltip.option('target', target); - this._list.option('dataSource', dataList); + this.shouldUseTarget() && this.tooltip.option('target', target); + this.list.option('dataSource', dataList); } this.prepareBeforeVisibleChanged(dataList); - this._tooltip.option('visible', true); + this.tooltip.option('visible', true); describedByValue && target.attr('aria-describedby', describedByValue); } @@ -64,7 +65,7 @@ export class TooltipStrategyBase { } private isDeletingAllowed(appointment) { - const { editing } = this._extraOptions; + const { editing } = this.extraOptions; const disabled = this._options.getAppointmentDisabled(appointment); const isDeletingAllowed = editing === true || editing?.allowDeleting === true; return !disabled && isDeletingAllowed; @@ -74,18 +75,18 @@ export class TooltipStrategyBase { return (container) => { const listElement = $('
'); $(container).append(listElement); - this._list = this.createList(listElement, dataList); - this._list.registerKeyHandler?.('escape', () => { + this.list = this.createList(listElement, dataList); + this.list.registerKeyHandler?.('escape', () => { this.hide(); - this._tooltip.option('target').focus(); + this.tooltip.option('target').focus(); }); - this._list.registerKeyHandler?.('del', () => { - const { focusedElement } = this._list.option(); + this.list.registerKeyHandler?.('del', () => { + const { focusedElement } = this.list.option(); if (!focusedElement) { return; } - const { appointment, targetedAppointment } = this._list._getItemData(focusedElement); + const { appointment, targetedAppointment } = this.list._getItemData(focusedElement); if (!appointment) { return; } @@ -99,22 +100,22 @@ export class TooltipStrategyBase { } isAlreadyShown(target) { - if (this._tooltip && this._tooltip.option('visible')) { - return this._tooltip.option('target')[0] === target[0]; + if (this.tooltip && this.tooltip.option('visible')) { + return this.tooltip.option('target')[0] === target[0]; } return undefined; } protected onShown() { - this._list.option('focusStateEnabled', this._extraOptions.focusStateEnabled); + this.list.option('focusStateEnabled', this.extraOptions.focusStateEnabled); } dispose() { } hide() { - if (this._tooltip) { - this._tooltip.option('visible', false); + if (this.tooltip) { + this.tooltip.option('visible', false); } } @@ -171,7 +172,7 @@ export class TooltipStrategyBase { } private createFunctionTemplate(template, appointmentData, targetedAppointmentData, index) { - const isButtonClicked = Boolean(this._extraOptions.isButtonClick); + const isButtonClicked = Boolean(this.extraOptions.isButtonClick); // @ts-expect-error return new FunctionTemplate((options) => { @@ -196,7 +197,7 @@ export class TooltipStrategyBase { private onListItemClick(e) { this.hide(); - this._extraOptions.clickEvent && this._extraOptions.clickEvent(e); + this.extraOptions.clickEvent && this.extraOptions.clickEvent(e); this._options.showAppointmentPopup(e.itemData.appointment, false, e.itemData.targetedAppointment); } diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts index e462b99d6e8e..a886699802ec 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts @@ -138,10 +138,10 @@ class SchedulerAgenda extends WorkSpace { protected override initWorkSpaceUnits() { this.initGroupTable(); - this._$timePanel = $('').attr('aria-hidden', true).addClass(TIME_PANEL_CLASS); + this.$timePanel = $('
').attr('aria-hidden', true).addClass(TIME_PANEL_CLASS); this._$dateTable = $('
').attr('aria-hidden', true).addClass(DATE_TABLE_CLASS); this._$dateTableScrollableContent = $('
').addClass('dx-scheduler-date-table-scrollable-content'); - this._$dateTableContainer = $('
').addClass('dx-scheduler-date-table-container'); + this.$dateTableContainer = $('
').addClass('dx-scheduler-date-table-container'); } private initGroupTable() { @@ -304,7 +304,7 @@ class SchedulerAgenda extends WorkSpace { protected override cleanView() { this._$dateTable.empty(); - this._$timePanel.empty(); + this.$timePanel.empty(); if (this._$groupTable) { this._$groupTable.empty(); @@ -323,14 +323,14 @@ class SchedulerAgenda extends WorkSpace { } protected override createWorkSpaceStaticElements() { - this._$dateTableContainer.append(this._$dateTable); + this.$dateTableContainer.append(this._$dateTable); this._dateTableScrollable.$content().append(this._$dateTableScrollableContent); if (this._$groupTable) { this._$dateTableScrollableContent.prepend(this._$groupTable); } - this._$dateTableScrollableContent.append(this._$timePanel, this._$dateTableContainer); + this._$dateTableScrollableContent.append(this.$timePanel, this.$dateTableContainer); this.$element().append(this._dateTableScrollable.$element()); } @@ -430,7 +430,7 @@ class SchedulerAgenda extends WorkSpace { protected override renderTimePanel() { this.renderTableBody({ - container: getPublicElement(this._$timePanel), + container: getPublicElement(this.$timePanel), rowCount: this.getTimePanelRowCount(), cellCount: 1, rowClass: TIME_PANEL_ROW_CLASS, 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 e20cc9e8a6a1..ce529c625c80 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts @@ -206,111 +206,123 @@ type WorkspaceOptionsInternal = Omit & { endDayHour: number; }; class SchedulerWorkSpace extends Widget { - _viewDataProvider: any; + private viewDataProviderValue: any; - _cache: any; + private cacheValue: any; - _cellsSelectionState: any; + private cellsSelectionStateValue: any; - _cellsSelectionController: any; + private cellsSelectionControllerValue: any; + // TODO: make private once external usages in shaders, grouped strategies, m_agenda.ts are removed _dateTableScrollable!: Scrollable; - _selectionChangedAction: any; + private selectionChangedAction: any; - _isCellClick: any; + private isCellClick: any; - _contextMenuHandled: any; + private contextMenuHandled: any; _disposed: any; protected getToday?(): Date; + // TODO: make private once external usages in current_time_shader_vertical.ts are removed _$allDayPanel: any; - _$allDayTitle: any; + private $allDayTitle: any; - _$headerPanelEmptyCell: any; + private $headerPanelEmptyCell: any; + // TODO: make private once external usages in m_timeline.ts, m_work_space_indicator.ts are removed _groupedStrategy: any; - virtualScrollingDispatcher: any; + public virtualScrollingDispatcher: any; - _scrollSync: any; + private scrollSync: any; + // TODO: make private once external usages in m_work_space_grouped_strategy_vertical.ts are removed _$headerPanel: any; + // TODO: make private once external usages in m_timeline.ts, m_agenda.ts, m_work_space_month.ts are removed _$dateTable: any; - _$allDayTable: any; + private $allDayTable: any; - renderer: any; + private renderer: any; _createAction: any; - _cellClickAction: any; + private cellClickAction: any; _createActionByOption: any; - _showPopup: any; + private showPopup: any; - NAME: any; + private readonly NAME: any; - _contextMenuAction: any; + private contextMenuAction: any; + // TODO: make private once external usages in m_agenda.ts are removed _$groupTable: any; + // TODO: make private once external usages in m_timeline.ts are removed _$thead: any; - _headerScrollable: any; + private headerScrollable: any; + // TODO: make private once external usages in m_timeline.ts are removed _sidebarScrollable: any; - preventDefaultDragging: any; + private preventDefaultDragging: any; - dragBehavior: any; + public dragBehavior: any; - _$dateTableContainer: any; + protected $dateTableContainer: any; - _$timePanel: any; + protected $timePanel: any; positionHelper!: PositionHelper; + // TODO: make private once external usages in m_work_space_grouped_strategy_vertical.ts are removed _$headerPanelContainer: any; - _$headerTablesContainer: any; + private $headerTablesContainer: any; - _$fixedContainer: any; + private $fixedContainer: any; - _$allDayContainer: any; + private $allDayContainer: any; + // TODO: make private once external usages in m_agenda.ts are removed _$dateTableScrollableContent: any; - _$sidebarScrollableContent: any; + private $sidebarScrollableContent: any; - _allDayTitles!: any[]; + private allDayTitles!: any[]; - _allDayTables!: any[]; + private allDayTables!: any[]; - _allDayPanels!: any[]; + private allDayPanels!: any[]; + // TODO: make private once external usages in m_timeline.ts are removed _$flexContainer: any; + // TODO: make private once external usages in shaders, m_timeline.ts, m_work_space_indicator.ts are removed _shader: any; protected $sidebarTable: any; - _interval: any; + private interval: any; - renovatedAllDayPanel: any; + private renovatedAllDayPanel: any; - renovatedDateTable: any; + public renovatedDateTable: any; - renovatedTimePanel: any; + private renovatedTimePanel: any; - renovatedGroupPanel: any; + private renovatedGroupPanel: any; - renovatedHeaderPanel: any; + public renovatedHeaderPanel: any; readonly viewDirection: 'vertical' | 'horizontal' = 'vertical'; @@ -325,18 +337,18 @@ class SchedulerWorkSpace extends Widget { } get viewDataProvider(): ViewDataProvider { - if (!this._viewDataProvider) { - this._viewDataProvider = new ViewDataProvider(this.type as ViewType); + if (!this.viewDataProviderValue) { + this.viewDataProviderValue = new ViewDataProvider(this.type as ViewType); } - return this._viewDataProvider; + return this.viewDataProviderValue; } get cache() { - if (!this._cache) { - this._cache = new Cache(); + if (!this.cacheValue) { + this.cacheValue = new Cache(); } - return this._cache; + return this.cacheValue; } get resourceManager(): ResourceManager { @@ -344,8 +356,8 @@ class SchedulerWorkSpace extends Widget { } get cellsSelectionState() { - if (!this._cellsSelectionState) { - this._cellsSelectionState = new CellsSelectionState(this.viewDataProvider); + if (!this.cellsSelectionStateValue) { + this.cellsSelectionStateValue = new CellsSelectionState(this.viewDataProvider); const selectedCellsOption: any = this.option('selectedCellData'); @@ -368,19 +380,19 @@ class SchedulerWorkSpace extends Widget { }; }); - this._cellsSelectionState.setSelectedCellsByData(validSelectedCells); + this.cellsSelectionStateValue.setSelectedCellsByData(validSelectedCells); } } - return this._cellsSelectionState; + return this.cellsSelectionStateValue; } get cellsSelectionController() { - if (!this._cellsSelectionController) { - this._cellsSelectionController = new CellsSelectionController(); + if (!this.cellsSelectionControllerValue) { + this.cellsSelectionControllerValue = new CellsSelectionController(); } - return this._cellsSelectionController; + return this.cellsSelectionControllerValue; } get isAllDayPanelVisible() { @@ -430,9 +442,9 @@ class SchedulerWorkSpace extends Widget { const selectedCellsElement = selectedCells.map((cellData) => this.getCellByData(cellData)).filter((cell) => Boolean(cell)); e.target = selectedCellsElement; - this._showPopup = true; + this.showPopup = true; - this._cellClickAction({ event: e, cellElement: $(selectedCellsElement), cellData: selectedCells[0] }); + this.cellClickAction({ event: e, cellElement: $(selectedCellsElement), cellData: selectedCells[0] }); } }; const onArrowPressed = (e, key) => { @@ -544,8 +556,8 @@ class SchedulerWorkSpace extends Widget { if (!this.viewDataProvider.isSameCell(focusedCellData, nextCellData)) { const $cell = nextCellData.allDay && !this.isVerticalGroupedWorkSpace() - ? this.dom_getAllDayPanelCell(nextCellPosition.columnIndex) - : this.dom_getDateCell(nextCellPosition); + ? this.domGetAllDayPanelCell(nextCellPosition.columnIndex) + : this.domGetDateCell(nextCellPosition); const isNextCellAllDay = nextCellData.allDay; this.setSelectedCellsStateAndUpdateSelection(isNextCellAllDay, nextCellPosition, isMultiSelection, $cell); @@ -588,9 +600,9 @@ class SchedulerWorkSpace extends Widget { const isTargetInsideWorkspace = $target.is($focusTarget) || $target.closest($focusTarget).length > 0; - if (isTargetInsideWorkspace && this._isCellClick) { - delete this._isCellClick; - delete this._contextMenuHandled; + if (isTargetInsideWorkspace && this.isCellClick) { + delete this.isCellClick; + delete this.contextMenuHandled; // @ts-expect-error super._focusInHandler.apply(this, arguments); @@ -619,7 +631,7 @@ class SchedulerWorkSpace extends Widget { // @ts-expect-error super._focusOutHandler.apply(this, arguments); - if (!this._contextMenuHandled && !this._disposed) { + if (!this.contextMenuHandled && !this._disposed) { this.cellsSelectionState.releaseSelectedAndFocusedCells(); this.viewDataProvider.updateViewData(this.generateRenderOptions()); @@ -635,7 +647,7 @@ class SchedulerWorkSpace extends Widget { return Boolean(this.option('groups')?.length) && this.option('groupOrientation') === 'vertical'; } - // TODO: make it private. Being used as public method by external code. + // TODO: make private once external usages in shaders, m_timeline.ts are removed _isHorizontalGroupedWorkSpace() { return Boolean(this.option('groups')?.length) && this.option('groupOrientation') === 'horizontal'; } @@ -656,7 +668,7 @@ class SchedulerWorkSpace extends Widget { createRAllDayPanelElements() { this._$allDayPanel = $('
').addClass(ALL_DAY_PANEL_CLASS); - this._$allDayTitle = $('
').appendTo(this._$headerPanelEmptyCell); + this.$allDayTitle = $('
').appendTo(this.$headerPanelEmptyCell); } protected dateTableScrollableConfig() { @@ -714,8 +726,8 @@ class SchedulerWorkSpace extends Widget { onScroll: (event) => { onScroll?.(); - this._scrollSync.sidebar({ top: event.scrollOffset.top }); - this._scrollSync.header({ left: event.scrollOffset.left }); + this.scrollSync.sidebar({ top: event.scrollOffset.top }); + this.scrollSync.header({ left: event.scrollOffset.left }); }, onEnd: () => { (this.option('onScrollEnd') as any)(); @@ -732,7 +744,7 @@ class SchedulerWorkSpace extends Widget { updateManually: true, bounceEnabled: false, onScroll: (event) => { - this._scrollSync.dateTable({ left: event.scrollOffset.left }); + this.scrollSync.dateTable({ left: event.scrollOffset.left }); }, }; } @@ -772,8 +784,8 @@ class SchedulerWorkSpace extends Widget { setWidth(this._$headerPanel, width); setWidth(this._$dateTable, width); - if (this._$allDayTable) { - setWidth(this._$allDayTable, width); + if (this.$allDayTable) { + setWidth(this.$allDayTable, width); } this.attachHeaderTableClasses(); @@ -822,7 +834,7 @@ class SchedulerWorkSpace extends Widget { }); } - // TODO: rename to getCellCount (used externally by strategy classes and shaders) + // TODO: make private once external usages in grouped strategies, shaders, m_timeline.ts are removed _getCellCount() { return this.viewDataProvider.getCellCount({ intervalCount: this.option('intervalCount'), @@ -916,7 +928,7 @@ class SchedulerWorkSpace extends Widget { const timePanelWidth = this.getTimePanelWidth(); const groupPanelWidth = this.getGroupTableWidth(); - this._$headerPanelEmptyCell.css('width', timePanelWidth + groupPanelWidth); + this.$headerPanelEmptyCell.css('width', timePanelWidth + groupPanelWidth); } } @@ -997,24 +1009,24 @@ class SchedulerWorkSpace extends Widget { }); eventsEngine.on($element, SCHEDULER_CELL_DXCLICK_EVENT_NAME, cellSelector, (e) => { const $cell = $(e.target); - that._cellClickAction({ event: e, cellElement: getPublicElement($cell), cellData: that.getCellData($cell) }); + that.cellClickAction({ event: e, cellElement: getPublicElement($cell), cellData: that.getCellData($cell) }); }); } private createCellClickAction() { - this._cellClickAction = this._createActionByOption('onCellClick', { + this.cellClickAction = this._createActionByOption('onCellClick', { afterExecute: (e) => this.cellClickHandler(e.args[0].event), }); } private createSelectionChangedAction() { - this._selectionChangedAction = this._createActionByOption('onSelectionChanged'); + this.selectionChangedAction = this._createActionByOption('onSelectionChanged'); } // eslint-disable-next-line @typescript-eslint/no-unused-vars private cellClickHandler(argument?: any) { - if (this._showPopup) { - delete this._showPopup; + if (this.showPopup) { + delete this.showPopup; this.handleSelectedCellsClick(); } } @@ -1023,13 +1035,13 @@ class SchedulerWorkSpace extends Widget { const $target = $(e.target); if (!$target.hasClass(DATE_TABLE_CELL_CLASS) && !$target.hasClass(ALL_DAY_TABLE_CELL_CLASS)) { - this._isCellClick = false; + this.isCellClick = false; return; } - this._isCellClick = true; + this.isCellClick = true; if ($target.hasClass(DATE_TABLE_FOCUSED_CELL_CLASS)) { - this._showPopup = true; + this.showPopup = true; } else { const cellCoordinates = this.getCoordinatesByCell($target); const isAllDayCell = this.hasAllDayClass($target); @@ -1070,12 +1082,12 @@ class SchedulerWorkSpace extends Widget { private contextMenuHandler(e) { const $cell = $(e.target); - this._contextMenuAction({ event: e, cellElement: getPublicElement($cell), cellData: this.getCellData($cell) }); - this._contextMenuHandled = true; + this.contextMenuAction({ event: e, cellElement: getPublicElement($cell), cellData: this.getCellData($cell) }); + this.contextMenuHandled = true; } private createContextMenuAction() { - this._contextMenuAction = this._createActionByOption('onCellContextMenu'); + this.contextMenuAction = this._createActionByOption('onCellContextMenu'); } protected getGroupHeaderContainer() { @@ -1096,7 +1108,7 @@ class SchedulerWorkSpace extends Widget { protected updateScrollable() { this._dateTableScrollable.update(); - this._headerScrollable?.update(); + this.headerScrollable?.update(); this._sidebarScrollable?.update(); this.updateHeaderPanelScrollbarPadding(); } @@ -1141,7 +1153,7 @@ class SchedulerWorkSpace extends Widget { ); } - // TODO: make it private. Being used as public method by external code. + // TODO: make private once external usages in grouped strategies, shaders, m_subscribes.ts, m_timeline.ts are removed _getGroupCount() { return this.resourceManager.groupCount(); } @@ -1231,7 +1243,7 @@ class SchedulerWorkSpace extends Widget { protected getFormat() { return abstract(); } getWorkArea() { - return this._$dateTableContainer; + return this.$dateTableContainer; } getScrollable() { @@ -1263,7 +1275,7 @@ class SchedulerWorkSpace extends Widget { } getTimePanelWidth() { - return this._$timePanel && getBoundingRect(this._$timePanel.get(0)).width; + return this.$timePanel && getBoundingRect(this.$timePanel.get(0)).width; } getGroupTableWidth() { @@ -1349,10 +1361,10 @@ class SchedulerWorkSpace extends Widget { protected getCellElementByPosition(cellCoordinates, groupIndex, inAllDayRow) { const indexes = this._groupedStrategy.prepareCellIndexes(cellCoordinates, groupIndex, inAllDayRow); - return this.dom_getDateCell(indexes); + return this.domGetDateCell(indexes); } - private dom_getDateCell(position) { + private domGetDateCell(position) { return this._$dateTable .find(`tr:not(.${VIRTUAL_ROW_CLASS})`) .eq(position.rowIndex) @@ -1360,7 +1372,7 @@ class SchedulerWorkSpace extends Widget { .eq(position.columnIndex); } - private dom_getAllDayPanelCell(columnIndex) { + private domGetAllDayPanelCell(columnIndex) { return this._$allDayPanel .find('tr').eq(0) .find('td').eq(columnIndex); @@ -1906,7 +1918,7 @@ class SchedulerWorkSpace extends Widget { // eslint-disable-next-line @typescript-eslint/no-unused-vars private updateSelectedCellDataOption(selectedCellData, $nextFocusedCell?: any) { this.option('selectedCellData', selectedCellData); - this._selectionChangedAction({ selectedCellData }); + this.selectionChangedAction({ selectedCellData }); } private getCellByData(cellData) { @@ -1926,8 +1938,8 @@ class SchedulerWorkSpace extends Widget { } return allDay && !this.isVerticalGroupedWorkSpace() - ? this.dom_getAllDayPanelCell(position.columnIndex) - : this.dom_getDateCell(position); + ? this.domGetAllDayPanelCell(position.columnIndex) + : this.domGetDateCell(position); } // Must replace all DOM manipulations @@ -2011,7 +2023,7 @@ class SchedulerWorkSpace extends Widget { } // TODO: remove along with old render - private oldRender_getAllDayCellData(groupIndex) { + private oldRenderGetAllDayCellData(groupIndex) { return (cell, rowIndex, columnIndex) => { const validColumnIndex = columnIndex % this._getCellCount(); const options = this.getDateGenerationOptions(true); @@ -2124,8 +2136,8 @@ class SchedulerWorkSpace extends Widget { ...this.virtualScrollingDispatcher.horizontalVirtualScrolling?.getRenderState() || {}, }; - utils.renovation.renderComponent(this, this._$allDayTable, AllDayTableComponent, 'renovatedAllDayPanel', options); - utils.renovation.renderComponent(this, this._$allDayTitle, AllDayPanelTitleComponent, 'renovatedAllDayPanelTitle', {}); + utils.renovation.renderComponent(this, this.$allDayTable, AllDayTableComponent, 'renovatedAllDayPanel', options); + utils.renovation.renderComponent(this, this.$allDayTitle, AllDayPanelTitleComponent, 'renovatedAllDayPanelTitle', {}); } this.updateAllDayVisibility(); @@ -2135,7 +2147,7 @@ class SchedulerWorkSpace extends Widget { renderRTimeTable() { utils.renovation.renderComponent( this, - this._$timePanel, + this.$timePanel, TimePanelComponent, 'renovatedTimePanel', { @@ -2434,9 +2446,9 @@ class SchedulerWorkSpace extends Widget { } _init() { - this._scrollSync = {}; - this._viewDataProvider = null; - this._cellsSelectionState = null; + this.scrollSync = {}; + this.viewDataProviderValue = null; + this.cellsSelectionStateValue = null; // @ts-expect-error super._init(); @@ -2460,7 +2472,7 @@ class SchedulerWorkSpace extends Widget { viewStartDayHour: this.option('startDayHour'), viewEndDayHour: this.option('endDayHour'), cellDuration: this.getCellDuration(), - groupedStrategy: this._groupedStrategy, + _groupedStrategy: this._groupedStrategy, isGroupedByDate: this.isGroupedByDate(), rtlEnabled: this.option('rtlEnabled'), startViewDate: this.getStartViewDate(), @@ -2532,16 +2544,16 @@ class SchedulerWorkSpace extends Widget { protected initWorkSpaceUnits() { this._$headerPanelContainer = $('
').addClass('dx-scheduler-header-panel-container'); - this._$headerTablesContainer = $('
').addClass('dx-scheduler-header-tables-container'); + this.$headerTablesContainer = $('
').addClass('dx-scheduler-header-tables-container'); this._$headerPanel = $('
').attr('aria-hidden', true); this._$thead = $('').appendTo(this._$headerPanel); - this._$headerPanelEmptyCell = $('
').addClass('dx-scheduler-header-panel-empty-cell'); - this._$allDayTable = $('
').attr('aria-hidden', true); + this.$headerPanelEmptyCell = $('
').addClass('dx-scheduler-header-panel-empty-cell'); + this.$allDayTable = $('
').attr('aria-hidden', true); - this._$fixedContainer = $('
').addClass(FIXED_CONTAINER_CLASS); - this._$allDayContainer = $('
').addClass(ALL_DAY_CONTAINER_CLASS); + this.$fixedContainer = $('
').addClass(FIXED_CONTAINER_CLASS); + this.$allDayContainer = $('
').addClass(ALL_DAY_CONTAINER_CLASS); this._$dateTableScrollableContent = $('
').addClass('dx-scheduler-date-table-scrollable-content'); - this._$sidebarScrollableContent = $('
').addClass('dx-scheduler-side-bar-scrollable-content'); + this.$sidebarScrollableContent = $('
').addClass('dx-scheduler-side-bar-scrollable-content'); this.initAllDayPanelElements(); @@ -2551,16 +2563,16 @@ class SchedulerWorkSpace extends Widget { this.createAllDayPanelElements(); } - this._$timePanel = $('
').addClass(TIME_PANEL_CLASS).attr('aria-hidden', true); + this.$timePanel = $('
').addClass(TIME_PANEL_CLASS).attr('aria-hidden', true); this._$dateTable = $('
').attr('aria-hidden', true); - this._$dateTableContainer = $('
').addClass('dx-scheduler-date-table-container'); + this.$dateTableContainer = $('
').addClass('dx-scheduler-date-table-container'); this._$groupTable = $('
').addClass(WORKSPACE_VERTICAL_GROUP_TABLE_CLASS); } private initAllDayPanelElements() { - this._allDayTitles = []; - this._allDayTables = []; - this._allDayPanels = []; + this.allDayTitles = []; + this.allDayTables = []; + this.allDayPanels = []; } private initDateTableScrollable() { @@ -2568,7 +2580,7 @@ class SchedulerWorkSpace extends Widget { // @ts-expect-error this._dateTableScrollable = this._createComponent($dateTableScrollable, Scrollable, this.dateTableScrollableConfig()); - this._scrollSync.dateTable = getMemoizeScrollTo(() => this._dateTableScrollable); + this.scrollSync.dateTable = getMemoizeScrollTo(() => this._dateTableScrollable); } protected createWorkSpaceElements() { @@ -2580,50 +2592,50 @@ class SchedulerWorkSpace extends Widget { } protected createWorkSpaceStaticElements() { - this._$dateTableContainer.append(this._$dateTable); + this.$dateTableContainer.append(this._$dateTable); if (this.isVerticalGroupedWorkSpace()) { - this._$dateTableContainer.append(this._$allDayContainer); + this.$dateTableContainer.append(this.$allDayContainer); this._$dateTableScrollableContent.append( this._$groupTable, - this._$timePanel, - this._$dateTableContainer, + this.$timePanel, + this.$dateTableContainer, ); this._dateTableScrollable.$content().append( this._$dateTableScrollableContent, ); - this._$headerTablesContainer.append(this._$headerPanel); + this.$headerTablesContainer.append(this._$headerPanel); } else { this._$dateTableScrollableContent.append( - this._$timePanel, - this._$dateTableContainer, + this.$timePanel, + this.$dateTableContainer, ); this._dateTableScrollable.$content().append(this._$dateTableScrollableContent); - this._$headerTablesContainer.append(this._$headerPanel, this._$allDayPanel); - this._$allDayPanel?.append(this._$allDayContainer, this._$allDayTable); + this.$headerTablesContainer.append(this._$headerPanel, this._$allDayPanel); + this._$allDayPanel?.append(this.$allDayContainer, this.$allDayTable); } this.appendHeaderPanelEmptyCellIfNecessary(); - this._$headerPanelContainer.append(this._$headerTablesContainer); + this._$headerPanelContainer.append(this.$headerTablesContainer); this.$element() - .append(this._$fixedContainer) + .append(this.$fixedContainer) .append(this._$headerPanelContainer) .append(this._dateTableScrollable.$element()); } protected createWorkSpaceScrollableElements() { - this.$element().append(this._$fixedContainer); + this.$element().append(this.$fixedContainer); this._$flexContainer = $('
').addClass('dx-scheduler-work-space-flex-container'); this.createHeaderScrollable(); - this._headerScrollable.$content().append(this._$headerPanel); + this.headerScrollable.$content().append(this._$headerPanel); this.appendHeaderPanelEmptyCellIfNecessary(); - this._$headerPanelContainer.append(this._$headerTablesContainer); + this._$headerPanelContainer.append(this.$headerTablesContainer); this.$element().append(this._$headerPanelContainer); this.$element().append(this._$flexContainer); @@ -2631,35 +2643,35 @@ class SchedulerWorkSpace extends Widget { this.createSidebarScrollable(); this._$flexContainer.append(this._dateTableScrollable.$element()); - this._$dateTableContainer.append(this._$dateTable); - this._$dateTableScrollableContent.append(this._$dateTableContainer); + this.$dateTableContainer.append(this._$dateTable); + this._$dateTableScrollableContent.append(this.$dateTableContainer); this._dateTableScrollable.$content().append(this._$dateTableScrollableContent); if (this.isVerticalGroupedWorkSpace()) { - this._$dateTableContainer.append(this._$allDayContainer); - this._$sidebarScrollableContent.append(this._$groupTable, this._$timePanel); + this.$dateTableContainer.append(this.$allDayContainer); + this.$sidebarScrollableContent.append(this._$groupTable, this.$timePanel); } else { - this._headerScrollable.$content().append(this._$allDayPanel); - this._$allDayPanel?.append(this._$allDayContainer, this._$allDayTable); - this._$sidebarScrollableContent.append(this._$timePanel); + this.headerScrollable.$content().append(this._$allDayPanel); + this._$allDayPanel?.append(this.$allDayContainer, this.$allDayTable); + this.$sidebarScrollableContent.append(this.$timePanel); } - this._sidebarScrollable.$content().append(this._$sidebarScrollableContent); + this._sidebarScrollable.$content().append(this.$sidebarScrollableContent); } private appendHeaderPanelEmptyCellIfNecessary() { - this.isRenderHeaderPanelEmptyCell() && this._$headerPanelContainer.append(this._$headerPanelEmptyCell); + this.isRenderHeaderPanelEmptyCell() && this._$headerPanelContainer.append(this.$headerPanelEmptyCell); } private createHeaderScrollable() { const $headerScrollable = $('
') .addClass(SCHEDULER_HEADER_SCROLLABLE_CLASS) - .appendTo(this._$headerTablesContainer); + .appendTo(this.$headerTablesContainer); // @ts-expect-error - this._headerScrollable = this._createComponent($headerScrollable, Scrollable, this.headerScrollableConfig()); - this._scrollSync.header = getMemoizeScrollTo(() => this._headerScrollable); + this.headerScrollable = this._createComponent($headerScrollable, Scrollable, this.headerScrollableConfig()); + this.scrollSync.header = getMemoizeScrollTo(() => this.headerScrollable); } private createSidebarScrollable() { @@ -2676,10 +2688,10 @@ class SchedulerWorkSpace extends Widget { updateManually: true, bounceEnabled: false, onScroll: (event) => { - this._scrollSync.dateTable({ top: event.scrollOffset.top }); + this.scrollSync.dateTable({ top: event.scrollOffset.top }); }, }); - this._scrollSync.sidebar = getMemoizeScrollTo(() => this._sidebarScrollable); + this.scrollSync.sidebar = getMemoizeScrollTo(() => this._sidebarScrollable); } private attachTableClasses() { @@ -2689,10 +2701,10 @@ class SchedulerWorkSpace extends Widget { const groupCount = this._getGroupCount(); for (let i = 0; i < groupCount; i++) { - this.addTableClass(this._allDayTables[i], ALL_DAY_TABLE_CLASS); + this.addTableClass(this.allDayTables[i], ALL_DAY_TABLE_CLASS); } } else if (!this.isRenovatedRender()) { - this.addTableClass(this._$allDayTable, ALL_DAY_TABLE_CLASS); + this.addTableClass(this.$allDayTable, ALL_DAY_TABLE_CLASS); } } @@ -2809,7 +2821,7 @@ class SchedulerWorkSpace extends Widget { } private getDateTables() { - return this._$dateTable.add(this._$allDayTable); + return this._$dateTable.add(this.$allDayTable); } private getDateTable() { @@ -2817,8 +2829,8 @@ class SchedulerWorkSpace extends Widget { } private removeAllDayElements() { - this._$allDayTable?.remove(); - this._$allDayTitle?.remove(); + this.$allDayTable?.remove(); + this.$allDayTitle?.remove(); } protected cleanView(): void { @@ -2828,16 +2840,16 @@ class SchedulerWorkSpace extends Widget { if (!this.isRenovatedRender()) { this._$thead.empty(); this._$dateTable.empty(); - this._$timePanel.empty(); + this.$timePanel.empty(); this._$groupTable.empty(); - this._$allDayTable?.empty(); + this.$allDayTable?.empty(); this.$sidebarTable?.empty(); } this._shader?.clean(); - delete this._interval; + delete this.interval; } _clean() { @@ -2851,7 +2863,7 @@ class SchedulerWorkSpace extends Widget { private cleanTableWidths() { this._$headerPanel.css('width', ''); this._$dateTable.css('width', ''); - this._$allDayTable?.css('width', ''); + this.$allDayTable?.css('width', ''); } private disposeRenovatedComponents() { @@ -2876,11 +2888,11 @@ class SchedulerWorkSpace extends Widget { } getFixedContainer() { - return this._$fixedContainer; + return this.$fixedContainer; } getAllDayContainer() { - return this._$allDayContainer; + return this.$allDayContainer; } updateRender() { @@ -2909,28 +2921,28 @@ class SchedulerWorkSpace extends Widget { .addClass(ALL_DAY_TITLE_CLASS) .text(messageLocalization.format('dxScheduler-allDay')); - this._allDayTitles.push($allDayTitle); + this.allDayTitles.push($allDayTitle); - this._$allDayTable = $('
').attr('aria-hidden', true); - this._allDayTables.push(this._$allDayTable); + this.$allDayTable = $('
').attr('aria-hidden', true); + this.allDayTables.push(this.$allDayTable); this._$allDayPanel = $('
') .addClass(ALL_DAY_PANEL_CLASS) - .append(this._$allDayTable); + .append(this.$allDayTable); - this._allDayPanels.push(this._$allDayPanel); + this.allDayPanels.push(this._$allDayPanel); } } else { - this._$allDayTitle = $('
') + this.$allDayTitle = $('
') .addClass(ALL_DAY_TITLE_CLASS) .text(messageLocalization.format('dxScheduler-allDay')) .appendTo(this.$element()); - this._$allDayTable = $('
').attr('aria-hidden', true); + this.$allDayTable = $('
').attr('aria-hidden', true); this._$allDayPanel = $('
') .addClass(ALL_DAY_PANEL_CLASS) - .append(this._$allDayTable); + .append(this.$allDayTable); } } @@ -3091,14 +3103,14 @@ class SchedulerWorkSpace extends Widget { } const cellTemplates = this.renderTableBody({ - container: this._allDayPanels.length ? getPublicElement(this._allDayTables[index]) : getPublicElement(this._$allDayTable), + container: this.allDayPanels.length ? getPublicElement(this.allDayTables[index]) : getPublicElement(this.$allDayTable), rowCount: 1, cellCount, cellClass: this.getAllDayPanelCellClass.bind(this), rowClass: ALL_DAY_TABLE_ROW_CLASS, cellTemplate: this.option('dataCellTemplate'), // TODO: remove along with old render - getCellData: this.oldRender_getAllDayCellData(index), + getCellData: this.oldRenderGetAllDayCellData(index), groupIndex: index, }, true); @@ -3152,7 +3164,7 @@ class SchedulerWorkSpace extends Widget { }; this.renderTableBody({ - container: getPublicElement(this._$timePanel), + container: getPublicElement(this.$timePanel), rowCount: this.getTimePanelRowCount() * repeatCount, cellCount: 1, cellClass: this.getTimeCellClass.bind(this), @@ -3161,7 +3173,7 @@ class SchedulerWorkSpace extends Widget { getCellText: (rowIndex) => getData(rowIndex, 'text'), getCellDate: (rowIndex) => getData(rowIndex, 'startDate'), groupCount: this._getCellCount(), - allDayElements: this.insertAllDayRowsIntoDateTable() ? this._allDayTitles : undefined, + allDayElements: this.insertAllDayRowsIntoDateTable() ? this.allDayTitles : undefined, getTemplateData: getTimeCellGroups.bind(this), }); } @@ -3202,7 +3214,7 @@ class SchedulerWorkSpace extends Widget { key: CELL_DATA, }; }, - allDayElements: this.insertAllDayRowsIntoDateTable() ? this._allDayPanels : undefined, + allDayElements: this.insertAllDayRowsIntoDateTable() ? this.allDayPanels : undefined, groupCount, groupByDate: this.option('groupByDate'), }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/keyboardNavigation.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/keyboardNavigation.tests.js index 9dcf6abff81f..67b6b86de713 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/keyboardNavigation.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/keyboardNavigation.tests.js @@ -88,13 +88,13 @@ QUnit.module('Keyboard Navigation', { }); scheduler.appointments.compact.click(); - assert.notOk(scheduler.instance.appointmentTooltip._list.option('focusStateEnabled'), 'focusStateEnabled was passed correctly'); + assert.notOk(scheduler.instance.appointmentTooltip.list.option('focusStateEnabled'), 'focusStateEnabled was passed correctly'); scheduler.instance.appointmentTooltip.hide(); scheduler.instance.option('focusStateEnabled', true); scheduler.appointments.compact.click(); - assert.ok(scheduler.instance.appointmentTooltip._list.option('focusStateEnabled'), 'focusStateEnabled was passed correctly'); + assert.ok(scheduler.instance.appointmentTooltip.list.option('focusStateEnabled'), 'focusStateEnabled was passed correctly'); }); QUnit.test('Workspace navigation by arrows should work correctly with opened dropDown appointments', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js index 0dacd9ee746c..92fe4294faa8 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js @@ -997,7 +997,7 @@ module('Renovated Render', { showAllDayPanel: true, }, 'dxSchedulerWorkSpaceWeek'); - assert.ok(this.instance._$allDayTable, 'All-day panel has been initialized'); + assert.ok(this.instance.$allDayTable, 'All-day panel has been initialized'); }); // Remove after complete workspace renovation