npm - @selfcommunity/react-ui - Versions diffs - 0.10.1-alpha.0 → 0.10.1-alpha.2 - Mend

@selfcommunity/react-ui 0.10.1-alpha.0 → 0.10.1-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/lib/cjs/components/EventForm/EventAddress.js CHANGED Viewed

@@ -7,7 +7,6 @@ const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const api_1 = require("@react-google-maps/api");
-const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const axios_1 = tslib_1.__importDefault(require("axios"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -16,6 +15,7 @@ const react_intl_1 = require("react-intl");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const UrlTextField_1 = tslib_1.__importDefault(require("../../shared/UrlTextField"));
 const constants_1 = require("./constants");
+const react_core_1 = require("@selfcommunity/react-core");
 const messages = (0, react_intl_1.defineMessages)({
     virtualPlaceholder: {
         id: 'ui.eventForm.address.online.placeholder',
@@ -48,11 +48,16 @@ function EventAddress(inProps) {
     const [inputValue, setInputValue] = (0, react_1.useState)('');
     const [suggestions, setSuggestions] = (0, react_1.useState)([]);
     const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
-    // CONTEXT
-    const scContext = (0, react_core_1.useSCContext)();
-    const geocodingApiKey = (0, react_1.useMemo)(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
+    // PREFERENCES
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    // MEMO
+    const geocodingApiKey = (0, react_1.useMemo)(() => {
+        return preferences && react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
+            ? preferences[react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
+            : null;
+    }, [preferences]);
     const { isLoaded } = (0, api_1.useLoadScript)({
-        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        googleMapsApiKey: geocodingApiKey,
         libraries: ['places', 'geocoding']
     });
     // HANDLERS
@@ -114,7 +119,7 @@ function EventAddress(inProps) {
     if (!geocodingApiKey && !isLoaded) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    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: {
+    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: {
                             endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
                         }, onChange: handleLinkChange }))] }))] })));
 }

package/lib/cjs/components/EventLocationWidget/EventLocationWidget.js CHANGED Viewed

@@ -15,6 +15,7 @@ const string_1 = require("../../utils/string");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const react_1 = require("react");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -58,7 +59,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  * @param inProps
  */
 function EventLocationWidget(inProps) {
-    var _a, _b, _c;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -67,9 +67,16 @@ function EventLocationWidget(inProps) {
     const { className, event, eventId } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId"]);
     // STATE
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
-    const scContext = (0, react_core_1.useSCContext)();
+    // PREFERENCES
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    // MEMO
+    const geocodingApiKey = (0, react_1.useMemo)(() => {
+        return preferences && react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
+            ? preferences[react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
+            : null;
+    }, [preferences]);
     const { isLoaded } = (0, api_1.useLoadScript)({
-        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        googleMapsApiKey: geocodingApiKey,
         libraries: ['maps']
     });
     const mapOptions = {
@@ -78,7 +85,7 @@ function EventLocationWidget(inProps) {
         streetViewControl: false,
         zoomControl: false // Disables the zoom control (+/- buttons)
     };
-    if (!((_c = (_b = (_a = scContext === null || scContext === void 0 ? void 0 : scContext.settings) === null || _a === void 0 ? void 0 : _a.integrations) === null || _b === void 0 ? void 0 : _b.geocoding) === null || _c === void 0 ? void 0 : _c.apiKey) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.ONLINE) {
+    if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.ONLINE) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     /**

package/lib/cjs/components/FeedObject/Actions/Share/Share.js CHANGED Viewed

@@ -116,7 +116,7 @@ function Share(props) {
         if (shareMedias.length) {
             sharedObjectId = shareMedias[0].embed.metadata.id;
         }
-        const isMediaEvent = obj.medias.some((media) => media.embed.embed_type === Media_1.MEDIA_EMBED_SC_SHARED_EVENT);
+        const isMediaEvent = obj.medias.some((media) => { var _a; return ((_a = media.embed) === null || _a === void 0 ? void 0 : _a.embed_type) === Media_1.MEDIA_EMBED_SC_SHARED_EVENT; });
         return api_services_1.http
             .request({
             url: api_services_1.Endpoints.ComposerMediaCreate.url(),

package/lib/esm/components/EventForm/EventAddress.js CHANGED Viewed

@@ -5,7 +5,6 @@ import Icon from '@mui/material/Icon';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { useLoadScript } from '@react-google-maps/api';
-import { useSCContext } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import axios from 'axios';
 import classNames from 'classnames';
@@ -14,6 +13,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import UrlTextField from '../../shared/UrlTextField';
 import { PREFIX } from './constants';
+import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 const messages = defineMessages({
     virtualPlaceholder: {
         id: 'ui.eventForm.address.online.placeholder',
@@ -46,11 +46,16 @@ export default function EventAddress(inProps) {
     const [inputValue, setInputValue] = useState('');
     const [suggestions, setSuggestions] = useState([]);
     const [timeoutId, setTimeoutId] = useState(null);
-    // CONTEXT
-    const scContext = useSCContext();
-    const geocodingApiKey = useMemo(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
+    // PREFERENCES
+    const { preferences } = useSCPreferences();
+    // MEMO
+    const geocodingApiKey = useMemo(() => {
+        return preferences && SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
+            ? preferences[SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
+            : null;
+    }, [preferences]);
     const { isLoaded } = useLoadScript({
-        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        googleMapsApiKey: geocodingApiKey,
         libraries: ['places', 'geocoding']
     });
     // HANDLERS
@@ -112,7 +117,7 @@ export default function EventAddress(inProps) {
     if (!geocodingApiKey && !isLoaded) {
         return _jsx(HiddenPlaceholder, {});
     }
-    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: {
+    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: {
                             endAdornment: _jsx(Icon, { children: "play_circle_outline" })
                         }, onChange: handleLinkChange }))] }))] })));
 }

package/lib/esm/components/EventLocationWidget/EventLocationWidget.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { Box, CardContent, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { GoogleMap, MarkerF, useLoadScript } from '@react-google-maps/api';
-import { useSCContext, useSCFetchEvent } from '@selfcommunity/react-core';
+import { SCPreferences, useSCFetchEvent, useSCPreferences } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
@@ -13,6 +13,7 @@ import { formatEventLocationGeolocation } from '../../utils/string';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import EventLocationWidgetSkeleton from './Skeleton';
+import { useMemo } from 'react';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -56,7 +57,6 @@ const Root = styled(Widget, {
  * @param inProps
  */
 export default function EventLocationWidget(inProps) {
-    var _a, _b, _c;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -65,9 +65,16 @@ export default function EventLocationWidget(inProps) {
     const { className, event, eventId } = props, rest = __rest(props, ["className", "event", "eventId"]);
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
-    const scContext = useSCContext();
+    // PREFERENCES
+    const { preferences } = useSCPreferences();
+    // MEMO
+    const geocodingApiKey = useMemo(() => {
+        return preferences && SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
+            ? preferences[SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
+            : null;
+    }, [preferences]);
     const { isLoaded } = useLoadScript({
-        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        googleMapsApiKey: geocodingApiKey,
         libraries: ['maps']
     });
     const mapOptions = {
@@ -76,7 +83,7 @@ export default function EventLocationWidget(inProps) {
         streetViewControl: false,
         zoomControl: false // Disables the zoom control (+/- buttons)
     };
-    if (!((_c = (_b = (_a = scContext === null || scContext === void 0 ? void 0 : scContext.settings) === null || _a === void 0 ? void 0 : _a.integrations) === null || _b === void 0 ? void 0 : _b.geocoding) === null || _c === void 0 ? void 0 : _c.apiKey) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.ONLINE) {
+    if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.ONLINE) {
         return _jsx(HiddenPlaceholder, {});
     }
     /**

package/lib/esm/components/FeedObject/Actions/Share/Share.js CHANGED Viewed

@@ -114,7 +114,7 @@ export default function Share(props) {
         if (shareMedias.length) {
             sharedObjectId = shareMedias[0].embed.metadata.id;
         }
-        const isMediaEvent = obj.medias.some((media) => media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT);
+        const isMediaEvent = obj.medias.some((media) => { var _a; return ((_a = media.embed) === null || _a === void 0 ? void 0 : _a.embed_type) === MEDIA_EMBED_SC_SHARED_EVENT; });
         return http
             .request({
             url: Endpoints.ComposerMediaCreate.url(),