@devexpress/dx-react-scheduler
Version:
Composable plugin-based scheduler component for React
639 lines (617 loc) • 156 kB
JavaScript
/**
* Bundle of @devexpress/dx-react-scheduler
* Generated: 2025-01-08
* Version: 4.0.10
* License: https://js.devexpress.com/Licensing
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@devexpress/dx-react-core'), require('@devexpress/dx-scheduler-core'), require('@devexpress/dx-core'), require('moment')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@devexpress/dx-react-core', '@devexpress/dx-scheduler-core', '@devexpress/dx-core', 'moment'], factory) :
(global = global || self, factory((global.DevExpress = global.DevExpress || {}, global.DevExpress.DXReactScheduler = {}), global.React, global.dxReactCore, global.dxSchedulerCore, global.dxCore, global.moment));
}(this, (function (exports, React, dxReactCore, dxSchedulerCore, dxCore, moment) { 'use strict';
if (typeof process === "undefined") { var process = { env: {} }; }
moment = moment && Object.prototype.hasOwnProperty.call(moment, 'default') ? moment['default'] : 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 = dxCore.memoize(function (locale) { return dxSchedulerCore.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 (React.createElement(dxReactCore.Plugin, { name: "SchedulerCore" },
React.createElement(dxReactCore.Getter, { name: "appointments", value: dxSchedulerCore.appointments(data) }),
React.createElement(dxReactCore.Getter, { name: "formatDate", value: this.formatDateTimeGetter(locale) }),
React.createElement(dxReactCore.Getter, { name: "firstDayOfWeek", value: firstDayOfWeek }),
React.createElement(dxReactCore.Getter, { name: "locale", value: locale }),
React.createElement(dxReactCore.Template, { name: "root" },
React.createElement(Root, { height: height },
React.createElement(dxReactCore.TemplatePlaceholder, { name: "schedulerRoot" }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "header" }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "body" }),
React.createElement(dxReactCore.TemplatePlaceholder, { name: "footer" })))));
};
return SchedulerCoreBase;
}(React.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 (React.createElement(dxReactCore.PluginHost, null,
React.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 React.createElement(dxReactCore.TemplatePlaceholder, { name: "cell", params: params }); };
var TimeTableAppointmentLayer = function () { return React.createElement(dxReactCore.TemplatePlaceholder, { name: "timeTableAppointmentLayer" }); };
var startViewDateBaseComputed = function (_a) {
var viewCellsData = _a.viewCellsData;
return dxSchedulerCore.startViewDate(viewCellsData);
};
var endViewDateBaseComputed = function (_a) {
var viewCellsData = _a.viewCellsData;
return dxSchedulerCore.endViewDate(viewCellsData);
};
var TimeTablePlaceholder = function () { return React.createElement(dxReactCore.TemplatePlaceholder, { name: "timeTable" }); };
var DayScalePlaceholder = function () { return React.createElement(dxReactCore.TemplatePlaceholder, { name: "dayScale" }); };
var DayScaleEmptyCellPlaceholder = function () { return React.createElement(dxReactCore.TemplatePlaceholder, { name: "dayScaleEmptyCell" }); };
var GroupingPanelPlaceholder = function () { return React.createElement(dxReactCore.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 = dxCore.memoize(function (viewName, scrollingStrategy) { return function (getters) {
return dxSchedulerCore.computed(getters, viewName, function () { return scrollingStrategy; }, getters.scrollingStrategy);
}; });
_this.timeTableElementsMetaComputed = dxCore.memoize(function (viewName, timeTableElementsMeta) { return function (getters) {
return dxSchedulerCore.computed(getters, viewName, function () { return timeTableElementsMeta; }, getters.timeTableElementsMeta);
}; });
_this.intervalCountComputed = dxCore.memoize(function (viewName, intervalCount) { return function (getters) {
return dxSchedulerCore.computed(getters, viewName, function () { return intervalCount; }, getters.intervalCount);
}; });
_this.cellDurationComputed = dxCore.memoize(function (viewName, cellDuration) { return function (getters) {
return dxSchedulerCore.computed(getters, viewName, function () { return cellDuration; }, getters.cellDuration);
}; });
_this.excludedDaysComputed = dxCore.memoize(function (viewName, excludedDays) { return function (getters) { return dxSchedulerCore.computed(getters, viewName, function () { return excludedDays; }, getters.excludedDays); }; });
_this.availableViewsComputed = dxCore.memoize(function (viewName, viewDisplayName) { return function (_a) {
var availableViews = _a.availableViews;
return dxSchedulerCore.availableViews(availableViews, viewName, viewDisplayName);
}; });
_this.currentViewComputed = dxCore.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 dxSchedulerCore.computed(getters, viewName, endViewDateBaseComputed, getters.endViewDate);
};
_this.startViewDateComputed = function (getters) {
var viewName = _this.props.name;
return dxSchedulerCore.computed(getters, viewName, startViewDateBaseComputed, getters.startViewDate);
};
_this.viewCellsDataComputed = dxCore.memoize(function (viewName, cellDuration, startDayHour, endDayHour, viewCellsDataBaseComputed) { return function (getters) { return dxSchedulerCore.computed(getters, viewName, viewCellsDataBaseComputed(cellDuration, startDayHour, endDayHour), getters.viewCellsData); }; });
_this.timeTableAppointmentsComputed = dxCore.memoize(function (viewName, cellDuration, calculateAppointmentsIntervals) { return function (getters) { return dxSchedulerCore.computed(getters, viewName, calculateAppointmentsIntervals(cellDuration), getters.timeTableAppointments); }; });
_this.updateCellElementsMeta = dxCore.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 (React.createElement(dxReactCore.Plugin, { name: "basicView" },
React.createElement(dxReactCore.Getter, { name: "availableViews", computed: this.availableViewsComputed(viewName, viewDisplayName) }),
React.createElement(dxReactCore.Getter, { name: "currentView", computed: this.currentViewComputed(viewName, viewDisplayName, type) }),
React.createElement(dxReactCore.Getter, { name: "intervalCount", computed: this.intervalCountComputed(viewName, intervalCount) }),
React.createElement(dxReactCore.Getter, { name: "excludedDays", computed: this.excludedDaysComputed(viewName, excludedDays) }),
React.createElement(dxReactCore.Getter, { name: "viewCellsData", computed: this.viewCellsDataComputed(viewName, cellDuration, startDayHour, endDayHour, viewCellsDataComputed) }),
React.createElement(dxReactCore.Getter, { name: "startViewDate", computed: this.startViewDateComputed }),
React.createElement(dxReactCore.Getter, { name: "endViewDate", computed: this.endViewDateComputed }),
React.createElement(dxReactCore.Getter, { name: "cellDuration", computed: this.cellDurationComputed(viewName, cellDuration) }),
React.createElement(dxReactCore.Getter, { name: "timeTableElementsMeta", computed: this.timeTableElementsMetaComputed(viewName, timeTableElementsMeta) }),
React.createElement(dxReactCore.Getter, { name: "scrollingStrategy", computed: this.scrollingStrategyComputed(viewName, scrollingStrategy) }),
React.createElement(dxReactCore.Getter, { name: "timeTableAppointments", computed: this.timeTableAppointmentsComputed(viewName, cellDuration, calculateAppointmentsIntervals) }),
React.createElement(dxReactCore.Template, { name: "body" }, function (params) {
return React.createElement(dxReactCore.TemplateConnector, null, function (_a) {
var currentView = _a.currentView, groupOrientation = _a.groupOrientation, groups = _a.groups;
if (currentView.name !== viewName)
return React.createElement(dxReactCore.TemplatePlaceholder, null);
var isVerticalGrouping = (groupOrientation === null || groupOrientation === void 0 ? void 0 : groupOrientation(viewName))
=== dxSchedulerCore.VERTICAL_GROUP_ORIENTATION;
return (React.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)));
});
}),
React.createElement(dxReactCore.Template, { name: "dayScale" },
React.createElement(dxReactCore.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 React.createElement(dxReactCore.TemplatePlaceholder, null);
var groupByDateEnabled = groupByDate === null || groupByDate === void 0 ? void 0 : groupByDate(viewName);
var isHorizontalGrouping = (groupOrientation === null || groupOrientation === void 0 ? void 0 : groupOrientation(viewName))
=== dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION;
return (React.createElement(DayScale, { cellComponent: dayScaleCellComponent, rowComponent: dayScaleRowComponent, groupingPanelComponent: isHorizontalGrouping ? GroupingPanelPlaceholder : undefined, cellsData: viewCellsData, formatDate: formatDate, groupedByDate: groupByDateEnabled }));
})),
React.createElement(dxReactCore.Template, { name: "cell" }, function (params) { return (React.createElement(dxReactCore.TemplateConnector, null, function (_a) {
var currentView = _a.currentView;
if (currentView.name !== viewName)
return React.createElement(dxReactCore.TemplatePlaceholder, { params: params });
return (React.createElement(TimeTableCell, __assign({}, params)));
})); }),
React.createElement(dxReactCore.Template, { name: "timeTable" }, function (params) { return (React.createElement(dxReactCore.TemplateConnector, null, function (_a) {
var formatDate = _a.formatDate, currentView = _a.currentView, viewCellsData = _a.viewCellsData;
if (currentView.name !== viewName)
return React.createElement(dxReactCore.TemplatePlaceholder, null);
return (React.createElement(React.Fragment, null,
React.createElement(TimeTableLayout, __assign({ cellsData: viewCellsData, rowComponent: timeTableRowComponent, cellComponent: CellPlaceholder, formatDate: formatDate, setCellElementsMeta: _this.updateCellElementsMeta, key: timeTableLayoutKey }, params)),
React.createElement(AppointmentLayer, null,
React.createElement(TimeTableAppointmentLayer, null))));
})); }),
React.createElement(dxReactCore.Template, { name: "dayScaleEmptyCell" },
React.createElement(dxReactCore.TemplateConnector, null, function (_a) {
var currentView = _a.currentView;
if (currentView.name !== viewName || !DayScaleEmptyCell) {
return React.createElement(dxReactCore.TemplatePlaceholder, null);
}
return (React.createElement(DayScaleEmptyCell, null));
}))));
};
return BasicViewBase;
}(React.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 dxSchedulerCore.calculateWeekDateIntervals(appointments, startViewDate, endViewDate, excludedDays, cellDuration);
}; };
var timeCellsDataComputed = function (startDayHour, endDayHour) { return function (_a) {
var viewCellsData = _a.viewCellsData, cellDuration = _a.cellDuration;
return dxSchedulerCore.timeCellsData(viewCellsData, startDayHour, endDayHour, cellDuration, Date.now());
}; };
var TimeScalePlaceholder = function () { return React.createElement(dxReactCore.TemplatePlaceholder, { name: "timeScale" }); };
var VericalViewBase = /*#__PURE__*/ (function (_super) {
__extends(VericalViewBase, _super);
function VericalViewBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.timeCellsDataComputed = dxCore.memoize(function (viewName, startDayHour, endDayHour) { return function (getters) { return dxSchedulerCore.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 (React.createElement(dxReactCore.Plugin, { name: "WeekView" },
React.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,
} }),
React.createElement(dxReactCore.Getter, { name: "timeCellsData", computed: this.timeCellsDataComputed(viewName, startDayHour, endDayHour) }),
React.createElement(dxReactCore.Template, { name: "timeScale" }, function (params) { return (React.createElement(dxReactCore.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 React.createElement(dxReactCore.TemplatePlaceholder, null);
var groupOrientation = getGroupOrientation === null || getGroupOrientation === void 0 ? void 0 : getGroupOrientation(viewName);
return (React.createElement(TimeScale, __assign({ labelComponent: TimeScaleLabel, tickCellComponent: timeScaleTickCellComponent, rowComponent: timeScaleTicksRowComponent, cellsData: timeCellsData, formatDate: formatDate, groups: groups, groupOrientation: groupOrientation, height: dxSchedulerCore.getTimeTableHeight(timeTableElementsMeta) }, params)));
})); })));
};
return VericalViewBase;
}(React.PureComponent));
var VerticalView = VericalViewBase;
var viewCellsDataBaseComputed = function (cellDuration, startDayHour, endDayHour) { return function (_a) {
var currentDate = _a.currentDate, intervalCount = _a.intervalCount;
return dxSchedulerCore.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 (React.createElement(dxReactCore.Plugin, { name: "DayView" },
React.createElement(VerticalView, { viewCellsDataComputed: viewCellsDataBaseComputed, type: dxSchedulerCore.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;
}(React.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 dxSchedulerCore.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 (React.createElement(dxReactCore.Plugin, { name: "WeekView" },
React.createElement(VerticalView, { viewCellsDataComputed: viewCellsDataBaseComputed$1, type: dxSchedulerCore.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;
}(React.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 dxSchedulerCore.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 dxSchedulerCore.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 (React.createElement(dxReactCore.Plugin, { name: "MonthView" },
React.createElement(BasicView, { viewCellsDataComputed: viewCellsDataBaseComputed$2, type: dxSchedulerCore.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;
}(React.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 (React.createElement(dxReactCore.Plugin, { name: "Toolbar" },
React.createElement(dxReactCore.Template, { name: "header" },
React.createElement(Root, null,
React.createElement(dxReactCore.TemplatePlaceholder, { name: "toolbarContent" })),
React.createElement(dxReactCore.TemplatePlaceholder, null)),
React.createElement(dxReactCore.Template, { name: "toolbarContent" },
React.createElement(FlexibleSpaceComponent, null))));
};
ToolbarBase.components = {
rootComponent: 'Root',
flexibleSpaceComponent: 'FlexibleSpace',
};
return ToolbarBase;
}(React.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 = dxCore.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 (React.createElement(dxReactCore.Plugin, { name: "DateNavigator", dependencies: pluginDependencies },
React.createElement(dxReactCore.Template, { name: "toolbarContent" },
React.createElement(dxReactCore.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 = dxSchedulerCore.viewBoundText(startViewDate, endViewDate, currentView.type, currentDate, intervalCount, formatDate);
return (React.createElement(React.Fragment, null,
React.createElement(Root, { navigationButtonComponent: NavigationButton, openButtonComponent: OpenButton, navigatorText: navigatorText, rootRef: _this.setRootRef, onVisibilityToggle: _this.handleVisibilityToggle, onNavigate: navigateAction }),
React.createElement(Overlay, { visible: visible, target: _this.target, onHide: _this.handleHide },
React.createElement(Calendar, { selectedDate: currentDate, firstDayOfWeek: firstDayOfWeek, getCells: dxSchedulerCore.monthCellsData, textComponent: CalendarText, navigationButtonComponent: CalendarNavigationButton, rowComponent: CalendarRow, cellComponent: CalendarCell, headerRowComponent: CalendarHeaderRow, headerCellComponent: CalendarHeaderCell, navigatorComponent: CalendarNavigator, onSelectedDateChange: calendarDateChanged, formatDate: formatDate }))));
}),
React.createElement(dxReactCore.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;
}(React.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 (React.createElement(dxReactCore.Plugin, { name: "ViewSwitcher", dependencies: pluginDependencies$1 },
React.createElement(dxReactCore.Template, { name: "toolbarContent" },
React.createElement(dxReactCore.TemplatePlaceholder, null),
React.createElement(dxReactCore.TemplateConnector, null, function (_a, _b) {
var currentView = _a.currentView, availableViews = _a.availableViews;
var setCurrentViewName = _b.setCurrentViewName;
return (React.createElement(Switcher, { currentView: currentView, availableViews: availableViews, onChange: setCurrentViewName }));
}))));
};
ViewSwitcherBase.components = {
switcherComponent: 'Switcher',
};
return ViewSwitcherBase;
}(React.PureComponent));
/** A plugin that renders the Scheduler's view switcher. */
var ViewSwitcher = ViewSwitcherBase;
var AppointmentPlaceholder = function (params) { return React.createElement(dxReactCore.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 (React.createElement(AppointmentPlaceholder, { key: key, type: rectType, data: dataItem, fromPrev: fromPrev, toNext: toNext, durationType: durationType, resources: resources, style: dxSchedulerCore.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 = dxCore.memoize(function (timeTableAppointments, viewCellsData, timeTableElementsMeta, currentView, startViewDate, endViewDate, cellDuration, groups, getGroupOrientation, groupByDate, placeAppointmentsNextToEachOther) {
if (!dxSchedulerCore.isTimeTableElementsMetaActual(viewCellsData, timeTableElementsMeta))
return null;
var groupOrientation = getGroupOrientation
? getGroupOrientation(currentView === null || currentView === void 0 ? void 0 : currentView.name)
: dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION;
var groupCount = groups ? dxSchedulerCore.getGroupsLastRow(groups).length : 1;
var appointmentType = { growDirection: dxSchedulerCore.VERTICAL_TYPE, multiline: false };
var getRects = dxSchedulerCore.getVerticalRectByAppointmentData;
if (currentView.type === dxSchedulerCore.VIEW_TYPES.MONTH) {
appointmentType = { growDirection: dxSchedulerCore.HORIZONTAL_TYPE, multiline: true };
getRects = dxSchedulerCore.getHorizontalRectByAppointmentData;
}
return renderAppointments(dxSchedulerCore.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 = dxCore.memoize(function (allDayAppointments, viewCellsData, allDayElementsMeta, currentView, startViewDate, endViewDate, groups, getGroupOrientation, groupByDate) {
var groupOrientation = getGroupOrientation
? getGroupOrientation(currentView === null || currentView === void 0 ? void 0 : currentView.name)
: dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION;
var groupCount = groups ? dxSchedulerCore.getGroupsLastRow(groups).length : 1;
if (!dxSchedulerCore.isAllDayElementsMetaActual(viewCellsData, allDayElementsMeta, groupOrientation, groupCount)) {
return null;
}
return renderAppointments(dxSchedulerCore.calculateRectByDateAndGroupIntervals({ growDirection: dxSchedulerCore.HORIZONTAL_TYPE, multiline: false }, allDayAppointments, dxSchedulerCore.getHorizontalRectByAppointmentData, {
startViewDate: startViewDate,
endViewDate: endViewDate,
viewCellsData: viewCellsData,
cellElementsMeta: allDayElementsMeta,
}, {
groupOrientation: groupOrientation,
groupedByDate: groupByDate === null || groupByDate === void 0 ? void 0 : groupByDate(current