@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
65 lines (64 loc) • 4 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, CardActions, CardContent, CardMedia, Divider, Icon, styled, Typography, useThemeProps } from '@mui/material';
import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
import { useContext, useEffect, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
import CreateEventButton from '../CreateEventButton';
import Widget from '../Widget';
import { PREFIX } from './constants';
import Skeleton from './Skeleton';
import { SCFeatureName } from '@selfcommunity/types';
const classes = {
root: `${PREFIX}-root`,
image: `${PREFIX}-image`,
calendar: `${PREFIX}-calendar`,
content: `${PREFIX}-content`,
title: `${PREFIX}-title`,
spaging: `${PREFIX}-spacing`,
actions: `${PREFIX}-actions`
};
const Root = styled(Widget, {
name: PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function CreateEventWidget(inProps) {
var _a;
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { CreateEventButtonComponentProps = {} } = props, rest = __rest(props, ["CreateEventButtonComponentProps"]);
// STATE
const [loading, setLoading] = useState(true);
// CONTEXT
const scUserContext = useContext(SCUserContext);
// HOOK
const { preferences, features } = useSCPreferences();
const eventsEnabled = useMemo(() => preferences &&
features &&
features.includes(SCFeatureName.TAGGING) &&
SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
const authUserId = scUserContext.user ? scUserContext.user.id : null;
const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
useEffect(() => {
setLoading(false);
}, []);
if (loading) {
return _jsx(Skeleton, {});
}
/**
* If there's no authUserId, component is hidden.
*/
if (!eventsEnabled || (!canCreateEvent && onlyStaffEnabled) || !authUserId) {
return _jsx(HiddenPlaceholder, {});
}
return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.calendar, fontSize: "large" }, { children: "CalendarIcon" }))] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.spaging }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) })), _jsx(Divider, { className: classes.spaging })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateEventButton, Object.assign({}, CreateEventButtonComponentProps)) }))] })));
}