@selfcommunity/react-ui 0.7.50-event.29 → 0.7.50-events.28

package/lib/cjs/components/Category/Category.d.ts

@@ -3,7 +3,7 @@ import { CategoryFollowButtonProps } from '../CategoryFollowButton';
 import { WidgetProps } from '../Widget';
 export interface CategoryProps extends WidgetProps {
     /**
-     * Category id
+     * Category Id
      * @default null
      */
     categoryId?: number;

package/lib/cjs/components/Category/Category.js

@@ -72,7 +72,7 @@ function Category(inProps) {
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // STATE
-    const { scCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
+    const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
     // MEMO
     const _ButtonBaseProps = (0, react_1.useMemo)(() => (ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS

package/lib/cjs/components/Event/Event.d.ts

@@ -1,4 +1,3 @@
-import { ButtonBaseProps } from '@mui/material';
 import { SCEventType } from '@selfcommunity/types';
 import { WidgetProps } from '../Widget';
 export interface EventProps extends WidgetProps {
@@ -12,11 +11,6 @@ export interface EventProps extends WidgetProps {
      * @default null
      */
     eventId?: number;
-    /**
-     * Props to spread to the button
-     * @default {}
-     */
-    buttonProps?: ButtonBaseProps;
     /**
      * Any other properties
      */

package/lib/cjs/components/Event/Event.js

@@ -9,7 +9,7 @@ const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classes = {
@@ -19,7 +19,7 @@ const classes = {
     secondary: `${constants_1.PREFIX}-secondary`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
+const Root = (0, styles_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -62,7 +62,7 @@ function Event(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { eventId = null, event = null, className = null, elevation } = props, rest = tslib_1.__rest(props, ["eventId", "event", "className", "elevation"]);
+    const { eventId = null, event = null, className = null, elevation = 0 } = props, rest = tslib_1.__rest(props, ["eventId", "event", "className", "elevation"]);
     // STATE
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
     // CONTEXT
@@ -78,7 +78,7 @@ function Event(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, disableTypography: true }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, image: react_1.default.createElement(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.avatar }), primary: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.primary },
+    return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, disableTypography: true }, rest, { className: (0, classnames_1.default)(classes.root, className), image: react_1.default.createElement(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.avatar }), primary: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.primary },
             react_1.default.createElement(material_1.Typography, { component: "span" }, `${intl.formatDate(scEvent.start_date, { weekday: 'long', month: 'long', day: 'numeric' })}`),
             react_1.default.createElement(material_1.Typography, { variant: "body1" }, scEvent.name)), secondary: react_1.default.createElement(material_1.Typography, { component: "p", variant: "body2", className: classes.secondary },
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }),

package/lib/cjs/components/Event/Skeleton.d.ts

@@ -1,4 +1,16 @@
-import { WidgetProps } from '../Widget';
+import React from 'react';
+import { BaseItemProps } from '../../shared/BaseItem';
+export interface EventSkeletonProps extends BaseItemProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Prop to pass an action to be rendered next to the skeleton
+     */
+    action?: React.ReactNode;
+}
 /**
  * > API documentation for the Community-JS Event Skeleton component. Learn about the available props and the CSS API.
 
@@ -17,6 +29,8 @@ import { WidgetProps } from '../Widget';
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCEvent-skeleton-root|Styles applied to the root element.|
+ |image|.SCEvent-skeleton-image|Styles applied to the image element.|
+ |action|.SCEvent-skeleton-action|Styles applied to action section.|
  *
  */
-export default function EventSkeleton(props: WidgetProps): JSX.Element;
+export default function EventSkeleton(inProps: EventSkeletonProps): JSX.Element;

package/lib/cjs/components/Event/Skeleton.js

@@ -5,10 +5,13 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const classes = {
-    root: `${constants_1.PREFIX}-skeleton-root`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    image: `${constants_1.PREFIX}-skeleton-image`,
+    action: `${constants_1.PREFIX}-skeleton-action`
 };
 const Root = (0, styles_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
@@ -32,13 +35,18 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCEvent-skeleton-root|Styles applied to the root element.|
+ |image|.SCEvent-skeleton-image|Styles applied to the image element.|
+ |action|.SCEvent-skeleton-action|Styles applied to action section.|
  *
  */
-function EventSkeleton(props) {
-    //const theme = useTheme<SCThemeType>();
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: 100, height: 60 }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }),
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } })), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
+function EventSkeleton(inProps) {
+    const { className, action } = inProps;
+    return (react_1.default.createElement(Root, { elevation: 0, className: (0, classnames_1.default)(classes.root, className), image: react_1.default.createElement(material_1.Box, { className: classes.image },
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: 100, height: 60 }),
+            " ",
+            react_1.default.createElement(material_1.Icon, { fontSize: "large" }, "CalendarIcon")), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", height: 10, width: 100, style: { marginBottom: 12 } }), secondary: react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", height: 10, width: 160, style: { marginBottom: 10 } }),
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", height: 10, width: 90 })), actions: react_1.default.createElement(react_1.default.Fragment, null, action !== null && action !== void 0 ? action : (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })))) }));
 }
 exports.default = EventSkeleton;

package/lib/cjs/components/Event/index.d.ts

@@ -1,4 +1,4 @@
 import Event, { EventProps } from './Event';
-import EventSkeleton from './Skeleton';
+import EventSkeleton, { EventSkeletonProps } from './Skeleton';
 export default Event;
-export { EventProps, EventSkeleton };
+export { EventProps, EventSkeleton, EventSkeletonProps };

package/lib/cjs/components/EventForm/EventForm.js

@@ -122,13 +122,13 @@ function EventForm(inProps) {
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     const initialFieldState = {
-        emotionalImageOriginal: '',
-        emotionalImageOriginalFile: '',
+        imageOriginal: '',
+        imageOriginalFile: '',
         startDate: null,
         startTime: null,
         endDate: null,
         endTime: null,
-        location: '',
+        location: types_1.SCEventLocationType.PERSON,
         geolocation: '',
         lat: null,
         lng: null,
@@ -146,8 +146,9 @@ function EventForm(inProps) {
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
     const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
-    const _backgroundCover = Object.assign({}, (field.emotionalImageOriginal
-        ? { background: `url('${field.emotionalImageOriginal}') center / cover` }
+    const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
+    const _backgroundCover = Object.assign({}, (field.imageOriginal
+        ? { background: `url('${field.imageOriginal}') center / cover` }
         : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
     const combineDateAndTime = (date, time) => {
         if (date && time) {
@@ -161,14 +162,14 @@ function EventForm(inProps) {
         return null;
     };
     function handleChangeCover(cover) {
-        setField((prev) => (Object.assign(Object.assign({}, prev), { ['emotionalImageOriginalFile']: cover })));
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
         const reader = new FileReader();
         reader.onloadend = () => {
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['emotionalImageOriginal']: reader.result })));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginal']: reader.result })));
         };
         reader.readAsDataURL(cover);
-        if (error.emotionalImageOriginalError) {
-            delete error.emotionalImageOriginalError;
+        if (error.imageOriginalError) {
+            delete error.imageOriginalError;
             setError(error);
         }
     }
@@ -178,8 +179,8 @@ function EventForm(inProps) {
     const handleSubmit = () => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
-        if (field.emotionalImageOriginalFile) {
-            formData.append('emotional_image_original', field.emotionalImageOriginalFile);
+        if (field.imageOriginalFile) {
+            formData.append('image_original', field.imageOriginalFile);
         }
         formData.append('name', field.name);
         formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
@@ -199,6 +200,9 @@ function EventForm(inProps) {
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? types_1.SCEventPrivacyType.PUBLIC : types_1.SCEventPrivacyType.PRIVATE);
         }
+        if (visibilityEnabled) {
+            formData.append('visible', true);
+        }
         formData.append('description', field.description);
         api_services_1.EventService.createEvent(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
             .then((data) => {
@@ -207,7 +211,15 @@ function EventForm(inProps) {
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
         })
             .catch((e) => {
-            setError(Object.assign(Object.assign({}, error), (0, api_services_1.formatHttpErrorCode)(e)));
+            const _error = (0, api_services_1.formatHttpErrorCode)(e);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            if (Object.values(_error)[0].error === 'unique') {
+                setError(Object.assign(Object.assign({}, error), { ['nameError']: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
+            }
+            else {
+                setError(Object.assign(Object.assign({}, error), _error));
+            }
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
         });
@@ -233,7 +245,8 @@ function EventForm(inProps) {
     return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" }), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
                 (!field.startDate && !field.startTime) ||
                 (field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
-                ((field.recurring !== types_1.SCEventRecurrenceType.NEVER) && (!field.endDate && !field.endTime)) ||
+                (field.location === types_1.SCEventLocationType.PERSON && !field.geolocation) ||
+                (field.recurring !== types_1.SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ||
                 field.description.length > Event_1.EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) }, rest),
@@ -243,7 +256,7 @@ function EventForm(inProps) {
             react_1.default.createElement(material_1.FormGroup, { className: classes.form },
                 react_1.default.createElement(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                         endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length)
-                    }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > Event_1.EVENT_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : null }),
+                    }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error[`nameError`]), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error[`nameError`] ? (error[`nameError`]) : null }),
                 react_1.default.createElement(material_1.Box, { className: classes.dateTime },
                     react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default },
                         react_1.default.createElement(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
@@ -257,7 +270,7 @@ function EventForm(inProps) {
                                     toolbarTitle: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
                                 }
                             }, onChange: (value) => handleChangeDateTime(value, 'startDate') }),
-                        react_1.default.createElement(x_date_pickers_1.MobileTimePicker, { className: classes.picker, label: field.startTime && react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
+                        react_1.default.createElement(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: true, label: field.startTime && react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
                                 textField: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "start" },
                                             react_1.default.createElement(material_1.IconButton, null,
                                                 react_1.default.createElement(material_1.Icon, null, "access_time")))) }) })))
@@ -286,12 +299,12 @@ function EventForm(inProps) {
                                             react_1.default.createElement(material_1.IconButton, null,
                                                 react_1.default.createElement(material_1.Icon, null, "calendar_off")))) }) })))
                             }, onChange: (value) => handleChangeDateTime(value, 'endDate') }),
-                        react_1.default.createElement(x_date_pickers_1.MobileTimePicker, { className: classes.picker, label: field.endTime && react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                        react_1.default.createElement(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: true, label: field.endTime && react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
                                 textField: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "start" },
                                             react_1.default.createElement(material_1.IconButton, null,
                                                 react_1.default.createElement(material_1.Icon, null, "access_time")))) }) })))
                             }, onChange: (value) => handleChangeDateTime(value, 'endTime') })))),
-                react_1.default.createElement(material_1.Button, { variant: "text", color: "secondary", onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['showEndDateTime']: !field.showEndDateTime }))) },
+                react_1.default.createElement(material_1.Button, { variant: "text", color: "secondary", onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['showEndDateTime']: !field.showEndDateTime }))), disabled: field.showEndDateTime && field.recurring !== types_1.SCEventRecurrenceType.NEVER },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventForm.dateTime.placeholder", defaultMessage: "ui.eventForm.dateTime.placeholder", values: { symbol: field.showEndDateTime ? '-' : '+' } })),
                 react_1.default.createElement(EventAddress_1.default, { forwardGeolocationData: handleGeoData }),
                 privateEnabled && (react_1.default.createElement(material_1.Box, { className: classes.privacySection },

package/lib/cjs/components/EventInviteButton/EventInviteButton.d.ts

@@ -0,0 +1,57 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { SCEventType } from '@selfcommunity/types';
+export interface EventInviteButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * Id of the event
+     * @default null
+     */
+    eventId?: number | string;
+    /**
+     * Functions to handle invitations sending in event creation mode
+     * @default null
+     */
+    handleInvitations?: (data: any) => any;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Event Invite Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {SCEventInviteButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventInviteButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventInviteButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCEventInviteButton-dialog-root|Styles applied to the dialog root.|
+ |dialogTitle|.SCEventInviteButton-dialog-title|Styles applied to the dialog title element.|
+ |dialogContent|.SCEventInviteButton-dialog-content|Styles applied to the dialog content.|
+ |autocomplete|.SCEventInviteButton-autocomplete|Styles applied to the autocomplete element.|
+ |icon|.SCEventInviteButton-icon|Styles applied to the autocomplete icon element.|
+ |input|.SCEventInviteButton-input|Styles applied to the autocomplete input element.|
+ |clear|.SCEventInviteButton-clear|Styles applied to the autocomplete clear icon element.|
+ |invitedBox|.SCEventInviteButton-invited-box|Styles applied to the invited users box.|
+ |suggested|.SCEventInviteButton-suggested|Styles applied to the suggested users box.|
+
+ * @param inProps
+ */
+export default function EventInviteButton(inProps: EventInviteButtonProps): JSX.Element;

package/lib/cjs/components/EventInviteButton/EventInviteButton.js

@@ -0,0 +1,284 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const system_1 = require("@mui/system");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const lab_1 = require("@mui/lab");
+const api_services_1 = require("@selfcommunity/api-services");
+const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
+const User_1 = tslib_1.__importDefault(require("../User"));
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const messages = (0, react_intl_1.defineMessages)({
+    placeholder: {
+        id: 'ui.eventInviteButton.searchBar.placeholder',
+        defaultMessage: 'ui.eventInviteButton.searchBar.placeholder'
+    }
+});
+const PREFIX = 'SCEventInviteButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    dialogTitle: `${PREFIX}-dialog-title`,
+    dialogContent: `${PREFIX}-dialog-content`,
+    autocomplete: `${PREFIX}-autocomplete`,
+    icon: `${PREFIX}-icon`,
+    input: `${PREFIX}-input`,
+    clear: `${PREFIX}-clear`,
+    invitedBox: `${PREFIX}-invited-box`,
+    suggested: `${PREFIX}-suggested`
+};
+const Root = (0, styles_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.dialogRoot
+})(({ theme }) => ({}));
+/**
+ *> API documentation for the Community-JS Event Invite Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {SCEventInviteButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventInviteButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventInviteButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCEventInviteButton-dialog-root|Styles applied to the dialog root.|
+ |dialogTitle|.SCEventInviteButton-dialog-title|Styles applied to the dialog title element.|
+ |dialogContent|.SCEventInviteButton-dialog-content|Styles applied to the dialog content.|
+ |autocomplete|.SCEventInviteButton-autocomplete|Styles applied to the autocomplete element.|
+ |icon|.SCEventInviteButton-icon|Styles applied to the autocomplete icon element.|
+ |input|.SCEventInviteButton-input|Styles applied to the autocomplete input element.|
+ |clear|.SCEventInviteButton-clear|Styles applied to the autocomplete clear icon element.|
+ |invitedBox|.SCEventInviteButton-invited-box|Styles applied to the invited users box.|
+ |suggested|.SCEventInviteButton-suggested|Styles applied to the suggested users box.|
+
+ * @param inProps
+ */
+function EventInviteButton(inProps) {
+    var _a;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, event, eventId, handleInvitations = null } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId", "handleInvitations"]);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // STATE
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [isSending, setIsSending] = (0, react_1.useState)(false);
+    const [value, setValue] = (0, react_1.useState)('');
+    const [suggested, setSuggested] = (0, react_1.useState)([]);
+    const [list, setList] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [invited, setInvited] = (0, react_1.useState)([]);
+    /**
+     * Notify UI when a member is invited to a event
+     * @param event
+     * @param usersInvited
+     */
+    function notifyChanges(event, usersInvited) {
+        if (event && usersInvited) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.INVITE_MEMBER}`, usersInvited);
+        }
+    }
+    function convertToInvitedUsersObject(data) {
+        const invite_users = {};
+        data.forEach((user, index) => {
+            invite_users[`invite_users[${index}]`] = user.id;
+        });
+        return invite_users;
+    }
+    /**
+     * Memoized users invited ids
+     */
+    const ids = (0, react_1.useMemo)(() => {
+        if (invited) {
+            return invited.map((u) => {
+                return parseInt(u.id, 10);
+            });
+        }
+        return [invited];
+    }, [invited]);
+    // HOOKS
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const isEventAdmin = (0, react_1.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]);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    function fetchResults() {
+        setLoading(true);
+        api_services_1.EventService.getEventSuggestedUsers(scEvent === null || scEvent === void 0 ? void 0 : scEvent.id, value)
+            .then((data) => {
+            setLoading(false);
+            setSuggested(data.results);
+        })
+            .catch((error) => {
+            setLoading(false);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }
+    function fetchGeneralResults() {
+        setLoading(true);
+        api_services_1.EventService.getEventsSuggestedUsers(value)
+            .then((data) => {
+            setLoading(false);
+            setSuggested(data.results);
+        })
+            .catch((error) => {
+            setLoading(false);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }
+    (0, react_1.useEffect)(() => {
+        if (scEvent === null || scEvent === void 0 ? void 0 : scEvent.id) {
+            api_services_1.EventService.getEventSuggestedUsers(scEvent === null || scEvent === void 0 ? void 0 : scEvent.id, value).then((data) => {
+                setLoading(false);
+                setList(data.results);
+            });
+        }
+        else {
+            api_services_1.EventService.getEventsSuggestedUsers(value).then((data) => {
+                setLoading(false);
+                setList(data.results);
+            });
+        }
+    }, [scEvent === null || scEvent === void 0 ? void 0 : scEvent.id]);
+    /**
+     * If a value is entered in new message field, it fetches user suggested
+     */
+    (0, react_1.useEffect)(() => {
+        if (scEvent) {
+            fetchResults();
+        }
+        else {
+            fetchGeneralResults();
+        }
+    }, [value, scEvent]);
+    /**
+     * Handles dialog close
+     */
+    const handleClose = () => {
+        setOpen((p) => !p);
+    };
+    /**
+     * Handles invitation sending
+     */
+    const handleSendInvitations = () => {
+        if (handleInvitations) {
+            handleInvitations(convertToInvitedUsersObject(invited));
+            setOpen(false);
+        }
+        else {
+            const data = { users: ids };
+            setIsSending(true);
+            api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, data)
+                .then(() => {
+                setIsSending(false);
+                setOpen(false);
+                setInvited([]);
+                notifyChanges(scEvent, invited);
+            })
+                .catch((error) => {
+                setOpen(false);
+                setLoading(false);
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    };
+    // Autocomplete Handlers
+    const handleInputChange = (event, value, reason) => {
+        switch (reason) {
+            case 'input':
+                setValue(value);
+                !value && setSuggested([]);
+                break;
+            case 'reset':
+                setValue(value);
+                break;
+        }
+    };
+    const handleChange = (event, value, reason, details) => {
+        event.preventDefault();
+        event.stopPropagation();
+        switch (reason) {
+            case 'selectOption':
+                setInvited(value);
+                setList((prev) => prev.filter((u) => u.id !== details.option.id));
+                break;
+            case 'removeOption':
+                setInvited(value);
+                setList((prev) => [...prev, details.option]);
+                break;
+        }
+        return false;
+    };
+    const handleUserInvite = (user) => {
+        setInvited((prev) => [...prev, user]);
+        setList((prev) => prev.filter((u) => u.id !== user.id));
+    };
+    const handleDelete = (option) => {
+        setInvited(invited.filter((v) => v !== option));
+        setList((prev) => [...prev, option]);
+    };
+    const filterOptions = (options, { inputValue }) => {
+        return options.filter((option) => {
+            const usernameMatch = option.username.toLowerCase().includes(inputValue.toLowerCase());
+            const nameMatch = option.real_name.toLowerCase().includes(inputValue.toLowerCase());
+            return usernameMatch || nameMatch;
+        });
+    };
+    /**
+     * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
+    //  */
+    if (event && !isEventAdmin) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: react_1.default.createElement(material_1.Icon, null, "add") }, rest),
+            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" })),
+        open && (react_1.default.createElement(DialogRoot, { DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.IconButton, { onClick: handleClose },
+                    react_1.default.createElement(material_1.Icon, null, "arrow_back")),
+                react_1.default.createElement(material_1.Typography, { className: classes.dialogTitle },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" })),
+                react_1.default.createElement(lab_1.LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }))) },
+            react_1.default.createElement(material_1.Box, { className: classes.dialogContent },
+                react_1.default.createElement(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),
+                        react_1.default.createElement(material_1.Avatar, { alt: option.username, src: option.avatar }),
+                        react_1.default.createElement(material_1.Typography, { ml: 1 }, option.username))), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(material_1.InputAdornment, { position: "start" },
+                                    react_1.default.createElement(material_1.Icon, { className: classes.icon }, "search")),
+                                params.InputProps.startAdornment)) }) }))) }),
+                react_1.default.createElement(material_1.Box, { className: classes.invitedBox }, invited.map((option, index) => (react_1.default.createElement(material_1.Chip, { key: index, avatar: react_1.default.createElement(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+                        handleDelete(option);
+                    }, style: { marginRight: 8 } })))),
+                react_1.default.createElement(material_1.Box, { className: classes.suggested },
+                    list.length !== 0 && (react_1.default.createElement(material_1.Typography, { variant: "h4", fontWeight: "bold" },
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.content.list", defaultMessage: "ui.eventInviteButton.dialog.content.list" }))),
+                    list.slice(0, 5).map((user, index) => (react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(react_1.default.Fragment, null), user: user, userId: user.id, key: index, buttonProps: { onClick: () => handleUserInvite(user) } })))))))));
+}
+exports.default = EventInviteButton;

package/lib/cjs/components/EventInviteButton/index.d.ts

@@ -0,0 +1,3 @@
+import EventInviteButton, { EventInviteButtonProps } from './EventInviteButton';
+export default EventInviteButton;
+export { EventInviteButtonProps };

package/lib/cjs/components/EventInviteButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const EventInviteButton_1 = tslib_1.__importDefault(require("./EventInviteButton"));
+exports.default = EventInviteButton_1.default;