@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
92 lines (91 loc) • 6.27 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.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 EventTileOverride = (0, react_1.useContext)(Scheduler_1.SchedulerContext).EventTile;
var Component = EventTileOverride || DefaultEventTile;
var _b = (0, useEventInfoFlow_1.useEventInfoFlow)(infoFlowData), contentRef = _b.contentRef, isContentVisible = _b.isContentVisible, isEllipsis = _b.isEllipsis;
var showTooltip = (0, react_1.useMemo)(function () { return !isContentVisible || isEllipsis; }, [isContentVisible, isEllipsis]);
var _c = (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 = _c.leftOverflow, middleOverflow = _c.middleOverflow, rightOverflow = _c.rightOverflow;
return ((0, jsx_runtime_1.jsx)(Component, { event: event, contentRef: contentRef, showTooltip: showTooltip, showLeftOverflow: leftOverflow, middleOverflowPxLeft: middleOverflow, showRightOverflow: rightOverflow }));
};
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;
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.startTime, event.endTime]);
var subtitle = (0, react_1.useMemo)(function () {
return "\n ".concat((0, date_fns_1.format)(event.startTime, 'HH:mm'), " - ").concat((0, date_fns_1.format)(event.endTime, 'HH:mm'), "\n ").concat(endTimeDiffDays > 0 ? " (+".concat(endTimeDiffDays, " day").concat(endTimeDiffDays > 1 ? 's' : '', ")") : '', "\n ");
}, [event, 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 || 'text.primary', className: "ellipsisText" }, { children: title })), (0, jsx_runtime_1.jsx)(InnerText, __assign({ color: event.textColor || 'text.primary', 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 })));
};