@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
154 lines (146 loc) • 8.38 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);
};
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.useSchedulerViewControls = void 0;
var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
var react_1 = require("react");
var material_1 = require("@mui/material");
var x_date_pickers_1 = require("@mui/x-date-pickers");
var date_fns_1 = require("date-fns");
var intervalOptions = [
{ label: '15 minutes', value: 0.25 },
{ label: '30 minutes', value: 0.5 },
{ label: '1 hour', value: 1 },
{ label: '2 hours', value: 2 },
{ label: '1 day', value: 24 },
];
var useSchedulerViewControls = function (initialDate, _a) {
var _b = _a === void 0 ? {} : _a, startDateProp = _b.startDate, setStartDateProp = _b.setStartDate, endDateProp = _b.endDate, setEndDateProp = _b.setEndDate, intervalProp = _b.interval;
var _c = __read((0, react_1.useState)((0, date_fns_1.startOfToday)()), 2), startDate = _c[0], setStartDate = _c[1];
var _d = __read((0, react_1.useState)((0, date_fns_1.addDays)((0, date_fns_1.startOfToday)(), 2)), 2), endDate = _d[0], setEndDate = _d[1];
var _e = __read((0, react_1.useMemo)(function () { return [startDateProp !== null && startDateProp !== void 0 ? startDateProp : startDate, setStartDateProp !== null && setStartDateProp !== void 0 ? setStartDateProp : setStartDate]; }, [startDateProp, startDate, setStartDateProp]), 2), currentStartDate = _e[0], setCurrentStartDate = _e[1];
var _f = __read((0, react_1.useMemo)(function () { return [endDateProp !== null && endDateProp !== void 0 ? endDateProp : endDate, setEndDateProp !== null && setEndDateProp !== void 0 ? setEndDateProp : setEndDate]; }, [endDateProp, endDate, setEndDateProp]), 2), currentEndDate = _f[0], setCurrentEndDate = _f[1];
var _g = __read((0, react_1.useState)(3), 2), currentDaysToDisplay = _g[0], setCurrentDaysToDisplay = _g[1];
var _h = __read((0, react_1.useState)(2), 2), currentInterval = _h[0], setCurrentInterval = _h[1];
var _j = __read((0, react_1.useState)(0), 2), currentPrevDays = _j[0], setCurrentPrevDays = _j[1];
// Update view according start/end dates
(0, react_1.useEffect)(function () {
var updatedCurrentDaysToDisplay = (0, date_fns_1.differenceInDays)(currentEndDate, initialDate);
if (updatedCurrentDaysToDisplay !== currentDaysToDisplay) {
setCurrentDaysToDisplay(updatedCurrentDaysToDisplay);
}
var updatedCurrentPrevDays = (0, date_fns_1.differenceInDays)(initialDate, currentStartDate);
if (updatedCurrentPrevDays !== currentPrevDays) {
setCurrentPrevDays(updatedCurrentPrevDays);
}
}, [initialDate, currentStartDate, currentEndDate, currentDaysToDisplay, currentPrevDays]);
// Update startDate and endDate when initialDate changes
/*
const prevInitialDate = useRef<Date | null>(null);
useEffect(() => {
if (!prevInitialDate.current) {
prevInitialDate.current = initialDate;
return;
}
if (initialDate.getTime() > prevInitialDate.current.getTime()) {
const initialDateShift = differenceInDays(initialDate, prevInitialDate.current);
const updatedCurrentStartDate = addDays(currentStartDate, initialDateShift);
if (updatedCurrentStartDate.getTime() !== currentStartDate.getTime()) {
setCurrentStartDate(updatedCurrentStartDate);
}
const updatedCurrentEndDate = addDays(currentEndDate, initialDateShift);
if (updatedCurrentEndDate.getTime() !== currentEndDate.getTime()) {
setCurrentEndDate(updatedCurrentEndDate);
}
prevInitialDate.current = initialDate;
} else if (initialDate.getTime() < prevInitialDate.current.getTime()) {
const initialDateShift = differenceInDays(prevInitialDate.current, initialDate);
const updatedCurrentStartDate = addDays(currentStartDate, -initialDateShift);
if (updatedCurrentStartDate.getTime() !== currentStartDate.getTime()) {
setCurrentStartDate(updatedCurrentStartDate);
}
const updatedCurrentEndDate = addDays(currentEndDate, -initialDateShift);
if (updatedCurrentEndDate.getTime() !== currentEndDate.getTime()) {
setCurrentEndDate(updatedCurrentEndDate);
}
prevInitialDate.current = initialDate;
}
}, [initialDate, currentStartDate, currentEndDate, setCurrentStartDate, setCurrentEndDate]);
*/
var extendFrom = (0, react_1.useCallback)(function () {
setCurrentStartDate((0, date_fns_1.addDays)(currentStartDate, -1));
}, [setCurrentStartDate, currentStartDate]);
var extendTo = (0, react_1.useCallback)(function () {
setCurrentEndDate((0, date_fns_1.addDays)(currentEndDate, 1));
}, [currentEndDate, setCurrentEndDate]);
var handleChangeInterval = (0, react_1.useCallback)(function (event) {
setCurrentInterval(Number(event.target.value));
}, []);
var handleChangeFrom = (0, react_1.useCallback)(function (date) {
if (!date)
return;
if (date > endDate) {
setEndDate(date);
}
setStartDate(date);
}, [endDate]);
var handleChangeTo = (0, react_1.useCallback)(function (date) {
if (!date)
return;
if (date < startDate) {
setStartDate(date);
}
setEndDate(date);
}, [startDate]);
var controls = (0, react_1.useMemo)(function () {
return startDateProp && endDateProp && intervalProp ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startDateProp ? null : ((0, jsx_runtime_1.jsx)(material_1.FormControl, __assign({ sx: { m: 1, minWidth: 120 } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: "From", value: startDate, onChange: handleChangeFrom }) }))), endDateProp ? null : ((0, jsx_runtime_1.jsx)(material_1.FormControl, __assign({ sx: { m: 1, minWidth: 120 } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: "To", value: endDate, onChange: handleChangeTo }) }))), intervalProp ? null : ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ sx: { m: 1, minWidth: 120 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "interval-select-label" }, { children: "Interval" })), (0, jsx_runtime_1.jsx)(material_1.Select, __assign({ labelId: "interval-select-label", label: "Interval", value: "".concat(currentInterval), onChange: handleChangeInterval }, { children: intervalOptions.map(function (_a) {
var label = _a.label, value = _a.value;
return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: value }, { children: label }), value));
}) }))] })))] }));
}, [
startDateProp,
startDate,
handleChangeFrom,
endDateProp,
endDate,
handleChangeTo,
intervalProp,
currentInterval,
handleChangeInterval,
]);
return {
controls: controls,
daysToDisplay: currentDaysToDisplay,
interval: intervalProp !== null && intervalProp !== void 0 ? intervalProp : currentInterval,
prevDays: currentPrevDays,
extendFrom: extendFrom,
extendTo: extendTo,
};
};
exports.useSchedulerViewControls = useSchedulerViewControls;