@selfcommunity/react-ui 0.10.4-alpha.10 → 0.10.4-alpha.12

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 (4) hide show
  1. package/lib/cjs/components/EventForm/EventForm.js +25 -7
  2. package/lib/esm/components/EventForm/EventForm.js +26 -8
  3. package/lib/umd/react-ui.js +1 -1
  4. package/package.json +4 -4
package/lib/cjs/components/EventForm/EventForm.js CHANGED
@@ -76,7 +76,8 @@ const classes = {
76
76
  actions: `${constants_1.PREFIX}-actions`,
77
77
  privacySection: `${constants_1.PREFIX}-privacy-section`,
78
78
  privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
79
- error: `${constants_1.PREFIX}-error`
79
+ error: `${constants_1.PREFIX}-error`,
80
+ genericError: `${constants_1.PREFIX}-generic-error`
80
81
  };
81
82
  const Root = (0, styles_1.styled)(material_1.Box, {
82
83
  name: constants_1.PREFIX,
@@ -148,6 +149,7 @@ function EventForm(inProps) {
148
149
  // STATE
149
150
  const [field, setField] = (0, react_1.useState)(initialFieldState);
150
151
  const [error, setError] = (0, react_1.useState)({});
152
+ const [genericError, setGenericError] = (0, react_1.useState)(null);
151
153
  // PREFERENCES
152
154
  const scPreferences = (0, react_core_1.useSCPreferences)();
153
155
  const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
@@ -168,6 +170,7 @@ function EventForm(inProps) {
168
170
  delete error.imageOriginalError;
169
171
  setError(error);
170
172
  }
173
+ setGenericError(null);
171
174
  }, [error]);
172
175
  /**
173
176
  * Notify when a group info changed
@@ -185,9 +188,11 @@ function EventForm(inProps) {
185
188
  }, [event]);
186
189
  const handleGeoData = (0, react_1.useCallback)((data) => {
187
190
  setField((prev) => (Object.assign(Object.assign({}, prev), data)));
191
+ setGenericError(null);
188
192
  }, []);
189
193
  const handleSubmit = (0, react_1.useCallback)(() => {
190
194
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
195
+ setGenericError(null);
191
196
  const formData = new FormData();
192
197
  if (field.imageOriginalFile) {
193
198
  formData.append('image_original', field.imageOriginalFile);
@@ -227,12 +232,23 @@ function EventForm(inProps) {
227
232
  })
228
233
  .catch((e) => {
229
234
  const _error = (0, api_services_1.formatHttpErrorCode)(e);
230
- if (Object.values(_error)[0]['error'] === 'unique') {
231
- setError(Object.assign(Object.assign({}, error), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
235
+ if ('errorsError' in _error || !Object.keys(_error).length) {
236
+ setGenericError(intl.formatMessage({
237
+ id: 'ui.eventForm.genericError',
238
+ defaultMessage: 'ui.eventForm.genericError'
239
+ }));
232
240
  }
233
241
  else {
234
- setError(Object.assign(Object.assign({}, error), _error));
242
+ setGenericError(null);
235
243
  }
244
+ let __errors = {};
245
+ if ('coverError' in _error) {
246
+ __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.ui.eventForm.cover.error", defaultMessage: "ui.ui.eventForm.cover.error" }) });
247
+ }
248
+ if ('titleError' in _error) {
249
+ __errors = Object.assign(Object.assign({}, __errors), { ['titleError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
250
+ }
251
+ setError(__errors);
236
252
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
237
253
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
238
254
  onError === null || onError === void 0 ? void 0 : onError(e);
@@ -245,6 +261,7 @@ function EventForm(inProps) {
245
261
  delete error[`${name}Error`];
246
262
  setError(error);
247
263
  }
264
+ setGenericError(null);
248
265
  }, [setField, error]);
249
266
  const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
250
267
  setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -256,6 +273,7 @@ function EventForm(inProps) {
256
273
  delete error['endDateError'];
257
274
  setError(error);
258
275
  }
276
+ setGenericError(null);
259
277
  }, [setField, error]);
260
278
  const shouldDisableDate = (0, react_1.useCallback)((date) => {
261
279
  let disabled = false;
@@ -279,7 +297,7 @@ function EventForm(inProps) {
279
297
  /**
280
298
  * Renders root object
281
299
  */
282
- 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: {
300
+ 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 }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (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: {
283
301
  endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
284
302
  }, 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: {
285
303
  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" }) }) }))) }) })))
@@ -331,7 +349,7 @@ function EventForm(inProps) {
331
349
  b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
332
350
  } })) }))] }))), (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: {
333
351
  endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
334
- }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.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 ||
352
+ }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.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 }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (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 ||
335
353
  !field.startDate ||
336
354
  !field.startTime ||
337
355
  !field.endDate ||
@@ -339,7 +357,7 @@ function EventForm(inProps) {
339
357
  (field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
340
358
  (field.location === types_1.SCEventLocationType.PERSON && !field.geolocation) ||
341
359
  (field.recurring !== types_1.SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
342
- Object.keys(error).length !== 0 ||
360
+ field.isSubmitting ||
343
361
  field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ||
344
362
  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" })) })) }))] }))] })));
345
363
  }
package/lib/esm/components/EventForm/EventForm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { LoadingButton } from '@mui/lab';
4
- import { Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
4
+ import { Alert, Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
5
5
  import { styled } from '@mui/material/styles';
6
6
  import { useThemeProps } from '@mui/system';
7
7
  import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
@@ -74,7 +74,8 @@ const classes = {
74
74
  actions: `${PREFIX}-actions`,
75
75
  privacySection: `${PREFIX}-privacy-section`,
76
76
  privacySectionInfo: `${PREFIX}-privacy-section-info`,
77
- error: `${PREFIX}-error`
77
+ error: `${PREFIX}-error`,
78
+ genericError: `${PREFIX}-generic-error`
78
79
  };
79
80
  const Root = styled(Box, {
80
81
  name: PREFIX,
@@ -146,6 +147,7 @@ export default function EventForm(inProps) {
146
147
  // STATE
147
148
  const [field, setField] = useState(initialFieldState);
148
149
  const [error, setError] = useState({});
150
+ const [genericError, setGenericError] = useState(null);
149
151
  // PREFERENCES
150
152
  const scPreferences = useSCPreferences();
151
153
  const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
@@ -166,6 +168,7 @@ export default function EventForm(inProps) {
166
168
  delete error.imageOriginalError;
167
169
  setError(error);
168
170
  }
171
+ setGenericError(null);
169
172
  }, [error]);
170
173
  /**
171
174
  * Notify when a group info changed
@@ -183,9 +186,11 @@ export default function EventForm(inProps) {
183
186
  }, [event]);
184
187
  const handleGeoData = useCallback((data) => {
185
188
  setField((prev) => (Object.assign(Object.assign({}, prev), data)));
189
+ setGenericError(null);
186
190
  }, []);
187
191
  const handleSubmit = useCallback(() => {
188
192
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
193
+ setGenericError(null);
189
194
  const formData = new FormData();
190
195
  if (field.imageOriginalFile) {
191
196
  formData.append('image_original', field.imageOriginalFile);
@@ -225,12 +230,23 @@ export default function EventForm(inProps) {
225
230
  })
226
231
  .catch((e) => {
227
232
  const _error = formatHttpErrorCode(e);
228
- if (Object.values(_error)[0]['error'] === 'unique') {
229
- setError(Object.assign(Object.assign({}, error), { ['nameError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
233
+ if ('errorsError' in _error || !Object.keys(_error).length) {
234
+ setGenericError(intl.formatMessage({
235
+ id: 'ui.eventForm.genericError',
236
+ defaultMessage: 'ui.eventForm.genericError'
237
+ }));
230
238
  }
231
239
  else {
232
- setError(Object.assign(Object.assign({}, error), _error));
240
+ setGenericError(null);
233
241
  }
242
+ let __errors = {};
243
+ if ('coverError' in _error) {
244
+ __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: _jsx(FormattedMessage, { id: "ui.ui.eventForm.cover.error", defaultMessage: "ui.ui.eventForm.cover.error" }) });
245
+ }
246
+ if ('titleError' in _error) {
247
+ __errors = Object.assign(Object.assign({}, __errors), { ['titleError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
248
+ }
249
+ setError(__errors);
234
250
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
235
251
  Logger.error(SCOPE_SC_UI, e);
236
252
  onError === null || onError === void 0 ? void 0 : onError(e);
@@ -243,6 +259,7 @@ export default function EventForm(inProps) {
243
259
  delete error[`${name}Error`];
244
260
  setError(error);
245
261
  }
262
+ setGenericError(null);
246
263
  }, [setField, error]);
247
264
  const handleChangeDateTime = useCallback((value, name) => {
248
265
  setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -254,6 +271,7 @@ export default function EventForm(inProps) {
254
271
  delete error['endDateError'];
255
272
  setError(error);
256
273
  }
274
+ setGenericError(null);
257
275
  }, [setField, error]);
258
276
  const shouldDisableDate = useCallback((date) => {
259
277
  let disabled = false;
@@ -277,7 +295,7 @@ export default function EventForm(inProps) {
277
295
  /**
278
296
  * Renders root object
279
297
  */
280
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
298
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && _jsx(Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
281
299
  endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
282
300
  }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
283
301
  textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
@@ -329,7 +347,7 @@ export default function EventForm(inProps) {
329
347
  b: (chunks) => _jsx("strong", { children: chunks })
330
348
  } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
331
349
  endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
332
- }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
350
+ }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
333
351
  !field.startDate ||
334
352
  !field.startTime ||
335
353
  !field.endDate ||
@@ -337,7 +355,7 @@ export default function EventForm(inProps) {
337
355
  (field.location === SCEventLocationType.ONLINE && !field.link) ||
338
356
  (field.location === SCEventLocationType.PERSON && !field.geolocation) ||
339
357
  (field.recurring !== SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
340
- Object.keys(error).length !== 0 ||
358
+ field.isSubmitting ||
341
359
  field.name.length > EVENT_TITLE_MAX_LENGTH ||
342
360
  field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
343
361
  }