@selfcommunity/react-ui 0.7.50-events.46 → 0.7.50-events.48

package/lib/esm/shared/EventActionsMenu/index.js

@@ -0,0 +1,151 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import { EventService } from '@selfcommunity/api-services';
+import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
+import { ADD_EVENT_TO_CALENDAR, CANCEL_EVENT, GET_EVENT_LINK } from '../../constants/EventActionsMenu';
+import { copyTextToClipboard } from '@selfcommunity/utils';
+import { enqueueSnackbar } from 'notistack';
+import HiddenPlaceholder from '../HiddenPlaceholder';
+const PREFIX = 'SCEventActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS EventActionsMenu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventActionsMenu} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEventActionsMenu` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventActionsMenu-root|Styles applied to the root element.|
+ |drawerRoot|.SCEventActionsMenu-drawer-root|Styles applied to the drawer root element.|
+ |menuRoot|.SCEventActionsMenu-menu-root|Styles applied to the menu root element.|
+ |paper|.SCEventActionsMenu-paper|Styles applied to the paper element.|
+ |item|.SCEventActionsMenu-item|Styles applied to the item element.|
+
+
+ * @param inProps
+ */
+export default function EventActionsMenu(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, event, eventId } = props, rest = __rest(props, ["className", "event", "eventId"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const scRoutingContext = useSCRouting();
+    const scUserContext = useSCUser();
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleCloseDialog = () => {
+        setOpenConfirmDialog(false);
+        setAnchorEl(null);
+    };
+    /**
+     * Handles thread deletion
+     */
+    function handleDeleteThread() {
+        EventService.deleteEvent(scEvent.id)
+            .then(() => {
+            handleCloseDialog();
+        })
+            .catch((error) => {
+            setOpenConfirmDialog(false);
+            console.log(error);
+        });
+    }
+    const createGoogleCalendarLink = (event) => {
+        const baseUrl = 'https://www.google.com/calendar/render?action=TEMPLATE';
+        return `${baseUrl}&text=${encodeURIComponent(event.name)}&details=${encodeURIComponent(event.description)}&location=${encodeURIComponent(event.geolocation)}&dates=${event.start_date}/${event.end_date}`;
+    };
+    /**
+     * Handles actions
+     */
+    function handleAction(action) {
+        if (action === GET_EVENT_LINK) {
+            copyTextToClipboard(`${location.protocol}//${location.host}${scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent)}`).then(() => {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.permanentLinkCopied", defaultMessage: "ui.common.permanentLinkCopied" }), {
+                    variant: 'success',
+                    autoHideDuration: 3000
+                });
+            });
+            handleClose();
+        }
+        else if (action === ADD_EVENT_TO_CALENDAR) {
+            window.open(createGoogleCalendarLink(scEvent), '_blank', 'noopener,noreferrer');
+            handleClose();
+        }
+        else if (action === CANCEL_EVENT) {
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     *
+     */
+    const renderList = () => {
+        return [
+            _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GET_EVENT_LINK) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.link", defaultMessage: "ui.shared.eventActionsMenu.item.link" })] }), "link"),
+            _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(ADD_EVENT_TO_CALENDAR) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar"),
+            isEventAdmin && [
+                _jsx(Divider, {}, "divider"),
+                _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(CANCEL_EVENT) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "close" }) }), _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.item.cancel", defaultMessage: "ui.shared.eventActionsMenu.item.cancel" })] }), "cancel")
+            ]
+        ];
+    };
+    if (!scUserContext.user ||
+        ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) !== SCEventSubscriptionStatusType.SUBSCRIBED)) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+}

package/lib/esm/shared/EventInfoDetails/index.d.ts

@@ -1,6 +1,18 @@
 import { SCEventType } from '@selfcommunity/types';
+import React from 'react';
 export interface EventInfoDetailsProps {
     event: SCEventType;
+    hideDateIcon?: boolean;
+    hidePrivacyIcon?: boolean;
+    hideLocationIcon?: boolean;
+    hideCreatedIcon?: boolean;
+    hasDateInfo?: boolean;
+    hasPrivacyInfo?: boolean;
+    hasLocationInfo?: boolean;
     hasCreatedInfo?: boolean;
+    beforeDateInfo?: React.ReactNode | null;
+    beforePrivacyInfo?: React.ReactNode | null;
+    beforeLocationInfo?: React.ReactNode | null;
+    beforeCreatedInfo?: React.ReactNode | null;
 }
 export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;

package/lib/esm/shared/EventInfoDetails/index.js

@@ -21,14 +21,14 @@ const Root = styled(Stack, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
-})();
+})(() => ({}));
 export default function EventInfoDetails(inProps) {
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { event, hasCreatedInfo } = props;
+    const { event, hideDateIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, beforeDateInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
     // HOOKS
     const intl = useIntl();
     const privacy = event.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private';
@@ -43,5 +43,5 @@ export default function EventInfoDetails(inProps) {
             locale: LOCALE_MAP[intl.locale]
         }).replace(/Creato il (\d{1})+ ([a-z]+) (\d{4})/, (_, day, month, year) => `Creato il ${day} ${month.charAt(0).toUpperCase() + month.slice(1)} ${year}`);
     };
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: formatDateEventDate(event.start_date) }))] })), _jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] })), _jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' })), event.location === SCEventLocationType.ONLINE ? (_jsx(Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] })), hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: formatDateCreateDate(event.created_at) }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: formatDateEventDate(event.start_date) }))] }))), beforePrivacyInfo, hasPrivacyInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (_jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), event.location === SCEventLocationType.ONLINE ? (_jsx(Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: formatDateCreateDate(event.created_at) }))] })))] })));
 }

package/lib/esm/shared/Media/Event/DisplayComponent.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { SCMediaType } from '@selfcommunity/types/src/types';
+import { BoxProps } from '@mui/material';
+export interface DisplayComponentProps extends BoxProps {
+    /**
+     * Medias
+     */
+    medias: SCMediaType[];
+    /**
+     * Handles on media click
+     */
+    onMediaClick?: (any: any) => void;
+}
+declare const _default: ({ className, medias, onMediaClick, ...rest }: DisplayComponentProps) => ReactElement;
+export default _default;

package/lib/esm/shared/Media/Event/DisplayComponent.js

@@ -0,0 +1,29 @@
+import { __rest } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import classNames from 'classnames';
+import filter from './filter';
+import Event from '../../../components/Event';
+import { SCEventTemplateType } from '../../../types/event';
+import { PREFIX } from './constants';
+const classes = {
+    displayRoot: `${PREFIX}-display-root`,
+    eventPreview: `${PREFIX}-event-preview`,
+    eventPlaceholder: `${PREFIX}-event-placeholder`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'DisplayRoot'
+})(({ theme }) => ({}));
+export default (_a) => {
+    var { className, medias = [], onMediaClick = null } = _a, rest = __rest(_a, ["className", "medias", "onMediaClick"]);
+    // MEMO
+    const _medias = useMemo(() => medias.filter(filter), [medias]);
+    if (_medias.length === 0) {
+        return null;
+    }
+    console.log(medias);
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.eventPreview, onClick: onMediaClick }, { children: _jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) }) }), i))) })));
+};

package/lib/esm/shared/Media/Event/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaEvent";

package/lib/esm/shared/Media/Event/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCMediaEvent';

package/lib/esm/shared/Media/Event/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/esm/shared/Media/Event/filter.js

@@ -0,0 +1,2 @@
+import { MEDIA_TYPE_EVENT } from '../../../constants/Media';
+export default (media) => media.type === MEDIA_TYPE_EVENT;

package/lib/esm/shared/Media/Event/index.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaObjectType } from '../../../types/media';
+declare const Event: SCMediaObjectType;
+export default Event;

package/lib/esm/shared/Media/Event/index.js

@@ -0,0 +1,11 @@
+import DisplayComponent from './DisplayComponent';
+import filter from './filter';
+const Event = {
+    name: 'event',
+    displayComponent: DisplayComponent,
+    triggerButton: null,
+    layerComponent: null,
+    previewComponent: null,
+    filter
+};
+export default Event;

package/lib/esm/shared/Media/Link/PreviewComponent.js

@@ -30,6 +30,6 @@ const PreviewComponent = React.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return _jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => (_jsxs(Box, Object.assign({ className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) }, { children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))] }), media.id))) }))) }));
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => (_jsxs(Box, Object.assign({ className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) }, { children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))] }), media.id))) }))) })));
 });
 export default PreviewComponent;

package/lib/esm/shared/Media/index.d.ts

@@ -1,5 +1,6 @@
 import File from './File';
 import Link from './Link';
 import Share from './Share';
+import Event from './Event';
 import { EditMediaProps } from './types';
-export { File, Link, Share, EditMediaProps };
+export { File, Link, Share, Event, EditMediaProps };

package/lib/esm/shared/Media/index.js

@@ -1,4 +1,5 @@
 import File from './File';
 import Link from './Link';
 import Share from './Share';
-export { File, Link, Share };
+import Event from './Event';
+export { File, Link, Share, Event };

package/lib/esm/types/event.d.ts

@@ -0,0 +1,5 @@
+export declare enum SCEventTemplateType {
+    DETAIL = "detail",
+    SNIPPET = "snippet",
+    PREVIEW = "preview"
+}

package/lib/esm/types/event.js

@@ -0,0 +1,6 @@
+export var SCEventTemplateType;
+(function (SCEventTemplateType) {
+    SCEventTemplateType["DETAIL"] = "detail";
+    SCEventTemplateType["SNIPPET"] = "snippet";
+    SCEventTemplateType["PREVIEW"] = "preview";
+})(SCEventTemplateType || (SCEventTemplateType = {}));