fix: Room history scroll position (#29335)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
pull/29098/head^2
Yash Rajpal 3 years ago committed by GitHub
parent 059a92e876
commit cebe359d13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 5
      .changeset/pretty-dots-leave.md
  2. 7
      apps/meteor/client/views/room/components/body/RoomBody.tsx
  3. 23
      apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts

@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': minor
---
fix: Room history scrollbar position

@ -45,6 +45,7 @@ import UploadProgressIndicator from './UploadProgressIndicator';
import ComposerContainer from './composer/ComposerContainer';
import { useFileUploadDropTarget } from './hooks/useFileUploadDropTarget';
import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition';
import { useRetentionPolicy } from './hooks/useRetentionPolicy';
import { useUnreadMessages } from './hooks/useUnreadMessages';
@ -403,10 +404,10 @@ const RoomBody = (): ReactElement => {
sendToBottom();
}
wrapper.removeEventListener('MessageGroup', afterMessageGroup);
wrapper.addEventListener('scroll', handleWrapperScroll);
};
wrapper.addEventListener('scroll', handleWrapperScroll);
wrapper.addEventListener('MessageGroup', afterMessageGroup);
return () => {
@ -415,6 +416,8 @@ const RoomBody = (): ReactElement => {
};
}, [room._id, sendToBottom]);
useRestoreScrollPosition(room._id, scrollMessageList, sendToBottom);
useEffect(() => {
const wrapper = wrapperRef.current;

@ -0,0 +1,23 @@
import type { IRoom } from '@rocket.chat/core-typings';
import { useEffect } from 'react';
import type { MessageListContextValue } from '../../../../../components/message/list/MessageListContext';
import { RoomManager } from '../../../../../lib/RoomManager';
export function useRestoreScrollPosition(
roomId: IRoom['_id'],
scrollMessageList: Exclude<MessageListContextValue['scrollMessageList'], undefined>,
sendToBottom: () => void,
) {
useEffect(() => {
const store = RoomManager.getStore(roomId);
if (store?.scroll && !store.atBottom) {
scrollMessageList(() => {
return { left: 30, top: store.scroll };
});
} else {
sendToBottom();
}
}, [roomId, scrollMessageList, sendToBottom]);
}
Loading…
Cancel
Save