@selfcommunity/react-ui 0.7.0-alpha.330 → 0.7.0-alpha.332

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.js

@@ -64,7 +64,7 @@ function CommentObjectReply(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
+    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // RETRIEVE OBJECTS

package/lib/cjs/components/CommentsFeedObject/CommentsFeedObject.js

@@ -81,6 +81,8 @@ function CommentsFeedObject(inProps) {
     // CONST
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
     const commentObjId = commentObj ? commentObj.id : null;
+    // REFS
+    const commentsContainerRef = (0, react_1.useRef)();
     /**
      * Total number of comments
      */
@@ -133,10 +135,10 @@ function CommentsFeedObject(inProps) {
         // Add (window.innerHeight / 2) to scroll
         // (usually >= (topBar + offset) and in center of the screen)
         setTimeout(() => {
-            const el = document.querySelector(`#comment_object_${comment.id}`);
+            // Get the comment inside commentsContainer
+            const el = commentsContainerRef.current ? commentsContainerRef.current.querySelector(`#comment_object_${comment.id}`) : null;
             if (el) {
-                const y = el.getBoundingClientRect().top + window.pageYOffset - window.innerHeight / 2;
-                window.scrollTo({ top: y, behavior: 'smooth' });
+                el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
             }
         }, 300);
     }
@@ -223,7 +225,7 @@ function CommentsFeedObject(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { ref: commentsContainerRef }),
         renderTitle(),
         commentsRendered));
 }

package/lib/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -62,7 +62,7 @@ export default function CommentObjectReply(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = __rest(props, ["className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
+    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = __rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
     // RETRIEVE OBJECTS

package/lib/esm/components/CommentsFeedObject/CommentsFeedObject.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
 import CommentObject from '../CommentObject';
@@ -79,6 +79,8 @@ export default function CommentsFeedObject(inProps) {
     // CONST
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
     const commentObjId = commentObj ? commentObj.id : null;
+    // REFS
+    const commentsContainerRef = useRef();
     /**
      * Total number of comments
      */
@@ -131,10 +133,10 @@ export default function CommentsFeedObject(inProps) {
         // Add (window.innerHeight / 2) to scroll
         // (usually >= (topBar + offset) and in center of the screen)
         setTimeout(() => {
-            const el = document.querySelector(`#comment_object_${comment.id}`);
+            // Get the comment inside commentsContainer
+            const el = commentsContainerRef.current ? commentsContainerRef.current.querySelector(`#comment_object_${comment.id}`) : null;
             if (el) {
-                const y = el.getBoundingClientRect().top + window.pageYOffset - window.innerHeight / 2;
-                window.scrollTo({ top: y, behavior: 'smooth' });
+                el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
             }
         }, 300);
     }
@@ -221,7 +223,7 @@ export default function CommentsFeedObject(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
+    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { ref: commentsContainerRef }),
         renderTitle(),
         commentsRendered));
 }