e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix some messages not rendering on MessageBox mount, handle scroll restoration edge case

Browse source
This commit is contained in:
Ken-Håvard Lieng 2018-11-22 09:50:38 +01:00
parent 9ca50b1546
commit 8eb1f9cbb4
2 changed files with 126 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

13
client/js/components/pages/Chat/MessageBox.js
View file

@ -3,6 +3,7 @@ import { VariableSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import debounce from 'lodash/debounce';
import { getScrollPos, saveScrollPos } from 'utils/scrollPosition';
import { windowHeight } from 'utils/size';
import Message from './Message';
const fetchThreshold = 600;
@ -125,9 +126,14 @@ export default class MessageBox extends PureComponent {
if (scroll) {
this.list.current.scrollToItem(messages.length + 1);
} else if (messages.length > 0) {
this.initialScrollTop = 0;
let totalHeight = 14;
for (let i = 0; i < messages.length; i++) {
this.initialScrollTop += messages[i].height;
totalHeight += messages[i].height;
}
const messageBoxHeight = windowHeight() - 100;
if (totalHeight > messageBoxHeight) {
this.initialScrollTop = totalHeight - messageBoxHeight;
}
}
}
@ -137,7 +143,7 @@ export default class MessageBox extends PureComponent {
if (this.bottom) {
saveScrollPos(this.scrollKey, -1);
} else {
saveScrollPos(this.scrollKey, this.outer.current.scrollTop);
saveScrollPos(this.scrollKey, this.scrollTop);
}
};
@ -167,6 +173,7 @@ export default class MessageBox extends PureComponent {
const { clientHeight, scrollHeight } = this.outer.current;
this.scrollTop = scrollOffset;
this.bottom = scrollOffset + clientHeight >= scrollHeight - 20;
};