@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
144 lines (135 loc) • 10.5 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Chip, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { SCPreferences, useSCFetchEvent, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
import classNames from 'classnames';
import { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Bullet from '../../shared/Bullet';
import Calendar from '../../shared/Calendar';
import EventActionsMenu from '../../shared/EventActionsMenu';
import { checkEventFinished } from '../../utils/events';
import EditEventButton from '../EditEventButton';
import EventInviteButton from '../EventInviteButton';
import EventSubscribeButton from '../EventSubscribeButton';
import User from '../User';
import { PREFIX } from './constants';
import EventHeaderSkeleton from './Skeleton';
const classes = {
root: `${PREFIX}-root`,
cover: `${PREFIX}-cover`,
time: `${PREFIX}-time`,
calendar: `${PREFIX}-calendar`,
inProgress: `${PREFIX}-in-progress`,
chip: `${PREFIX}-chip`,
chipIcon: `${PREFIX}-chip-icon`,
info: `${PREFIX}-info`,
name: `${PREFIX}-name`,
visibility: `${PREFIX}-visibility`,
visibilityItem: `${PREFIX}-visibility-item`,
planner: `${PREFIX}-planner`,
multiActions: `${PREFIX}-multi-actions`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root',
shouldForwardProp: (prop) => prop !== 'isEventAdmin' && prop !== 'isEventFinished'
})(() => ({}));
/**
* > API documentation for the Community-JS Event Header component. Learn about the available props and the CSS API.
*
*
* This component renders the events top section.
#### Import
```jsx
import {UserProfileHeader} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCEventHeader` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCEventHeader-root|Styles applied to the root element.|
|cover|.SCEventHeader-cover|Styles applied to the cover element.|
|time|.SCEventHeader-time|Styles applied to the time element.|
|calendar|.SCEventHeader-calendar|Styles applied to the calendar element.|
|info|SCEventHeader-info|Styles applied to the info section.|
|name|SCEventHeader-username|Styles applied to the username element.|
|visibility|SCEventHeader-visibility|Styles applied to the visibility section.|
|visibilityItem|SCEventHeader-visibility-item|Styles applied to the visibility element.|
|multiActions|SCEventHeader-multi-action|Styles applied to the multi actions section.|
* @param inProps
*/
export default function EventHeader(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { id = null, className = null, event, eventId = null, EventSubscribeButtonProps = {}, EventActionsProps = {} } = props, rest = __rest(props, ["id", "className", "event", "eventId", "EventSubscribeButtonProps", "EventActionsProps"]);
// PREFERENCES
const scPreferences = useSCPreferences();
// CONTEXT
const scUserContext = useSCUser();
// HOOKS
const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// INTL
const intl = useIntl();
// CONST
const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && scEvent && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by]);
const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
/**
* Handles callback subscribe/unsubscribe event
*/
const handleSubscribe = (event) => {
setSCEvent(event);
};
// RENDER
if (!scEvent) {
return _jsx(EventHeaderSkeleton, {});
}
const _backgroundCover = Object.assign({}, (scEvent.image_bigger
? { background: `url('${scEvent.image_bigger}') center / cover` }
: { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
return (
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(Box, Object.assign({ className: classes.calendar }, { children: _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() }) })) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [scEvent.running && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && (_jsx(Chip, { icon: _jsx(Icon, Object.assign({ fontSize: "small", className: classes.chipIcon }, { children: "calendar_off" })), label: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "medium", color: "secondary", className: classes.chip })), _jsx(Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
startDate: intl.formatDate(scEvent.start_date, {
weekday: 'long',
day: 'numeric',
year: 'numeric',
month: 'long'
}),
endDate: intl.formatDate(scEvent.end_date, {
weekday: 'long',
day: 'numeric',
year: 'numeric',
month: 'long'
}),
startTime: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' }),
endTime: intl.formatDate(scEvent.end_date, { hour: 'numeric', minute: 'numeric' })
} })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTime", defaultMessage: "ui.eventHeader.startEndTime", values: {
date: intl.formatDate(scEvent.start_date, {
weekday: 'long',
day: 'numeric',
year: 'numeric',
month: 'long'
}),
start: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' }),
end: intl.formatDate(scEvent.end_date, { hour: 'numeric', minute: 'numeric' })
} }))) : (_jsx(FormattedMessage, { id: "ui.eventHeader.dateTime", defaultMessage: "ui.eventHeader.dateTime", values: {
date: intl.formatDate(scEvent.start_date, {
weekday: 'long',
day: 'numeric',
year: 'numeric',
month: 'long'
}),
hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
} })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
}