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

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Divider, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { Link, SCRoutes, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
import { SCEventLocationType } from '@selfcommunity/types';
import classNames from 'classnames';
import { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import BaseItem from '../../shared/BaseItem';
import Calendar from '../../shared/Calendar';
import EventInfoDetails from '../../shared/EventInfoDetails';
import { SCEventTemplateType } from '../../types/event';
import EventParticipantsButton from '../EventParticipantsButton';
import User from '../User';
import Widget from '../Widget';
import { PREFIX } from './constants';
import EventSkeleton from './Skeleton';
import { checkEventFinished } from '../../utils/events';
const classes = {
    root: `${PREFIX}-root`,
    detailRoot: `${PREFIX}-detail-root`,
    previewRoot: `${PREFIX}-preview-root`,
    snippetRoot: `${PREFIX}-snippet-root`,
    detailImageWrapper: `${PREFIX}-detail-image-wrapper`,
    detailImage: `${PREFIX}-detail-image`,
    detailInProgress: `${PREFIX}-detail-in-progress`,
    detailNameWrapper: `${PREFIX}-detail-name-wrapper`,
    detailName: `${PREFIX}-detail-name`,
    detailContent: `${PREFIX}-detail-content`,
    detailUser: `${PREFIX}-detail-user`,
    detailFirstDivider: `${PREFIX}-detail-first-divider`,
    detailSecondDivider: `${PREFIX}-detail-second-divider`,
    detailActions: `${PREFIX}-detail-actions`,
    previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
    previewImage: `${PREFIX}-preview-image`,
    previewInProgress: `${PREFIX}-preview-in-progress`,
    previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
    previewName: `${PREFIX}-preview-name`,
    previewContent: `${PREFIX}-preview-content`,
    previewActions: `${PREFIX}-preview-actions`,
    snippetImage: `${PREFIX}-snippet-image`,
    snippetAvatar: `${PREFIX}-snippet-avatar`,
    snippetInProgress: `${PREFIX}-snippet-in-progress`,
    snippetPrimary: `${PREFIX}-snippet-primary`,
    snippetSecondary: `${PREFIX}-snippet-secondary`,
    snippetActions: `${PREFIX}-snippet-actions`,
    finishedChip: `${PREFIX}-finished-chip`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
const DetailRoot = styled(Box, {
    name: PREFIX,
    slot: 'DetailRoot',
    overridesResolver: (_props, styles) => styles.detailRoot
})(() => ({}));
const PreviewRoot = styled(Box, {
    name: PREFIX,
    slot: 'PreviewRoot',
    overridesResolver: (_props, styles) => styles.previewRoot
})(() => ({}));
const SnippetRoot = styled(BaseItem, {
    name: 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
 */
export default function Event(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
    // STATE
    const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
    const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
    const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
    // CONTEXT
    const scRoutingContext = useSCRouting();
    // HOOKS
    const intl = useIntl();
    /**
     * Renders event object
     */
    if (!scEvent) {
        return _jsx(EventSkeleton, Object.assign({ template: template }, EventSkeletonComponentProps, rest, { actions: actions }));
    }
    /**
     * Renders event object
     */
    let contentObj;
    if (template === SCEventTemplateType.DETAIL) {
        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : (_jsx(Box, Object.assign({ className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
    }
    else if (template === SCEventTemplateType.PREVIEW) {
        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress })), isEventFinished && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
    }
    else {
        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress })), isEventFinished && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                            weekday: 'long',
                            month: 'long',
                            day: 'numeric'
                        })}` })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: scEvent.name }))] })), secondary: _jsxs(Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [_jsx(FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }), " -", ' ', (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` }))] })), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Box, Object.assign({ className: classes.snippetActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) }))) }));
    }
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: contentObj })));
}