status-im
/
js-waku
mirror of https://github.com/status-im/js-waku.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement auto-scroll of the chat list

This commit is contained in:
Franck Royer 2021-04-27 14:55:30 +10:00
parent 2d037c3e46
commit f65d4a20ff
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web-chat/src/ChatList.tsx
View File

@ -6,7 +6,7 @@ import {
ListItemText,
Typography,
} from '@material-ui/core';
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { ChatMessage } from '../../build/main/chat/chat_message';
interface Props {
@ -22,7 +22,12 @@ export default function ChatList(props: Props) {
</ListItem>
));
return <List dense={true}>{listItems}</List>;
return (
<List dense={true}>
{listItems}
<AlwaysScrollToBottom messages={messages} />
</List>
);
}
interface MessageProps {
@ -65,3 +70,15 @@ function Message(props: MessageProps) {
</Card>
);
}
const AlwaysScrollToBottom = (props: Props) => {
const elementRef = useRef<HTMLDivElement>();
useEffect(() => {
// @ts-ignore
elementRef.current.scrollIntoView();
}, [props.messages]);
// @ts-ignore
return <div ref={elementRef} />;
};