@selfcommunity/react-ui 0.10.4-alpha.11 → 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 +24 -7
  2. package/lib/esm/components/EventForm/EventForm.js +25 -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,8 +297,7 @@ function EventForm(inProps) {
279
297
  /**
280
298
  * Renders root object
281
299
  */
282
- console.log(error);
283
- 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: {
284
301
  endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
285
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: {
286
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" }) }) }))) }) })))
@@ -332,7 +349,7 @@ function EventForm(inProps) {
332
349
  b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
333
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: {
334
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 })))
335
- }, 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 ||
336
353
  !field.startDate ||
337
354
  !field.startTime ||
338
355
  !field.endDate ||
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,8 +295,7 @@ export default function EventForm(inProps) {
277
295
  /**
278
296
  * Renders root object
279
297
  */
280
- console.log(error);
281
- 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: {
282
299
  endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
283
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: {
284
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" }) }) }))) }) })))
@@ -330,7 +347,7 @@ export default function EventForm(inProps) {
330
347
  b: (chunks) => _jsx("strong", { children: chunks })
331
348
  } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
332
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 })))
333
- }, 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 ||
334
351
  !field.startDate ||
335
352
  !field.startTime ||
336
353
  !field.endDate ||