@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
108 lines • 6.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DayView = 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 EventRender_1 = require("./EventRender");
var useCalendar_1 = require("./hooks/useCalendar");
var useDayViewStyles_1 = require("./hooks/useDayViewStyles");
var react_1 = require("react");
var useUtils_1 = require("./hooks/useUtils");
var ROW_HEIGHT = 33;
var DayView = function (props) {
var events = props.events, currentDay = props.currentDay, height = props.height;
var styles = (0, useDayViewStyles_1.useDayViewStyles)().styles;
var calendarRef = (0, react_1.useRef)(null);
var _a = (0, useUtils_1.useUtils)(), getSpanSlots = _a.getSpanSlots, getEventColors = _a.getEventColors, getCalendarColors = _a.getCalendarColors;
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var getWeekEvents = (0, useCalendar_1.useCalendar)(timeZone).getWeekEvents;
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 }))); });
}, [styles.timeCell]);
var renderDayHeaders = React.useCallback(function () {
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.blankHeader }),
Array.from({ length: 1 }, function (_, dayIndex) {
var day = (0, date_fns_1.addDays)(currentDay, 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: "semibold", size: 600, style: { paddingRight: 10 } }, (0, date_fns_1.format)(day, 'dd')),
React.createElement(react_components_1.Subtitle1, null, (0, date_fns_1.format)(day, 'LLLL, yyyy'))));
})));
}, [
currentDay,
styles.blankHeader,
styles.dayHeaderCell,
styles.todayHeaderCell,
]);
var renderFullDayEvents = React.useCallback(function () {
var weekEvents = getWeekEvents(events, currentDay.toISOString());
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.fullDayLabel },
React.createElement(react_components_1.Body1, null, "All Day")),
Array.from({ length: 1 }, function (_, dayIndex) {
var weekDay = (0, date_fns_1.format)((0, date_fns_1.addDays)(currentDay, dayIndex), '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), // Position event in the correct day column
backgroundColor: event.color
? getCalendarColors(event.color).backgroundColor
: getEventColors(event.category).backgroundColor,
} },
React.createElement(react_components_1.Caption1Strong, { className: styles.eventTitle }, event.title))); })));
})));
}, [
currentDay,
getWeekEvents,
styles.fullDayCell,
styles.fullDayEvent,
styles.fullDayLabel,
styles.eventTitle,
getCalendarColors,
getEventColors,
]);
// Render the events for the current day
var renderDayCells = React.useCallback(function () {
var weekEvents = getWeekEvents(events, currentDay.toISOString());
// Render the events for the current day
return Array.from({ length: 1 }, function (_, dayIndex) {
var weekDay = (0, date_fns_1.format)((0, date_fns_1.addDays)(currentDay, 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: ROW_HEIGHT, eventIndex: eventIndex, view: "day" }));
}
return null; // Skip rendering for non-starting slots
})));
})));
});
}, [currentDay, getSpanSlots, getWeekEvents, styles.dayCell]);
return (React.createElement("div", { className: styles.container, style: { height: height } },
React.createElement("div", { ref: calendarRef, className: styles.dayGrid },
React.createElement("div", { className: styles.timeColumn }, renderTimeColumn()),
renderDayHeaders(),
renderFullDayEvents(),
renderDayCells())));
};
exports.DayView = DayView;
exports.default = exports.DayView;
//# sourceMappingURL=DayView.js.map