moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chats: improve scroll behavior

This commit is contained in:
Alex Gleason 2020-08-25 22:12:08 -05:00
parent 205078c865
commit c94258dfb9
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/soapbox/features/chats/components/chat_window.js
View File

@ -61,7 +61,7 @@ class ChatWindow extends ImmutablePureComponent {
scrollToBottom = () => { scrollToBottom = () => {
if (!this.messagesEnd) return; if (!this.messagesEnd) return;
this.messagesEnd.scrollIntoView({ behavior: 'smooth' }); this.messagesEnd.scrollIntoView();
} }
focusInput = () => { focusInput = () => {
@ -69,20 +69,26 @@ class ChatWindow extends ImmutablePureComponent {
this.inputElem.focus(); this.inputElem.focus();
} }
setMessageEndRef = (el) => this.messagesEnd = el; setMessageEndRef = (el) => {
setInputRef = (el) => this.inputElem = el; this.messagesEnd = el;
this.scrollToBottom();
};
setInputRef = (el) => {
const { pane } = this.props;
this.inputElem = el;
if (pane.get('state') === 'open') this.focusInput();
};
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')));
if (pane.get('state') === 'open')
this.focusInput();
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
this.scrollToBottom(); if (prevProps.chatMessages !== this.props.chatMessages)
this.scrollToBottom();
const oldState = prevProps.pane.get('state'); const oldState = prevProps.pane.get('state');
const newState = this.props.pane.get('state'); const newState = this.props.pane.get('state');