@selfcommunity/react-ui/lib/cjs/components/Event/Event.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const system_1 = require("@mui/system");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
const EventInfoDetails_1 = tslib_1.__importDefault(require("../../shared/EventInfoDetails"));
const event_1 = require("../../types/event");
const EventParticipantsButton_1 = tslib_1.__importDefault(require("../EventParticipantsButton"));
const User_1 = tslib_1.__importDefault(require("../User"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const constants_1 = require("./constants");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const events_1 = require("../../utils/events");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    detailRoot: `${constants_1.PREFIX}-detail-root`,
    previewRoot: `${constants_1.PREFIX}-preview-root`,
    snippetRoot: `${constants_1.PREFIX}-snippet-root`,
    detailImageWrapper: `${constants_1.PREFIX}-detail-image-wrapper`,
    detailImage: `${constants_1.PREFIX}-detail-image`,
    detailInProgress: `${constants_1.PREFIX}-detail-in-progress`,
    detailNameWrapper: `${constants_1.PREFIX}-detail-name-wrapper`,
    detailName: `${constants_1.PREFIX}-detail-name`,
    detailContent: `${constants_1.PREFIX}-detail-content`,
    detailUser: `${constants_1.PREFIX}-detail-user`,
    detailFirstDivider: `${constants_1.PREFIX}-detail-first-divider`,
    detailSecondDivider: `${constants_1.PREFIX}-detail-second-divider`,
    detailActions: `${constants_1.PREFIX}-detail-actions`,
    previewImageWrapper: `${constants_1.PREFIX}-preview-image-wrapper`,
    previewImage: `${constants_1.PREFIX}-preview-image`,
    previewInProgress: `${constants_1.PREFIX}-preview-in-progress`,
    previewNameWrapper: `${constants_1.PREFIX}-preview-name-wrapper`,
    previewName: `${constants_1.PREFIX}-preview-name`,
    previewContent: `${constants_1.PREFIX}-preview-content`,
    previewActions: `${constants_1.PREFIX}-preview-actions`,
    snippetImage: `${constants_1.PREFIX}-snippet-image`,
    snippetAvatar: `${constants_1.PREFIX}-snippet-avatar`,
    snippetInProgress: `${constants_1.PREFIX}-snippet-in-progress`,
    snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
    snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`,
    snippetActions: `${constants_1.PREFIX}-snippet-actions`,
    finishedChip: `${constants_1.PREFIX}-finished-chip`
};
const Root = (0, styles_1.styled)(Widget_1.default, {
    name: constants_1.PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
const DetailRoot = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'DetailRoot',
    overridesResolver: (_props, styles) => styles.detailRoot
})(() => ({}));
const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'PreviewRoot',
    overridesResolver: (_props, styles) => styles.previewRoot
})(() => ({}));
const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
    name: constants_1.PREFIX,
    slot: 'SnippetRoot',
    overridesResolver: (_props, styles) => styles.snippetRoot
})(() => ({}));
/**
 * > API documentation for the Community-JS Event component. Learn about the available props and the CSS API.
 *
 *
 * This component renders an event item.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)

 #### Import

 ```jsx
 import {event} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCEvent` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCEvent-root|Styles applied to the root element.|
 |avatar|.SCEvent-avatar|Styles applied to the avatar element.|
 |primary|.SCEvent-primary|Styles applied to the primary item element section|
 |secondary|.SCEvent-secondary|Styles applied to the secondary item element section|
 |actions|.SCEvent-actions|Styles applied to the actions section.|


 *
 * @param inProps
 */
function Event(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = event_1.SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
    // STATE
    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, autoSubscribe: false });
    const inProgress = (0, react_1.useMemo)(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
    const isEventFinished = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
    // CONTEXT
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // HOOKS
    const intl = (0, react_intl_1.useIntl)();
    /**
     * Renders event object
     */
    if (!scEvent) {
        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
    }
    /**
     * Renders event object
     */
    let contentObj;
    if (template === event_1.SCEventTemplateType.DETAIL) {
        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
    }
    else if (template === event_1.SCEventTemplateType.PREVIEW) {
        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress })), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
    }
    else {
        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress })), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                            weekday: 'long',
                            month: 'long',
                            day: 'numeric'
                        })}` })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scEvent.name }))] })), secondary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }), " -", ' ', (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` }))] })), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.snippetActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) }))) }));
    }
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`) }, rest, { children: contentObj })));
}
exports.default = Event;