@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
226 lines (225 loc) • 13.7 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderControls = void 0;
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
var react_1 = require("react");
var Scheduler_1 = require("./Scheduler");
var material_1 = require("@mui/material");
var styled_1 = __importDefault(require("@emotion/styled"));
var LockClockRounded_1 = __importDefault(require("@mui/icons-material/LockClockRounded"));
var LockClockOutlined_1 = __importDefault(require("@mui/icons-material/LockClockOutlined"));
var ScheduleRounded_1 = __importDefault(require("@mui/icons-material/ScheduleRounded"));
var datePositionHelper_1 = require("../helpers/datePositionHelper");
var addDays_1 = require("date-fns/addDays");
var KeyboardArrowLeft_1 = __importDefault(require("@mui/icons-material/KeyboardArrowLeft"));
var KeyboardArrowRight_1 = __importDefault(require("@mui/icons-material/KeyboardArrowRight"));
var KeyboardDoubleArrowLeftRounded_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowLeftRounded"));
var KeyboardDoubleArrowRightRounded_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowRightRounded"));
var Add_1 = __importDefault(require("@mui/icons-material/Add"));
var FloatingHeaderControl = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 0px;\n left: ", ";\n right: ", ";\n opacity: 0.3;\n transition: opacity 0.3s ease;\n\n &:hover {\n opacity: 1;\n }\n"], ["\n position: absolute;\n top: 0px;\n left: ", ";\n right: ", ";\n opacity: 0.3;\n transition: opacity 0.3s ease;\n\n &:hover {\n opacity: 1;\n }\n"])), function (props) { return props.left || 'auto'; }, function (props) { return props.right || 'auto'; });
var HeaderControls = function (_a) {
var eventsBoxElement = _a.eventsBoxElement;
var _b = (0, react_1.useContext)(Scheduler_1.SchedulerContext), extendFrom = _b.extendFrom, extendTo = _b.extendTo, changeDates = _b.changeDates, extendWithScroll = _b.extendWithScroll, ExtendLeftIconButton = _b.ExtendLeftIconButton, ExtendRightIconButton = _b.ExtendRightIconButton, ScrollLeftIconButton = _b.ScrollLeftIconButton, ScrollRightIconButton = _b.ScrollRightIconButton, goNow = _b.goNow, GoNowIconButton = _b.GoNowIconButton, lockNow = _b.lockNow, LockNowIconButton = _b.LockNowIconButton, _c = _b.calendarBounds, start = _c.start, end = _c.end;
var ref = (0, react_1.useRef)(null);
var _d = __read((0, react_1.useState)(false), 2), visibleFirstDay = _d[0], setVisibleFirstDay = _d[1];
var _e = __read((0, react_1.useState)(false), 2), visibleLastDay = _e[0], setVisibleLastDay = _e[1];
var _f = __read((0, react_1.useState)(false), 2), nowLocked = _f[0], setNowLocked = _f[1];
var _g = __read((0, react_1.useState)(false), 2), initializedNow = _g[0], setInitializedNow = _g[1];
(0, react_1.useEffect)(function () {
var _a;
if (ref) {
var onScroll = function () {
var _a;
if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement))
return;
var left = ref.current.parentElement.scrollLeft;
var width = ref.current.parentElement.scrollWidth - ref.current.parentElement.clientWidth;
setVisibleFirstDay(left < 80);
setVisibleLastDay(width - left < 80);
};
if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement) {
ref.current.parentElement.addEventListener('scroll', onScroll);
}
}
}, [ref]);
var scrollLeft = (0, react_1.useCallback)(function () {
var _a;
var parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
if (parentElement) {
parentElement.scrollTo({
left: 0,
behavior: 'smooth',
});
}
}, []);
var scrollRight = (0, react_1.useCallback)(function () {
var _a;
var parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
if (parentElement) {
parentElement.scrollTo({
left: parentElement.scrollWidth,
behavior: 'smooth',
});
}
}, []);
var moveDatesLeft = (0, react_1.useCallback)(function () {
if (changeDates) {
changeDates((0, addDays_1.addDays)(start, -1), (0, addDays_1.addDays)(end, -1));
}
}, [changeDates, start, end]);
var moveDatesRight = (0, react_1.useCallback)(function () {
if (changeDates) {
changeDates((0, addDays_1.addDays)(start, 1), (0, addDays_1.addDays)(end, 1));
}
}, [changeDates, start, end]);
var showScrollLeft = (0, react_1.useMemo)(function () {
if (extendWithScroll && !changeDates)
return true;
return !visibleFirstDay;
}, [changeDates, extendWithScroll, visibleFirstDay]);
var showScrollRight = (0, react_1.useMemo)(function () {
if (extendWithScroll && !changeDates)
return true;
return !visibleLastDay;
}, [changeDates, extendWithScroll, visibleLastDay]);
var showExtendLeft = (0, react_1.useMemo)(function () {
if (extendWithScroll)
return false;
return visibleFirstDay && extendFrom;
}, [extendFrom, extendWithScroll, visibleFirstDay]);
var showExtendRight = (0, react_1.useMemo)(function () {
if (extendWithScroll)
return false;
return visibleLastDay && extendTo;
}, [extendTo, extendWithScroll, visibleLastDay]);
var showMoveDatesLeft = (0, react_1.useMemo)(function () {
if (!extendWithScroll)
return false;
return visibleFirstDay && changeDates;
}, [changeDates, extendWithScroll, visibleFirstDay]);
var showMoveDatesRight = (0, react_1.useMemo)(function () {
if (!extendWithScroll)
return false;
return visibleLastDay && changeDates;
}, [changeDates, extendWithScroll, visibleLastDay]);
var showGoNow = (0, react_1.useMemo)(function () {
if (!goNow)
return false;
// if the current date is within the visible range
if (start < new Date() && end > new Date())
return true;
return false;
}, [goNow, start, end]);
var handleGoNow = (0, react_1.useCallback)(function () {
if (eventsBoxElement) {
eventsBoxElement.scrollTo({
left: (0, datePositionHelper_1.dateToPosition)(new Date(), start, end, eventsBoxElement.scrollWidth) - eventsBoxElement.clientWidth / 2,
behavior: 'smooth',
});
}
}, [end, eventsBoxElement, start]);
var handleLockNow = (0, react_1.useCallback)(function () {
handleGoNow();
setNowLocked(function (prev) { return !prev; });
}, [handleGoNow]);
(0, react_1.useEffect)(function () {
var intervalId = null;
if (nowLocked) {
intervalId = setInterval(function () {
handleGoNow();
}, 1000 * 10);
}
return function () {
if (intervalId) {
clearInterval(intervalId);
}
};
}, [handleGoNow, nowLocked]);
(0, react_1.useEffect)(function () {
// If go now is enabled and now is within the visible range, go now to init view
if (showGoNow && !initializedNow) {
handleGoNow();
setInitializedNow(true);
}
}, [goNow, handleGoNow, initializedNow, showGoNow]);
var leftSidePx = (0, react_1.useMemo)(function () {
if (showGoNow && lockNow) {
return '120px';
}
if (showGoNow) {
return '80px';
}
return '40px';
}, [lockNow, showGoNow]);
var rightSidePx = (0, react_1.useMemo)(function () { return '1px'; }, []);
var nowSidePx = (0, react_1.useMemo)(function () {
if (showGoNow && lockNow) {
return '80px';
}
if (showGoNow) {
return '40px';
}
return '0px';
}, [lockNow, showGoNow]);
var lockSidePx = (0, react_1.useMemo)(function () {
if (showGoNow && lockNow) {
return '40px';
}
return '0px';
}, [lockNow, showGoNow]);
return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: ref, style: {
position: 'sticky',
top: '0px',
left: '0px',
zIndex: 10,
} }, { children: [showScrollLeft && (
// < ...
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: leftSidePx }, { children: ScrollLeftIconButton ? ((0, jsx_runtime_1.jsx)(ScrollLeftIconButton, { onClick: scrollLeft, disabled: visibleFirstDay })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: scrollLeft, disabled: visibleFirstDay }, { children: (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, { fontSize: "large" }) }))) }))), showExtendLeft && extendFrom && (
// + ...
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: leftSidePx }, { children: ExtendLeftIconButton ? ((0, jsx_runtime_1.jsx)(ExtendLeftIconButton, { onClick: extendFrom })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: extendFrom }, { children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: "large" }) }))) }))), showMoveDatesLeft && (
// << ...
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: leftSidePx }, { children: ExtendLeftIconButton ? ((0, jsx_runtime_1.jsx)(ExtendLeftIconButton, { onClick: moveDatesLeft })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: moveDatesLeft }, { children: (0, jsx_runtime_1.jsx)(KeyboardDoubleArrowLeftRounded_1.default, { fontSize: "large" }) }))) }))), showScrollRight && (
// ... >
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: rightSidePx }, { children: ScrollRightIconButton ? ((0, jsx_runtime_1.jsx)(ScrollRightIconButton, { onClick: scrollRight, disabled: visibleLastDay })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: scrollRight, disabled: visibleLastDay }, { children: (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, { fontSize: "large" }) }))) }))), showExtendRight && extendTo && (
// ... +
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: rightSidePx }, { children: ExtendRightIconButton ? ((0, jsx_runtime_1.jsx)(ExtendRightIconButton, { onClick: extendTo })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: extendTo }, { children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: "large" }) }))) }))), showMoveDatesRight && (
// ... >>
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: rightSidePx }, { children: ExtendRightIconButton ? ((0, jsx_runtime_1.jsx)(ExtendRightIconButton, { onClick: moveDatesRight })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: moveDatesRight }, { children: (0, jsx_runtime_1.jsx)(KeyboardDoubleArrowRightRounded_1.default, { fontSize: "large" }) }))) }))), showGoNow && ((0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: nowSidePx }, { children: GoNowIconButton ? ((0, jsx_runtime_1.jsx)(GoNowIconButton, { onClick: handleGoNow })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: handleGoNow }, { children: (0, jsx_runtime_1.jsx)(ScheduleRounded_1.default, { fontSize: "large" }) }))) }))), showGoNow && lockNow && ((0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: lockSidePx }, { children: LockNowIconButton ? ((0, jsx_runtime_1.jsx)(LockNowIconButton, { locked: nowLocked, onClick: handleLockNow })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: handleLockNow }, { children: nowLocked ? (0, jsx_runtime_1.jsx)(LockClockRounded_1.default, { fontSize: "large" }) : (0, jsx_runtime_1.jsx)(LockClockOutlined_1.default, { fontSize: "large" }) }))) })))] })));
};
exports.HeaderControls = HeaderControls;
var templateObject_1;