@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
78 lines • 4.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderEventToDayOfMonth = 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 EventDetailsPopover_1 = require("./EventDetailsPopover");
var useCalendarStyles_1 = require("./hooks/useCalendarStyles");
var useUtils_1 = require("./hooks/useUtils");
var Card_1 = require("./Card");
var RenderEventToDayOfMonth = function (props) {
var headerId = (0, react_components_1.useId)();
var events = props.events, date = props.date, onCardHoverChange = props.onCardHoverChange, columnHeight = props.columnHeight;
var _a = (0, useCalendarStyles_1.useCalendarStyles)(), styles = _a.styles, applyEventHouverColorClass = _a.applyEventHouverColorClass;
var positioningRef = React.useRef(null);
var _b = (0, useUtils_1.useUtils)(), getEventColors = _b.getEventColors, getCalendarColors = _b.getCalendarColors;
var handleMouseEnter = React.useCallback(function (eventTitle) {
if (onCardHoverChange) {
onCardHoverChange(true, eventTitle);
}
}, [onCardHoverChange]);
var handleMouseLeave = React.useCallback(function (eventTitle) {
if (onCardHoverChange) {
onCardHoverChange(false, eventTitle);
}
}, [onCardHoverChange]);
// Set the target for the popover
var buttonRef = React.useCallback(function (el) {
var _a;
(_a = positioningRef.current) === null || _a === void 0 ? void 0 : _a.setTarget(el);
}, [positioningRef]);
// Render the card
var renderCard = React.useCallback(function (index, calEvent, colors) {
return (React.createElement("div", { ref: buttonRef },
React.createElement(Card_1.Card, { key: index, className: (0, react_components_1.mergeClasses)(styles.eventCard, applyEventHouverColorClass(colors.backgroundColor, colors.backgroundColor)), paddingTop: "4px", paddingBottom: "4px", paddingLeft: "8px", paddingRight: "8px", marginTop: index === 0 ? "0px" : "5px", cardHeader: React.createElement(react_components_1.Caption1, null, calEvent.title), onMouseEnter: function () { return handleMouseEnter(calEvent.title); }, onMouseLeave: function () { return handleMouseLeave(calEvent.title); } })));
}, [handleMouseEnter, handleMouseLeave, applyEventHouverColorClass]);
var renderCardWithPopOver = React.useCallback(function (calEvent, index, colors) {
return (React.createElement(React.Fragment, null,
React.createElement(react_components_1.Popover, { withArrow: true, key: index, mouseLeaveDelay: 30, closeOnScroll: true, closeOnIframeFocus: true, openOnHover: true },
React.createElement(react_components_1.PopoverTrigger, null, renderCard(index, calEvent, colors)),
React.createElement(react_components_1.PopoverSurface, { "aria-labelledby": headerId, className: (0, react_components_1.mergeClasses)(styles.popoverContent) },
React.createElement(EventDetailsPopover_1.EventDetailsPopover, { event: calEvent })))));
}, [renderCard]);
if (!events || !(events === null || events === void 0 ? void 0 : events.length))
return React.createElement(React.Fragment, null, " ");
return (React.createElement(React.Fragment, null,
React.createElement("div", { style: { height: columnHeight }, className: styles.eventContainer }, events.map(function (calEvent, index) {
var _a;
var eventStart = (0, date_fns_1.startOfDay)(new Date(calEvent.start));
var eventEnd = (0, date_fns_1.endOfDay)(new Date(calEvent.end));
var isEventInDay = (0, date_fns_1.isWithinInterval)(date, {
start: eventStart,
end: eventEnd,
});
if (!isEventInDay)
return null;
var colors = undefined;
if (calEvent.color) {
colors = getCalendarColors(calEvent.color);
}
else {
colors = getEventColors(calEvent.category);
}
var customRender = (_a = calEvent.onRenderInMonthView) === null || _a === void 0 ? void 0 : _a.call(calEvent, calEvent);
// If the event has a custom renderer, use it
if (React.isValidElement(customRender)) {
return React.cloneElement(customRender, {
className: (0, react_components_1.mergeClasses)(customRender.props.className, styles.eventCard),
});
}
return calEvent.enableOnHover
? renderCardWithPopOver(calEvent, index, colors)
: renderCard(index, calEvent, colors);
}))));
};
exports.RenderEventToDayOfMonth = RenderEventToDayOfMonth;
//# sourceMappingURL=RenderEventToDayOfMonth.js.map