@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
81 lines (80 loc) • 4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useEventInfoFlow = void 0;
var react_1 = require("react");
var useEllipsisObserver_1 = require("./useEllipsisObserver");
var useVisibilityObserver_1 = require("./useVisibilityObserver");
var useEventInfoFlow = function (infoFlowData) {
var contentRef = (0, react_1.useRef)();
var container = (0, react_1.useMemo)(function () { var _a; return (_a = infoFlowData === null || infoFlowData === void 0 ? void 0 : infoFlowData.scrollRef) !== null && _a !== void 0 ? _a : null; }, [infoFlowData]);
var dataGridProps = (0, react_1.useMemo)(function () { var _a; return (_a = infoFlowData === null || infoFlowData === void 0 ? void 0 : infoFlowData.dataGridProps) !== null && _a !== void 0 ? _a : null; }, [infoFlowData]);
var config = (0, react_1.useMemo)(function () { var _a; return (_a = infoFlowData === null || infoFlowData === void 0 ? void 0 : infoFlowData.config) !== null && _a !== void 0 ? _a : null; }, [infoFlowData]);
var isContentVisible = (0, useVisibilityObserver_1.useVisibilityObserver)({
root: container,
targetRef: contentRef,
}).isVisible;
var eventStartX = (0, react_1.useMemo)(function () {
if (dataGridProps && config) {
return (dataGridProps.x * config.divisionWidth) / config.divisionParts;
}
return 0;
}, [config, dataGridProps]);
var eventEndX = (0, react_1.useMemo)(function () {
if (dataGridProps && config) {
return ((dataGridProps.x + dataGridProps.w) * config.divisionWidth) / config.divisionParts;
}
return 0;
}, [config, dataGridProps]);
var moveContent = (0, react_1.useCallback)(function (container, content) {
var newX = container.scrollLeft - eventStartX;
var width = content.getBoundingClientRect().width;
if (eventStartX + newX <= eventStartX) {
// Left event box limit
content.style.transform = '';
}
else if (eventStartX + newX + width >= eventEndX) {
// Right event box limit
content.style.display = 'grid';
content.style.width = 'fit-contents';
content.style.right = '0px';
}
else {
// Move info inside event box
// ((eventStartX + newX) > eventStartX) && ((eventStartX + newX + width) < eventEndX)
content.style.transform = "translateX(".concat(newX, "px)");
}
}, [eventEndX, eventStartX]);
var handleScroll = (0, react_1.useCallback)(function () {
var content = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current;
if (!container || !content)
return;
// Move event content inside the event box
moveContent(container, content);
}, [container, moveContent]);
(0, react_1.useEffect)(function () {
if (!container)
return;
container.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll);
handleScroll();
return function () {
container.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleScroll);
};
}, [container, handleScroll]);
(0, react_1.useEffect)(function () {
if (contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) {
// Init Event position
contentRef.current.style.display = 'grid';
contentRef.current.style.width = 'fit-contents';
contentRef.current.style.right = '0px';
}
}, []);
var isEllipsis = (0, useEllipsisObserver_1.useEllipsisObserver)(contentRef).isEllipsis;
return {
contentRef: contentRef,
isContentVisible: isContentVisible,
isEllipsis: isEllipsis,
};
};
exports.useEventInfoFlow = useEventInfoFlow;