UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

665 lines (644 loc) • 95.5 kB
/** * DevExtreme (cjs/renovation/ui/scheduler/workspaces/base/work_space.js) * Version: 22.1.9 * Build date: Tue Apr 18 2023 * * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ "use strict"; function _typeof(obj) { return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { return typeof obj } : function(obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj }, _typeof(obj) } exports.viewFunction = exports.prepareGenerationOptions = exports.WorkSpace = void 0; var _inferno = require("inferno"); var _inferno2 = require("@devextreme/runtime/inferno"); var _subscribe_to_event = require("../../../../utils/subscribe_to_event"); var _combine_classes = require("../../../../utils/combine_classes"); var _ordinary_layout = require("./ordinary_layout"); var _uiScheduler = require("../../../../../ui/scheduler/workspaces/ui.scheduler.virtual_scrolling"); var _view_data_provider = _interopRequireDefault(require("../../../../../ui/scheduler/workspaces/view_model/view_data_provider")); var _utils = require("./utils"); var _props = require("../props"); var _work_space_config = require("./work_space_config"); var _utils2 = require("../utils"); var _cross_scrolling_layout = require("./cross_scrolling_layout"); var _utils3 = require("../../../../../ui/scheduler/workspaces/view_model/utils"); var _base = require("../../view_model/to_test/views/utils/base"); var _date_header_data_generator = require("../../../../../ui/scheduler/workspaces/view_model/date_header_data_generator"); var _time_panel_data_generator = require("../../../../../ui/scheduler/workspaces/view_model/time_panel_data_generator"); var _cells_selection_controller = require("../../../../../ui/scheduler/workspaces/cells_selection_controller"); var _utils4 = require("../../view_model/group_panel/utils"); var _window = require("../../../../../core/utils/window"); var _dom_adapter = _interopRequireDefault(require("../../../../../core/dom_adapter")); var _config_context = require("../../../../common/config_context"); var _pointer = _interopRequireDefault(require("../../../../../events/pointer")); var _events_engine = _interopRequireDefault(require("../../../../../events/core/events_engine")); var _index = require("../../../../../events/utils/index"); var _const = require("../const"); var _diagnostic = require("../../../../utils/diagnostic"); var _excluded = ["accessKey", "activeStateEnabled", "allDayAppointments", "allDayPanelExpanded", "allDayPanelMode", "allowMultipleCellSelection", "appointmentCollectorTemplate", "appointmentTemplate", "appointments", "cellDuration", "className", "crossScrollingEnabled", "currentDate", "dataCellTemplate", "dateCellTemplate", "disabled", "endDayHour", "firstDayOfWeek", "focusStateEnabled", "groupByDate", "groupOrientation", "groups", "height", "hint", "hoursInterval", "hoverStateEnabled", "indicatorTime", "indicatorUpdateInterval", "intervalCount", "maxAppointmentsPerCell", "onClick", "onKeyDown", "onViewRendered", "resourceCellTemplate", "rtlEnabled", "schedulerHeight", "schedulerWidth", "scrolling", "selectedCellData", "shadeUntilCurrentTime", "showAllDayPanel", "showCurrentTimeIndicator", "startDate", "startDayHour", "startViewDate", "tabIndex", "timeCellTemplate", "type", "visible", "width"]; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj } } function _objectWithoutProperties(source, excluded) { if (null == source) { return {} } var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) { continue } if (!Object.prototype.propertyIsEnumerable.call(source, key)) { continue } target[key] = source[key] } } return target } function _objectWithoutPropertiesLoose(source, excluded) { if (null == source) { return {} } var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) { continue } target[key] = source[key] } return target } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }) } else { obj[key] = value } return obj } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest() } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") } function _unsupportedIterableToArray(o, minLen) { if (!o) { return } if ("string" === typeof o) { return _arrayLikeToArray(o, minLen) } var n = Object.prototype.toString.call(o).slice(8, -1); if ("Object" === n && o.constructor) { n = o.constructor.name } if ("Map" === n || "Set" === n) { return Array.from(o) } if ("Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) { return _arrayLikeToArray(o, minLen) } } function _arrayLikeToArray(arr, len) { if (null == len || len > arr.length) { len = arr.length } for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i] } return arr2 } function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) { return } _n = !1 } else { for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {} } } catch (err) { _d = !0, _e = err } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) { return } } finally { if (_d) { throw _e } } } return _arr } } function _arrayWithHoles(arr) { if (Array.isArray(arr)) { return arr } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) { descriptor.writable = true } Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor) } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) { _defineProperties(Constructor.prototype, protoProps) } if (staticProps) { _defineProperties(Constructor, staticProps) } Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor } function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return "symbol" === _typeof(key) ? key : String(key) } function _toPrimitive(input, hint) { if ("object" !== _typeof(input) || null === input) { return input } var prim = input[Symbol.toPrimitive]; if (void 0 !== prim) { var res = prim.call(input, hint || "default"); if ("object" !== _typeof(res)) { return res } throw new TypeError("@@toPrimitive must return a primitive value.") } return ("string" === hint ? String : Number)(input) } function _assertThisInitialized(self) { if (void 0 === self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return self } function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass) } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) { o.__proto__ = p; return o }; return _setPrototypeOf(o, p) } function _extends() { _extends = Object.assign ? Object.assign.bind() : function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key] } } } return target }; return _extends.apply(this, arguments) } var DATA_CELL_SELECTOR = ".".concat(_const.DATE_TABLE_CELL_CLASS, ", .").concat(_const.ALL_DAY_PANEL_CELL_CLASS); var defaultVirtualScrollingMetaData = { cellHeight: 50, cellWidth: _utils.DATE_TABLE_MIN_CELL_WIDTH, viewWidth: 300, viewHeight: 300, scrollableWidth: 300, windowHeight: 300, windowWidth: 300 }; var calculateDefaultVirtualScrollingState = function(options) { var completeColumnCount = options.completeViewDataMap[0].length; var completeRowCount = options.completeViewDataMap.length; options.virtualScrollingDispatcher.setViewOptions((0, _utils.createVirtualScrollingOptions)({ cellHeight: defaultVirtualScrollingMetaData.cellHeight, cellWidth: defaultVirtualScrollingMetaData.cellWidth, schedulerHeight: options.schedulerHeight, schedulerWidth: options.schedulerWidth, viewHeight: defaultVirtualScrollingMetaData.viewHeight, viewWidth: defaultVirtualScrollingMetaData.viewWidth, scrolling: options.scrolling, scrollableWidth: defaultVirtualScrollingMetaData.scrollableWidth, groups: options.groups, isVerticalGrouping: options.isVerticalGrouping, completeRowCount: completeRowCount, completeColumnCount: completeColumnCount, windowHeight: defaultVirtualScrollingMetaData.windowHeight, windowWidth: defaultVirtualScrollingMetaData.windowWidth, rtlEnabled: options.rtlEnabled })); options.virtualScrollingDispatcher.createVirtualScrolling(); options.virtualScrollingDispatcher.updateDimensions(true); return options.virtualScrollingDispatcher.getRenderState() }; var prepareGenerationOptions = function(workSpaceProps, renderConfig, isAllDayPanelVisible, virtualStartIndices) { var cellDuration = workSpaceProps.cellDuration, currentDate = workSpaceProps.currentDate, endDayHour = workSpaceProps.endDayHour, firstDayOfWeek = workSpaceProps.firstDayOfWeek, groupByDate = workSpaceProps.groupByDate, groupOrientation = workSpaceProps.groupOrientation, groups = workSpaceProps.groups, hoursInterval = workSpaceProps.hoursInterval, intervalCount = workSpaceProps.intervalCount, startDate = workSpaceProps.startDate, startDayHour = workSpaceProps.startDayHour, type = workSpaceProps.type; var getDateForHeaderText = renderConfig.getDateForHeaderText, headerCellTextFormat = renderConfig.headerCellTextFormat, isGenerateWeekDaysHeaderData = renderConfig.isGenerateWeekDaysHeaderData, isProvideVirtualCellsWidth = renderConfig.isProvideVirtualCellsWidth, isRenderTimePanel = renderConfig.isRenderTimePanel; return { startRowIndex: virtualStartIndices.startRowIndex, startCellIndex: virtualStartIndices.startCellIndex, groupOrientation: groupOrientation, groupByDate: groupByDate, groups: groups, isProvideVirtualCellsWidth: isProvideVirtualCellsWidth, isAllDayPanelVisible: isAllDayPanelVisible, selectedCells: void 0, focusedCell: void 0, headerCellTextFormat: headerCellTextFormat, getDateForHeaderText: getDateForHeaderText, startDayHour: startDayHour, endDayHour: endDayHour, cellDuration: cellDuration, viewType: type, intervalCount: intervalCount, hoursInterval: hoursInterval, currentDate: currentDate, startDate: startDate, firstDayOfWeek: firstDayOfWeek, isGenerateTimePanelData: isRenderTimePanel, isGenerateWeekDaysHeaderData: isGenerateWeekDaysHeaderData } }; exports.prepareGenerationOptions = prepareGenerationOptions; var viewFunction = function(_ref) { var allDayPanelRef = _ref.allDayPanelRef, classes = _ref.classes, dateHeaderData = _ref.dateHeaderData, dateTableRef = _ref.dateTableRef, groupOrientation = _ref.groupOrientation, groupPanelData = _ref.groupPanelData, groupPanelHeight = _ref.groupPanelHeight, groupPanelRef = _ref.groupPanelRef, headerEmptyCellWidth = _ref.headerEmptyCellWidth, isAllDayPanelVisible = _ref.isAllDayPanelVisible, isGroupedByDate = _ref.isGroupedByDate, isRenderHeaderEmptyCell = _ref.isRenderHeaderEmptyCell, isStandaloneAllDayPanel = _ref.isStandaloneAllDayPanel, isVerticalGrouping = _ref.isVerticalGrouping, layoutRef = _ref.layoutRef, onScrollableScroll = _ref.onScrollableScroll, _ref$props = _ref.props, allDayAppointments = _ref$props.allDayAppointments, allDayPanelExpanded = _ref$props.allDayPanelExpanded, appointments = _ref$props.appointments, dataCellTemplate = _ref$props.dataCellTemplate, dateCellTemplate = _ref$props.dateCellTemplate, groups = _ref$props.groups, intervalCount = _ref$props.intervalCount, resourceCellTemplate = _ref$props.resourceCellTemplate, timeCellTemplate = _ref$props.timeCellTemplate, _ref$renderConfig = _ref.renderConfig, groupPanelClassName = _ref$renderConfig.groupPanelClassName, isCreateCrossScrolling = _ref$renderConfig.isCreateCrossScrolling, isRenderDateHeader = _ref$renderConfig.isRenderDateHeader, isRenderTimePanel = _ref$renderConfig.isRenderTimePanel, isUseMonthDateTable = _ref$renderConfig.isUseMonthDateTable, isUseTimelineHeader = _ref$renderConfig.isUseTimelineHeader, scrollingDirection = _ref$renderConfig.scrollingDirection, tablesWidth = _ref.tablesWidth, timePanelData = _ref.timePanelData, timePanelRef = _ref.timePanelRef, viewData = _ref.viewData, widgetElementRef = _ref.widgetElementRef; var Layout = isCreateCrossScrolling ? _cross_scrolling_layout.CrossScrollingLayout : _ordinary_layout.OrdinaryLayout; return (0, _inferno.createComponentVNode)(2, Layout, { viewData: viewData, dateHeaderData: dateHeaderData, timePanelData: timePanelData, groupPanelData: groupPanelData, dataCellTemplate: dataCellTemplate, dateCellTemplate: dateCellTemplate, timeCellTemplate: timeCellTemplate, resourceCellTemplate: resourceCellTemplate, groups: groups, groupByDate: isGroupedByDate, groupOrientation: groupOrientation, groupPanelClassName: groupPanelClassName, intervalCount: intervalCount, isUseMonthDateTable: isUseMonthDateTable, isUseTimelineHeader: isUseTimelineHeader, isRenderTimePanel: isRenderTimePanel, isAllDayPanelCollapsed: !allDayPanelExpanded, isAllDayPanelVisible: isAllDayPanelVisible, isRenderDateHeader: isRenderDateHeader, isRenderHeaderEmptyCell: isRenderHeaderEmptyCell, isRenderGroupPanel: isVerticalGrouping, isStandaloneAllDayPanel: isStandaloneAllDayPanel, scrollingDirection: scrollingDirection, groupPanelHeight: groupPanelHeight, headerEmptyCellWidth: headerEmptyCellWidth, tablesWidth: tablesWidth, onScroll: onScrollableScroll, className: classes, dateTableRef: dateTableRef, allDayPanelRef: allDayPanelRef, timePanelRef: timePanelRef, groupPanelRef: groupPanelRef, widgetElementRef: widgetElementRef, appointments: appointments, allDayAppointments: allDayAppointments }, null, layoutRef) }; exports.viewFunction = viewFunction; var getTemplate = function(TemplateProp) { return TemplateProp && (TemplateProp.defaultProps ? function(props) { return (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, TemplateProp, _extends({}, props))) } : TemplateProp) }; var WorkSpace = function(_InfernoComponent) { _inheritsLoose(WorkSpace, _InfernoComponent); function WorkSpace(props) { var _this; _this = _InfernoComponent.call(this, props) || this; _this.dateTableRef = (0, _inferno.createRef)(); _this.allDayPanelRef = (0, _inferno.createRef)(); _this.timePanelRef = (0, _inferno.createRef)(); _this.groupPanelRef = (0, _inferno.createRef)(); _this.layoutRef = (0, _inferno.createRef)(); _this.widgetElementRef = (0, _inferno.createRef)(); _this.__getterCache = {}; _this.state = { groupPanelHeight: void 0, headerEmptyCellWidth: void 0, tablesWidth: void 0, virtualScrolling: new _uiScheduler.VirtualScrollingDispatcher, virtualScrollingData: void 0, cellsSelectionState: null, isPointerDown: false }; _this.diagnosticEffect = _this.diagnosticEffect.bind(_assertThisInitialized(_this)); _this.headerEmptyCellWidthEffect = _this.headerEmptyCellWidthEffect.bind(_assertThisInitialized(_this)); _this.tablesWidthEffect = _this.tablesWidthEffect.bind(_assertThisInitialized(_this)); _this.virtualScrollingMetaDataEffect = _this.virtualScrollingMetaDataEffect.bind(_assertThisInitialized(_this)); _this.groupPanelHeightEffect = _this.groupPanelHeightEffect.bind(_assertThisInitialized(_this)); _this.onWindowScrollEffect = _this.onWindowScrollEffect.bind(_assertThisInitialized(_this)); _this.pointerEventsEffect = _this.pointerEventsEffect.bind(_assertThisInitialized(_this)); _this.onViewRendered = _this.onViewRendered.bind(_assertThisInitialized(_this)); _this.pointerUpEffect = _this.pointerUpEffect.bind(_assertThisInitialized(_this)); _this.createDateTableElementsMeta = _this.createDateTableElementsMeta.bind(_assertThisInitialized(_this)); _this.createAllDayPanelElementsMeta = _this.createAllDayPanelElementsMeta.bind(_assertThisInitialized(_this)); _this.onWindowScroll = _this.onWindowScroll.bind(_assertThisInitialized(_this)); _this.onScrollableScroll = _this.onScrollableScroll.bind(_assertThisInitialized(_this)); _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this)); _this.onPointerDown = _this.onPointerDown.bind(_assertThisInitialized(_this)); _this.onPointerUp = _this.onPointerUp.bind(_assertThisInitialized(_this)); _this.onPointerMove = _this.onPointerMove.bind(_assertThisInitialized(_this)); return _this } var _proto = WorkSpace.prototype; _proto.createEffects = function() { return [new _inferno2.InfernoEffect(this.diagnosticEffect, [this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]), new _inferno2.InfernoEffect(this.headerEmptyCellWidthEffect, [this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]), new _inferno2.InfernoEffect(this.tablesWidthEffect, [this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]), new _inferno2.InfernoEffect(this.virtualScrollingMetaDataEffect, [this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]), new _inferno2.InfernoEffect(this.groupPanelHeightEffect, [this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]), new _inferno2.InfernoEffect(this.onWindowScrollEffect, [this.state.virtualScrolling, this.state.virtualScrollingData]), new _inferno2.InfernoEffect(this.pointerEventsEffect, [this.props.cellDuration, this.props.currentDate, this.props.endDayHour, this.props.firstDayOfWeek, this.props.groups, this.props.hoursInterval, this.props.intervalCount, this.props.startDate, this.props.startDayHour, this.props.type, this.props.groupByDate, this.props.startViewDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.showAllDayPanel, this.state.virtualScrollingData, this.props.schedulerHeight, this.props.schedulerWidth, this.props.scrolling, this.state.virtualScrolling, this.state.isPointerDown, this.state.cellsSelectionState]), new _inferno2.InfernoEffect(this.onViewRendered, [this.props.allDayPanelExpanded, this.props.cellDuration, this.props.crossScrollingEnabled, this.props.currentDate, this.props.endDayHour, this.props.firstDayOfWeek, this.props.groupByDate, this.props.groupOrientation, this.props.type, this.props.intervalCount, this.props.groups, this.props.hoursInterval, this.props.onViewRendered, this.props.scrolling, this.props.showAllDayPanel, this.props.startDate, this.props.startDayHour, this.props.startViewDate, this.state.virtualScrollingData, this.props.schedulerHeight, this.props.schedulerWidth, this.state.virtualScrolling, this.state.tablesWidth]), new _inferno2.InfernoEffect(this.pointerUpEffect, [])] }; _proto.updateEffects = function() { var _this$_effects$, _this$_effects$2, _this$_effects$3, _this$_effects$4, _this$_effects$5, _this$_effects$6, _this$_effects$7, _this$_effects$8; null === (_this$_effects$ = this._effects[0]) || void 0 === _this$_effects$ ? void 0 : _this$_effects$.update([this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]); null === (_this$_effects$2 = this._effects[1]) || void 0 === _this$_effects$2 ? void 0 : _this$_effects$2.update([this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]); null === (_this$_effects$3 = this._effects[2]) || void 0 === _this$_effects$3 ? void 0 : _this$_effects$3.update([this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]); null === (_this$_effects$4 = this._effects[3]) || void 0 === _this$_effects$4 ? void 0 : _this$_effects$4.update([this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]); null === (_this$_effects$5 = this._effects[4]) || void 0 === _this$_effects$5 ? void 0 : _this$_effects$5.update([this.props, this.state.groupPanelHeight, this.state.headerEmptyCellWidth, this.state.tablesWidth, this.state.virtualScrolling, this.state.virtualScrollingData, this.state.cellsSelectionState, this.state.isPointerDown, this.config, this.props.dataCellTemplate, this.props.dateCellTemplate, this.props.timeCellTemplate, this.props.resourceCellTemplate, this.props.appointmentTemplate, this.props.appointmentCollectorTemplate, this.props.intervalCount, this.props.groups, this.props.groupByDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.startDayHour, this.props.endDayHour, this.props.firstDayOfWeek, this.props.currentDate, this.props.startDate, this.props.startViewDate, this.props.hoursInterval, this.props.showAllDayPanel, this.props.allDayPanelExpanded, this.props.allowMultipleCellSelection, this.props.indicatorTime, this.props.indicatorUpdateInterval, this.props.shadeUntilCurrentTime, this.props.selectedCellData, this.props.scrolling, this.props.cellDuration, this.props.showCurrentTimeIndicator, this.props.schedulerHeight, this.props.schedulerWidth, this.props.type, this.props.maxAppointmentsPerCell, this.props.allDayPanelMode, this.props.onViewRendered, this.props.appointments, this.props.allDayAppointments, this.props.className, this.props.accessKey, this.props.activeStateEnabled, this.props.disabled, this.props.focusStateEnabled, this.props.height, this.props.hint, this.props.hoverStateEnabled, this.props.onClick, this.props.onKeyDown, this.props.rtlEnabled, this.props.tabIndex, this.props.visible, this.props.width]); null === (_this$_effects$6 = this._effects[5]) || void 0 === _this$_effects$6 ? void 0 : _this$_effects$6.update([this.state.virtualScrolling, this.state.virtualScrollingData]); null === (_this$_effects$7 = this._effects[6]) || void 0 === _this$_effects$7 ? void 0 : _this$_effects$7.update([this.props.cellDuration, this.props.currentDate, this.props.endDayHour, this.props.firstDayOfWeek, this.props.groups, this.props.hoursInterval, this.props.intervalCount, this.props.startDate, this.props.startDayHour, this.props.type, this.props.groupByDate, this.props.startViewDate, this.props.groupOrientation, this.props.crossScrollingEnabled, this.props.showAllDayPanel, this.state.virtualScrollingData, this.props.schedulerHeight, this.props.schedulerWidth, this.props.scrolling, this.state.virtualScrolling, this.state.isPointerDown, this.state.cellsSelectionState]); null === (_this$_effects$8 = this._effects[7]) || void 0 === _this$_effects$8 ? void 0 : _this$_effects$8.update([this.props.allDayPanelExpanded, this.props.cellDuration, this.props.crossScrollingEnabled, this.props.currentDate, this.props.endDayHour, this.props.firstDayOfWeek, this.props.groupByDate, this.props.groupOrientation, this.props.type, this.props.intervalCount, this.props.groups, this.props.hoursInterval, this.props.onViewRendered, this.props.scrolling, this.props.showAllDayPanel, this.props.startDate, this.props.startDayHour, this.props.startViewDate, this.state.virtualScrollingData, this.props.schedulerHeight, this.props.schedulerWidth, this.state.virtualScrolling, this.state.tablesWidth]) }; _proto.diagnosticEffect = function() { _diagnostic.DiagnosticUtils.incrementRenderCount("scheduler_workspace") }; _proto.headerEmptyCellWidthEffect = function() { var _this$timePanelRef$cu, _this$timePanelRef$cu2, _this$groupPanelRef$c, _this$groupPanelRef$c2; var timePanelWidth = null !== (_this$timePanelRef$cu = null === (_this$timePanelRef$cu2 = this.timePanelRef.current) || void 0 === _this$timePanelRef$cu2 ? void 0 : _this$timePanelRef$cu2.getBoundingClientRect().width) && void 0 !== _this$timePanelRef$cu ? _this$timePanelRef$cu : 0; var groupPanelWidth = null !== (_this$groupPanelRef$c = null === (_this$groupPanelRef$c2 = this.groupPanelRef.current) || void 0 === _this$groupPanelRef$c2 ? void 0 : _this$groupPanelRef$c2.getBoundingClientRect().width) && void 0 !== _this$groupPanelRef$c ? _this$groupPanelRef$c : 0; this.setState((function(__state_argument) { return { headerEmptyCellWidth: timePanelWidth + groupPanelWidth } })) }; _proto.tablesWidthEffect = function() { var _this2 = this; if (this.isCalculateTablesWidth) { var _this$props = this.props, currentDate = _this$props.currentDate, endDayHour = _this$props.endDayHour, groups = _this$props.groups, hoursInterval = _this$props.hoursInterval, intervalCount = _this$props.intervalCount, startDayHour = _this$props.startDayHour, viewType = _this$props.type; this.setState((function(__state_argument) { return { tablesWidth: (0, _utils.getDateTableWidth)(_this2.layoutRef.current.getScrollableWidth(), _this2.dateTableRef.current, _this2.viewDataProvider, { intervalCount: intervalCount, currentDate: currentDate, viewType: viewType, hoursInterval: hoursInterval, startDayHour: startDayHour, endDayHour: endDayHour, groups: groups, groupOrientation: _this2.groupOrientation }) } })) } }; _proto.virtualScrollingMetaDataEffect = function() { var _this3 = this; var dateTableCell = this.dateTableRef.current.querySelector("td:not(.dx-scheduler-virtual-cell)"); var cellRect = dateTableCell.getBoundingClientRect(); var cellHeight = Math.floor(cellRect.height); var cellWidth = Math.floor(cellRect.width); var scrollableWidth = this.layoutRef.current.getScrollableWidth(); var widgetRect = this.widgetElementRef.current.getBoundingClientRect(); var viewHeight = widgetRect.height; var viewWidth = widgetRect.width; var windowHeight = (0, _window.getWindow)().innerHeight; var windowWidth = (0, _window.getWindow)().innerWidth; var nextSizes = { cellHeight: cellHeight, cellWidth: cellWidth, scrollableWidth: scrollableWidth, viewHeight: viewHeight, viewWidth: viewWidth, windowHeight: windowHeight, windowWidth: windowWidth }; var isNextMetaDataNotEqualToCurrent = !this.state.virtualScrollingData || Object.entries(nextSizes).some((function(_ref2) { var _ref3 = _slicedToArray(_ref2, 2), key = _ref3[0], value = _ref3[1]; return value !== _this3.state.virtualScrollingData.sizes[key] })); if (isNextMetaDataNotEqualToCurrent) { var _this$config; var _this$props2 = this.props, groups = _this$props2.groups, schedulerHeight = _this$props2.schedulerHeight, schedulerWidth = _this$props2.schedulerWidth, scrolling = _this$props2.scrolling; var completeColumnCount = this.completeViewDataMap[0].length; var completeRowCount = this.completeViewDataMap.length; this.state.virtualScrolling.setViewOptions((0, _utils.createVirtualScrollingOptions)({ cellHeight: nextSizes.cellHeight, cellWidth: nextSizes.cellWidth, schedulerHeight: schedulerHeight, schedulerWidth: schedulerWidth, viewHeight: nextSizes.viewHeight, viewWidth: nextSizes.viewWidth, scrolling: scrolling, scrollableWidth: nextSizes.scrollableWidth, groups: groups, isVerticalGrouping: this.isVerticalGrouping, completeRowCount: completeRowCount, completeColumnCount: completeColumnCount, windowHeight: nextSizes.windowHeight, windowWidth: nextSizes.windowWidth, rtlEnabled: !!(null !== (_this$config = this.config) && void 0 !== _this$config && _this$config.rtlEnabled) })); this.state.virtualScrolling.createVirtualScrolling(); this.state.virtualScrolling.updateDimensions(true); this.setState((function(__state_argument) { return { virtualScrollingData: { state: _this3.state.virtualScrolling.getRenderState(), sizes: nextSizes } } })) } }; _proto.groupPanelHeightEffect = function() { var _this4 = this; this.setState((function(__state_argument) { var _this4$dateTableRef$c; return { groupPanelHeight: null === (_this4$dateTableRef$c = _this4.dateTableRef.current) || void 0 === _this4$dateTableRef$c ? void 0 : _this4$dateTableRef$c.getBoundingClientRect().height } })) }; _proto.onWindowScrollEffect = function() { var _this5 = this; if (this.state.virtualScrolling.isAttachWindowScrollEvent()) { return (0, _subscribe_to_event.subscribeToScrollEvent)(_dom_adapter.default.getDocument(), (function() { return _this5.onWindowScroll() })) } return }; _proto.pointerEventsEffect = function() { var _this6 = this; var disposePointerDown = (0, _subscribe_to_event.subscribeToDXPointerDownEvent)(this.widgetElementRef.current, (function(e) { return _this6.onPointerDown(e) })); var disposePointerMove = (0, _subscribe_to_event.subscribeToDXPointerMoveEvent)(this.widgetElementRef.current, (function(e) { return _this6.onPointerMove(e) })); return function() { disposePointerDown(); disposePointerMove() } }; _proto.onViewRendered = function() { var _this$props3 = this.props, allDayPanelExpanded = _this$props3.allDayPanelExpanded, cellDuration = _this$props3.cellDuration, crossScrollingEnabled = _this$props3.crossScrollingEnabled, currentDate = _this$props3.currentDate, endDayHour = _this$props3.endDayHour, firstDayOfWeek = _this$props3.firstDayOfWeek, groupByDate = _this$props3.groupByDate, groupOrientation = _this$props3.groupOrientation, groups = _this$props3.groups, hoursInterval = _this$props3.hoursInterval, intervalCount = _this$props3.intervalCount, onViewRendered = _this$props3.onViewRendered, scrolling = _this$props3.scrolling, showAllDayPanel = _this$props3.showAllDayPanel, startDate = _this$props3.startDate, startDayHour = _this$props3.startDayHour, viewType = _this$props3.type; var tableWidths = (0, _utils.getDateTableWidth)(this.layoutRef.current.getScrollableWidth(), this.dateTableRef.current, this.viewDataProvider, { intervalCount: intervalCount, currentDate: currentDate, viewType: viewType, hoursInterval: hoursInterval, startDayHour: startDayHour, endDayHour: endDayHour, groups: groups, groupOrientation: this.groupOrientation }); if (!this.isCalculateTablesWidth || tableWidths === this.state.tablesWidth) { var columnCount = this.viewDataMap.dateTableMap[0].length; var dateTableCellsMeta = this.createDateTableElementsMeta(columnCount); var allDayPanelCellsMeta = this.createAllDayPanelElementsMeta(); onViewRendered({ viewDataProvider: this.viewDataProvider, cellsMetaData: { dateTableCellsMeta: dateTableCellsMeta, allDayPanelCellsMeta: allDayPanelCellsMeta }, viewDataProviderValidationOptions: { intervalCount: intervalCount, currentDate: currentDate, type: viewType, hoursInterval: hoursInterval, startDayHour: startDayHour, endDayHour: endDayHour, groups: groups, groupOrientation: groupOrientation,