@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
163 lines • 9.32 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Calendar = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var useCalendarStyles_1 = require("./hooks/useCalendarStyles");
var date_fns_1 = require("date-fns");
var react_1 = require("react");
var Day_1 = require("./Day");
var DayView_1 = tslib_1.__importDefault(require("./DayView"));
var ECalendarViews_1 = require("./models/ECalendarViews");
var resize_observer_1 = require("@juggle/resize-observer");
var Stack_1 = require("./stack/Stack");
var Toolbar_1 = tslib_1.__importDefault(require("./Toolbar"));
var WeekView_1 = tslib_1.__importDefault(require("./WeekView"));
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var useCalendar_1 = require("./hooks/useCalendar");
var daysOfWeek = [
ControlStrings_1.default.CalendarControlDayOfWeekSunday,
ControlStrings_1.default.CalendarControlDayOfWeekMonday,
ControlStrings_1.default.CalendarControlDayOfWeekTuesday,
ControlStrings_1.default.CalendarControlDayOfWeekWednesday,
ControlStrings_1.default.CalendarControlDayOfWeekThursday,
ControlStrings_1.default.CalendarControlDayOfWeekFriday,
ControlStrings_1.default.CalendarControlDayOfWeekSaturday,
];
var RenderMonthView = React.memo(function (_a) {
var currentDate = _a.currentDate, rowHeight = _a.rowHeight, getCalendarDays = _a.getCalendarDays, getEventsForDay = _a.getEventsForDay, styles = _a.styles, onDaySlotClick = _a.onDaySlotClick, height = _a.height, calendarRef = _a.calendarRef;
return (React.createElement(Stack_1.Stack, { height: height, width: "100%", direction: "vertical", justifyContent: "start", alignItems: "start" },
React.createElement("div", { className: styles.calendarWrapper, ref: calendarRef },
daysOfWeek.map(function (day) { return (React.createElement(react_components_1.Body1, { key: day, className: styles.dayHeader }, day)); }),
getCalendarDays(currentDate).map(function (dateObj, index) {
var day = dateObj.day, currentMonth = dateObj.currentMonth;
var dayEvents = currentMonth ? getEventsForDay(dateObj) : [];
return (React.createElement(Day_1.Day, { key: index, day: day, date: dateObj.date, currentMonth: dateObj.currentMonth, events: dayEvents, columnHeight: rowHeight || 0, onDayClick: onDaySlotClick }));
}))));
});
var RenderWeekView = React.memo(function (_a) {
var events = _a.events, currentDay = _a.currentDay, height = _a.height;
return React.createElement(WeekView_1.default, { events: events, currentDay: currentDay, height: height });
});
var RenderDayView = React.memo(function (_a) {
var events = _a.events, currentDay = _a.currentDay, height = _a.height;
return React.createElement(DayView_1.default, { currentDay: currentDay, events: events, height: height });
});
var Calendar = function (_a) {
var events = _a.events, _b = _a.height, height = _b === void 0 ? 800 : _b, theme = _a.theme, onDayChange = _a.onDayChange, onMonthChange = _a.onMonthChange, onWeekChange = _a.onWeekChange, onViewChange = _a.onViewChange, onDaySlotClick = _a.onDaySlotClick, defaultView = _a.defaultView;
var styles = (0, useCalendarStyles_1.useCalendarStyles)().styles;
var calendarRef = (0, react_1.useRef)(null);
var _c = (0, react_1.useState)(null), rowHeight = _c[0], setRowHeight = _c[1];
var totalDisplayedDays = 42;
var rowHeightRef = (0, react_1.useRef)(0);
// Default current date
var _d = (0, react_1.useState)(new Date()), currentDate = _d[0], setCurrentDate = _d[1];
// Default view
var _e = (0, react_1.useState)(defaultView !== null && defaultView !== void 0 ? defaultView : ECalendarViews_1.ECalendarViews.Month), selectedView = _e[0], setSelectedView = _e[1];
var getMonthCalendar = (0, useCalendar_1.useCalendar)(Intl.DateTimeFormat().resolvedOptions().timeZone).getMonthCalendar;
var getCalendarDays = React.useCallback(function (date) {
var month = date.getMonth();
var firstDayOfMonth = (0, date_fns_1.startOfMonth)(date);
var firstDayOfWeek = (0, date_fns_1.startOfWeek)(firstDayOfMonth);
var calendarDays = Array.from({ length: totalDisplayedDays }, function (_, index) {
var relativeDay = (0, date_fns_1.addDays)(firstDayOfWeek, index);
return {
day: relativeDay.getDate(),
currentMonth: relativeDay.getMonth() === month,
date: relativeDay,
};
});
return calendarDays;
}, []);
var handleMonthChange = React.useCallback(function (date) {
if (onMonthChange) {
onMonthChange(date);
}
setCurrentDate(date);
}, [onMonthChange]);
var handleDayChange = React.useCallback(function (date) {
if (onDayChange) {
onDayChange(date);
}
setCurrentDate(date);
}, [onDayChange]);
var handleWeekChange = React.useCallback(function (date) {
if (onWeekChange) {
onWeekChange(date);
}
setCurrentDate(date);
}, [onWeekChange]);
var handleViewChange = React.useCallback(function (view) {
if (onViewChange) {
onViewChange(view);
}
setSelectedView(view);
}, [onViewChange]);
var getEventsForDay = React.useCallback(function (dateObj) {
var _a;
var date = dateObj.date;
var monthEvents = getMonthCalendar(events, currentDate.getFullYear(), currentDate.getMonth());
var dayString = (0, date_fns_1.format)(date, 'yyyy-MM-dd');
var dayEvents = ((_a = monthEvents[dayString]) === null || _a === void 0 ? void 0 : _a.flatMap(function (slot) { return slot; })) || [];
return dayEvents;
}, [currentDate, events]);
(0, react_1.useEffect)(function () {
var handleResize = function () {
if (calendarRef.current) {
requestAnimationFrame(function () {
if (calendarRef.current) {
var firstDataColumnCell = calendarRef.current.querySelector(".".concat(styles.calendarWrapper, " > div:nth-child(8)"));
if (firstDataColumnCell) {
setRowHeight(firstDataColumnCell.offsetHeight);
rowHeightRef.current = firstDataColumnCell.offsetHeight;
}
}
});
}
};
var observer = new resize_observer_1.ResizeObserver(handleResize);
if (calendarRef.current) {
observer.observe(calendarRef.current);
}
handleResize();
window.addEventListener('resize', handleResize);
return function () {
observer.disconnect();
window.removeEventListener('resize', handleResize);
};
}, [styles.calendarWrapper]);
(0, react_1.useEffect)(function () {
setSelectedView(defaultView !== null && defaultView !== void 0 ? defaultView : ECalendarViews_1.ECalendarViews.Month);
}, [defaultView]);
var RenderContent = React.useCallback(function () {
switch (selectedView) {
case ECalendarViews_1.ECalendarViews.Month:
return (React.createElement(RenderMonthView, { events: events, currentDate: currentDate, rowHeight: rowHeight, getCalendarDays: getCalendarDays, getEventsForDay: getEventsForDay, styles: styles, onDaySlotClick: onDaySlotClick, height: height, calendarRef: calendarRef }));
case ECalendarViews_1.ECalendarViews.Week:
return (React.createElement(RenderWeekView, { events: events, currentDay: currentDate, height: height }));
case ECalendarViews_1.ECalendarViews.Day:
return (React.createElement(RenderDayView, { events: events, currentDay: currentDate, height: height }));
default:
return (React.createElement(RenderMonthView, { events: events, currentDate: currentDate, rowHeight: rowHeight, getCalendarDays: getCalendarDays, getEventsForDay: getEventsForDay, styles: styles, onDaySlotClick: onDaySlotClick, height: height, calendarRef: calendarRef }));
}
}, [
selectedView,
events,
currentDate,
rowHeight,
getCalendarDays,
getEventsForDay,
styles,
onDaySlotClick,
height,
]);
return (React.createElement(react_components_1.IdPrefixProvider, { value: "calendarControl-" },
React.createElement(react_components_1.FluentProvider, { theme: theme !== null && theme !== void 0 ? theme : react_components_1.webLightTheme },
React.createElement(Stack_1.Stack, { height: "100%", direction: "vertical", justifyContent: "start" },
React.createElement(Toolbar_1.default, { selectedView: selectedView, onSelectedView: handleViewChange, currentDate: currentDate, setCurrentDate: setCurrentDate, onWeekChange: handleWeekChange, onMonthChange: handleMonthChange, onDayChange: handleDayChange }),
React.createElement(RenderContent, null)))));
};
exports.Calendar = Calendar;
exports.default = exports.Calendar;
//# sourceMappingURL=Calendar.js.map