bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chats: autoscroll

Browse source 
https://stackoverflow.com/a/41700815
This commit is contained in:
Alex Gleason 2020-08-25 21:45:05 -05:00
parent 5a7cc14812
commit dcaadb2153
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/soapbox/features/chats/components/chat_window.js
View file

@ -59,12 +59,24 @@ class ChatWindow extends ImmutablePureComponent {
this.setState({ content: e.target.value }); this.setState({ content: e.target.value });
} }
scrollToBottom = () => {
if (!this.messagesEnd) return;
this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
}
setRef = (el) => this.messagesEnd = el;
componentDidMount() { componentDidMount() {
const { dispatch, pane, chatMessages } = this.props; const { dispatch, pane, chatMessages } = this.props;
this.scrollToBottom();
if (chatMessages && chatMessages.count() < 1) if (chatMessages && chatMessages.count() < 1)
dispatch(fetchChatMessages(pane.get('chat_id'))); dispatch(fetchChatMessages(pane.get('chat_id')));
} }
componentDidUpdate() {
this.scrollToBottom();
}
render() { render() {
const { pane, idx, chatMessages } = this.props; const { pane, idx, chatMessages } = this.props;
const chat = pane.get('chat'); const chat = pane.get('chat');
@ -93,6 +105,7 @@ class ChatWindow extends ImmutablePureComponent {
</span> </span>
</div> </div>
))} ))}
<div style={{ float: 'left', clear: 'both' }} ref={this.setRef} />
</div> </div>
<div className='pane__actions'> <div className='pane__actions'>
<input <input