@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
120 lines • 7.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WeekView = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var date_fns_1 = require("date-fns");
var react_1 = require("react");
var EventRender_1 = require("./EventRender");
var resize_observer_1 = require("@juggle/resize-observer");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var useCalendar_1 = require("./hooks/useCalendar");
var useUtils_1 = require("./hooks/useUtils");
var useWeekViewStyles_1 = require("./hooks/useWeekViewStyles");
var WeekView = function (props) {
var events = props.events, currentDay = props.currentDay, height = props.height;
var styles = (0, useWeekViewStyles_1.useWeekViewStyles)().styles;
var currentDate = (0, react_1.useState)(currentDay)[0];
var _a = (0, react_1.useState)(32), rowHeight = _a[0], setRowHeight = _a[1]; // Default row height
var calendarRef = (0, react_1.useRef)(null);
var _b = (0, useUtils_1.useUtils)(), getSpanSlots = _b.getSpanSlots, getEventColors = _b.getEventColors, getCalendarColors = _b.getCalendarColors, formatDate = _b.formatDate;
var weekStart = (0, date_fns_1.startOfWeek)(currentDate, { weekStartsOn: 0 });
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var getWeekEvents = (0, useCalendar_1.useCalendar)(timeZone).getWeekEvents;
// Dynamic row height calculation using ResizeObserver
(0, react_1.useEffect)(function () {
var observer = new resize_observer_1.ResizeObserver(function () {
if (calendarRef.current) {
var firstRowCell = calendarRef.current.querySelector('.dayCell');
if (firstRowCell) {
setRowHeight(firstRowCell.offsetHeight);
}
}
});
if (calendarRef.current) {
observer.observe(calendarRef.current);
}
return function () {
observer.disconnect();
};
}, []);
var renderTimeColumn = React.useCallback(function () {
return Array.from({ length: 24 }, function (_, hour) { return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.timeCell },
React.createElement(react_components_1.Body1Strong, null,
" ",
hour,
":00 ")),
React.createElement("div", { className: styles.timeCell }))); });
}, []);
var renderDayHeaders = React.useCallback(function () {
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.blankHeader }),
Array.from({ length: 7 }, function (_, dayIndex) {
var day = (0, date_fns_1.addDays)(weekStart, dayIndex);
var isTodayClass = (0, date_fns_1.isToday)(day) ? styles.todayHeaderCell : '';
return (React.createElement("div", { key: dayIndex, className: (0, react_components_1.mergeClasses)(styles.dayHeaderCell, isTodayClass) },
React.createElement(react_components_1.Text, { weight: "regular", size: 600, style: { paddingRight: 10 } }, formatDate(day.toISOString(), 'dd')),
React.createElement(react_components_1.Body1, null, formatDate(day.toISOString(), 'EEE'))));
})));
}, [weekStart, styles]);
var renderFullDayEvents = React.useCallback(function () {
var weekEvents = getWeekEvents(events, weekStart.toISOString());
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.fullDayLabel },
React.createElement(react_components_1.Body1, null, ControlStrings_1.default.CalendarControlFullDaylabel)),
Array.from({ length: 7 }, function (_, dayIndex) {
var weekDay = formatDate((0, date_fns_1.addDays)(weekStart, dayIndex).toISOString(), 'yyyy-MM-dd');
var dayEvents = weekEvents.find(function (day) { return day.date === weekDay; });
var fullDayEvents = (dayEvents === null || dayEvents === void 0 ? void 0 : dayEvents.fullDayEvents) || [];
return (React.createElement("div", { key: dayIndex, className: styles.fullDayCell }, fullDayEvents.map(function (event) { return (React.createElement("div", { key: event.id, className: styles.fullDayEvent, style: {
gridColumn: "".concat(dayIndex + 2),
backgroundColor: event.color
? getCalendarColors(event.color).backgroundColor
: getEventColors(event.category).backgroundColor,
} },
React.createElement(react_components_1.Caption1Strong, { className: styles.eventTitle }, event.title))); })));
})));
}, [
weekStart,
styles,
getWeekEvents,
getCalendarColors,
getEventColors,
events,
]);
var renderDayCells = React.useCallback(function () {
var weekEvents = getWeekEvents(events, weekStart.toISOString());
return Array.from({ length: 7 }, function (_, dayIndex) {
var weekDay = (0, date_fns_1.format)((0, date_fns_1.addDays)(weekStart, dayIndex), 'yyyy-MM-dd');
var dayEvents = weekEvents.find(function (day) { return day.date === weekDay; });
return (React.createElement(React.Fragment, null, dayEvents === null || dayEvents === void 0 ? void 0 : dayEvents.timeSlots.map(function (timeSlot, slotIndex) {
var eventCount = timeSlot.events.length; // Total events in the slot
return (React.createElement("div", { key: slotIndex, className: styles.dayCell, style: {
gridRow: slotIndex + 3, // Offset to account for header and full-day row
} }, timeSlot.events.map(function (event, eventIndex) {
var startDate = new Date(event.start);
var endDate = new Date(event.end);
// Calculate the start and end slots based on event times
var _a = getSpanSlots(startDate, endDate), spanSlots = _a.spanSlots, startSlot = _a.startSlot;
// Only render the event in its starting timeslot
if (slotIndex === startSlot) {
// Event Render
return (React.createElement(EventRender_1.EventRenderer, { key: event.id, event: event, eventCount: eventCount, spanSlots: spanSlots, rowHeight: rowHeight, eventIndex: eventIndex, view: "week" }));
}
return null; // Skip rendering for non-starting slots
})));
})));
});
}, [weekStart, styles, getWeekEvents, getSpanSlots, rowHeight, events]);
return (React.createElement("div", { className: styles.container, style: { height: height } },
React.createElement("div", { ref: calendarRef, className: styles.weekGrid },
React.createElement("div", { className: styles.timeColumn }, renderTimeColumn()),
renderDayHeaders(),
renderFullDayEvents(),
renderDayCells())));
};
exports.WeekView = WeekView;
exports.default = exports.WeekView;
//# sourceMappingURL=WeekView.js.map