@selfcommunity/react-ui 0.8.0-alpha.9 → 0.8.0-embeds.17

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -78,8 +78,17 @@ export default function NavigationToolbarMobile(inProps) {
     // STATE
     const [searchOpen, setSearchOpen] = useState(false);
     // MEMO
-    const groupsEnabled = useMemo(() => features && 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/Notification/Event/Event.js

@@ -51,6 +51,8 @@ export default function EventNotification(props) {
             }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                     }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
                             icon: (...chunks) => _jsx(Icon, { children: chunks }),
                             event: notificationObject.event.name,
                             link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
@@ -69,6 +71,8 @@ export default function EventNotification(props) {
                 }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                         }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
                                 icon: (...chunks) => _jsx(Icon, { children: chunks }),
                                 event: notificationObject.event.name,
                                 link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts

@@ -18,6 +18,11 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
      * @default null
      */
     onGeneratedContent?: (feedObjs: SCFeedObjectType[]) => void;
+    /**
+     * Force widget expanded
+     * @default false
+     */
+    forceExpanded?: boolean;
 }
 declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
 export default OnBoardingWidget;

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js

@@ -51,7 +51,7 @@ const OnBoardingWidget = (inProps) => {
         props: inProps,
         name: PREFIX
     });
-    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
+    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded"]);
     // STATE
     const [loading, setLoading] = useState(true);
     const [initialized, setInitialized] = useState(false);
@@ -63,7 +63,7 @@ const OnBoardingWidget = (inProps) => {
     const allStepsDone = useMemo(() => {
         return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === SCOnBoardingStepStatusType.COMPLETED);
     }, [steps]);
-    const [expanded, setExpanded] = useState(!allStepsDone);
+    const [expanded, setExpanded] = useState(!allStepsDone || forceExpanded);
     const [_step, setStep] = useState(nextStep);
     const currentContentsStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CONTENTS);
     const prevContentsStep = usePreviousValue(currentContentsStep);
@@ -84,6 +84,15 @@ const OnBoardingWidget = (inProps) => {
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const { categories, isLoading } = useSCFetchCategories();
     // HANDLERS
+    /**
+     * Notify changes to Feed if the Widget is contained
+     */
+    const notifyLayoutChanges = useMemo(() => (state) => {
+        if (onStateChange && state) {
+            onStateChange(state);
+        }
+        onHeightChange && onHeightChange();
+    }, [onStateChange, onHeightChange]);
     const completeStep = (s) => __awaiter(void 0, void 0, void 0, function* () {
         if (s.status !== SCOnBoardingStepStatusType.COMPLETED) {
             yield OnBoardingService.completeAStep(s.id)
@@ -129,8 +138,9 @@ const OnBoardingWidget = (inProps) => {
         setStep(newStep);
     };
     const handleExpand = () => {
-        setExpanded(!expanded);
-        onHeightChange && onHeightChange();
+        const _expanded = !expanded;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     };
     const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!isLoading && !categories.length) {
@@ -176,11 +186,13 @@ const OnBoardingWidget = (inProps) => {
         if (!initialized && nextStep) {
             setStep(nextStep);
             setInitialized(true);
+            notifyLayoutChanges({ forceExpanded: expanded });
         }
     }, [initialized, nextStep]);
     useEffect(() => {
-        setExpanded(!allStepsDone);
-        onHeightChange && onHeightChange();
+        const _expanded = !allStepsDone;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     }, [allStepsDone]);
     useEffect(() => {
         if (isAdmin) {

package/lib/esm/components/UserSubscribedGroupsWidget/UserSubscribedGroupsWidget.js

@@ -6,7 +6,7 @@ import List from '@mui/material/List';
 import { Button, CardContent, ListItem, Typography } from '@mui/material';
 import { GroupService } from '@selfcommunity/api-services';
 import { CacheStrategies, isInteger, Logger } from '@selfcommunity/utils';
-import { SCCache, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCCache, SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import { SCFeatureName, SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -71,8 +71,13 @@ export default function UserSubscribedGroupsWidget(inProps) {
     // CONTEXT
     const scUserContext = useSCUser();
     const isMe = useMemo(() => scUserContext.user && userId === scUserContext.user.id, [scUserContext.user, userId]);
-    const { features } = useSCPreferences();
-    const groupsEnabled = useMemo(() => features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
+    const { preferences, features } = useSCPreferences();
+    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]);
     // STATE
     const [state, dispatch] = useReducer(dataWidgetReducer, {
         isLoadingNext: false,

package/lib/esm/shared/ContributionActionsMenu/index.js

@@ -75,7 +75,6 @@ const messages = defineMessages({
     }
 });
 export default function ContributionActionsMenu(props) {
-    var _a, _b, _c;
     // PROPS
     const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
     // INTL
@@ -622,9 +621,9 @@ export default function ContributionActionsMenu(props) {
         return name;
     }
     /**
-       * action
-       * @param sectionId
-       */
+     * action
+     * @param sectionId
+     */
     function handleOpenSection(sectionId) {
         if (sectionId) {
             if (sectionId === openSection) {
@@ -703,7 +702,8 @@ export default function ContributionActionsMenu(props) {
             scUserContext.user.id !== contributionObj.author.id &&
             contributionObj &&
             contributionObj.type !== SCContributionType.COMMENT &&
-            Boolean(contributionObj.event));
+            Boolean(contributionObj.event) &&
+            Boolean(contributionObj.event.active));
     }
     /**
      * Renders section general
@@ -726,7 +726,7 @@ export default function ContributionActionsMenu(props) {
             , Object.assign({ 
                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                 // @ts-ignore
-                disabled: contributionObj && ((_a = contributionObj === null || contributionObj === void 0 ? void 0 : contributionObj.medias) === null || _a === void 0 ? void 0 : _a.length) && !((_c = (_b = contributionObj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active), ref: (ref) => {
+                ref: (ref) => {
                     popperRef.current = ref;
                 }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? (_jsxs("span", Object.assign({ className: classes.visibilityIcons }, { children: [contributionObj.collapsed ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "delete" }), _jsx(Icon, { children: "expand_more" })] }))) : (_jsx(Icon, { children: "more_vert" })) })), isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))), openConfirmDialog && (_jsx(ConfirmDialog, Object.assign({ open: openConfirmDialog }, (currentAction === DELETE_CONTRIBUTION
                 ? {

package/lib/esm/shared/InfiniteScroll/index.js

@@ -223,7 +223,7 @@ class InfiniteScroll extends Component {
         // because heighted infiniteScroll visualy breaks
         // on drag down as overflow becomes visible
         const outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: 'auto' } : {};
-        return (_jsx("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: _jsxs("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && (_jsx("div", Object.assign({ style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: _jsx("div", Object.assign({ style: {
+        return (_jsx("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: _jsxs("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && (_jsx("div", Object.assign({ style: { position: 'relative', marginBottom: 16 }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: _jsx("div", Object.assign({ style: {
                                 position: 'absolute',
                                 left: 0,
                                 right: 0,

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

@@ -51,7 +51,7 @@ export default (props) => {
             return renderHtml(media, key);
         }
         const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
-        return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
+        return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] })));
     };
     /**
      * Render html embed
@@ -59,7 +59,7 @@ export default (props) => {
      * @param key
      */
     const renderHtml = (media, key) => {
-        return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
+        return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] })));
     };
     /**
      * Renders component

package/lib/esm/utils/formatRelativeTime.js

@@ -2,8 +2,8 @@ export 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);