@selfcommunity/react-ui 0.7.50-alpha.0 → 0.7.50-event.28

package/lib/esm/components/EventForm/EventAddress.js

@@ -0,0 +1,126 @@
+import { __awaiter } from "tslib";
+import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Autocomplete, Box, InputAdornment, Tab, Tabs, TextField } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import UrlTextField from '../../shared/UrlTextField';
+import axios from 'axios';
+import { useSCContext } from '@selfcommunity/react-core';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventLocationType } from '@selfcommunity/types';
+import { useLoadScript } from '@react-google-maps/api';
+const messages = defineMessages({
+    virtualPlaceholder: {
+        id: 'ui.eventForm.address.online.placeholder',
+        defaultMessage: 'ui.eventForm.address.online.placeholder'
+    }
+});
+const classes = {
+    root: `${PREFIX}-event-address-root`,
+    tabs: `${PREFIX}-event-address-tabs`,
+    tab: `${PREFIX}-event-address-tab`,
+    tabContent: `${PREFIX}-event-address-tab-content`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'EventAddressRoot'
+})(() => ({}));
+export default function EventAddress(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // INTL
+    const intl = useIntl();
+    // PROPS
+    const { className, forwardGeolocationData } = props;
+    // STATE
+    const [location, setLocation] = useState(SCEventLocationType.PERSON);
+    const [geolocation, setGeoLocation] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const [timeoutId, setTimeoutId] = useState(null);
+    // CONTEXT
+    const scContext = useSCContext();
+    const geocodingApiKey = useMemo(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
+    const { isLoaded } = useLoadScript({
+        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        libraries: ['places', 'geocoding']
+    });
+    // HANDLERS
+    const handleChange = (event, newValue) => {
+        setLocation(newValue);
+    };
+    const handleSelection = (event, newValue) => __awaiter(this, void 0, void 0, function* () {
+        if (newValue) {
+            try {
+                const response = yield axios.get(`https://maps.googleapis.com/maps/api/geocode/json`, {
+                    params: {
+                        place_id: newValue.place_id,
+                        key: geocodingApiKey
+                    }
+                });
+                const place = response.data.results[0];
+                setGeoLocation(newValue);
+                forwardGeolocationData({
+                    location: location,
+                    geolocation: place.formatted_address,
+                    lat: place.geometry.location.lat,
+                    lng: place.geometry.location.lng
+                });
+            }
+            catch (error) {
+                console.error('Error fetching place details:', error);
+            }
+        }
+    });
+    const handleLocationChange = (event, newInputValue) => {
+        setInputValue(newInputValue);
+    };
+    const handleLinkChange = (event) => {
+        forwardGeolocationData({ location: location, link: event.target.value });
+    };
+    useEffect(() => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        if (inputValue === '') {
+            setSuggestions([]);
+            return;
+        }
+        if (inputValue.length >= 3) {
+            const newTimeoutId = window.setTimeout(() => {
+                const autocompleteService = new window.google.maps.places.AutocompleteService();
+                autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
+                    if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
+                        setSuggestions(predictions.map((prediction) => ({
+                            description: prediction.description,
+                            place_id: prediction.place_id
+                        })));
+                    }
+                });
+            }, 300);
+            setTimeoutId(newTimeoutId);
+        }
+    }, [inputValue]);
+    if (!geocodingApiKey && !isLoaded) {
+        return React.createElement(HiddenPlaceholder, null);
+    }
+    return (React.createElement(Root, { className: classNames(classes.root, className) },
+        React.createElement(Tabs, { className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" },
+            React.createElement(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: React.createElement(Icon, null, "add_location_alt"), iconPosition: "start", label: React.createElement(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }),
+            React.createElement(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: React.createElement(Icon, null, "play_circle_outline"), iconPosition: "start", label: React.createElement(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })),
+        React.createElement(Box, { className: classes.tabContent },
+            location === SCEventLocationType.PERSON && (React.createElement(Autocomplete, { freeSolo: true, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description, noOptionsText: React.createElement(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { label: React.createElement(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
+                            React.createElement(InputAdornment, { position: "start" },
+                                React.createElement(Icon, null, "add_location_alt")),
+                            params.InputProps.endAdornment)) }) }))) })),
+            location === SCEventLocationType.ONLINE && (React.createElement(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: React.createElement(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+                    endAdornment: React.createElement(Icon, null, "play_circle_outline")
+                }, onChange: handleLinkChange })))));
+}

package/lib/esm/components/EventForm/EventForm.d.ts

@@ -0,0 +1,59 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface EventFormProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS  Event Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventForm-root|Styles applied to the root element.|
+ |active|.SCEventForm-active|Styles applied to the  active element.|
+ |title|.SCEventForm-title|Styles applied to the title element.|
+ |cover|.SCEventForm-cover|Styles applied to the cover field.|
+ |form|.SCEventForm-form|Styles applied to the form element.|
+ |switch|.SCEventForm-switch|Styles applied to the switch element.|
+ |switchLabel|.SCEventForm-switch-label|Styles applied to the switchLabel element.|
+ |name|.SCEventForm-name|Styles applied to the name field.|
+ |description|.SCEventForm-description|Styles applied to the description field.|
+ |content|.SCEventForm-content|Styles applied to the  element.|
+ |privacySection|.SCEventForm-privacy-section|Styles applied to the privacy section.|
+ |privacySectionInfo|.SCEventForm-privacy-section-info|Styles applied to the privacy info section.|
+ |error|.SCEventForm-error|Styles applied to the error elements.|
+
+ * @param inProps
+ */
+export default function EventForm(inProps: EventFormProps): JSX.Element;

package/lib/esm/components/EventForm/EventForm.js

@@ -0,0 +1,320 @@
+import { __rest } from "tslib";
+import React, { useMemo, useState } from 'react';
+import { useThemeProps } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import { Box, Button, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import BaseDialog from '../../shared/BaseDialog';
+import { LoadingButton } from '@mui/lab';
+import { EVENT_DESCRIPTION_MAX_LENGTH, EVENT_TITLE_MAX_LENGTH } from '../../constants/Event';
+import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import UploadEventCover from './UploadEventCover';
+import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import EventAddress from './EventAddress';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
+const messages = defineMessages({
+    name: {
+        id: 'ui.eventForm.name.placeholder',
+        defaultMessage: 'ui.eventForm.name.placeholder'
+    },
+    description: {
+        id: 'ui.eventForm.description.placeholder',
+        defaultMessage: 'ui.eventForm.description.placeholder'
+    },
+    startDate: {
+        id: 'ui.eventForm.date.placeholder',
+        defaultMessage: 'ui.eventForm.date.placeholder'
+    },
+    startTime: {
+        id: 'ui.eventForm.time.placeholder',
+        defaultMessage: 'ui.eventForm.time.placeholder'
+    },
+    frequency: {
+        id: 'ui.eventForm.frequency.label',
+        defaultMessage: 'ui.eventForm.frequency.label'
+    },
+    frequencyPlaceholder: {
+        id: 'ui.eventForm.frequency.none.placeholder',
+        defaultMessage: 'ui.eventForm.frequency.none.placeholder'
+    },
+    endDate: {
+        id: 'ui.eventForm.date.end.placeholder',
+        defaultMessage: 'ui.eventForm.date.end.placeholder'
+    },
+    endTime: {
+        id: 'ui.eventForm.time.end.placeholder',
+        defaultMessage: 'ui.eventForm.time.end.placeholder'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`,
+    active: `${PREFIX}-active`,
+    title: `${PREFIX}-title`,
+    cover: `${PREFIX}-cover`,
+    picker: `${PREFIX}-picker`,
+    dateTime: `${PREFIX}-date-time`,
+    frequency: `${PREFIX}-frequency`,
+    form: `${PREFIX}-form`,
+    switch: `${PREFIX}-switch`,
+    switchLabel: `${PREFIX}-switch-label`,
+    name: `${PREFIX}-name`,
+    description: `${PREFIX}-description`,
+    content: `${PREFIX}-content`,
+    privacySection: `${PREFIX}-privacy-section`,
+    privacySectionInfo: `${PREFIX}-privacy-section-info`,
+    error: `${PREFIX}-error`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS  Event Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventForm-root|Styles applied to the root element.|
+ |active|.SCEventForm-active|Styles applied to the  active element.|
+ |title|.SCEventForm-title|Styles applied to the title element.|
+ |cover|.SCEventForm-cover|Styles applied to the cover field.|
+ |form|.SCEventForm-form|Styles applied to the form element.|
+ |switch|.SCEventForm-switch|Styles applied to the switch element.|
+ |switchLabel|.SCEventForm-switch-label|Styles applied to the switchLabel element.|
+ |name|.SCEventForm-name|Styles applied to the name field.|
+ |description|.SCEventForm-description|Styles applied to the description field.|
+ |content|.SCEventForm-content|Styles applied to the  element.|
+ |privacySection|.SCEventForm-privacy-section|Styles applied to the privacy section.|
+ |privacySectionInfo|.SCEventForm-privacy-section-info|Styles applied to the privacy info section.|
+ |error|.SCEventForm-error|Styles applied to the error elements.|
+
+ * @param inProps
+ */
+export default function EventForm(inProps) {
+    var _a, _b, _c, _d, _e;
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
+    // CONTEXT
+    const scContext = useSCContext();
+    // INTL
+    const intl = useIntl();
+    const initialFieldState = {
+        emotionalImageOriginal: '',
+        emotionalImageOriginalFile: '',
+        startDate: null,
+        startTime: null,
+        endDate: null,
+        endTime: null,
+        location: '',
+        geolocation: '',
+        lat: null,
+        lng: null,
+        link: '',
+        recurring: SCEventRecurrenceType.NEVER,
+        name: '',
+        description: '',
+        isPublic: true,
+        isSubmitting: false,
+        showEndDateTime: false
+    };
+    // STATE
+    const [field, setField] = useState(initialFieldState);
+    const [error, setError] = useState({});
+    // PREFERENCES
+    const scPreferences = useSCPreferences();
+    const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
+    const _backgroundCover = Object.assign({}, (field.emotionalImageOriginal
+        ? { background: `url('${field.emotionalImageOriginal}') center / cover` }
+        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+    const combineDateAndTime = (date, time) => {
+        if (date && time) {
+            const combined = new Date(date);
+            combined.setHours(time.getHours());
+            combined.setMinutes(time.getMinutes());
+            combined.setSeconds(time.getSeconds());
+            combined.setMilliseconds(time.getMilliseconds());
+            return combined.toISOString();
+        }
+        return null;
+    };
+    function handleChangeCover(cover) {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { ['emotionalImageOriginalFile']: cover })));
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['emotionalImageOriginal']: reader.result })));
+        };
+        reader.readAsDataURL(cover);
+        if (error.emotionalImageOriginalError) {
+            delete error.emotionalImageOriginalError;
+            setError(error);
+        }
+    }
+    const handleGeoData = (data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+    };
+    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);
+        }
+        formData.append('name', field.name);
+        formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
+        formData.append('recurring', field.recurring);
+        if (field.endDate) {
+            formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
+        }
+        formData.append('location', field.location);
+        if (field.location === SCEventLocationType.ONLINE) {
+            formData.append('link', field.link);
+        }
+        if (field.location === SCEventLocationType.PERSON) {
+            formData.append('geolocation', field.geolocation);
+            formData.append('geolocation_lat', field.lat);
+            formData.append('geolocation_lng', field.lng);
+        }
+        if (privateEnabled) {
+            formData.append('privacy', field.isPublic ? SCEventPrivacyType.PUBLIC : SCEventPrivacyType.PRIVATE);
+        }
+        formData.append('description', field.description);
+        EventService.createEvent(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            .then((data) => {
+            onSuccess && onSuccess(data);
+            onClose && onClose();
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+        })
+            .catch((e) => {
+            setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const handleChange = (event) => {
+        const { name, value } = event.target;
+        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+        if (error[`${name}Error`]) {
+            delete error[`${name}Error`];
+            setError(error);
+        }
+    };
+    const handleChangeDateTime = (value, name) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+        if (error[`${name}Error`]) {
+            delete error[`${name}Error`];
+            setError(error);
+        }
+    };
+    /**
+     * Renders root object
+     */
+    return (React.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: React.createElement(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" }), open: open, onClose: onClose, className: classNames(classes.root, className), actions: React.createElement(LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
+                (!field.startDate && !field.startTime) ||
+                (SCEventLocationType.ONLINE && !field.link) ||
+                ((field.recurring !== SCEventRecurrenceType.NEVER) && (!field.endDate && !field.endTime)) ||
+                Object.keys(error).length !== 0 ||
+                field.name.length > EVENT_TITLE_MAX_LENGTH ||
+                field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, React.createElement(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) }, rest),
+        React.createElement(React.Fragment, null,
+            React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
+                React.createElement(UploadEventCover, { onChange: handleChangeCover })),
+            React.createElement(FormGroup, { className: classes.form },
+                React.createElement(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                        endAdornment: React.createElement(Typography, { variant: "body2" }, 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_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > EVENT_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : null }),
+                React.createElement(Box, { className: classes.dateTime },
+                    React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale },
+                        React.createElement(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && React.createElement(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
+                                textField: (params) => (React.createElement(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                                            React.createElement(IconButton, null,
+                                                React.createElement(Icon, null, "calendar_off")))) }) })))
+                            }, slotProps: {
+                                toolbar: {
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                    // @ts-ignore
+                                    toolbarTitle: React.createElement(FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                }
+                            }, onChange: (value) => handleChangeDateTime(value, 'startDate') }),
+                        React.createElement(MobileTimePicker, { className: classes.picker, label: field.startTime && React.createElement(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
+                                textField: (params) => (React.createElement(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                                            React.createElement(IconButton, null,
+                                                React.createElement(Icon, null, "access_time")))) }) })))
+                            }, slotProps: {
+                                toolbar: {
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                    // @ts-ignore
+                                    toolbarTitle: React.createElement(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                }
+                            }, onChange: (value) => handleChangeDateTime(value, 'startTime') }))),
+                React.createElement(FormControl, { className: classes.frequency },
+                    field.recurring !== SCEventRecurrenceType.NEVER && React.createElement(InputLabel, { id: "frequency" }, `${intl.formatMessage(messages.frequency)}`),
+                    React.createElement(Select, { name: "recurring", label: field.recurring !== SCEventRecurrenceType.NEVER && `${intl.formatMessage(messages.frequency)}`, labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
+                            if (!selected) {
+                                return React.createElement("em", null, `${intl.formatMessage(messages.frequencyPlaceholder)}`);
+                            }
+                            return (React.createElement(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
+                        }, startAdornment: React.createElement(InputAdornment, { position: "start" },
+                            React.createElement(IconButton, null,
+                                React.createElement(Icon, null, "frequency"))) }, Object.values(SCEventRecurrenceType).map((f) => (React.createElement(MenuItem, { value: f, key: f },
+                        React.createElement(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` })))))),
+                (field.showEndDateTime || field.recurring !== SCEventRecurrenceType.NEVER) && (React.createElement(Box, { className: classes.dateTime },
+                    React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale },
+                        React.createElement(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.endDate && React.createElement(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                textField: (params) => (React.createElement(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                                            React.createElement(IconButton, null,
+                                                React.createElement(Icon, null, "calendar_off")))) }) })))
+                            }, onChange: (value) => handleChangeDateTime(value, 'endDate') }),
+                        React.createElement(MobileTimePicker, { className: classes.picker, label: field.endTime && React.createElement(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                                textField: (params) => (React.createElement(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (React.createElement(InputAdornment, { position: "start" },
+                                            React.createElement(IconButton, null,
+                                                React.createElement(Icon, null, "access_time")))) }) })))
+                            }, onChange: (value) => handleChangeDateTime(value, 'endTime') })))),
+                React.createElement(Button, { variant: "text", color: "secondary", onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['showEndDateTime']: !field.showEndDateTime }))) },
+                    React.createElement(FormattedMessage, { id: "ui.eventForm.dateTime.placeholder", defaultMessage: "ui.eventForm.dateTime.placeholder", values: { symbol: field.showEndDateTime ? '-' : '+' } })),
+                React.createElement(EventAddress, { forwardGeolocationData: handleGeoData }),
+                privateEnabled && (React.createElement(Box, { className: classes.privacySection },
+                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" },
+                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) },
+                            React.createElement(Icon, null, "private"),
+                            React.createElement(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })),
+                        React.createElement(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))) }),
+                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) },
+                            React.createElement(Icon, null, "public"),
+                            React.createElement(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" }))),
+                    React.createElement(Typography, { variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, field.isPublic ? (React.createElement(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => React.createElement("strong", null, chunks)
+                        } })) : (React.createElement(React.Fragment, null, field.privacy === true ? (React.createElement(FormattedMessage, { id: "ui.eventForm.privacy.private.info.edit", defaultMessage: "ui.eventForm.private.public.info.edit", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => React.createElement("strong", null, chunks)
+                        } })) : (React.createElement(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            b: (chunks) => React.createElement("strong", null, chunks)
+                        } }))))))),
+                React.createElement(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                        endAdornment: (React.createElement(Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH))
+                    }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })))));
+}

package/lib/esm/components/EventForm/UploadEventCover.d.ts

@@ -0,0 +1,40 @@
+export interface UploadEventCoverProps {
+    /**
+     * On change function.
+     * @default null
+     */
+    onChange?: (cover: any) => void;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UploadEventCover)
+
+ #### Import
+ ```jsx
+ import {UploadEventCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCUploadEventCover` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUploadEventCover-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UploadEventCover(inProps: UploadEventCoverProps): JSX.Element;

package/lib/esm/components/EventForm/UploadEventCover.js

@@ -0,0 +1,95 @@
+import { __rest } from "tslib";
+import React, { useContext, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Alert } from '@mui/material';
+import { SCUserContext } from '@selfcommunity/react-core';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { LoadingButton } from '@mui/lab';
+const classes = {
+    root: `${PREFIX}-upload-event-cover-root`
+};
+const Root = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'UploadEventCoverRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UploadEventCover)
+
+ #### Import
+ ```jsx
+ import {UploadEventCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCUploadEventCover` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUploadEventCover-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UploadEventCover(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { onChange, className = false } = props, rest = __rest(props, ["onChange", "className"]);
+    //CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    //STATE
+    let fileInput = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [alert, setAlert] = useState(null);
+    // Anonymous
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Handles file upload
+     * @param event
+     */
+    const handleUpload = (event) => {
+        fileInput = event.target.files[0];
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    onChange && onChange(fileInput);
+                    // if (img.width < 1920) {
+                    //   setAlert(intl.formatMessage(messages.errorImageSize));
+                    // } else {
+                    //   isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                    // }
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            reader.readAsDataURL(fileInput);
+        }
+    };
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
+        React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
+            React.createElement(Icon, null, "image"))));
+}

package/lib/esm/components/EventForm/constants.d.ts

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

package/lib/esm/components/EventForm/constants.js

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

package/lib/esm/components/EventForm/index.d.ts

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

package/lib/esm/components/EventForm/index.js

@@ -0,0 +1,2 @@
+import EventForm from './EventForm';
+export default EventForm;