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

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EventDetailsPopover = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var css_1 = require("@emotion/css");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var useUtils_1 = require("./hooks/useUtils");
var stack_1 = require("./stack");
var RenderLabel_1 = require("./RenderLabel");
var Card_1 = require("./Card");
var PADDING_LEFT = '32px';
var useStyles = function () {
    var styles = {
        banner: (0, css_1.css)({
            display: 'flex',
            justifyContent: 'center',
            alignContent: 'center',
            alignItems: 'center',
            padding: "5px 10px 0px 10px",
        }),
        fieldContainer: (0, css_1.css)({
            paddingLeft: PADDING_LEFT,
        }),
    };
    return { styles: styles };
};
var RenderProperty = function (_a) {
    var fieldLabel = _a.fieldLabel, fieldValue = _a.fieldValue, icon = _a.icon;
    return (React.createElement(stack_1.Stack, null,
        React.createElement(RenderLabel_1.RenderLabel, { label: fieldLabel, icon: icon }),
        React.createElement(stack_1.Stack, { paddingLeft: PADDING_LEFT },
            React.createElement(react_components_1.Body1, null, fieldValue))));
};
var EventDetailsPopover = function (props) {
    var event = props.event;
    var title = event.title, start = event.start, end = event.end, location = event.location, category = event.category, attendees = event.attendees, webLink = event.webLink;
    var styles = useStyles().styles;
    var formatDate = (0, useUtils_1.useUtils)().formatDate;
    var formatedStartDate = formatDate(start, 'PPp');
    var formatedEndDate = formatDate(end, 'PPp');
    var partitionedItems = (0, react_components_1.partitionAvatarGroupItems)({
        items: (attendees === null || attendees === void 0 ? void 0 : attendees.map(function (attendee) { return attendee.id; })) || [],
    });
    var getAttendee = React.useCallback(function (id) {
        return (attendees === null || attendees === void 0 ? void 0 : attendees.find(function (attendee) { return attendee.id === id; })) || undefined;
    }, [attendees]);
    var RenderAttendees = React.useCallback(function () {
        return (React.createElement(stack_1.Stack, null,
            React.createElement(RenderLabel_1.RenderLabel, { label: ControlStrings_1.default.CalendarControlAttendeessLabel, icon: 'ph:users-three' }),
            React.createElement(stack_1.Stack, { paddingLeft: PADDING_LEFT },
                React.createElement(react_components_1.AvatarGroup, { layout: "stack" },
                    partitionedItems.inlineItems.map(function (id) {
                        var _a, _b;
                        return (React.createElement(react_components_1.AvatarGroupItem, { name: (_a = getAttendee(id)) === null || _a === void 0 ? void 0 : _a.name, key: id, image: { src: (_b = getAttendee(id)) === null || _b === void 0 ? void 0 : _b.imageUrl } }));
                    }),
                    partitionedItems.overflowItems && (React.createElement(react_components_1.AvatarGroupPopover, null, partitionedItems.overflowItems.map(function (id) {
                        var _a, _b;
                        return (React.createElement(react_components_1.AvatarGroupItem, { name: (_a = getAttendee(id)) === null || _a === void 0 ? void 0 : _a.name, key: id, image: { src: (_b = getAttendee(id)) === null || _b === void 0 ? void 0 : _b.imageUrl } }));
                    })))))));
    }, [partitionedItems]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Card_1.Card, { appearance: "subtle", padding: "m", paddingTop: 's', width: "250px", cardBody: React.createElement(stack_1.Stack, { rowGap: '10px' },
                React.createElement("div", { className: styles.banner },
                    React.createElement(react_components_1.Subtitle1, null, title)),
                React.createElement(react_components_1.Divider, null),
                category && (React.createElement(stack_1.Stack, { direction: "horizontal", justifyContent: "end", width: '100%' },
                    React.createElement(react_components_1.Badge, { appearance: "filled" }, category))),
                React.createElement(RenderProperty, { fieldLabel: "Start", fieldValue: formatedStartDate, icon: 'mingcute:time-line' }),
                React.createElement(RenderProperty, { fieldLabel: "End", fieldValue: formatedEndDate, icon: 'mingcute:time-line' }),
                React.createElement(RenderProperty, { fieldLabel: "Location", fieldValue: location, icon: 'mingcute:location-line' }),
                React.createElement(RenderAttendees, null)), cardFooterContent: React.createElement(stack_1.Stack, { direction: "horizontal", justifyContent: "end", width: "100%" },
                React.createElement(react_components_1.Button, { appearance: "subtle", onClick: function () {
                        window.open(webLink, '_blank');
                    } }, ControlStrings_1.default.CalendarControlDetailsLabel)) })));
};
exports.EventDetailsPopover = EventDetailsPopover;
//# sourceMappingURL=EventDetailsPopover.js.map