npm - @selfcommunity/react-ui - Versions diffs - 0.9.0-alpha.0 → 0.9.0-alpha.2 - Mend

@selfcommunity/react-ui 0.9.0-alpha.0 → 0.9.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/lib/cjs/components/CreateEventButton/CreateEventButton.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ButtonProps } from '@mui/material/Button/Button';
-import { EventFormProps } from '../EventForm';
+import { EventFormDialogProps } from '../EventFormDialog';
 export interface CreateEventButtonProps extends ButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -10,7 +10,7 @@ export interface CreateEventButtonProps extends ButtonProps {
      * Props to spread to CreateGroup component
      * @default empty object
      */
-    EventFormProps?: EventFormProps;
+    EventFormDialogComponentProps?: EventFormDialogProps;
     /**
      * Any other properties
      */

package/lib/cjs/components/CreateEventButton/CreateEventButton.js CHANGED Viewed

@@ -9,7 +9,7 @@ const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
+const EventFormDialog_1 = tslib_1.__importDefault(require("../EventFormDialog"));
 const types_1 = require("@selfcommunity/types");
 const PREFIX = 'SCCreateEventButton';
 const classes = {
@@ -40,13 +40,13 @@ const Root = (0, styles_1.styled)(material_1.Button, {
  * @param inProps
  */
 function CreateEventButton(inProps) {
-    var _a;
+    var _a, _b;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className, EventFormProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "EventFormProps", "children"]);
+    const { className, EventFormDialogComponentProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "EventFormDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // STATE
@@ -78,6 +78,6 @@ function CreateEventButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !EventFormProps.event && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormProps, { open: true, onClose: handleClick }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !((_b = EventFormDialogComponentProps.EventFormComponentProps) === null || _b === void 0 ? void 0 : _b.event) && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({}, EventFormDialogComponentProps, { open: true, onClose: handleClick }))] }));
 }
 exports.default = CreateEventButton;

package/lib/cjs/components/EditEventButton/EditEventButton.js CHANGED Viewed

@@ -55,6 +55,6 @@ function EditEventButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className), EventFormProps: { event: scEvent, onSuccess: handleSuccess } }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className), EventFormDialogComponentProps: { EventFormComponentProps: { event: scEvent, onSuccess: handleSuccess } } }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
 }
 exports.default = EditEventButton;

package/lib/cjs/components/EventForm/EventForm.d.ts CHANGED Viewed

@@ -1,21 +1,11 @@
+import { BoxProps } from '@mui/material';
 import { SCEventType } from '@selfcommunity/types';
-import { BaseDialogProps } from '../../shared/BaseDialog';
-export interface EventFormProps extends BaseDialogProps {
+export interface EventFormProps extends BoxProps {
     /**
      * 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;
     /**
      * Event Object
      * @default null
@@ -26,6 +16,11 @@ export interface EventFormProps extends BaseDialogProps {
      * @default null
      */
     onSuccess?: (data: SCEventType) => void;
+    /**
+     * On error callback function
+     * @default null
+     */
+    onError?: (error: any) => void;
     /**
      * Any other properties
      */

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

@@ -21,7 +21,6 @@ const react_intl_1 = require("react-intl");
 const Errors_1 = require("../../constants/Errors");
 const Event_1 = require("../../constants/Event");
 const PubSub_1 = require("../../constants/PubSub");
-const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const constants_1 = require("./constants");
 const EventAddress_1 = tslib_1.__importDefault(require("./EventAddress"));
 const UploadEventCover_1 = tslib_1.__importDefault(require("./UploadEventCover"));
@@ -74,11 +73,12 @@ const classes = {
     name: `${constants_1.PREFIX}-name`,
     description: `${constants_1.PREFIX}-description`,
     content: `${constants_1.PREFIX}-content`,
+    actions: `${constants_1.PREFIX}-actions`,
     privacySection: `${constants_1.PREFIX}-privacy-section`,
     privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
     error: `${constants_1.PREFIX}-error`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -120,7 +120,7 @@ function EventForm(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, open = true, onClose, onSuccess, event = null } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess", "event"]);
+    const { className, onSuccess, onError, event = null } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "event"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     // INTL
@@ -221,10 +221,9 @@ function EventForm(inProps) {
         }
         eventService
             .then((data) => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose === null || onClose === void 0 ? void 0 : onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
         })
             .catch((e) => {
             const _error = (0, api_services_1.formatHttpErrorCode)(e);
@@ -238,8 +237,9 @@ function EventForm(inProps) {
             }
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            onError === null || onError === void 0 ? void 0 : onError(e);
         });
-    }, [field, privateEnabled, visibilityEnabled]);
+    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
     const handleChange = (0, react_1.useCallback)((event) => {
         const { name, value } = event.target;
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -284,56 +284,56 @@ function EventForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(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: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
-                !field.startDate ||
-                !field.startTime ||
-                !field.endDate ||
-                !field.endTime ||
-                (field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
-                (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" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
-                            }, error: Boolean(field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
-                                            textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
-                                        }, slotProps: {
-                                            toolbar: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                                // @ts-ignore
-                                                toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
-                                            }
-                                        }, onChange: (value) => handleChangeDateTime(value, 'startDate') }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, label: field.startTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
-                                            textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }) })))
-                                        }, slotProps: {
-                                            toolbar: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                                // @ts-ignore
-                                                toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
-                                            }
-                                        }, onChange: (value) => handleChangeDateTime(value, 'startTime') })] })) })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.frequency }, { children: [field.recurring !== types_1.SCEventRecurrenceType.NEVER && (0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "recurring" }, { children: `${intl.formatMessage(messages.frequency)}` })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "recurring", label: field.recurring !== types_1.SCEventRecurrenceType.NEVER && `${intl.formatMessage(messages.frequency)}`, labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
-                                        if (!selected) {
-                                            return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
-                                        }
-                                        return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                    }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
-                                            textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "calendar_off" }) }) }))) }) })))
-                                        }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
-                                            textField: (params) => {
-                                                var _a;
-                                                return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
-                                            }
-                                        }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                            endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
+                        }, error: Boolean(field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
+                                        textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                             // @ts-ignore
-                                            b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
-                                        } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'startDate') }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, label: field.startTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
+                                        textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }) })))
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                             // @ts-ignore
-                                            b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
-                                        } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
+                                            toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'startTime') })] })) })), (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ className: classes.frequency }, { children: [field.recurring !== types_1.SCEventRecurrenceType.NEVER && (0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ id: "recurring" }, { children: `${intl.formatMessage(messages.frequency)}` })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ name: "recurring", label: field.recurring !== types_1.SCEventRecurrenceType.NEVER && `${intl.formatMessage(messages.frequency)}`, labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
+                                    if (!selected) {
+                                        return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
+                                    }
+                                    return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
+                                }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                        textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "calendar_off" }) }) }))) }) })))
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                                        textField: (params) => {
+                                            var _a;
+                                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                    } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                    } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                                !field.startDate ||
+                                !field.startTime ||
+                                !field.endDate ||
+                                !field.endTime ||
+                                (field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
+                                (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" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
 }
 exports.default = EventForm;

package/lib/cjs/components/EventFormDialog/EventFormDialog.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { EventFormProps } from '../EventForm';
+export interface EventFormDialogProps 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;
+    /**
+     * Props to spread to EventForm component
+     * @default {}
+     */
+    EventFormComponentProps?: EventFormProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS EventFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventFormDialog} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCEventFormDialog` can be used when providing style overrides in the theme.
+ #### CSS
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFormDialog-root|Styles applied to the root element.|
+ * @param inProps
+ */
+export default function EventFormDialog(inProps: EventFormDialogProps): JSX.Element;

package/lib/cjs/components/EventFormDialog/EventFormDialog.js ADDED Viewed

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const constants_1 = require("./constants");
+const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
+const react_1 = require("react");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS EventFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventFormDialog} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCEventFormDialog` can be used when providing style overrides in the theme.
+ #### CSS
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFormDialog-root|Styles applied to the root element.|
+ * @param inProps
+ */
+function EventFormDialog(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const handleSuccess = (0, react_1.useCallback)((event) => {
+        var _a;
+        (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, EventFormComponentProps]);
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
+}
+exports.default = EventFormDialog;

package/lib/cjs/components/EventFormDialog/constants.d.ts ADDED Viewed

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

package/lib/cjs/components/EventFormDialog/constants.js ADDED Viewed

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCEventFormDialog';

package/lib/cjs/components/EventFormDialog/index.d.ts ADDED Viewed

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

package/lib/cjs/components/EventFormDialog/index.js ADDED Viewed

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

package/lib/cjs/components/EventMediaWidget/EventMediaWidget.d.ts CHANGED Viewed

@@ -28,6 +28,10 @@ export interface EventMediaWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit results
+     * @default 10
+     */
     limit?: number;
     /**
      * Other props

package/lib/cjs/components/EventMediaWidget/EventMediaWidget.js CHANGED Viewed

@@ -69,12 +69,17 @@ function EventMediaWidget(inProps) {
     const { event, eventId, limit = Pagination_1.DEFAULT_PAGINATION_LIMIT, endpointQueryParams = {
         limit,
         offset: Pagination_1.DEFAULT_PAGINATION_OFFSET
-    }, cacheStrategy, dialogProps } = props, rest = tslib_1.__rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    }, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, dialogProps } = props, rest = tslib_1.__rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    // HOOKS
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const intl = (0, react_intl_1.useIntl)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
         isLoadingNext: false,
         next: null,
-        cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY),
+        cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, event ? event.id : eventId),
         cacheStrategy,
         visibleItems: limit
     }, widget_1.stateWidgetInitializer);
@@ -88,11 +93,6 @@ function EventMediaWidget(inProps) {
     const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(null);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
-    // HOOKS
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
-    const intl = (0, react_intl_1.useIntl)();
-    const theme = (0, material_1.useTheme)();
-    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // CONSTS
     const hasAllow = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
     const countHiddenMedia = (0, react_1.useMemo)(() => mediasCount - MEDIAS_TO_SHOW, [mediasCount]);
@@ -114,7 +114,7 @@ function EventMediaWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, scEvent]);
+    }, [state.isLoadingNext, scEvent, dispatch, setMedias, setMediasCount]);
     const _fetchNext = (0, react_1.useCallback)((index) => {
         if (mediasCount > medias.length && index >= 6 && !state.isLoadingNext && state.next) {
             setPreview(index);
@@ -134,7 +134,7 @@ function EventMediaWidget(inProps) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [state.next, state.isLoadingNext, medias.length]);
+    }, [state.next, state.isLoadingNext, medias, mediasCount, dispatch, setPreview]);
     const handleOpenLightbox = (0, react_1.useCallback)((index) => {
         setPreview(index);
     }, [setPreview]);
@@ -187,7 +187,7 @@ function EventMediaWidget(inProps) {
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
-    }, [scEvent, mediaId, setMedias, setLoading, setOpenDialogConfirm, dispatch]);
+    }, [scEvent, mediaId, setMedias, setLoading, setOpenDialogConfirm, dispatch, setMediasCount]);
     const handleCloseAction = (0, react_1.useCallback)(() => {
         setMediaId(null);
         setOpenDialogConfirm(false);
@@ -216,9 +216,17 @@ function EventMediaWidget(inProps) {
             _t = setTimeout(_initComponent);
             return () => {
                 clearTimeout(_t);
+                if (state.initialized) {
+                    dispatch({
+                        type: widget_1.actionWidgetTypes.INITIALIZE,
+                        payload: {
+                            cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, scEvent.id)
+                        }
+                    });
+                }
             };
         }
-    }, [scUserContext.user, scEvent]);
+    }, [scUserContext.user, scEvent, state.initialized]);
     (0, react_1.useEffect)(() => {
         if (isMobile && openDialog && state.next) {
             handleNext();

package/lib/cjs/components/EventMediaWidget/TriggerButton.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LoadingButtonProps } from '@mui/lab';
 import { SCMediaType } from '@selfcommunity/types';
 export interface TriggerIconButtonProps extends LoadingButtonProps {
@@ -12,4 +13,5 @@ export interface TriggerIconButtonProps extends LoadingButtonProps {
      */
     isSquare?: boolean;
 }
-export default function TriggerButton(props: TriggerIconButtonProps): JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<TriggerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "name" | "type" | "href" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loadingIndicator" | "loadingPosition" | "onAdd" | "isSquare"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;

package/lib/cjs/components/EventMediaWidget/TriggerButton.js CHANGED Viewed

@@ -27,7 +27,7 @@ const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
     shouldForwardProp: (prop) => prop !== 'isSquare'
 })(() => ({}));
 const GalleryUploadStack = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-function TriggerButton(props) {
+function TriggerButton(props, ref) {
     // PROPS
     const { className, onAdd = null, isSquare = false } = props, rest = tslib_1.__rest(props, ["className", "onAdd", "isSquare"]);
     // STATE
@@ -58,6 +58,9 @@ function TriggerButton(props) {
     return ((0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
             url: api_services_1.Endpoints.ComposerChunkUploadMedia.url(),
             method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-        }, fileFilter: handleFilterByMime, chunkSize: 204800 }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError, type: "image" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add media", loading: isUploading, isSquare: isSquare }, { children: (0, jsx_runtime_1.jsxs)(GalleryUploadStack, Object.assign({ className: classes.triggerContent }, { children: [!isSquare && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", component: "p" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }))), (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.triggerIcon }, { children: "add" }))] })) }))] })));
+        }, fileFilter: handleFilterByMime, chunkSize: 204800 }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError, type: "image" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot), ref: ref }, rest, { "aria-label": "add media", loading: isUploading,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                isSquare: isSquare }, { children: (0, jsx_runtime_1.jsxs)(GalleryUploadStack, Object.assign({ className: classes.triggerContent }, { children: [!isSquare && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", component: "p" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }))), (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.triggerIcon }, { children: "add" }))] })) }))] })));
 }
-exports.default = TriggerButton;
+exports.default = (0, react_1.forwardRef)(TriggerButton);