@selfcommunity/react-ui 0.10.0 → 0.10.1-alpha.1
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/EventAddress.js +11 -6
- package/lib/cjs/components/EventLocationWidget/EventLocationWidget.js +11 -4
- package/lib/cjs/components/Events/Events.js +2 -2
- package/lib/esm/components/EventForm/EventAddress.js +11 -6
- package/lib/esm/components/EventLocationWidget/EventLocationWidget.js +12 -5
- package/lib/esm/components/Events/Events.js +2 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
|
@@ -7,7 +7,6 @@ const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
|
|
|
7
7
|
const styles_1 = require("@mui/material/styles");
|
|
8
8
|
const system_1 = require("@mui/system");
|
|
9
9
|
const api_1 = require("@react-google-maps/api");
|
|
10
|
-
const react_core_1 = require("@selfcommunity/react-core");
|
|
11
10
|
const types_1 = require("@selfcommunity/types");
|
|
12
11
|
const axios_1 = tslib_1.__importDefault(require("axios"));
|
|
13
12
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
@@ -16,6 +15,7 @@ const react_intl_1 = require("react-intl");
|
|
|
16
15
|
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
|
|
17
16
|
const UrlTextField_1 = tslib_1.__importDefault(require("../../shared/UrlTextField"));
|
|
18
17
|
const constants_1 = require("./constants");
|
|
18
|
+
const react_core_1 = require("@selfcommunity/react-core");
|
|
19
19
|
const messages = (0, react_intl_1.defineMessages)({
|
|
20
20
|
virtualPlaceholder: {
|
|
21
21
|
id: 'ui.eventForm.address.online.placeholder',
|
|
@@ -48,11 +48,16 @@ function EventAddress(inProps) {
|
|
|
48
48
|
const [inputValue, setInputValue] = (0, react_1.useState)('');
|
|
49
49
|
const [suggestions, setSuggestions] = (0, react_1.useState)([]);
|
|
50
50
|
const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
|
|
51
|
-
//
|
|
52
|
-
const
|
|
53
|
-
|
|
51
|
+
// PREFERENCES
|
|
52
|
+
const { preferences } = (0, react_core_1.useSCPreferences)();
|
|
53
|
+
// MEMO
|
|
54
|
+
const geocodingApiKey = (0, react_1.useMemo)(() => {
|
|
55
|
+
return preferences && react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
|
|
56
|
+
? preferences[react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
|
|
57
|
+
: null;
|
|
58
|
+
}, [preferences]);
|
|
54
59
|
const { isLoaded } = (0, api_1.useLoadScript)({
|
|
55
|
-
googleMapsApiKey:
|
|
60
|
+
googleMapsApiKey: geocodingApiKey,
|
|
56
61
|
libraries: ['places', 'geocoding']
|
|
57
62
|
});
|
|
58
63
|
// HANDLERS
|
|
@@ -114,7 +119,7 @@ function EventAddress(inProps) {
|
|
|
114
119
|
if (!geocodingApiKey && !isLoaded) {
|
|
115
120
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
116
121
|
}
|
|
117
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
|
|
122
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
|
|
118
123
|
endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
|
|
119
124
|
}, onChange: handleLinkChange }))] }))] })));
|
|
120
125
|
}
|
|
@@ -15,6 +15,7 @@ const string_1 = require("../../utils/string");
|
|
|
15
15
|
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
|
|
16
16
|
const constants_1 = require("./constants");
|
|
17
17
|
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
|
|
18
|
+
const react_1 = require("react");
|
|
18
19
|
const classes = {
|
|
19
20
|
root: `${constants_1.PREFIX}-root`,
|
|
20
21
|
title: `${constants_1.PREFIX}-title`,
|
|
@@ -58,7 +59,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
|
|
|
58
59
|
* @param inProps
|
|
59
60
|
*/
|
|
60
61
|
function EventLocationWidget(inProps) {
|
|
61
|
-
var _a, _b, _c;
|
|
62
62
|
// PROPS
|
|
63
63
|
const props = (0, system_1.useThemeProps)({
|
|
64
64
|
props: inProps,
|
|
@@ -67,9 +67,16 @@ function EventLocationWidget(inProps) {
|
|
|
67
67
|
const { className, event, eventId } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId"]);
|
|
68
68
|
// STATE
|
|
69
69
|
const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
|
|
70
|
-
|
|
70
|
+
// PREFERENCES
|
|
71
|
+
const { preferences } = (0, react_core_1.useSCPreferences)();
|
|
72
|
+
// MEMO
|
|
73
|
+
const geocodingApiKey = (0, react_1.useMemo)(() => {
|
|
74
|
+
return preferences && react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
|
|
75
|
+
? preferences[react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
|
|
76
|
+
: null;
|
|
77
|
+
}, [preferences]);
|
|
71
78
|
const { isLoaded } = (0, api_1.useLoadScript)({
|
|
72
|
-
googleMapsApiKey:
|
|
79
|
+
googleMapsApiKey: geocodingApiKey,
|
|
73
80
|
libraries: ['maps']
|
|
74
81
|
});
|
|
75
82
|
const mapOptions = {
|
|
@@ -78,7 +85,7 @@ function EventLocationWidget(inProps) {
|
|
|
78
85
|
streetViewControl: false,
|
|
79
86
|
zoomControl: false // Disables the zoom control (+/- buttons)
|
|
80
87
|
};
|
|
81
|
-
if (!
|
|
88
|
+
if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.ONLINE) {
|
|
82
89
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
83
90
|
}
|
|
84
91
|
/**
|
|
@@ -215,7 +215,7 @@ function Events(inProps) {
|
|
|
215
215
|
const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot, { color: showMyEvents ? 'secondary' : 'default', variant: showMyEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents),
|
|
216
216
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
217
217
|
// @ts-ignore
|
|
218
|
-
showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick,
|
|
218
|
+
showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(LocationEventsFilter_1.default, { value: location, autoHide: !loading && !events.length, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
|
|
219
219
|
e.preventDefault();
|
|
220
220
|
if (e.key === 'Enter') {
|
|
221
221
|
fetchEvents(true);
|
|
@@ -225,7 +225,7 @@ function Events(inProps) {
|
|
|
225
225
|
} }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === types_1.SCEventDateFilterType.ANY), size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(LocationEventsFilter_1.default, { value: location, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot, { color: showFollowed ? 'secondary' : 'default', variant: showFollowed ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
|
|
226
226
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
227
227
|
// @ts-ignore
|
|
228
|
-
showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY || loading
|
|
228
|
+
showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY || loading }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) : null })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) : null })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.personal", defaultMessage: "ui.events.noEvents.title.personal" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [events.map((event) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
|
|
229
229
|
/**
|
|
230
230
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
231
231
|
*/
|
|
@@ -5,7 +5,6 @@ import Icon from '@mui/material/Icon';
|
|
|
5
5
|
import { styled } from '@mui/material/styles';
|
|
6
6
|
import { useThemeProps } from '@mui/system';
|
|
7
7
|
import { useLoadScript } from '@react-google-maps/api';
|
|
8
|
-
import { useSCContext } from '@selfcommunity/react-core';
|
|
9
8
|
import { SCEventLocationType } from '@selfcommunity/types';
|
|
10
9
|
import axios from 'axios';
|
|
11
10
|
import classNames from 'classnames';
|
|
@@ -14,6 +13,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
14
13
|
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
15
14
|
import UrlTextField from '../../shared/UrlTextField';
|
|
16
15
|
import { PREFIX } from './constants';
|
|
16
|
+
import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
|
|
17
17
|
const messages = defineMessages({
|
|
18
18
|
virtualPlaceholder: {
|
|
19
19
|
id: 'ui.eventForm.address.online.placeholder',
|
|
@@ -46,11 +46,16 @@ export default function EventAddress(inProps) {
|
|
|
46
46
|
const [inputValue, setInputValue] = useState('');
|
|
47
47
|
const [suggestions, setSuggestions] = useState([]);
|
|
48
48
|
const [timeoutId, setTimeoutId] = useState(null);
|
|
49
|
-
//
|
|
50
|
-
const
|
|
51
|
-
|
|
49
|
+
// PREFERENCES
|
|
50
|
+
const { preferences } = useSCPreferences();
|
|
51
|
+
// MEMO
|
|
52
|
+
const geocodingApiKey = useMemo(() => {
|
|
53
|
+
return preferences && SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
|
|
54
|
+
? preferences[SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
|
|
55
|
+
: null;
|
|
56
|
+
}, [preferences]);
|
|
52
57
|
const { isLoaded } = useLoadScript({
|
|
53
|
-
googleMapsApiKey:
|
|
58
|
+
googleMapsApiKey: geocodingApiKey,
|
|
54
59
|
libraries: ['places', 'geocoding']
|
|
55
60
|
});
|
|
56
61
|
// HANDLERS
|
|
@@ -112,7 +117,7 @@ export default function EventAddress(inProps) {
|
|
|
112
117
|
if (!geocodingApiKey && !isLoaded) {
|
|
113
118
|
return _jsx(HiddenPlaceholder, {});
|
|
114
119
|
}
|
|
115
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
|
|
120
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
|
|
116
121
|
endAdornment: _jsx(Icon, { children: "play_circle_outline" })
|
|
117
122
|
}, onChange: handleLinkChange }))] }))] })));
|
|
118
123
|
}
|
|
@@ -4,7 +4,7 @@ import { Box, CardContent, Typography } from '@mui/material';
|
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import { GoogleMap, MarkerF, useLoadScript } from '@react-google-maps/api';
|
|
7
|
-
import {
|
|
7
|
+
import { SCPreferences, useSCFetchEvent, useSCPreferences } from '@selfcommunity/react-core';
|
|
8
8
|
import { SCEventLocationType } from '@selfcommunity/types';
|
|
9
9
|
import classNames from 'classnames';
|
|
10
10
|
import { FormattedMessage } from 'react-intl';
|
|
@@ -13,6 +13,7 @@ import { formatEventLocationGeolocation } from '../../utils/string';
|
|
|
13
13
|
import Widget from '../Widget';
|
|
14
14
|
import { PREFIX } from './constants';
|
|
15
15
|
import EventLocationWidgetSkeleton from './Skeleton';
|
|
16
|
+
import { useMemo } from 'react';
|
|
16
17
|
const classes = {
|
|
17
18
|
root: `${PREFIX}-root`,
|
|
18
19
|
title: `${PREFIX}-title`,
|
|
@@ -56,7 +57,6 @@ const Root = styled(Widget, {
|
|
|
56
57
|
* @param inProps
|
|
57
58
|
*/
|
|
58
59
|
export default function EventLocationWidget(inProps) {
|
|
59
|
-
var _a, _b, _c;
|
|
60
60
|
// PROPS
|
|
61
61
|
const props = useThemeProps({
|
|
62
62
|
props: inProps,
|
|
@@ -65,9 +65,16 @@ export default function EventLocationWidget(inProps) {
|
|
|
65
65
|
const { className, event, eventId } = props, rest = __rest(props, ["className", "event", "eventId"]);
|
|
66
66
|
// STATE
|
|
67
67
|
const { scEvent } = useSCFetchEvent({ id: eventId, event });
|
|
68
|
-
|
|
68
|
+
// PREFERENCES
|
|
69
|
+
const { preferences } = useSCPreferences();
|
|
70
|
+
// MEMO
|
|
71
|
+
const geocodingApiKey = useMemo(() => {
|
|
72
|
+
return preferences && SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
|
|
73
|
+
? preferences[SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
|
|
74
|
+
: null;
|
|
75
|
+
}, [preferences]);
|
|
69
76
|
const { isLoaded } = useLoadScript({
|
|
70
|
-
googleMapsApiKey:
|
|
77
|
+
googleMapsApiKey: geocodingApiKey,
|
|
71
78
|
libraries: ['maps']
|
|
72
79
|
});
|
|
73
80
|
const mapOptions = {
|
|
@@ -76,7 +83,7 @@ export default function EventLocationWidget(inProps) {
|
|
|
76
83
|
streetViewControl: false,
|
|
77
84
|
zoomControl: false // Disables the zoom control (+/- buttons)
|
|
78
85
|
};
|
|
79
|
-
if (!
|
|
86
|
+
if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.ONLINE) {
|
|
80
87
|
return _jsx(HiddenPlaceholder, {});
|
|
81
88
|
}
|
|
82
89
|
/**
|
|
@@ -212,7 +212,7 @@ export default function Events(inProps) {
|
|
|
212
212
|
const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot, { color: showMyEvents ? 'secondary' : 'default', variant: showMyEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents),
|
|
213
213
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
214
214
|
// @ts-ignore
|
|
215
|
-
showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick,
|
|
215
|
+
showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(LocationEventsFilter, { value: location, autoHide: !loading && !events.length, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
|
|
216
216
|
e.preventDefault();
|
|
217
217
|
if (e.key === 'Enter') {
|
|
218
218
|
fetchEvents(true);
|
|
@@ -222,7 +222,7 @@ export default function Events(inProps) {
|
|
|
222
222
|
} }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === SCEventDateFilterType.ANY), size: 'small', label: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(LocationEventsFilter, { value: location, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot, { color: showFollowed ? 'secondary' : 'default', variant: showFollowed ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick,
|
|
223
223
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
224
224
|
// @ts-ignore
|
|
225
|
-
showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY || loading
|
|
225
|
+
showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY || loading }) }))] })) }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: general ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? _jsx(CreateEventButton, {}) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? _jsx(CreateEventButton, {}) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.personal", defaultMessage: "ui.events.noEvents.title.personal" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
|
|
226
226
|
/**
|
|
227
227
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
228
228
|
*/
|