@selfcommunity/react-ui 0.8.0-alpha.7 → 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/cjs/shared/Media/Link/DisplayComponent.js +21 -5
- package/lib/esm/components/EventForm/EventForm.js +10 -3
- package/lib/esm/components/EventInfoWidget/EventInfoWidget.js +25 -2
- package/lib/esm/shared/Media/Link/DisplayComponent.js +21 -5
- 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, {});
|
|
@@ -12,10 +12,15 @@ const LazyLoad_1 = require("../../../constants/LazyLoad");
|
|
|
12
12
|
const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
|
|
13
13
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
14
14
|
const constants_1 = require("./constants");
|
|
15
|
+
const material_1 = require("@mui/material");
|
|
15
16
|
const filter_1 = tslib_1.__importDefault(require("./filter"));
|
|
16
17
|
const classes = {
|
|
17
18
|
displayRoot: `${constants_1.PREFIX}-display-root`,
|
|
18
19
|
displayLink: `${constants_1.PREFIX}-link`,
|
|
20
|
+
displayHtmlWrap: `${constants_1.PREFIX}-html-wrap`,
|
|
21
|
+
displayHtml: `${constants_1.PREFIX}-html`,
|
|
22
|
+
displayHtmlPlaceholder: `${constants_1.PREFIX}-html-placeholder`,
|
|
23
|
+
displayHtmlLoading: `${constants_1.PREFIX}-html-loading`,
|
|
19
24
|
displayVideo: `${constants_1.PREFIX}-video`,
|
|
20
25
|
thumbnail: `${constants_1.PREFIX}-thumbnail`,
|
|
21
26
|
thumbnailFullWidth: `${constants_1.PREFIX}-thumbnail`,
|
|
@@ -40,12 +45,23 @@ exports.default = (props) => {
|
|
|
40
45
|
// RENDER
|
|
41
46
|
/**
|
|
42
47
|
* Renders link display
|
|
43
|
-
* @param
|
|
44
|
-
* @param
|
|
48
|
+
* @param media
|
|
49
|
+
* @param key
|
|
45
50
|
*/
|
|
46
|
-
const renderPreview = (
|
|
47
|
-
|
|
48
|
-
|
|
51
|
+
const renderPreview = (media, key) => {
|
|
52
|
+
if (media.embed.metadata.html) {
|
|
53
|
+
return renderHtml(media, key);
|
|
54
|
+
}
|
|
55
|
+
const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
|
|
56
|
+
return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* Render html embed
|
|
60
|
+
* @param media
|
|
61
|
+
* @param key
|
|
62
|
+
*/
|
|
63
|
+
const renderHtml = (media, key) => {
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
|
|
49
65
|
};
|
|
50
66
|
/**
|
|
51
67
|
* Renders component
|
|
@@ -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, {});
|
|
@@ -10,10 +10,15 @@ import { DEFAULT_PRELOAD_OFFSET_VIEWPORT } from '../../../constants/LazyLoad';
|
|
|
10
10
|
import Skeleton from '@mui/material/Skeleton';
|
|
11
11
|
import classNames from 'classnames';
|
|
12
12
|
import { PREFIX } from './constants';
|
|
13
|
+
import { CircularProgress } from '@mui/material';
|
|
13
14
|
import filter from './filter';
|
|
14
15
|
const classes = {
|
|
15
16
|
displayRoot: `${PREFIX}-display-root`,
|
|
16
17
|
displayLink: `${PREFIX}-link`,
|
|
18
|
+
displayHtmlWrap: `${PREFIX}-html-wrap`,
|
|
19
|
+
displayHtml: `${PREFIX}-html`,
|
|
20
|
+
displayHtmlPlaceholder: `${PREFIX}-html-placeholder`,
|
|
21
|
+
displayHtmlLoading: `${PREFIX}-html-loading`,
|
|
17
22
|
displayVideo: `${PREFIX}-video`,
|
|
18
23
|
thumbnail: `${PREFIX}-thumbnail`,
|
|
19
24
|
thumbnailFullWidth: `${PREFIX}-thumbnail`,
|
|
@@ -38,12 +43,23 @@ export default (props) => {
|
|
|
38
43
|
// RENDER
|
|
39
44
|
/**
|
|
40
45
|
* Renders link display
|
|
41
|
-
* @param
|
|
42
|
-
* @param
|
|
46
|
+
* @param media
|
|
47
|
+
* @param key
|
|
43
48
|
*/
|
|
44
|
-
const renderPreview = (
|
|
45
|
-
|
|
46
|
-
|
|
49
|
+
const renderPreview = (media, key) => {
|
|
50
|
+
if (media.embed.metadata.html) {
|
|
51
|
+
return renderHtml(media, key);
|
|
52
|
+
}
|
|
53
|
+
const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
|
|
54
|
+
return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Render html embed
|
|
58
|
+
* @param media
|
|
59
|
+
* @param key
|
|
60
|
+
*/
|
|
61
|
+
const renderHtml = (media, key) => {
|
|
62
|
+
return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
|
|
47
63
|
};
|
|
48
64
|
/**
|
|
49
65
|
* Renders component
|