@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
90 lines (89 loc) • 6.06 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(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);
};
var __read = (this && this.__read) || function (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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UnAssignedEvents = exports.HeaderRow = void 0;
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
var react_1 = require("react");
var Scheduler_1 = require("./Scheduler");
var material_1 = require("@mui/material");
var date_fns_1 = require("date-fns");
var BorderedBox_1 = require("../layout/BorderedBox");
var useUnassignedEventPosition_1 = require("../hooks/useUnassignedEventPosition");
var EventTile_1 = require("./EventTile");
var HeaderControls_1 = require("./HeaderControls");
var HeaderRow = function (_a) {
var days = _a.days, eventsBoxElement = _a.eventsBoxElement;
var _b = (0, react_1.useContext)(Scheduler_1.SchedulerContext), HeaderRowOverride = _b.HeaderRow, rowHeight = _b.config.rowHeight;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderControls_1.HeaderControls, { eventsBoxElement: eventsBoxElement }), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ flex: 1, display: "flex", minHeight: rowHeight, maxHeight: rowHeight }, { children: HeaderRowOverride ? ((0, jsx_runtime_1.jsx)(HeaderRowOverride, { days: days })) : (days.map(function (day, index) { return (0, jsx_runtime_1.jsx)(HeaderCell, { day: day }, index); })) }))] }));
};
exports.HeaderRow = HeaderRow;
var useWidthPlusSpacing = function () {
var config = (0, react_1.useContext)(Scheduler_1.SchedulerContext).config;
var width = (0, react_1.useMemo)(function () { return config.divisionWidth; }, [config.divisionWidth]);
return width;
};
var HeaderCell = function (_a) {
var day = _a.day;
var activeDate = (0, react_1.useContext)(Scheduler_1.SchedulerContext).activeDate;
var isActive = (0, date_fns_1.isSameDay)(day.date, activeDate);
var width = useWidthPlusSpacing();
var dayWidth = width * day.divisions.length;
return ((0, jsx_runtime_1.jsxs)(BorderedBox_1.BorderedBox, __assign({ flexDirection: "column", minWidth: dayWidth, maxWidth: dayWidth, overflow: "hidden", style: { position: 'relative', overflow: 'visible' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "tableHeader", color: isActive ? 'secondary.main' : 'text.disabled', p: 0.75 }, { children: (0, date_fns_1.format)(day.date, 'EEE P') })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ display: "flex" }, { children: day.divisions.map(function (division, index) { return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ display: "flex", flexDirection: "column", flex: 1, minWidth: width, maxWidth: width }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "tableHeader", color: "text.disabled", p: 0.75 }, { children: division.name })) }), index)); }) }))] })));
};
var Container = (0, material_1.styled)('div')(function () { return ({
position: 'absolute',
userSelect: 'none',
}); });
var UnAssignedEvents = function (_a) {
var onDragStart = _a.onDragStart;
var _b = (0, react_1.useContext)(Scheduler_1.SchedulerContext), events = _b.events, _c = _b.config, _d = _c.unAssignedRows, unAssignedRows = _d === void 0 ? 1 : _d, rowHeight = _c.rowHeight, divisionWidth = _c.divisionWidth, totalDivisions = _b.calendarBounds.totalDivisions, UnAssignedBoxProps = _b.UnAssignedBoxProps;
var ref = (0, react_1.useRef)(null);
var _e = __read((0, react_1.useState)(0), 2), containerWidth = _e[0], setContainerWidth = _e[1];
var calcEventPosition = (0, useUnassignedEventPosition_1.useUnassignedEventPosition)();
var unAssignedEvents = (0, react_1.useMemo)(function () { return events.filter(function (e) { return !e.resourceId; }); }, [events]);
(0, react_1.useLayoutEffect)(function () {
var _a;
setContainerWidth(((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
}, []);
var handleDragStart = (0, react_1.useCallback)(function (e, event) {
onDragStart(event);
// this is a hack for firefox
// Firefox requires some kind of initialization
// which we can do by adding this attribute
// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
e.dataTransfer.setData('text/plain', '');
}, [onDragStart]);
return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ position: "relative", width: totalDivisions * divisionWidth, overflow: "auto", height: unAssignedRows * rowHeight, ref: ref }, UnAssignedBoxProps, { children: unAssignedEvents.map(function (event) {
var _a = calcEventPosition(containerWidth, event), top = _a.top, height = _a.height, left = _a.left, width = _a.width;
return ((0, jsx_runtime_1.jsx)(Container, __assign({
// className="droppable-element"
draggable: true, style: { top: top, height: height, left: left, width: width }, onDragStart: function (e) { return handleDragStart(e, event); } }, { children: (0, jsx_runtime_1.jsx)(EventTile_1.EventTile, { event: event, infoFlowData: null }) }), event.id));
}) })));
};
exports.UnAssignedEvents = UnAssignedEvents;