@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
147 lines (138 loc) • 12.3 kB
JavaScript
"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 Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
const EventActionsMenu_1 = tslib_1.__importDefault(require("../../shared/EventActionsMenu"));
const events_1 = require("../../utils/events");
const EditEventButton_1 = tslib_1.__importDefault(require("../EditEventButton"));
const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
const EventSubscribeButton_1 = tslib_1.__importDefault(require("../EventSubscribeButton"));
const User_1 = tslib_1.__importDefault(require("../User"));
const constants_1 = require("./constants");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const classes = {
root: `${constants_1.PREFIX}-root`,
cover: `${constants_1.PREFIX}-cover`,
time: `${constants_1.PREFIX}-time`,
calendar: `${constants_1.PREFIX}-calendar`,
inProgress: `${constants_1.PREFIX}-in-progress`,
chip: `${constants_1.PREFIX}-chip`,
chipIcon: `${constants_1.PREFIX}-chip-icon`,
info: `${constants_1.PREFIX}-info`,
name: `${constants_1.PREFIX}-name`,
visibility: `${constants_1.PREFIX}-visibility`,
visibilityItem: `${constants_1.PREFIX}-visibility-item`,
planner: `${constants_1.PREFIX}-planner`,
multiActions: `${constants_1.PREFIX}-multi-actions`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.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
*/
function EventHeader(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { id = null, className = null, event, eventId = null, EventSubscribeButtonProps = {}, EventActionsProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "event", "eventId", "EventSubscribeButtonProps", "EventActionsProps"]);
// PREFERENCES
const scPreferences = (0, react_core_1.useSCPreferences)();
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
// HOOKS
const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
// INTL
const intl = (0, react_intl_1.useIntl)();
// CONST
const isEventAdmin = (0, react_1.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 = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
/**
* Handles callback subscribe/unsubscribe event
*/
const handleSubscribe = (event) => {
setSCEvent(event);
};
// RENDER
if (!scEvent) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
const _backgroundCover = Object.assign({}, (scEvent.image_bigger
? { background: `url('${scEvent.image_bigger}') center / cover` }
: { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
return (
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
(0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.calendar }, { children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", className: classes.chipIcon }, { children: "calendar_off" })), label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "medium", color: "secondary", className: classes.chip })), (0, jsx_runtime_1.jsx)(material_1.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() ? ((0, jsx_runtime_1.jsx)(react_intl_1.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' })
} })) : ((0, jsx_runtime_1.jsx)(react_intl_1.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' })
} }))) : ((0, jsx_runtime_1.jsx)(react_intl_1.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' })
} })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
}
exports.default = EventHeader;