@selfcommunity/react-ui 0.7.0-alpha.317 → 0.7.0-alpha.318

package/lib/cjs/components/FeedObject/FeedObject.d.ts

@@ -59,6 +59,11 @@ export interface FeedObjectProps extends CardProps, VirtualScrollerItemProps {
      * @default false
      */
     hideFollowAction?: boolean;
+    /**
+     * Show all summary initially (otherwise it will be truncated)
+     * @default false
+     */
+    summaryExpanded?: boolean;
     /**
      * Show activities as default
      * @default false

package/lib/cjs/components/FeedObject/FeedObject.js

@@ -133,7 +133,7 @@ function FeedObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `feed_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className = null, feedObjectId = null, feedObject = null, feedObjectType = types_1.SCContributionType.DISCUSSION, feedObjectActivities = null, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, markRead = false, template = feedObject_1.SCFeedObjectTemplateType.PREVIEW, hideFollowAction = false, activitiesExpanded = true, activitiesExpandedType, hideParticipantsPreview = false, pollVisible = false, FollowButtonProps = {}, FeedObjectSkeletonProps = { elevation: 0 }, ActionsProps = {}, CommentObjectReplyComponent = CommentObjectReply_1.default, CommentObjectReplyComponentProps = { WidgetProps: { variant: 'outlined' } }, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, ContributionActionsMenuProps = {}, MediasPreviewProps = {}, ActivitiesProps = { cacheStrategy }, PollObjectProps = { elevation: 0 }, ContributorsFeedObjectProps = {}, onReply, onHeightChange, onStateChange } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectActivities", "cacheStrategy", "markRead", "template", "hideFollowAction", "activitiesExpanded", "activitiesExpandedType", "hideParticipantsPreview", "pollVisible", "FollowButtonProps", "FeedObjectSkeletonProps", "ActionsProps", "CommentObjectReplyComponent", "CommentObjectReplyComponentProps", "CommentComponentProps", "CommentObjectSkeletonProps", "ContributionActionsMenuProps", "MediasPreviewProps", "ActivitiesProps", "PollObjectProps", "ContributorsFeedObjectProps", "onReply", "onHeightChange", "onStateChange"]);
+    const { id = `feed_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className = null, feedObjectId = null, feedObject = null, feedObjectType = types_1.SCContributionType.DISCUSSION, feedObjectActivities = null, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, markRead = false, template = feedObject_1.SCFeedObjectTemplateType.PREVIEW, hideFollowAction = false, summaryExpanded = false, activitiesExpanded = true, activitiesExpandedType, hideParticipantsPreview = false, pollVisible = false, FollowButtonProps = {}, FeedObjectSkeletonProps = { elevation: 0 }, ActionsProps = {}, CommentObjectReplyComponent = CommentObjectReply_1.default, CommentObjectReplyComponentProps = { WidgetProps: { variant: 'outlined' } }, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, ContributionActionsMenuProps = {}, MediasPreviewProps = {}, ActivitiesProps = { cacheStrategy }, PollObjectProps = { elevation: 0 }, ContributorsFeedObjectProps = {}, onReply, onHeightChange, onStateChange } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectActivities", "cacheStrategy", "markRead", "template", "hideFollowAction", "summaryExpanded", "activitiesExpanded", "activitiesExpandedType", "hideParticipantsPreview", "pollVisible", "FollowButtonProps", "FeedObjectSkeletonProps", "ActionsProps", "CommentObjectReplyComponent", "CommentObjectReplyComponentProps", "CommentComponentProps", "CommentObjectSkeletonProps", "ContributionActionsMenuProps", "MediasPreviewProps", "ActivitiesProps", "PollObjectProps", "ContributorsFeedObjectProps", "onReply", "onHeightChange", "onStateChange"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -155,7 +155,7 @@ function FeedObject(inProps) {
     const [comments, setComments] = (0, react_1.useState)([]);
     const [isReplying, setIsReplying] = (0, react_1.useState)(false);
     const [selectedActivities, setSelectedActivities] = (0, react_1.useState)(getInitialSelectedActivitiesType());
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const [expanded, setExpanded] = (0, react_1.useState)(summaryExpanded);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     /**
@@ -207,6 +207,13 @@ function FeedObject(inProps) {
     const handleTogglePollVisibility = (0, react_1.useCallback)((visible) => {
         notifyFeedChanges({ pollVisible: visible });
     }, [pollVisible, notifyFeedChanges]);
+    /**
+     * Handle toggle summary
+     */
+    const handleToggleSummary = (0, react_1.useCallback)(() => {
+        setExpanded(!expanded);
+        notifyFeedChanges({ summaryExpanded: !expanded });
+    }, [expanded, notifyFeedChanges]);
     /**
      * Render header action
      * if author = authenticated user -> render edit action
@@ -384,7 +391,7 @@ function FeedObject(inProps) {
                     react_1.default.createElement(material_1.Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: summaryHtml
                         } })),
-                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: () => setExpanded(!expanded) },
+                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
         else if (template === feedObject_1.SCFeedObjectTemplateType.DETAIL) {
@@ -397,7 +404,7 @@ function FeedObject(inProps) {
                 react_1.default.createElement(material_1.Typography, { component: "span", dangerouslySetInnerHTML: {
                         __html: summaryHtml
                     } }),
-                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: () => setExpanded(!expanded) },
+                !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
     }, [obj, template, expanded]);

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

@@ -59,6 +59,11 @@ export interface FeedObjectProps extends CardProps, VirtualScrollerItemProps {
      * @default false
      */
     hideFollowAction?: boolean;
+    /**
+     * Show all summary initially (otherwise it will be truncated)
+     * @default false
+     */
+    summaryExpanded?: boolean;
     /**
      * Show activities as default
      * @default false

package/lib/esm/components/FeedObject/FeedObject.js

@@ -131,7 +131,7 @@ export default function FeedObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `feed_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className = null, feedObjectId = null, feedObject = null, feedObjectType = SCContributionType.DISCUSSION, feedObjectActivities = null, cacheStrategy = CacheStrategies.CACHE_FIRST, markRead = false, template = SCFeedObjectTemplateType.PREVIEW, hideFollowAction = false, activitiesExpanded = true, activitiesExpandedType, hideParticipantsPreview = false, pollVisible = false, FollowButtonProps = {}, FeedObjectSkeletonProps = { elevation: 0 }, ActionsProps = {}, CommentObjectReplyComponent = CommentObjectReply, CommentObjectReplyComponentProps = { WidgetProps: { variant: 'outlined' } }, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, ContributionActionsMenuProps = {}, MediasPreviewProps = {}, ActivitiesProps = { cacheStrategy }, PollObjectProps = { elevation: 0 }, ContributorsFeedObjectProps = {}, onReply, onHeightChange, onStateChange } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectActivities", "cacheStrategy", "markRead", "template", "hideFollowAction", "activitiesExpanded", "activitiesExpandedType", "hideParticipantsPreview", "pollVisible", "FollowButtonProps", "FeedObjectSkeletonProps", "ActionsProps", "CommentObjectReplyComponent", "CommentObjectReplyComponentProps", "CommentComponentProps", "CommentObjectSkeletonProps", "ContributionActionsMenuProps", "MediasPreviewProps", "ActivitiesProps", "PollObjectProps", "ContributorsFeedObjectProps", "onReply", "onHeightChange", "onStateChange"]);
+    const { id = `feed_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className = null, feedObjectId = null, feedObject = null, feedObjectType = SCContributionType.DISCUSSION, feedObjectActivities = null, cacheStrategy = CacheStrategies.CACHE_FIRST, markRead = false, template = SCFeedObjectTemplateType.PREVIEW, hideFollowAction = false, summaryExpanded = false, activitiesExpanded = true, activitiesExpandedType, hideParticipantsPreview = false, pollVisible = false, FollowButtonProps = {}, FeedObjectSkeletonProps = { elevation: 0 }, ActionsProps = {}, CommentObjectReplyComponent = CommentObjectReply, CommentObjectReplyComponentProps = { WidgetProps: { variant: 'outlined' } }, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, ContributionActionsMenuProps = {}, MediasPreviewProps = {}, ActivitiesProps = { cacheStrategy }, PollObjectProps = { elevation: 0 }, ContributorsFeedObjectProps = {}, onReply, onHeightChange, onStateChange } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectActivities", "cacheStrategy", "markRead", "template", "hideFollowAction", "summaryExpanded", "activitiesExpanded", "activitiesExpandedType", "hideParticipantsPreview", "pollVisible", "FollowButtonProps", "FeedObjectSkeletonProps", "ActionsProps", "CommentObjectReplyComponent", "CommentObjectReplyComponentProps", "CommentComponentProps", "CommentObjectSkeletonProps", "ContributionActionsMenuProps", "MediasPreviewProps", "ActivitiesProps", "PollObjectProps", "ContributorsFeedObjectProps", "onReply", "onHeightChange", "onStateChange"]);
     // CONTEXT
     const scContext = useSCContext();
     const scRoutingContext = useSCRouting();
@@ -153,7 +153,7 @@ export default function FeedObject(inProps) {
     const [comments, setComments] = useState([]);
     const [isReplying, setIsReplying] = useState(false);
     const [selectedActivities, setSelectedActivities] = useState(getInitialSelectedActivitiesType());
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState(summaryExpanded);
     // INTL
     const intl = useIntl();
     /**
@@ -205,6 +205,13 @@ export default function FeedObject(inProps) {
     const handleTogglePollVisibility = useCallback((visible) => {
         notifyFeedChanges({ pollVisible: visible });
     }, [pollVisible, notifyFeedChanges]);
+    /**
+     * Handle toggle summary
+     */
+    const handleToggleSummary = useCallback(() => {
+        setExpanded(!expanded);
+        notifyFeedChanges({ summaryExpanded: !expanded });
+    }, [expanded, notifyFeedChanges]);
     /**
      * Render header action
      * if author = authenticated user -> render edit action
@@ -382,7 +389,7 @@ export default function FeedObject(inProps) {
                     React.createElement(Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: summaryHtml
                         } })),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: () => setExpanded(!expanded) },
+                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
                     React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
         else if (template === SCFeedObjectTemplateType.DETAIL) {
@@ -395,7 +402,7 @@ export default function FeedObject(inProps) {
                 React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: {
                         __html: summaryHtml
                     } }),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: () => setExpanded(!expanded) },
+                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
                     React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
         }
     }, [obj, template, expanded]);