@selfcommunity/react-ui 0.10.2-alpha.9 → 0.10.2

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js

@@ -1,17 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, ListItem, Typography, Zoom } from '@mui/material';
-import { Link, SCRoutes, useSCFetchCategories, useSCRouting } from '@selfcommunity/react-core';
-import { useEffect, useState } from 'react';
+import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom } from '@mui/material';
+import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { useEffect, useMemo, useState } from 'react';
 import Category from '../Category';
 import { FormattedMessage } from 'react-intl';
 import { sortByAttr } from '@selfcommunity/utils';
+import { SCFeatureName } from '@selfcommunity/types';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCDefaultDrawerContent';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-root`,
+    navigation: `${PREFIX}-navigation`,
+    noResults: `${PREFIX}-no-results`,
+    title: `${PREFIX}-title`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -29,8 +33,26 @@ export default function DefaultDrawerContent(inProps) {
     const [categoriesOrdered, setCategoriesOrdered] = useState([]);
     // ROUTING
     const scRoutingContext = useSCRouting();
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // PREFERENCES
+    const { preferences, features } = useSCPreferences();
     //STATE
     const [isHovered, setIsHovered] = useState({});
+    // MEMO
+    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 contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // HANDLERS
     const handleMouseEnter = (index) => {
         setIsHovered((prevState) => {
@@ -53,5 +75,5 @@ export default function DefaultDrawerContent(inProps) {
         onTouchMove: mouseLeave
     });
     //order
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle1" }, { children: [_jsx("span", { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) }), ' ', _jsx(Button, Object.assign({ variant: "text", component: Link, color: "secondary", to: scRoutingContext.url(SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }) }))] })), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) })), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
 }

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -144,7 +144,7 @@ export default function NavigationToolbar(inProps) {
                         value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
                 }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
-                }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
+                }), "aria-label": "Events", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
     return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
                                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
                                 }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), _jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {

package/lib/esm/components/Notification/Comment/Comment.js

@@ -65,10 +65,10 @@ export default function CommentNotification(props) {
                 }), { onClick: notificationObject.comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.comment.author.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.comment.author.username, variant: "circular", src: notificationObject.comment.author.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.comment.author.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.comment.author)
                         }), { onClick: notificationObject.comment.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.comment.author.username })), ' ', notificationObject.type === SCNotificationTypologyType.NESTED_COMMENT
-                            ? intl.formatMessage(messages.comment, {
+                            ? intl.formatMessage(messages.nestedComment, {
                                 b: (...chunks) => _jsx("strong", { children: chunks })
                             })
-                            : intl.formatMessage(messages.nestedComment, {
+                            : intl.formatMessage(messages.comment, {
                                 b: (...chunks) => _jsx("strong", { children: chunks })
                             })] }), secondary: _jsxs(React.Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(notificationObject.comment)) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText }, { children: getContributionSnippet(notificationObject.comment) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Bullet, { className: classes.bullet }), _jsx(VoteButton, { className: classes.voteButton, variant: "text", size: "small", contributionId: notificationObject.comment.id, contributionType: SCContributionType.COMMENT, contribution: notificationObject.comment, onVote: handleVote })] })))] }), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(notificationObject.comment)) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/Notification.js

@@ -224,7 +224,7 @@ export default function UserNotification(inProps) {
                 notificationObject.aggregated[0].type === SCNotificationTypologyType.VOTE_UP ||
                 notificationObject.aggregated[0].type === SCNotificationTypologyType.CONTRIBUTION)) {
             const contribution = getContribution(notificationObject);
-            return (_jsx(CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(LoadingButton, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications" })) })) }))) }));
+            return (_jsx(CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(LoadingButton, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
         }
         return null;
     }

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -175,12 +175,9 @@ export default function PrivateMessageThread(inProps) {
      * Memoized message recipients ids
      */
     const ids = useMemo(() => {
-        if (recipients && openNewMessage) {
-            return recipients.map((u) => {
-                return parseInt(u.id, 10);
-            });
-        }
-        return [parseInt(recipients === null || recipients === void 0 ? void 0 : recipients.id, 10) || recipients];
+        if (!recipients)
+            return [];
+        return Array.isArray(recipients) ? recipients.map((u) => parseInt(u.id, 10)) : [parseInt(recipients.id || recipients, 10)];
     }, [recipients, openNewMessage]);
     function fetchResults() {
         setLoading(true);

package/lib/esm/utils/contribution.d.ts

@@ -21,6 +21,13 @@ export declare function getContributionSnippet(obj: any): any;
  * @param handleUrl Func that handle urls
  */
 export declare function getContributionHtml(html: any, handleUrl: any): any;
+/**
+ * Get the contribution text for comment object
+ * Hydrate text with mention, etc.
+ * @param html Html of the contribution
+ * @param handleUrl Func that handle urls
+ */
+export declare function getCommentContributionHtml(html: any, handleUrl: any): any;
 /**
  * Get route name for a contribution
  * @param obj

package/lib/esm/utils/contribution.js

@@ -56,6 +56,17 @@ export function getContributionHtml(html, handleUrl) {
         return `<a href='${handleUrl(SCRoutes.USER_PROFILE_ROUTE_NAME, { id, username })}'>@${username}</a>`;
     });
 }
+/**
+ * Get the contribution text for comment object
+ * Hydrate text with mention, etc.
+ * @param html Html of the contribution
+ * @param handleUrl Func that handle urls
+ */
+export function getCommentContributionHtml(html, handleUrl) {
+    return html.replace(/<mention.*? id="([0-9]+)"{1}.*?>@([a-z\d_-]+)<\/mention>/gi, (match, id, username) => {
+        return `<a href='${handleUrl(SCRoutes.USER_PROFILE_ROUTE_NAME, { id, username })}'>@${username}</a>`;
+    });
+}
 /**
  * Get route name for a contribution
  * @param obj