@devexpress/dx-react-scheduler
Version:
Composable plugin-based scheduler component for React
666 lines (646 loc) • 141 kB
JavaScript
/**
* Bundle of @devexpress/dx-react-scheduler
* Generated: 2025-01-08
* Version: 4.0.10
* License: https://js.devexpress.com/Licensing
*/
import { createElement, PureComponent, Fragment, createRef, memo, useRef, useState, useCallback, useEffect } from 'react';
import { Plugin, Getter, Template, TemplatePlaceholder, PluginHost, TemplateConnector, Action, createStateHelper, DragDropProvider as DragDropProvider$1, DropTarget, PlaceholderWithRef, DragSource } from '@devexpress/dx-react-core';
import { formatDateTimeGetter, appointments, computed, availableViews, VERTICAL_GROUP_ORIENTATION, HORIZONTAL_GROUP_ORIENTATION, startViewDate, endViewDate, timeCellsData, getTimeTableHeight, calculateWeekDateIntervals, VIEW_TYPES, viewCellsData, monthCellsData, calculateMonthDateIntervals, viewBoundText, POSITION_START, POSITION_END, isTimeTableElementsMetaActual, getGroupsLastRow, calculateRectByDateAndGroupIntervals, getAppointmentStyle, isAllDayElementsMetaActual, HORIZONTAL_TYPE, getHorizontalRectByAppointmentData, VERTICAL_TYPE, getVerticalRectByAppointmentData, allDayCells, calculateAllDayDateIntervals, changeCurrentDate, setCurrentViewName, preCommitChanges, addAppointment, changeAppointment, cancelAddedAppointment, startEditAppointment, stopEditAppointment, cancelChanges, RECURRENCE_EDIT_SCOPE, changedAppointmentById, TOGGLE_APPOINTMENT_TOOLTIP_VISIBILITY, getAppointmentResources, OPEN_COMMAND_BUTTON, CLOSE_COMMAND_BUTTON, DELETE_COMMAND_BUTTON, setAppointmentMeta, TOGGLE_APPOINTMENT_FORM_VISIBILITY, callActionIfExists, isAllDayCell, checkMultipleResourceFields, setAppointmentData, autoScroll, cellIndex, cellData, cellType, calculateInsidePart, intervalDuration, calculateAppointmentTimeBoundaries, calculateAppointmentGroups, appointmentDragged, calculateDraftAppointments, RESIZE_TOP, RESIZE_BOTTOM, SCROLL_SPEED_PX, validateResources, addResourcesToAppointments, convertResourcesToPlain, toggleExpandedGroups, HORIZONTAL_VIEW_LEFT_OFFSET, VERTICAL_VIEW_LEFT_OFFSET, isMonthCell, getCurrentTimeIndicatorTop, isCellShaded, isShadedAppointment, expandViewCellsDataWithGroups, getGroupsFromResources, sortFilteredResources, filterResourcesByGrouping, updateGroupingWithMainResource, expandGroups, updateTimeTableCellElementsMeta, updateAllDayCellElementsMeta, updateTimeCellsData } from '@devexpress/dx-scheduler-core';
import { memoize, createClickHandlers, getMessagesFormatter } from '@devexpress/dx-core';
import moment from 'moment';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var SchedulerCoreBase = /*#__PURE__*/ (function (_super) {
__extends(SchedulerCoreBase, _super);
function SchedulerCoreBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.formatDateTimeGetter = memoize(function (locale) { return formatDateTimeGetter(locale); });
return _this;
}
SchedulerCoreBase.prototype.render = function () {
var _a = this.props, data = _a.data, Root = _a.rootComponent, locale = _a.locale, height = _a.height, firstDayOfWeek = _a.firstDayOfWeek;
return (createElement(Plugin, { name: "SchedulerCore" },
createElement(Getter, { name: "appointments", value: appointments(data) }),
createElement(Getter, { name: "formatDate", value: this.formatDateTimeGetter(locale) }),
createElement(Getter, { name: "firstDayOfWeek", value: firstDayOfWeek }),
createElement(Getter, { name: "locale", value: locale }),
createElement(Template, { name: "root" },
createElement(Root, { height: height },
createElement(TemplatePlaceholder, { name: "schedulerRoot" }),
createElement(TemplatePlaceholder, { name: "header" }),
createElement(TemplatePlaceholder, { name: "body" }),
createElement(TemplatePlaceholder, { name: "footer" })))));
};
return SchedulerCoreBase;
}(PureComponent));
/***
* The Scheduler is a root container component designed to process
* and display the specified data. The Scheduler's functionality
* (data visualization and processing) is implemented in several plugins
* specified as child components.
* */
var SchedulerCore = SchedulerCoreBase;
var SchedulerBase = function (_a) {
var data = _a.data, rootComponent = _a.rootComponent, children = _a.children, locale = _a.locale, height = _a.height, firstDayOfWeek = _a.firstDayOfWeek;
return (createElement(PluginHost, null,
createElement(SchedulerCore, { data: data, rootComponent: rootComponent, locale: locale, height: height, firstDayOfWeek: firstDayOfWeek }),
children));
};
SchedulerBase.defaultProps = {
data: [],
locale: 'en-US',
height: 'auto',
firstDayOfWeek: 0,
};
// tslint:disable: max-line-length
/***
* The Scheduler is a root container component designed to process
* and display the specified data. The Scheduler’s functionality
* (data visualization and processing) is implemented in several plugins specified as child components.
* */
var Scheduler = SchedulerBase;
var CellPlaceholder = function (params) { return createElement(TemplatePlaceholder, { name: "cell", params: params }); };
var TimeTableAppointmentLayer = function () { return createElement(TemplatePlaceholder, { name: "timeTableAppointmentLayer" }); };
var startViewDateBaseComputed = function (_a) {
var viewCellsData = _a.viewCellsData;
return startViewDate(viewCellsData);
};
var endViewDateBaseComputed = function (_a) {
var viewCellsData = _a.viewCellsData;
return endViewDate(viewCellsData);
};
var TimeTablePlaceholder = function () { return createElement(TemplatePlaceholder, { name: "timeTable" }); };
var DayScalePlaceholder = function () { return createElement(TemplatePlaceholder, { name: "dayScale" }); };
var DayScaleEmptyCellPlaceholder = function () { return createElement(TemplatePlaceholder, { name: "dayScaleEmptyCell" }); };
var GroupingPanelPlaceholder = function () { return createElement(TemplatePlaceholder, { name: "groupingPanel" }); };
var BasicViewBase = /*#__PURE__*/ (function (_super) {
__extends(BasicViewBase, _super);
function BasicViewBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
timeTableElementsMeta: {},
scrollingStrategy: {
topBoundary: 0,
bottomBoundary: 0,
leftBoundary: 0,
rightBoundary: 0,
changeVerticalScroll: function () { return undefined; },
changeHorizontalScroll: function () { return undefined; },
},
previousTimeTableCell: null,
// The key has to be generated every time the TimeTableCell is updated to rerender TimeTable
// and, consequently, update timeTableElementsMeta
timeTableLayoutKey: 0,
};
_this.scrollingStrategyComputed = memoize(function (viewName, scrollingStrategy) { return function (getters) {
return computed(getters, viewName, function () { return scrollingStrategy; }, getters.scrollingStrategy);
}; });
_this.timeTableElementsMetaComputed = memoize(function (viewName, timeTableElementsMeta) { return function (getters) {
return computed(getters, viewName, function () { return timeTableElementsMeta; }, getters.timeTableElementsMeta);
}; });
_this.intervalCountComputed = memoize(function (viewName, intervalCount) { return function (getters) {
return computed(getters, viewName, function () { return intervalCount; }, getters.intervalCount);
}; });
_this.cellDurationComputed = memoize(function (viewName, cellDuration) { return function (getters) {
return computed(getters, viewName, function () { return cellDuration; }, getters.cellDuration);
}; });
_this.excludedDaysComputed = memoize(function (viewName, excludedDays) { return function (getters) { return computed(getters, viewName, function () { return excludedDays; }, getters.excludedDays); }; });
_this.availableViewsComputed = memoize(function (viewName, viewDisplayName) { return function (_a) {
var availableViews$1 = _a.availableViews;
return availableViews(availableViews$1, viewName, viewDisplayName);
}; });
_this.currentViewComputed = memoize(function (viewName, viewDisplayName, type) { return function (_a) {
var currentView = _a.currentView;
return (currentView && currentView.name !== viewName
? currentView
: { name: viewName, type: type, displayName: viewDisplayName });
}; });
_this.endViewDateComputed = function (getters) {
var viewName = _this.props.name;
return computed(getters, viewName, endViewDateBaseComputed, getters.endViewDate);
};
_this.startViewDateComputed = function (getters) {
var viewName = _this.props.name;
return computed(getters, viewName, startViewDateBaseComputed, getters.startViewDate);
};
_this.viewCellsDataComputed = memoize(function (viewName, cellDuration, startDayHour, endDayHour, viewCellsDataBaseComputed) { return function (getters) { return computed(getters, viewName, viewCellsDataBaseComputed(cellDuration, startDayHour, endDayHour), getters.viewCellsData); }; });
_this.timeTableAppointmentsComputed = memoize(function (viewName, cellDuration, calculateAppointmentsIntervals) { return function (getters) { return computed(getters, viewName, calculateAppointmentsIntervals(cellDuration), getters.timeTableAppointments); }; });
_this.updateCellElementsMeta = memoize(function (cellElementsMeta) {
_this.setState({ timeTableElementsMeta: cellElementsMeta });
});
_this.setScrollingStrategy = function (scrollingStrategy) {
_this.setState({ scrollingStrategy: scrollingStrategy });
};
return _this;
}
BasicViewBase.getDerivedStateFromProps = function (props, state) {
if (props.timeTableCellComponent !== state.previousTimeTableCell) {
return __assign(__assign({}, state), { previousTimeTableCell: props.timeTableCellComponent, timeTableLayoutKey: Math.random() });
}
return null;
};
BasicViewBase.prototype.render = function () {
var _this = this;
var _a = this.props, viewName = _a.name, intervalCount = _a.intervalCount, displayName = _a.displayName, type = _a.type, excludedDays = _a.excludedDays, cellDuration = _a.cellDuration, startDayHour = _a.startDayHour, endDayHour = _a.endDayHour, viewCellsDataComputed = _a.viewCellsDataComputed, calculateAppointmentsIntervals = _a.calculateAppointmentsIntervals, dayScaleCellComponent = _a.dayScaleCellComponent, dayScaleRowComponent = _a.dayScaleRowComponent, DayScale = _a.dayScaleLayoutComponent, TimeTableCell = _a.timeTableCellComponent, TimeTableLayout = _a.timeTableLayoutComponent, timeTableRowComponent = _a.timeTableRowComponent, AppointmentLayer = _a.appointmentLayerComponent, DayScaleEmptyCell = _a.dayScaleEmptyCellComponent, layoutProps = _a.layoutProps, Layout = _a.layoutComponent;
var _b = this.state, timeTableElementsMeta = _b.timeTableElementsMeta, scrollingStrategy = _b.scrollingStrategy, timeTableLayoutKey = _b.timeTableLayoutKey;
var viewDisplayName = displayName || viewName;
return (createElement(Plugin, { name: "basicView" },
createElement(Getter, { name: "availableViews", computed: this.availableViewsComputed(viewName, viewDisplayName) }),
createElement(Getter, { name: "currentView", computed: this.currentViewComputed(viewName, viewDisplayName, type) }),
createElement(Getter, { name: "intervalCount", computed: this.intervalCountComputed(viewName, intervalCount) }),
createElement(Getter, { name: "excludedDays", computed: this.excludedDaysComputed(viewName, excludedDays) }),
createElement(Getter, { name: "viewCellsData", computed: this.viewCellsDataComputed(viewName, cellDuration, startDayHour, endDayHour, viewCellsDataComputed) }),
createElement(Getter, { name: "startViewDate", computed: this.startViewDateComputed }),
createElement(Getter, { name: "endViewDate", computed: this.endViewDateComputed }),
createElement(Getter, { name: "cellDuration", computed: this.cellDurationComputed(viewName, cellDuration) }),
createElement(Getter, { name: "timeTableElementsMeta", computed: this.timeTableElementsMetaComputed(viewName, timeTableElementsMeta) }),
createElement(Getter, { name: "scrollingStrategy", computed: this.scrollingStrategyComputed(viewName, scrollingStrategy) }),
createElement(Getter, { name: "timeTableAppointments", computed: this.timeTableAppointmentsComputed(viewName, cellDuration, calculateAppointmentsIntervals) }),
createElement(Template, { name: "body" }, function (params) {
return createElement(TemplateConnector, null, function (_a) {
var currentView = _a.currentView, groupOrientation = _a.groupOrientation, groups = _a.groups;
if (currentView.name !== viewName)
return createElement(TemplatePlaceholder, null);
var isVerticalGrouping = (groupOrientation === null || groupOrientation === void 0 ? void 0 : groupOrientation(viewName))
=== VERTICAL_GROUP_ORIENTATION;
return (createElement(Layout, __assign({ forwardedRef: params === null || params === void 0 ? void 0 : params.forwardedRef, dayScaleComponent: DayScalePlaceholder, timeTableComponent: TimeTablePlaceholder, setScrollingStrategy: _this.setScrollingStrategy, groupingPanelComponent: isVerticalGrouping ? GroupingPanelPlaceholder : undefined, groupingPanelSize: isVerticalGrouping ? groups === null || groups === void 0 ? void 0 : groups.length : 0, dayScaleEmptyCellComponent: DayScaleEmptyCellPlaceholder }, layoutProps)));
});
}),
createElement(Template, { name: "dayScale" },
createElement(TemplateConnector, null, function (_a) {
var currentView = _a.currentView, viewCellsData = _a.viewCellsData, formatDate = _a.formatDate, groupByDate = _a.groupByDate, groupOrientation = _a.groupOrientation;
if (currentView.name !== viewName)
return createElement(TemplatePlaceholder, null);
var groupByDateEnabled = groupByDate === null || groupByDate === void 0 ? void 0 : groupByDate(viewName);
var isHorizontalGrouping = (groupOrientation === null || groupOrientation === void 0 ? void 0 : groupOrientation(viewName))
=== HORIZONTAL_GROUP_ORIENTATION;
return (createElement(DayScale, { cellComponent: dayScaleCellComponent, rowComponent: dayScaleRowComponent, groupingPanelComponent: isHorizontalGrouping ? GroupingPanelPlaceholder : undefined, cellsData: viewCellsData, formatDate: formatDate, groupedByDate: groupByDateEnabled }));
})),
createElement(Template, { name: "cell" }, function (params) { return (createElement(TemplateConnector, null, function (_a) {
var currentView = _a.currentView;
if (currentView.name !== viewName)
return createElement(TemplatePlaceholder, { params: params });
return (createElement(TimeTableCell, __assign({}, params)));
})); }),
createElement(Template, { name: "timeTable" }, function (params) { return (createElement(TemplateConnector, null, function (_a) {
var formatDate = _a.formatDate, currentView = _a.currentView, viewCellsData = _a.viewCellsData;
if (currentView.name !== viewName)
return createElement(TemplatePlaceholder, null);
return (createElement(Fragment, null,
createElement(TimeTableLayout, __assign({ cellsData: viewCellsData, rowComponent: timeTableRowComponent, cellComponent: CellPlaceholder, formatDate: formatDate, setCellElementsMeta: _this.updateCellElementsMeta, key: timeTableLayoutKey }, params)),
createElement(AppointmentLayer, null,
createElement(TimeTableAppointmentLayer, null))));
})); }),
createElement(Template, { name: "dayScaleEmptyCell" },
createElement(TemplateConnector, null, function (_a) {
var currentView = _a.currentView;
if (currentView.name !== viewName || !DayScaleEmptyCell) {
return createElement(TemplatePlaceholder, null);
}
return (createElement(DayScaleEmptyCell, null));
}))));
};
return BasicViewBase;
}(PureComponent));
var BasicView = BasicViewBase;
var calculateAppointmentsIntervalsBaseComputed = function (cellDuration) { return function (_a) {
var appointments = _a.appointments, startViewDate = _a.startViewDate, endViewDate = _a.endViewDate, excludedDays = _a.excludedDays;
return calculateWeekDateIntervals(appointments, startViewDate, endViewDate, excludedDays, cellDuration);
}; };
var timeCellsDataComputed = function (startDayHour, endDayHour) { return function (_a) {
var viewCellsData = _a.viewCellsData, cellDuration = _a.cellDuration;
return timeCellsData(viewCellsData, startDayHour, endDayHour, cellDuration, Date.now());
}; };
var TimeScalePlaceholder = function () { return createElement(TemplatePlaceholder, { name: "timeScale" }); };
var VericalViewBase = /*#__PURE__*/ (function (_super) {
__extends(VericalViewBase, _super);
function VericalViewBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.timeCellsDataComputed = memoize(function (viewName, startDayHour, endDayHour) { return function (getters) { return computed(getters, viewName, timeCellsDataComputed(startDayHour, endDayHour), getters.timeCellsData); }; });
return _this;
}
VericalViewBase.prototype.render = function () {
var _a = this.props, layoutComponent = _a.layoutComponent, dayScaleEmptyCellComponent = _a.dayScaleEmptyCellComponent, TimeScale = _a.timeScaleLayoutComponent, TimeScaleLabel = _a.timeScaleLabelComponent, timeScaleTickCellComponent = _a.timeScaleTickCellComponent, timeScaleTicksRowComponent = _a.timeScaleTicksRowComponent, dayScaleLayoutComponent = _a.dayScaleLayoutComponent, dayScaleCellComponent = _a.dayScaleCellComponent, dayScaleRowComponent = _a.dayScaleRowComponent, timeTableLayoutComponent = _a.timeTableLayoutComponent, timeTableRowComponent = _a.timeTableRowComponent, timeTableCellComponent = _a.timeTableCellComponent, cellDuration = _a.cellDuration, excludedDays = _a.excludedDays, viewName = _a.name, appointmentLayerComponent = _a.appointmentLayerComponent, intervalCount = _a.intervalCount, displayName = _a.displayName, startDayHour = _a.startDayHour, endDayHour = _a.endDayHour, viewCellsDataComputed = _a.viewCellsDataComputed, type = _a.type;
return (createElement(Plugin, { name: "WeekView" },
createElement(BasicView, { viewCellsDataComputed: viewCellsDataComputed, type: type, cellDuration: cellDuration, name: viewName, intervalCount: intervalCount, displayName: displayName, startDayHour: startDayHour, endDayHour: endDayHour, excludedDays: excludedDays, calculateAppointmentsIntervals: calculateAppointmentsIntervalsBaseComputed, dayScaleEmptyCellComponent: dayScaleEmptyCellComponent, dayScaleLayoutComponent: dayScaleLayoutComponent, dayScaleCellComponent: dayScaleCellComponent, dayScaleRowComponent: dayScaleRowComponent, timeTableCellComponent: timeTableCellComponent, timeTableLayoutComponent: timeTableLayoutComponent, timeTableRowComponent: timeTableRowComponent, appointmentLayerComponent: appointmentLayerComponent, layoutComponent: layoutComponent, layoutProps: {
timeScaleComponent: TimeScalePlaceholder,
} }),
createElement(Getter, { name: "timeCellsData", computed: this.timeCellsDataComputed(viewName, startDayHour, endDayHour) }),
createElement(Template, { name: "timeScale" }, function (params) { return (createElement(TemplateConnector, null, function (_a) {
var currentView = _a.currentView, timeCellsData = _a.timeCellsData, groups = _a.groups, formatDate = _a.formatDate, getGroupOrientation = _a.groupOrientation, timeTableElementsMeta = _a.timeTableElementsMeta;
if (currentView.name !== viewName)
return createElement(TemplatePlaceholder, null);
var groupOrientation = getGroupOrientation === null || getGroupOrientation === void 0 ? void 0 : getGroupOrientation(viewName);
return (createElement(TimeScale, __assign({ labelComponent: TimeScaleLabel, tickCellComponent: timeScaleTickCellComponent, rowComponent: timeScaleTicksRowComponent, cellsData: timeCellsData, formatDate: formatDate, groups: groups, groupOrientation: groupOrientation, height: getTimeTableHeight(timeTableElementsMeta) }, params)));
})); })));
};
return VericalViewBase;
}(PureComponent));
var VerticalView = VericalViewBase;
var viewCellsDataBaseComputed = function (cellDuration, startDayHour, endDayHour) { return function (_a) {
var currentDate = _a.currentDate, intervalCount = _a.intervalCount;
return viewCellsData(currentDate, undefined, intervalCount, [], startDayHour, endDayHour, cellDuration, Date.now());
}; };
var DayViewBase = /*#__PURE__*/ (function (_super) {
__extends(DayViewBase, _super);
function DayViewBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
DayViewBase.prototype.render = function () {
var _a = this.props, layoutComponent = _a.layoutComponent, DayScaleEmptyCell = _a.dayScaleEmptyCellComponent, timeScaleLayoutComponent = _a.timeScaleLayoutComponent, timeScaleLabelComponent = _a.timeScaleLabelComponent, timeScaleTickCellComponent = _a.timeScaleTickCellComponent, timeScaleTicksRowComponent = _a.timeScaleTicksRowComponent, dayScaleLayoutComponent = _a.dayScaleLayoutComponent, dayScaleCellComponent = _a.dayScaleCellComponent, dayScaleRowComponent = _a.dayScaleRowComponent, timeTableLayoutComponent = _a.timeTableLayoutComponent, timeTableRowComponent = _a.timeTableRowComponent, timeTableCellComponent = _a.timeTableCellComponent, appointmentLayerComponent = _a.appointmentLayerComponent, cellDuration = _a.cellDuration, viewName = _a.name, intervalCount = _a.intervalCount, displayName = _a.displayName, startDayHour = _a.startDayHour, endDayHour = _a.endDayHour;
return (createElement(Plugin, { name: "DayView" },
createElement(VerticalView, { viewCellsDataComputed: viewCellsDataBaseComputed, type: VIEW_TYPES.DAY, cellDuration: cellDuration, name: viewName, intervalCount: intervalCount, displayName: displayName, startDayHour: startDayHour, endDayHour: endDayHour, dayScaleEmptyCellComponent: DayScaleEmptyCell, dayScaleLayoutComponent: dayScaleLayoutComponent, dayScaleCellComponent: dayScaleCellComponent, dayScaleRowComponent: dayScaleRowComponent, timeTableCellComponent: timeTableCellComponent, timeTableLayoutComponent: timeTableLayoutComponent, timeTableRowComponent: timeTableRowComponent, appointmentLayerComponent: appointmentLayerComponent, layoutComponent: layoutComponent, timeScaleLayoutComponent: timeScaleLayoutComponent, timeScaleLabelComponent: timeScaleLabelComponent, timeScaleTickCellComponent: timeScaleTickCellComponent, timeScaleTicksRowComponent: timeScaleTicksRowComponent })));
};
DayViewBase.defaultProps = {
name: 'Day',
startDayHour: 0,
endDayHour: 24,
cellDuration: 30,
intervalCount: 1,
};
DayViewBase.components = {
layoutComponent: 'Layout',
layoutContainer: 'LayoutContainer',
appointmentLayerComponent: 'AppointmentLayer',
dayScaleEmptyCellComponent: 'DayScaleEmptyCell',
timeScaleLayoutComponent: 'TimeScaleLayout',
timeScaleLabelComponent: 'TimeScaleLabel',
timeScaleTickCellComponent: 'TimeScaleTickCell',
timeScaleTicksRowComponent: 'TimeScaleTicksRow',
dayScaleLayoutComponent: 'DayScaleLayout',
dayScaleCellComponent: 'DayScaleCell',
dayScaleRowComponent: 'DayScaleRow',
timeTableContainerComponent: 'TimeTableContainer',
timeTableLayoutComponent: 'TimeTableLayout',
timeTableCellComponent: 'TimeTableCell',
timeTableRowComponent: 'TimeTableRow',
};
return DayViewBase;
}(PureComponent));
// tslint:disable-next-line: max-line-length
/*** A plugin that renders Scheduler data for a day. This plugin arranges appointments from top to bottom.
* If their time intervals overlap, their width is decreased and they are placed next to each other.
* */
var DayView = DayViewBase;
var DAYS_IN_WEEK = 7;
var viewCellsDataBaseComputed$1 = function (cellDuration, startDayHour, endDayHour) { return function (_a) {
var firstDayOfWeek = _a.firstDayOfWeek, intervalCount = _a.intervalCount, excludedDays = _a.excludedDays, currentDate = _a.currentDate;
return viewCellsData(currentDate, firstDayOfWeek, intervalCount * DAYS_IN_WEEK, excludedDays, startDayHour, endDayHour, cellDuration, Date.now());
}; };
var WeekViewBase = /*#__PURE__*/ (function (_super) {
__extends(WeekViewBase, _super);
function WeekViewBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
WeekViewBase.prototype.render = function () {
var _a = this.props, layoutComponent = _a.layoutComponent, dayScaleEmptyCellComponent = _a.dayScaleEmptyCellComponent, timeScaleLayoutComponent = _a.timeScaleLayoutComponent, timeScaleLabelComponent = _a.timeScaleLabelComponent, timeScaleTickCellComponent = _a.timeScaleTickCellComponent, timeScaleTicksRowComponent = _a.timeScaleTicksRowComponent, dayScaleLayoutComponent = _a.dayScaleLayoutComponent, dayScaleCellComponent = _a.dayScaleCellComponent, dayScaleRowComponent = _a.dayScaleRowComponent, timeTableLayoutComponent = _a.timeTableLayoutComponent, timeTableRowComponent = _a.timeTableRowComponent, timeTableCellComponent = _a.timeTableCellComponent, cellDuration = _a.cellDuration, excludedDays = _a.excludedDays, viewName = _a.name, appointmentLayerComponent = _a.appointmentLayerComponent, intervalCount = _a.intervalCount, displayName = _a.displayName, startDayHour = _a.startDayHour, endDayHour = _a.endDayHour;
return (createElement(Plugin, { name: "WeekView" },
createElement(VerticalView, { viewCellsDataComputed: viewCellsDataBaseComputed$1, type: VIEW_TYPES.WEEK, cellDuration: cellDuration, name: viewName, intervalCount: intervalCount, displayName: displayName, startDayHour: startDayHour, endDayHour: endDayHour, excludedDays: excludedDays, dayScaleEmptyCellComponent: dayScaleEmptyCellComponent, dayScaleLayoutComponent: dayScaleLayoutComponent, dayScaleCellComponent: dayScaleCellComponent, dayScaleRowComponent: dayScaleRowComponent, timeTableCellComponent: timeTableCellComponent, timeTableLayoutComponent: timeTableLayoutComponent, timeTableRowComponent: timeTableRowComponent, appointmentLayerComponent: appointmentLayerComponent, layoutComponent: layoutComponent, timeScaleLayoutComponent: timeScaleLayoutComponent, timeScaleLabelComponent: timeScaleLabelComponent, timeScaleTickCellComponent: timeScaleTickCellComponent, timeScaleTicksRowComponent: timeScaleTicksRowComponent })));
};
WeekViewBase.defaultProps = {
startDayHour: 0,
endDayHour: 24,
cellDuration: 30,
intervalCount: 1,
excludedDays: [],
name: 'Week',
};
WeekViewBase.components = {
layoutComponent: 'Layout',
layoutContainerComponent: 'LayoutContainer',
appointmentLayerComponent: 'AppointmentLayer',
dayScaleEmptyCellComponent: 'DayScaleEmptyCell',
timeScaleLayoutComponent: 'TimeScaleLayout',
timeScaleLabelComponent: 'TimeScaleLabel',
timeScaleTickCellComponent: 'TimeScaleTickCell',
timeScaleTicksRowComponent: 'TimeScaleTicksRow',
dayScaleLayoutComponent: 'DayScaleLayout',
dayScaleCellComponent: 'DayScaleCell',
dayScaleRowComponent: 'DayScaleRow',
timeTableContainerComponent: 'TimeTableContainer',
timeTableLayoutComponent: 'TimeTableLayout',
timeTableCellComponent: 'TimeTableCell',
timeTableRowComponent: 'TimeTableRow',
};
return WeekViewBase;
}(PureComponent));
// tslint:disable: max-line-length
/***
* A plugin that renders the Scheduler's week view. This plugin arranges appointments from top to bottom.
* If their time intervals overlap, their width is decreased and they are placed next to each other.
* */
var WeekView = WeekViewBase;
var viewCellsDataBaseComputed$2 = function (cellDuration, startDayHour, endDayHour) { return function (_a) {
var currentDate = _a.currentDate, firstDayOfWeek = _a.firstDayOfWeek, intervalCount = _a.intervalCount;
return monthCellsData(currentDate, firstDayOfWeek, intervalCount, Date.now());
}; };
var calculateAppointmentsIntervalsBaseComputed$1 = function (cellDuration) { return function (_a) {
var appointments = _a.appointments, startViewDate = _a.startViewDate, endViewDate = _a.endViewDate, excludedDays = _a.excludedDays;
return calculateMonthDateIntervals(appointments, startViewDate, endViewDate);
}; };
var MonthViewBase = /*#__PURE__*/ (function (_super) {
__extends(MonthViewBase, _super);
function MonthViewBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
MonthViewBase.prototype.render = function () {
var _a = this.props, layoutComponent = _a.layoutComponent, dayScaleEmptyCellComponent = _a.dayScaleEmptyCellComponent, dayScaleLayoutComponent = _a.dayScaleLayoutComponent, dayScaleCellComponent = _a.dayScaleCellComponent, dayScaleRowComponent = _a.dayScaleRowComponent, timeTableLayoutComponent = _a.timeTableLayoutComponent, timeTableRowComponent = _a.timeTableRowComponent, timeTableCellComponent = _a.timeTableCellComponent, appointmentLayerComponent = _a.appointmentLayerComponent, viewName = _a.name, intervalCount = _a.intervalCount, displayName = _a.displayName;
return (createElement(Plugin, { name: "MonthView" },
createElement(BasicView, { viewCellsDataComputed: viewCellsDataBaseComputed$2, type: VIEW_TYPES.MONTH, name: viewName, intervalCount: intervalCount, displayName: displayName, calculateAppointmentsIntervals: calculateAppointmentsIntervalsBaseComputed$1, dayScaleEmptyCellComponent: dayScaleEmptyCellComponent, dayScaleLayoutComponent: dayScaleLayoutComponent, dayScaleCellComponent: dayScaleCellComponent, dayScaleRowComponent: dayScaleRowComponent, timeTableCellComponent: timeTableCellComponent, timeTableLayoutComponent: timeTableLayoutComponent, timeTableRowComponent: timeTableRowComponent, appointmentLayerComponent: appointmentLayerComponent, layoutComponent: layoutComponent })));
};
MonthViewBase.defaultProps = {
intervalCount: 1,
name: 'Month',
};
MonthViewBase.components = {
layoutComponent: 'Layout',
appointmentLayerComponent: 'AppointmentLayer',
dayScaleEmptyCellComponent: 'DayScaleEmptyCell',
dayScaleLayoutComponent: 'DayScaleLayout',
dayScaleCellComponent: 'DayScaleCell',
dayScaleRowComponent: 'DayScaleRow',
timeTableContainerComponent: 'TimeTableContainer',
timeTableLayoutComponent: 'TimeTableLayout',
timeTableCellComponent: 'TimeTableCell',
timeTableRowComponent: 'TimeTableRow',
};
return MonthViewBase;
}(PureComponent));
// tslint:disable: max-line-length
/***
* A plugin that renders Scheduler data for a month. This plugin arranges appointments from left to right.
* An appointment's size depends on its duration in days.
* However, it occupies the entire day cell if an appointment lasts only for several hours or minutes.
* The time scale and all-day panel are not available in this view.
* */
var MonthView = MonthViewBase;
var ToolbarBase = /*#__PURE__*/ (function (_super) {
__extends(ToolbarBase, _super);
function ToolbarBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
ToolbarBase.prototype.render = function () {
var _a = this.props, Root = _a.rootComponent, FlexibleSpaceComponent = _a.flexibleSpaceComponent;
return (createElement(Plugin, { name: "Toolbar" },
createElement(Template, { name: "header" },
createElement(Root, null,
createElement(TemplatePlaceholder, { name: "toolbarContent" })),
createElement(TemplatePlaceholder, null)),
createElement(Template, { name: "toolbarContent" },
createElement(FlexibleSpaceComponent, null))));
};
ToolbarBase.components = {
rootComponent: 'Root',
flexibleSpaceComponent: 'FlexibleSpace',
};
return ToolbarBase;
}(PureComponent));
/** A plugin that renders the Scheduler's toolbar. */
var Toolbar = ToolbarBase;
var pluginDependencies = [
{ name: 'Toolbar' },
{ name: 'ViewState' },
];
var navigate = function (action, currentView, intervalCount) { return function (direction, nextDate) { return action({
direction: direction,
nextDate: nextDate,
amount: intervalCount,
step: currentView.type,
}); }; };
var DateNavigatorBase = /*#__PURE__*/ (function (_super) {
__extends(DateNavigatorBase, _super);
function DateNavigatorBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
visible: false,
};
_this.setRootRef = function (target) {
_this.target = target;
};
_this.handleVisibilityToggle = function () {
_this.setState(function (prevState) { return ({ visible: !prevState.visible }); });
};
_this.handleHide = function () {
_this.setState({ visible: false });
};
_this.navigateAction = memoize(function (changeCurrentDate, currentView, intervalCount, navigateAction) {
return navigateAction(changeCurrentDate, currentView, intervalCount);
});
return _this;
}
DateNavigatorBase.prototype.render = function () {
var _this = this;
var _a = this.props, Root = _a.rootComponent, Overlay = _a.overlayComponent, OpenButton = _a.openButtonComponent, NavigationButton = _a.navigationButtonComponent, Calendar = _a.calendarComponent, CalendarRow = _a.calendarRowComponent, CalendarCell = _a.calendarCellComponent, CalendarHeaderRow = _a.calendarHeaderRowComponent, CalendarHeaderCell = _a.calendarHeaderCellComponent, CalendarText = _a.calendarTextComponent, CalendarNavigationButton = _a.calendarNavigationButtonComponent, CalendarNavigator = _a.calendarNavigatorComponent;
var visible = this.state.visible;
return (createElement(Plugin, { name: "DateNavigator", dependencies: pluginDependencies },
createElement(Template, { name: "toolbarContent" },
createElement(TemplateConnector, null, function (_a, _b) {
var currentDate = _a.currentDate, startViewDate = _a.startViewDate, endViewDate = _a.endViewDate, firstDayOfWeek = _a.firstDayOfWeek, currentView = _a.currentView, intervalCount = _a.intervalCount, formatDate = _a.formatDate;
var changeCurrentDate = _b.changeCurrentDate;
var navigateAction = _this.navigateAction(changeCurrentDate, currentView, intervalCount, navigate);
var calendarDateChanged = function (nextDate) {
navigateAction(undefined, nextDate);
_this.handleHide();
};
var navigatorText = viewBoundText(startViewDate, endViewDate, currentView.type, currentDate, intervalCount, formatDate);
return (createElement(Fragment, null,
createElement(Root, { navigationButtonComponent: NavigationButton, openButtonComponent: OpenButton, navigatorText: navigatorText, rootRef: _this.setRootRef, onVisibilityToggle: _this.handleVisibilityToggle, onNavigate: navigateAction }),
createElement(Overlay, { visible: visible, target: _this.target, onHide: _this.handleHide },
createElement(Calendar, { selectedDate: currentDate, firstDayOfWeek: firstDayOfWeek, getCells: monthCellsData, textComponent: CalendarText, navigationButtonComponent: CalendarNavigationButton, rowComponent: CalendarRow, cellComponent: CalendarCell, headerRowComponent: CalendarHeaderRow, headerCellComponent: CalendarHeaderCell, navigatorComponent: CalendarNavigator, onSelectedDateChange: calendarDateChanged, formatDate: formatDate }))));
}),
createElement(TemplatePlaceholder, null))));
};
DateNavigatorBase.components = {
rootComponent: 'Root',
overlayComponent: 'Overlay',
openButtonComponent: 'OpenButton',
navigationButtonComponent: 'NavigationButton',
calendarComponent: 'Calendar',
calendarRowComponent: 'CalendarRow',
calendarCellComponent: 'CalendarCell',
calendarHeaderRowComponent: 'CalendarHeaderRow',
calendarHeaderCellComponent: 'CalendarHeaderCell',
calendarTextComponent: 'CalendarText',
calendarNavigatorComponent: 'CalendarNavigator',
calendarNavigationButtonComponent: 'CalendarNavigationButton',
};
return DateNavigatorBase;
}(PureComponent));
/** A plugin that renders the Scheduler’s date navigator. */
var DateNavigator = DateNavigatorBase;
var pluginDependencies$1 = [
{ name: 'Toolbar' },
{ name: 'ViewState' },
];
var ViewSwitcherBase = /*#__PURE__*/ (function (_super) {
__extends(ViewSwitcherBase, _super);
function ViewSwitcherBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
ViewSwitcherBase.prototype.render = function () {
var Switcher = this.props.switcherComponent;
return (createElement(Plugin, { name: "ViewSwitcher", dependencies: pluginDependencies$1 },
createElement(Template, { name: "toolbarContent" },
createElement(TemplatePlaceholder, null),
createElement(TemplateConnector, null, function (_a, _b) {
var currentView = _a.currentView, availableViews = _a.availableViews;
var setCurrentViewName = _b.setCurrentViewName;
return (createElement(Switcher, { currentView: currentView, availableViews: availableViews, onChange: setCurrentViewName }));
}))));
};
ViewSwitcherBase.components = {
switcherComponent: 'Switcher',
};
return ViewSwitcherBase;
}(PureComponent));
/** A plugin that renders the Scheduler's view switcher. */
var ViewSwitcher = ViewSwitcherBase;
var AppointmentPlaceholder = function (params) { return createElement(TemplatePlaceholder, { name: "appointment", params: params }); };
var renderAppointments = function (rects) { return rects.map(function (_a) {
var dataItem = _a.dataItem, rectType = _a.type, fromPrev = _a.fromPrev, toNext = _a.toNext, durationType = _a.durationType, resources = _a.resources, key = _a.key, geometry = __rest(_a, ["dataItem", "type", "fromPrev", "toNext", "durationType", "resources", "key"]);
return (createElement(AppointmentPlaceholder, { key: key, type: rectType, data: dataItem, fromPrev: fromPrev, toNext: toNext, durationType: durationType, resources: resources, style: getAppointmentStyle(geometry) }));
}); };
var pluginDependencies$2 = [
{ name: 'DayView', optional: true },
{ name: 'WeekView', optional: true },
{ name: 'MonthView', optional: true },
];
var AppointmentsBase = /*#__PURE__*/ (function (_super) {
__extends(AppointmentsBase, _super);
function AppointmentsBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.updateTimeTableAppointments = memoize(function (timeTableAppointments, viewCellsData, timeTableElementsMeta, currentView, startViewDate, endViewDate, cellDuration, groups, getGroupOrientation, groupByDate, placeAppointmentsNextToEachOther) {
if (!isTimeTableElementsMetaActual(viewCellsData, timeTableElementsMeta))
return null;
var groupOrientation = getGroupOrientation
? getGroupOrientation(currentView === null || currentView === void 0 ? void 0 : currentView.name)
: HORIZONTAL_GROUP_ORIENTATION;
var groupCount = groups ? getGroupsLastRow(groups).length : 1;
var appointmentType = { growDirection: VERTICAL_TYPE, multiline: false };
var getRects = getVerticalRectByAppointmentData;
if (currentView.type === VIEW_TYPES.MONTH) {
appointmentType = { growDirection: HORIZONTAL_TYPE, multiline: true };
getRects = getHorizontalRectByAppointmentData;
}
return renderAppointments(calculateRectByDateAndGroupIntervals(appointmentType, timeTableAppointments, getRects, {
startViewDate: startViewDate,
endViewDate: endViewDate,
cellDuration: cellDuration,
viewCellsData: viewCellsData,
cellElementsMeta: timeTableElementsMeta,
placeAppointmentsNextToEachOther: placeAppointmentsNextToEachOther,
}, {
groupOrientation: groupOrientation,
groupedByDate: groupByDate === null || groupByDate === void 0 ? void 0 : groupByDate(currentView === null || currentView === void 0 ? void 0 : currentView.name),
groupCount: groupCount,
}));
});
_this.updateAllDayAppointments = memoize(function (allDayAppointments, viewCellsData, allDayElementsMeta, currentView, startViewDate, endViewDate, groups, getGroupOrientation, groupByDate) {
var groupOrientation = getGroupOrientation
? getGroupOrientation(currentView === null || currentView === void 0 ? void 0 : currentView.name)
: HORIZONTAL_GROUP_ORIENTATION;
var groupCount = groups ? getGroupsLastRow(groups).length : 1;
if (!isAllDayElementsMetaActual(viewCellsData, allDayElementsMeta, groupOrientation, groupCount)) {
return null;
}
return renderAppointments(calculateRectByDateAndGroupIntervals({ growDirection: HORIZONTAL_TYPE, multiline: false }, allDayAppointments, getHorizontalRectByAppointmentData, {
startViewDate: startViewDate,
endViewDate: endViewDate,
viewCellsData: viewCellsData,
cellElementsMeta: allDayElementsMeta,
}, {
groupOrientation: groupOrientation,
groupedByDate: groupByDate === null || groupByDate === void 0 ? void 0 : groupByDate(currentView === null || currentView === void 0 ? void 0 : currentView.name),
groupCount: groupCount,
}));
});
return _this;
}
AppointmentsBase.prototype.render = function () {
var _this = this;
var _a = this.props, SplitIndicator = _a.splitIndicatorComponent, Appointment = _a.appointmentComponent, AppointmentContent = _a.appointmentContentComponent, Container = _a.containerComponent, recurringIconComponent = _a.recurringIconComponent, placeAppointmentsNextToEachOther = _a.placeAppointmentsNextToEachOther;
return (createElement(Plugin, { name: "Appointments", dependencies: pluginDependencies$2 },
createElement(Template, { name: "timeTableAppointmentLayer" },
createElement(TemplateConnector, null, function (_a) {
var timeTableAppointments = _a.timeTableAppointments, viewCellsData = _a.viewCellsData, timeTableElementsMeta = _a.timeTableElementsMeta, currentView = _a.currentView, startViewDate = _a.startViewDate, endViewDate = _a.endViewDate, cellDuration = _a.cellDuration, groupOrientation = _a.groupOrientation, groups = _a.groups, groupByDate = _a.groupByDate;
return _this.updateTimeTableAppointments(timeTableAppointments, viewCellsData, timeTableElementsMeta, currentView, startViewDate, endViewDate, cellDuration, groups, groupOrientation, groupByDate, placeAppointmentsNextToEachOther);
})),
createElement(Template, { name: "allDayAppointmentLayer" },
createElement(TemplateConnector, null, function (_a) {
var allDayAppointments = _a.allDayAppointments, viewCellsData = _a.viewCellsData, allDayElementsMeta = _a.allDayElementsMeta, startViewDate = _a.startViewDate, endViewDate = _a.endViewDate, groupOrientation = _a.groupOrientation, currentView = _a.currentView, groups = _a.groups, groupByDate = _a.groupByDate;
return _this.updateAllDayAppointments(allDayAppointments, viewCellsData, allDayElementsMeta, currentView, startViewDate, endViewDate, groups, groupOrientation, groupByDate);
})),
createElement(Template, { name: "appointment" }, function (_a) {
var style = _a.style, params = __rest(_a, ["style"]);
return (createElement(TemplateConnector, null, function (_a) {
var formatDate = _a.formatDate;
return (createElement(Container, { style: style },
createElement(TemplatePlaceholder, { name: "appointmentTop", params: { data: params.data, type: params.type, slice: params.fromPrev } }),
createElement(TemplatePlaceholder, { name: "appointmentContent", params: __assign(__assign({}, params), { formatDate: formatDate }) }),
createElement(TemplatePlaceholder, { name: "appointmentBottom", params: { data: params.data, type: params.type, slice: params.toNext } })));
}));
}),
createElement(Template, { name: "appointmentContent" }, function (_a) {
var onClick = _a.onClick, onDoubleClick = _a.onDoubleClick, formatDate = _a.formatDate, data = _a.data, type = _a.