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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -81,6 +81,8 @@ function CommentsFeedObject(inProps) {
81
81
  // CONST
82
82
  const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
83
83
  const commentObjId = commentObj ? commentObj.id : null;
84
+ // REFS
85
+ const commentsContainerRef = (0, react_1.useRef)();
84
86
  /**
85
87
  * Total number of comments
86
88
  */
@@ -133,7 +135,8 @@ function CommentsFeedObject(inProps) {
133
135
  // Add (window.innerHeight / 2) to scroll
134
136
  // (usually >= (topBar + offset) and in center of the screen)
135
137
  setTimeout(() => {
136
- const el = document.querySelector(`#comment_object_${comment.id}`);
138
+ // Get the comment inside commentsContainer
139
+ const el = commentsContainerRef.current ? commentsContainerRef.current.querySelector(`#comment_object_${comment.id}`) : null;
137
140
  if (el) {
138
141
  el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
139
142
  }
@@ -222,7 +225,7 @@ function CommentsFeedObject(inProps) {
222
225
  /**
223
226
  * Renders root object
224
227
  */
225
- return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
228
+ return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { ref: commentsContainerRef }),
226
229
  renderTitle(),
227
230
  commentsRendered));
228
231
  }
@@ -1,5 +1,5 @@
1
1
  import { __rest } from "tslib";
2
- import React, { useEffect, useMemo, useState } from 'react';
2
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import { FormattedMessage } from 'react-intl';
5
5
  import CommentObject from '../CommentObject';
@@ -79,6 +79,8 @@ export default function CommentsFeedObject(inProps) {
79
79
  // CONST
80
80
  const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
81
81
  const commentObjId = commentObj ? commentObj.id : null;
82
+ // REFS
83
+ const commentsContainerRef = useRef();
82
84
  /**
83
85
  * Total number of comments
84
86
  */
@@ -131,7 +133,8 @@ export default function CommentsFeedObject(inProps) {
131
133
  // Add (window.innerHeight / 2) to scroll
132
134
  // (usually >= (topBar + offset) and in center of the screen)
133
135
  setTimeout(() => {
134
- const el = document.querySelector(`#comment_object_${comment.id}`);
136
+ // Get the comment inside commentsContainer
137
+ const el = commentsContainerRef.current ? commentsContainerRef.current.querySelector(`#comment_object_${comment.id}`) : null;
135
138
  if (el) {
136
139
  el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
137
140
  }
@@ -220,7 +223,7 @@ export default function CommentsFeedObject(inProps) {
220
223
  /**
221
224
  * Renders root object
222
225
  */
223
- return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
226
+ return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { ref: commentsContainerRef }),
224
227
  renderTitle(),
225
228
  commentsRendered));
226
229
  }