@selfcommunity/react-ui 0.8.0-alpha.2 → 0.8.0-alpha.20

package/lib/cjs/shared/Media/Link/DisplayComponent.js

@@ -12,10 +12,15 @@ const LazyLoad_1 = require("../../../constants/LazyLoad");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("./constants");
+const material_1 = require("@mui/material");
 const filter_1 = tslib_1.__importDefault(require("./filter"));
 const classes = {
     displayRoot: `${constants_1.PREFIX}-display-root`,
     displayLink: `${constants_1.PREFIX}-link`,
+    displayHtmlWrap: `${constants_1.PREFIX}-html-wrap`,
+    displayHtml: `${constants_1.PREFIX}-html`,
+    displayHtmlPlaceholder: `${constants_1.PREFIX}-html-placeholder`,
+    displayHtmlLoading: `${constants_1.PREFIX}-html-loading`,
     displayVideo: `${constants_1.PREFIX}-video`,
     thumbnail: `${constants_1.PREFIX}-thumbnail`,
     thumbnailFullWidth: `${constants_1.PREFIX}-thumbnail`,
@@ -40,12 +45,23 @@ exports.default = (props) => {
     // RENDER
     /**
      * Renders link display
-     * @param (link)
-     * @param(key)
+     * @param media
+     * @param key
      */
-    const renderPreview = (link, key) => {
-        const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [link.embed.metadata.images && link.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(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${link.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: link.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: link.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
+    const renderPreview = (media, key) => {
+        // if (media.embed.metadata.html) {
+        // 	return renderHtml(media, key);
+        // }
+        const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
+        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));
+    };
+    /**
+     * Render html embed
+     * @param media
+     * @param key
+     */
+    const renderHtml = (media, key) => {
+        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));
     };
     /**
      * Renders component

package/lib/cjs/utils/formatRelativeTime.js

@@ -5,8 +5,8 @@ const getRelativeTime = (date) => {
     const diffInMilliseconds = new Date().getTime() - new Date(date).getTime();
     const seconds = Math.floor(diffInMilliseconds / 1000);
     const minutes = Math.floor(seconds / 60);
-    const hours = Math.ceil(minutes / 60);
-    const days = Math.floor(hours / 24);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.round(hours / 24);
     const weeks = Math.floor(days / 7);
     const months = Math.floor(days / 30);
     const years = Math.floor(months / 12);

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -61,8 +61,17 @@ export default function BottomNavigation(inProps) {
     const { preferences, features } = useSCPreferences();
     // MEMO
     const privateMessagingEnabled = useMemo(() => features.includes(SCFeatureName.PRIVATE_MESSAGING), [features]);
-    const groupsEnabled = useMemo(() => features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
-    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const groupsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        features.includes(SCFeatureName.GROUPING) &&
+        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
     const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;

package/lib/esm/components/Composer/Composer.js

@@ -428,10 +428,16 @@ export default function Composer(inProps) {
         if (features.includes(SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
-        if (features.includes(SCFeatureName.GROUPING) && group !== null) {
+        if (features.includes(SCFeatureName.TAGGING) &&
+            features.includes(SCFeatureName.GROUPING) &&
+            preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value &&
+            group !== null) {
             data.group = group.id;
         }
-        if (features.includes(SCFeatureName.EVENT) && event !== null) {
+        if (features.includes(SCFeatureName.TAGGING) &&
+            features.includes(SCFeatureName.EVENT) &&
+            preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value &&
+            event !== null) {
             data.event = event.id;
         }
         setIsSubmitting(true);
@@ -495,6 +501,8 @@ export default function Composer(inProps) {
         }
         else {
             onClose && onClose(e);
+            setLayer(null);
+            dispatch({ type: 'reset' });
             /*setLayer(null);
             feedType && feedType === SCFeedTypologyType.CATEGORY
               ? dispatch({type: 'resetCategoryFeed'})

package/lib/esm/components/Composer/Layer/AudienceLayer/AudienceLayer.js

@@ -11,7 +11,7 @@ import TagChip from '../../../../shared/TagChip';
 import classNames from 'classnames';
 import Icon from '@mui/material/Icon';
 import DialogContent from '@mui/material/DialogContent';
-import { useSCFetchAddressingTagList, useSCPreferences } from '@selfcommunity/react-core';
+import { SCPreferences, useSCFetchAddressingTagList, useSCPreferences } from '@selfcommunity/react-core';
 import { PREFIX } from '../../constants';
 import GroupAutocomplete from '../../../GroupAutocomplete';
 import { SCFeatureName } from '@selfcommunity/types';
@@ -57,10 +57,19 @@ const AudienceLayer = React.forwardRef((props, ref) => {
     const [value, setValue] = useState(defaultValue || undefined);
     // HOOKS
     const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: autocompleteOpen });
-    const { features } = useSCPreferences();
+    const { preferences, features } = useSCPreferences();
     // MEMO
-    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
-    const groupsEnabled = useMemo(() => features && features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
+    const groupsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        features.includes(SCFeatureName.GROUPING) &&
+        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     // HANDLERS
     const handleSave = useCallback(() => {
         audience === AudienceTypes.AUDIENCE_GROUP || audience === AudienceTypes.AUDIENCE_EVENT

package/lib/esm/components/CreateEventButton/CreateEventButton.js

@@ -52,7 +52,11 @@ export default function CreateEventButton(inProps) {
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const { preferences, features } = useSCPreferences();
-    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore

package/lib/esm/components/CreateEventWidget/CreateEventWidget.js

@@ -38,7 +38,11 @@ export default function CreateEventWidget(inProps) {
     const scUserContext = useContext(SCUserContext);
     // HOOK
     const { preferences, features } = useSCPreferences();
-    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences]);
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/esm/components/EventForm/EventAddress.d.ts

@@ -1,13 +1,8 @@
-import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
+import { SCEventType } from '@selfcommunity/types';
+import { Geolocation } from './types';
 export interface EventAddressProps {
     event?: SCEventType;
-    forwardGeolocationData: (data: {
-        location: SCEventLocationType;
-        geolocation?: string;
-        lat?: number;
-        lng?: number;
-        link?: string;
-    }) => void;
+    forwardGeolocationData: (data: Geolocation) => void;
     className?: string;
 }
 export default function EventAddress(inProps: EventAddressProps): JSX.Element;

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

@@ -1,19 +1,19 @@
 import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Autocomplete, Box, InputAdornment, Tab, Tabs, TextField } from '@mui/material';
 import Icon from '@mui/material/Icon';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { PREFIX } from './constants';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import UrlTextField from '../../shared/UrlTextField';
-import axios from 'axios';
+import { useLoadScript } from '@react-google-maps/api';
 import { useSCContext } from '@selfcommunity/react-core';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { SCEventLocationType } from '@selfcommunity/types';
-import { useLoadScript } from '@react-google-maps/api';
+import axios from 'axios';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import UrlTextField from '../../shared/UrlTextField';
+import { PREFIX } from './constants';
 const messages = defineMessages({
     virtualPlaceholder: {
         id: 'ui.eventForm.address.online.placeholder',
@@ -41,8 +41,8 @@ export default function EventAddress(inProps) {
     // PROPS
     const { className, forwardGeolocationData, event } = props;
     // STATE
-    const [location, setLocation] = useState(event ? event.location : SCEventLocationType.PERSON);
-    const [geolocation, setGeoLocation] = useState(event ? event.geolocation : null);
+    const [location, setLocation] = useState((event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON);
+    const [geolocation, setGeoLocation] = useState(event ? { description: event.geolocation } : null);
     const [inputValue, setInputValue] = useState('');
     const [suggestions, setSuggestions] = useState([]);
     const [timeoutId, setTimeoutId] = useState(null);
@@ -54,22 +54,22 @@ export default function EventAddress(inProps) {
         libraries: ['places', 'geocoding']
     });
     // HANDLERS
-    const handleChange = (event, newValue) => {
+    const handleChange = (_event, newValue) => {
         setLocation(newValue);
     };
-    const handleSelection = (event, newValue) => __awaiter(this, void 0, void 0, function* () {
+    const handleSelection = (_event, newValue) => __awaiter(this, void 0, void 0, function* () {
         if (newValue) {
             try {
                 const response = yield axios.get(`https://maps.googleapis.com/maps/api/geocode/json`, {
                     params: {
-                        place_id: newValue.place_id,
+                        place_id: newValue.id,
                         key: geocodingApiKey
                     }
                 });
                 const place = response.data.results[0];
                 setGeoLocation(newValue);
                 forwardGeolocationData({
-                    location: location,
+                    location,
                     geolocation: place.formatted_address,
                     lat: place.geometry.location.lat,
                     lng: place.geometry.location.lng
@@ -80,11 +80,11 @@ export default function EventAddress(inProps) {
             }
         }
     });
-    const handleLocationChange = (event, newInputValue) => {
+    const handleLocationChange = (_event, newInputValue) => {
         setInputValue(newInputValue);
     };
     const handleLinkChange = (event) => {
-        forwardGeolocationData({ location: location, link: event.target.value });
+        forwardGeolocationData({ location, link: event.target.value });
     };
     useEffect(() => {
         if (timeoutId) {
@@ -95,13 +95,13 @@ export default function EventAddress(inProps) {
             return;
         }
         if (inputValue.length >= 3) {
-            const newTimeoutId = window.setTimeout(() => {
+            const newTimeoutId = setTimeout(() => {
                 const autocompleteService = new window.google.maps.places.AutocompleteService();
                 autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
                     if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
                         setSuggestions(predictions.map((prediction) => ({
                             description: prediction.description,
-                            place_id: prediction.place_id
+                            id: prediction.place_id
                         })));
                     }
                 });
@@ -112,7 +112,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, { freeSolo: true, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), 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, { 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/EventForm/EventForm.d.ts

@@ -25,7 +25,7 @@ export interface EventFormProps extends BaseDialogProps {
      * On success callback function
      * @default null
      */
-    onSuccess?: (data: any) => void;
+    onSuccess?: (data: SCEventType) => void;
     /**
      * Any other properties
      */