@pnp/spfx-controls-react/lib-commonjs/controls/calendar/EventPopoverCard.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EventPopoverCard = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var EventDetailsPopover_1 = require("./EventDetailsPopover");
var useUtils_1 = require("./hooks/useUtils");
var useWeekViewStyles_1 = require("./hooks/useWeekViewStyles");
var stack_1 = require("./stack");
var EventPopoverCard = function (_a) {
    var event = _a.event, colors = _a.colors, spanSlots = _a.spanSlots, rowHeight = _a.rowHeight, eventIndex = _a.eventIndex, eventCount = _a.eventCount;
    var headerId = (0, react_components_1.useId)();
    var _b = (0, useWeekViewStyles_1.useWeekViewStyles)(), styles = _b.styles, applyEventHouverColorClass = _b.applyEventHouverColorClass, appyDynamicStyles = _b.appyDynamicStyles;
    var cardRef = React.useRef(null);
    var formatDate = (0, useUtils_1.useUtils)().formatDate;
    var cardContent = React.useMemo(function () { return (React.createElement("div", null,
        React.createElement(stack_1.Stack, { columnGap: '4px', alignItems: "center" },
            React.createElement(react_components_1.Caption1Strong, { className: styles.eventTitle }, event.title),
            React.createElement(stack_1.Stack, { columnGap: '4px', direction: "horizontal", alignItems: "center", justifyContent: "start" },
                React.createElement(react_components_1.Caption1, null,
                    formatDate(event.start, "HH:mm"),
                    "H"),
                " - ",
                React.createElement(react_components_1.Caption1, null,
                    formatDate(event.end, "HH:mm"),
                    "H"))))); }, [event]);
    return (React.createElement(react_components_1.Card, { ref: cardRef, key: event.id, className: (0, react_components_1.mergeClasses)(styles.eventCard, applyEventHouverColorClass(colors.backgroundColor, colors.backgroundColor), appyDynamicStyles(eventIndex, eventCount, rowHeight, spanSlots)) }, event.enableOnHover ? (React.createElement(react_components_1.Popover, { withArrow: true, mouseLeaveDelay: 50, closeOnScroll: true, closeOnIframeFocus: true, openOnHover: true },
        React.createElement(react_components_1.PopoverTrigger, null, cardContent),
        React.createElement(react_components_1.PopoverSurface, { "aria-labelledby": headerId, className: (0, react_components_1.mergeClasses)(styles.popoverContent) },
            React.createElement(EventDetailsPopover_1.EventDetailsPopover, { event: event })))) : (cardContent)));
};
exports.EventPopoverCard = EventPopoverCard;
//# sourceMappingURL=EventPopoverCard.js.map