@selfcommunity/react-ui 0.8.0-alpha.8 → 0.8.0-alpha.9
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.
- package/lib/cjs/components/EventForm/EventForm.js +10 -3
- package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js +24 -1
- package/lib/esm/components/EventForm/EventForm.js +10 -3
- package/lib/esm/components/EventInfoWidget/EventInfoWidget.js +25 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +4 -4
|
@@ -254,6 +254,10 @@ function EventForm(inProps) {
|
|
|
254
254
|
delete error[`${name}Error`];
|
|
255
255
|
setError(error);
|
|
256
256
|
}
|
|
257
|
+
else if (error['endDateError']) {
|
|
258
|
+
delete error['endDateError'];
|
|
259
|
+
setError(error);
|
|
260
|
+
}
|
|
257
261
|
}, [error]);
|
|
258
262
|
const shouldDisabledDate = (0, react_1.useCallback)((date) => {
|
|
259
263
|
let disabled = false;
|
|
@@ -313,11 +317,14 @@ function EventForm(inProps) {
|
|
|
313
317
|
return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
|
|
314
318
|
}
|
|
315
319
|
return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
|
|
316
|
-
}, 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, 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: {
|
|
320
|
+
}, 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: {
|
|
317
321
|
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" }) }) }))) }) })))
|
|
318
322
|
}, 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: {
|
|
319
|
-
textField: (params) =>
|
|
320
|
-
|
|
323
|
+
textField: (params) => {
|
|
324
|
+
var _a;
|
|
325
|
+
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 })));
|
|
326
|
+
}
|
|
327
|
+
}, 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: {
|
|
321
328
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
322
329
|
// @ts-ignore
|
|
323
330
|
b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
|
|
@@ -12,6 +12,8 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
|
|
|
12
12
|
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
|
|
13
13
|
const constants_1 = require("./constants");
|
|
14
14
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
15
|
+
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
|
|
16
|
+
const PubSub_1 = require("../../constants/PubSub");
|
|
15
17
|
const classes = {
|
|
16
18
|
root: `${constants_1.PREFIX}-root`,
|
|
17
19
|
content: `${constants_1.PREFIX}-content`,
|
|
@@ -45,7 +47,9 @@ function EventInfoWidget(inProps) {
|
|
|
45
47
|
const [showButton, setShowButton] = (0, react_1.useState)(!summaryExpanded);
|
|
46
48
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
47
49
|
// HOOKS
|
|
48
|
-
const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
|
|
50
|
+
const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
|
|
51
|
+
// REFS
|
|
52
|
+
const updatesSubscription = (0, react_1.useRef)(null);
|
|
49
53
|
(0, react_1.useEffect)(() => {
|
|
50
54
|
setLoading(false);
|
|
51
55
|
}, []);
|
|
@@ -67,6 +71,25 @@ function EventInfoWidget(inProps) {
|
|
|
67
71
|
const showInfo = (0, react_1.useMemo)(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC ||
|
|
68
72
|
[types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
|
|
69
73
|
const description = (0, react_1.useMemo)(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
|
|
74
|
+
/**
|
|
75
|
+
* Subscriber for pubsub callback
|
|
76
|
+
*/
|
|
77
|
+
const onChangeGroupHandler = (0, react_1.useCallback)((_msg, data) => {
|
|
78
|
+
if (data && scEvent.id === data.id) {
|
|
79
|
+
setSCEvent(data);
|
|
80
|
+
}
|
|
81
|
+
}, [scEvent, setSCEvent]);
|
|
82
|
+
/**
|
|
83
|
+
* On mount, subscribe to receive groups updates (only edit)
|
|
84
|
+
*/
|
|
85
|
+
(0, react_1.useEffect)(() => {
|
|
86
|
+
if (scEvent) {
|
|
87
|
+
updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, onChangeGroupHandler);
|
|
88
|
+
}
|
|
89
|
+
return () => {
|
|
90
|
+
updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
|
|
91
|
+
};
|
|
92
|
+
}, [scEvent]);
|
|
70
93
|
// RENDER
|
|
71
94
|
if (!scEvent && loading) {
|
|
72
95
|
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
|
|
@@ -252,6 +252,10 @@ export default function EventForm(inProps) {
|
|
|
252
252
|
delete error[`${name}Error`];
|
|
253
253
|
setError(error);
|
|
254
254
|
}
|
|
255
|
+
else if (error['endDateError']) {
|
|
256
|
+
delete error['endDateError'];
|
|
257
|
+
setError(error);
|
|
258
|
+
}
|
|
255
259
|
}, [error]);
|
|
256
260
|
const shouldDisabledDate = useCallback((date) => {
|
|
257
261
|
let disabled = false;
|
|
@@ -311,11 +315,14 @@ export default function EventForm(inProps) {
|
|
|
311
315
|
return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
|
|
312
316
|
}
|
|
313
317
|
return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
|
|
314
|
-
}, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _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: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
|
|
318
|
+
}, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _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, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
|
|
315
319
|
textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
|
|
316
320
|
}, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
|
|
317
|
-
textField: (params) =>
|
|
318
|
-
|
|
321
|
+
textField: (params) => {
|
|
322
|
+
var _a;
|
|
323
|
+
return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? (_jsx(FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
|
|
324
|
+
}
|
|
325
|
+
}, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
|
|
319
326
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
320
327
|
// @ts-ignore
|
|
321
328
|
b: (chunks) => _jsx("strong", { children: chunks })
|
|
@@ -3,13 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Box, Button, CardContent, Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
|
|
4
4
|
import { useSCFetchEvent } from '@selfcommunity/react-core';
|
|
5
5
|
import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
|
|
6
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
6
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
7
7
|
import { FormattedMessage } from 'react-intl';
|
|
8
8
|
import EventInfoDetails from '../../shared/EventInfoDetails';
|
|
9
9
|
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
10
10
|
import Widget from '../Widget';
|
|
11
11
|
import { PREFIX } from './constants';
|
|
12
12
|
import Skeleton from './Skeleton';
|
|
13
|
+
import PubSub from 'pubsub-js';
|
|
14
|
+
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
|
|
13
15
|
const classes = {
|
|
14
16
|
root: `${PREFIX}-root`,
|
|
15
17
|
content: `${PREFIX}-content`,
|
|
@@ -43,7 +45,9 @@ export default function EventInfoWidget(inProps) {
|
|
|
43
45
|
const [showButton, setShowButton] = useState(!summaryExpanded);
|
|
44
46
|
const [loading, setLoading] = useState(true);
|
|
45
47
|
// HOOKS
|
|
46
|
-
const { scEvent } = useSCFetchEvent({ id: eventId, event });
|
|
48
|
+
const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
|
|
49
|
+
// REFS
|
|
50
|
+
const updatesSubscription = useRef(null);
|
|
47
51
|
useEffect(() => {
|
|
48
52
|
setLoading(false);
|
|
49
53
|
}, []);
|
|
@@ -65,6 +69,25 @@ export default function EventInfoWidget(inProps) {
|
|
|
65
69
|
const showInfo = useMemo(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC ||
|
|
66
70
|
[SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
|
|
67
71
|
const description = useMemo(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
|
|
72
|
+
/**
|
|
73
|
+
* Subscriber for pubsub callback
|
|
74
|
+
*/
|
|
75
|
+
const onChangeGroupHandler = useCallback((_msg, data) => {
|
|
76
|
+
if (data && scEvent.id === data.id) {
|
|
77
|
+
setSCEvent(data);
|
|
78
|
+
}
|
|
79
|
+
}, [scEvent, setSCEvent]);
|
|
80
|
+
/**
|
|
81
|
+
* On mount, subscribe to receive groups updates (only edit)
|
|
82
|
+
*/
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
if (scEvent) {
|
|
85
|
+
updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.EDIT}`, onChangeGroupHandler);
|
|
86
|
+
}
|
|
87
|
+
return () => {
|
|
88
|
+
updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
|
|
89
|
+
};
|
|
90
|
+
}, [scEvent]);
|
|
68
91
|
// RENDER
|
|
69
92
|
if (!scEvent && loading) {
|
|
70
93
|
return _jsx(Skeleton, {});
|