@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
422 lines (417 loc) • 35.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const lab_1 = require("@mui/lab");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const system_1 = require("@mui/system");
const x_date_pickers_1 = require("@mui/x-date-pickers");
const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const utils_1 = require("@selfcommunity/utils");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
const react_1 = require("react");
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 constants_1 = require("./constants");
const EventAddress_1 = tslib_1.__importDefault(require("./EventAddress"));
const UploadEventCover_1 = tslib_1.__importDefault(require("./UploadEventCover"));
const utils_2 = require("./utils");
const constants_2 = require("../LiveStreamForm/constants");
const deafultCover_1 = tslib_1.__importDefault(require("../../assets/deafultCover"));
const messages = (0, react_intl_1.defineMessages)({
name: {
id: 'ui.eventForm.name.placeholder',
defaultMessage: 'ui.eventForm.name.placeholder'
},
description: {
id: 'ui.eventForm.description.placeholder',
defaultMessage: 'ui.eventForm.description.placeholder'
},
startDate: {
id: 'ui.eventForm.date.placeholder',
defaultMessage: 'ui.eventForm.date.placeholder'
},
startTime: {
id: 'ui.eventForm.time.placeholder',
defaultMessage: 'ui.eventForm.time.placeholder'
},
frequency: {
id: 'ui.eventForm.frequency.label',
defaultMessage: 'ui.eventForm.frequency.label'
},
frequencyPlaceholder: {
id: 'ui.eventForm.frequency.none.placeholder',
defaultMessage: 'ui.eventForm.frequency.none.placeholder'
},
endDate: {
id: 'ui.eventForm.date.end.placeholder',
defaultMessage: 'ui.eventForm.date.end.placeholder'
},
endTime: {
id: 'ui.eventForm.time.end.placeholder',
defaultMessage: 'ui.eventForm.time.end.placeholder'
},
pickerCancelAction: {
id: 'ui.eventForm.time.picker.cancel.placeholder',
defaultMessage: 'ui.eventForm.time.picker.cancel.placeholder'
}
});
const classes = {
root: `${constants_1.PREFIX}-root`,
active: `${constants_1.PREFIX}-active`,
title: `${constants_1.PREFIX}-title`,
cover: `${constants_1.PREFIX}-cover`,
picker: `${constants_1.PREFIX}-picker`,
dateTime: `${constants_1.PREFIX}-date-time`,
frequency: `${constants_1.PREFIX}-frequency`,
form: `${constants_1.PREFIX}-form`,
switch: `${constants_1.PREFIX}-switch`,
switchLabel: `${constants_1.PREFIX}-switch-label`,
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`,
genericError: `${constants_1.PREFIX}-generic-error`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
/**
*> API documentation for the Community-JS Event Form component. Learn about the available props and the CSS API.
*
#### Import
```jsx
import {EventForm} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCEventForm` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCEventForm-root|Styles applied to the root element.|
|active|.SCEventForm-active|Styles applied to the active element.|
|title|.SCEventForm-title|Styles applied to the title element.|
|cover|.SCEventForm-cover|Styles applied to the cover field.|
|form|.SCEventForm-form|Styles applied to the form element.|
|switch|.SCEventForm-switch|Styles applied to the switch element.|
|switchLabel|.SCEventForm-switch-label|Styles applied to the switchLabel element.|
|name|.SCEventForm-name|Styles applied to the name field.|
|description|.SCEventForm-description|Styles applied to the description field.|
|content|.SCEventForm-content|Styles applied to the element.|
|privacySection|.SCEventForm-privacy-section|Styles applied to the privacy section.|
|privacySectionInfo|.SCEventForm-privacy-section-info|Styles applied to the privacy info section.|
|error|.SCEventForm-error|Styles applied to the error elements.|
* @param inProps
*/
function EventForm(inProps) {
var _a, _b, _c, _d, _e, _f;
//PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
// CONTEXT
const scContext = (0, react_core_1.useSCContext)();
const scUserContext = (0, react_core_1.useSCUser)();
// INTL
const intl = (0, react_intl_1.useIntl)();
const startDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.start_date), [event]);
const endDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.end_date), [event]);
const initialFieldState = {
name: (event === null || event === void 0 ? void 0 : event.name) || '',
description: event ? event.description : '',
imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
imageOriginalFile: '',
startDate: event ? startDateTime : (0, utils_2.getNewDate)(),
startTime: event ? startDateTime : (0, utils_2.getLaterHoursDate)(1),
endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getNewDate)(),
endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getLaterHoursDate)(3),
location: (event === null || event === void 0 ? void 0 : event.location)
? event.location === types_1.SCEventLocationType.PERSON
? types_1.SCEventLocationType.PERSON
: event.location === types_1.SCEventLocationType.ONLINE && event.live_stream
? types_1.SCEventLocationType.LIVESTREAM
: types_1.SCEventLocationType.ONLINE
: ((_a = EventAddressComponentProps.locations) === null || _a === void 0 ? void 0 : _a.length)
? presetLocation in EventAddressComponentProps.locations
? presetLocation
: EventAddressComponentProps.locations[0]
: types_1.SCEventLocationType.PERSON,
geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
lng: (event === null || event === void 0 ? void 0 : event.geolocation_lng) || null,
link: (event === null || event === void 0 ? void 0 : event.link) || '',
liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
recurring: (event === null || event === void 0 ? void 0 : event.recurring) || types_1.SCEventRecurrenceType.NEVER,
isPublic: (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC || true,
isSubmitting: false
};
// STATE
const [field, setField] = (0, react_1.useState)(initialFieldState);
const [error, setError] = (0, react_1.useState)({});
const [genericError, setGenericError] = (0, react_1.useState)(null);
// PREFERENCES
const scPreferences = (0, react_core_1.useSCPreferences)();
const liveStreamEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
scPreferences.features &&
scPreferences.features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
const disablePastStartTime = (0, react_1.useMemo)(() => field.startDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
const disablePastEndTime = (0, react_1.useMemo)(() => field.endDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
const _backgroundCover = Object.assign({}, (field.imageOriginal
? { background: `url('${field.imageOriginal}') center / cover` }
: { background: `url('${deafultCover_1.default}') no-repeat 0 0 / 100% 100%` }));
const handleChangeCover = (0, react_1.useCallback)((cover) => {
setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
const reader = new FileReader();
reader.onloadend = () => {
setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginal']: reader.result })));
};
reader.readAsDataURL(cover);
if (error.imageOriginalError) {
delete error.imageOriginalError;
setError(error);
}
setGenericError(null);
}, [error]);
/**
* Notify when a group info changed
* @param data
*/
const notifyChanges = (0, react_1.useCallback)((data) => {
if (event) {
// Edit group
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, data);
}
else {
// Create group
pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.CREATE}`, data);
}
}, [event]);
const handleGeoData = (0, react_1.useCallback)((data) => {
setField((prev) => (Object.assign(Object.assign({}, prev), data)));
setGenericError(null);
}, []);
const handleLiveStreamSettingsData = (0, react_1.useCallback)((data) => {
setField((prev) => (Object.assign(Object.assign({}, prev), { liveStreamSettings: Object.assign(Object.assign({}, prev.liveStreamSettings), data) })));
}, []);
const handleSubmit = (0, react_1.useCallback)(() => {
setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
setGenericError(null);
const formData = new FormData();
if (field.imageOriginalFile) {
formData.append('image_original', field.imageOriginalFile);
}
formData.append('name', field.name);
formData.append('start_date', (0, utils_2.combineDateAndTime)(field.startDate, field.startTime));
formData.append('recurring', field.recurring);
formData.append('end_date', (0, utils_2.combineDateAndTime)(field.endDate, field.endTime));
formData.append('location', field.location === types_1.SCEventLocationType.PERSON ? types_1.SCEventLocationType.PERSON : types_1.SCEventLocationType.ONLINE);
if (field.location === types_1.SCEventLocationType.ONLINE) {
formData.append('link', field.link);
formData.append('live_stream_settings', null);
}
else if (field.location === types_1.SCEventLocationType.LIVESTREAM) {
formData.append('link', '');
formData.append('live_stream_settings', JSON.stringify(Object.assign(Object.assign({}, constants_2.LIVESTREAM_DEFAULT_SETTINGS), field.liveStreamSettings)));
}
else if (field.location === types_1.SCEventLocationType.PERSON) {
formData.append('geolocation', field.geolocation);
formData.append('geolocation_lat', field.lat.toString());
formData.append('geolocation_lng', field.lng.toString());
formData.append('link', '');
formData.append('live_stream_settings', null);
}
if (field.location !== types_1.SCEventLocationType.PERSON) {
formData.append('geolocation', '');
formData.append('geolocation_lat', '');
formData.append('geolocation_lng', '');
}
if (privateEnabled) {
formData.append('privacy', field.isPublic ? types_1.SCEventPrivacyType.PUBLIC : types_1.SCEventPrivacyType.PRIVATE);
}
if (visibilityEnabled) {
formData.append('visible', 'true');
}
formData.append('description', field.description);
let eventService;
if (event) {
eventService = api_services_1.EventService.updateEvent(event.id, formData, { headers: { 'Content-Type': 'multipart/form-data' } });
}
else {
eventService = api_services_1.EventService.createEvent(formData, { headers: { 'Content-Type': 'multipart/form-data' } });
}
eventService
.then((data) => {
notifyChanges(data);
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);
if (!Object.keys(_error).length) {
setGenericError(intl.formatMessage({
id: 'ui.eventForm.genericError',
defaultMessage: 'ui.eventForm.genericError'
}));
}
else if ('codeError' in _error) {
setGenericError(intl.formatMessage({
id: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached',
defaultMessage: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached'
}));
}
else {
setGenericError(null);
}
let __errors = {};
if ('coverError' in _error) {
__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" }) });
}
if ('nameError' in _error || ('nonFieldErrorsError' in _error && _error['nonFieldErrorsError'].error === 'unique')) {
__errors = Object.assign(Object.assign({}, __errors), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
}
setError(__errors);
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, onSuccess, onError, notifyChanges]);
const handleChange = (0, react_1.useCallback)((event) => {
const { name, value } = event.target;
setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
if (error[`${name}Error`]) {
delete error[`${name}Error`];
setError(error);
}
setGenericError(null);
}, [error, setField, setGenericError]);
const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
if (error[`${name}Error`]) {
delete error[`${name}Error`];
setError(error);
}
else if (error['endDateError']) {
delete error['endDateError'];
setError(error);
}
setGenericError(null);
}, [error, setField, setGenericError]);
const shouldDisableDate = (0, react_1.useCallback)((date) => {
let disabled = false;
switch (field.recurring) {
case types_1.SCEventRecurrenceType.DAILY:
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.DAILY_LATER_DAYS, field.startDate).getTime();
break;
case types_1.SCEventRecurrenceType.WEEKLY:
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.WEEKLY_LATER_DAYS, field.startDate).getTime();
break;
case types_1.SCEventRecurrenceType.MONTHLY:
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.MONTHLY_LATER_DAYS, field.startDate).getTime();
break;
case types_1.SCEventRecurrenceType.NEVER:
default:
disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.NEVER_LATER_DAYS, field.startDate).getTime();
}
return disabled;
}, [field]);
const shouldDisableTime = (0, react_1.useCallback)((date) => field.startTime.getTime() > date.getTime(), [field]);
/**
* Renders root object
*/
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: {
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, localeText: {
cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
} }, { 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, localeText: {
cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
} }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, 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" }) }) }))) }) })))
}, 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, 'endDate'), shouldDisableDate: shouldDisableDate }), (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 })));
}
}, 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, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
name: field.name,
start_date: field.startDate,
location: field.location,
geolocation: field.geolocation,
live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_c = event.live_stream) === null || _c === void 0 ? void 0 : _c.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
}) }, EventAddressComponentProps)), 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,@typescript-eslint/ban-ts-comment
// @ts-ignores
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,@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: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
}, error: Boolean(((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.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 ||
!field.startDate ||
!field.startTime ||
!field.endDate ||
!field.endTime ||
Boolean(genericError) ||
(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) ||
field.isSubmitting ||
field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ||
field.description.length > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ||
(field.location === types_1.SCEventLocationType.LIVESTREAM && (!liveStreamEnabled || !canCreateLiveStream)), 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;