@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
107 lines (106 loc) • 7.25 kB
JavaScript
;
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultEventTile = exports.EventTile = void 0;
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
var react_1 = require("react");
var material_1 = require("@mui/material");
var date_fns_1 = require("date-fns");
var Scheduler_1 = require("./Scheduler");
var useEventInfoFlow_1 = require("../hooks/useEventInfoFlow");
var Container = (0, material_1.styled)(material_1.Box)(function (_a) {
var theme = _a.theme;
return ({
borderRadius: theme.spacing(1),
overflow: 'hidden',
textOverflow: 'ellipsis',
height: '100%',
});
});
var InnerText = (0, material_1.styled)(function (props) { return (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "caption", noWrap: true }, props)); })(function () { return ({
display: 'block',
userSelect: 'none',
}); });
var EventTile = function (_a) {
var event = _a.event, infoFlowData = _a.infoFlowData, overflowData = _a.overflowData;
var _b = (0, react_1.useContext)(Scheduler_1.SchedulerContext), EventTileOverride = _b.EventTile, resizingEvent = _b.resizingEvent;
var Component = EventTileOverride || exports.DefaultEventTile;
var _c = (0, useEventInfoFlow_1.useEventInfoFlow)(infoFlowData), contentRef = _c.contentRef, isContentVisible = _c.isContentVisible, isEllipsis = _c.isEllipsis;
var showTooltip = (0, react_1.useMemo)(function () { return !isContentVisible || isEllipsis; }, [isContentVisible, isEllipsis]);
var _d = (0, react_1.useMemo)(function () {
// TODO: Hide overflow while dragging
return overflowData !== null && overflowData !== void 0 ? overflowData : {
leftOverflow: false,
middleOverflow: null,
rightOverflow: false,
};
}, [overflowData]), leftOverflow = _d.leftOverflow, middleOverflow = _d.middleOverflow, rightOverflow = _d.rightOverflow;
var resizingStartTime = (0, react_1.useMemo)(function () {
if (!resizingEvent)
return null;
if (resizingEvent.id !== event.id)
return null;
return new Date(resizingEvent.startTime);
}, [event.id, resizingEvent]);
var resizingEndTime = (0, react_1.useMemo)(function () {
if (!resizingEvent)
return null;
if (resizingEvent.id !== event.id)
return null;
return new Date(resizingEvent.endTime);
}, [event.id, resizingEvent]);
return ((0, jsx_runtime_1.jsx)(Component, { event: event, contentRef: contentRef, showTooltip: showTooltip, showLeftOverflow: leftOverflow, middleOverflowPxLeft: middleOverflow, showRightOverflow: rightOverflow, resizingStartTime: resizingStartTime, resizingEndTime: resizingEndTime }));
};
exports.EventTile = EventTile;
exports.EventTile.displayName = 'EventTile';
var DefaultEventTile = function (_a) {
var event = _a.event, tooltip = _a.tooltip, contentRef = _a.contentRef, showTooltip = _a.showTooltip, showLeftOverflow = _a.showLeftOverflow, middleOverflowPxLeft = _a.middleOverflowPxLeft, showRightOverflow = _a.showRightOverflow, resizingStartTime = _a.resizingStartTime, resizingEndTime = _a.resizingEndTime;
var title = (0, react_1.useMemo)(function () { return event.title || 'No Title'; }, [event.title]);
var endTimeDiffDays = (0, react_1.useMemo)(function () { return (0, date_fns_1.differenceInCalendarDays)(event.endTime, event.startTime); }, [event]);
var subtitle = (0, react_1.useMemo)(function () {
return "\n ".concat((0, date_fns_1.format)(resizingStartTime !== null && resizingStartTime !== void 0 ? resizingStartTime : event.startTime, 'HH:mm'), " - ").concat((0, date_fns_1.format)(resizingEndTime !== null && resizingEndTime !== void 0 ? resizingEndTime : event.endTime, 'HH:mm'), "\n ").concat(endTimeDiffDays > 0 ? " (+".concat(endTimeDiffDays, " day").concat(endTimeDiffDays > 1 ? 's' : '', ")") : '', "\n ");
}, [resizingStartTime, event, resizingEndTime, endTimeDiffDays]);
var overflowStyle = (0, react_1.useMemo)(function () {
var s = {};
if (showLeftOverflow) {
s.borderLeft = "2px dashed color-mix(in srgb, ".concat(event.bgColor || 'primary.main', " 80%, black)");
s.borderTopLeftRadius = 0;
s.borderBottomLeftRadius = 0;
}
if (showRightOverflow) {
s.borderRight = "2px dashed color-mix(in srgb, ".concat(event.bgColor || 'primary.main', " 80%, black)");
s.borderTopRightRadius = 0;
s.borderBottomRightRadius = 0;
}
return s;
}, [event.bgColor, showLeftOverflow, showRightOverflow]);
var middleOverflow = (0, react_1.useMemo)(function () {
if (middleOverflowPxLeft) {
return ((0, jsx_runtime_1.jsx)("div", { style: {
position: 'absolute',
left: middleOverflowPxLeft,
top: 0,
width: '0px',
height: '100%',
borderRight: "2px dashed color-mix(in srgb, ".concat(event.bgColor || 'primary.main', " 80%, black)"),
} }));
}
return null;
}, [event.bgColor, middleOverflowPxLeft]);
var eventContent = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsxs)(Container, __assign({ bgcolor: event.bgColor || 'primary.main', style: __assign({ cursor: 'move' }, overflowStyle) }, { children: [middleOverflow, (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: contentRef, className: "handle", flex: 1, padding: 1, style: { width: 'fit-content', position: 'sticky', left: 0 } }, { children: [(0, jsx_runtime_1.jsx)(InnerText, __assign({ fontWeight: "bold", color: event.textColor || 'white', className: "ellipsisText" }, { children: title })), (0, jsx_runtime_1.jsx)(InnerText, __assign({ color: event.textColor || 'white', className: "ellipsisText" }, { children: subtitle }))] }))] }), event.id)); }, [contentRef, event.bgColor, event.id, event.textColor, middleOverflow, overflowStyle, subtitle, title]);
var eventTooltip = (0, react_1.useMemo)(function () {
return tooltip !== null && tooltip !== void 0 ? tooltip : ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(InnerText, __assign({ fontWeight: "bold" }, { children: title })), (0, jsx_runtime_1.jsx)(InnerText, { children: subtitle })] }));
}, [subtitle, title, tooltip]);
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, __assign({ title: !showTooltip ? null : eventTooltip, followCursor: true, disableHoverListener: !showTooltip, disableFocusListener: !showTooltip, disableTouchListener: !showTooltip }, { children: eventContent })));
};
exports.DefaultEventTile = DefaultEventTile;