@josmangarsal/pragmatic-scheduler
Version:
React resource scheduler
107 lines (106 loc) • 6.56 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 AddCircle_1 = __importDefault(require("@mui/icons-material/AddCircle"));
var ArrowCircleLeft_1 = __importDefault(require("@mui/icons-material/ArrowCircleLeft"));
var ArrowCircleRight_1 = __importDefault(require("@mui/icons-material/ArrowCircleRight"));
var styled_1 = __importDefault(require("@emotion/styled"));
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 () {
var _a = (0, react_1.useContext)(Scheduler_1.SchedulerContext), extendFrom = _a.extendFrom, extendTo = _a.extendTo, ExtendLeftIconButton = _a.ExtendLeftIconButton, ExtendRightIconButton = _a.ExtendRightIconButton, ScrollLeftIconButton = _a.ScrollLeftIconButton, ScrollRightIconButton = _a.ScrollRightIconButton;
var ref = (0, react_1.useRef)(null);
var _b = __read((0, react_1.useState)(false), 2), visibleFirstDay = _b[0], setVisibleFirstDay = _b[1];
var _c = __read((0, react_1.useState)(false), 2), visibleLastDay = _c[0], setVisibleLastDay = _c[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',
});
}
}, []);
return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: ref, style: {
position: 'sticky',
top: '0px',
left: '0px',
zIndex: 10,
} }, { children: [visibleFirstDay && extendFrom && (
// + ...
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ left: "0px" }, { 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)(AddCircle_1.default, { fontSize: "large" }) }))) }))), visibleLastDay && extendTo && (
// ... +
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: "1px" }, { 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)(AddCircle_1.default, { fontSize: "large" }) }))) }))), !visibleFirstDay && (
// << ...
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ left: "0px" }, { children: ScrollLeftIconButton ? ((0, jsx_runtime_1.jsx)(ScrollLeftIconButton, { onClick: scrollLeft })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: scrollLeft }, { children: (0, jsx_runtime_1.jsx)(ArrowCircleLeft_1.default, { fontSize: "large" }) }))) }))), !visibleLastDay && (
// ... >>
(0, jsx_runtime_1.jsx)(FloatingHeaderControl, __assign({ right: "1px" }, { children: ScrollRightIconButton ? ((0, jsx_runtime_1.jsx)(ScrollRightIconButton, { onClick: scrollRight })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: scrollRight }, { children: (0, jsx_runtime_1.jsx)(ArrowCircleRight_1.default, { fontSize: "large" }) }))) })))] })));
};
exports.HeaderControls = HeaderControls;
var templateObject_1;