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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
assets/bindata.go
View File

File diff suppressed because one or more lines are too long

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 AutoSizer from 'react-virtualized-auto-sizer';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { getScrollPos, saveScrollPos } from 'utils/scrollPosition'; import { getScrollPos, saveScrollPos } from 'utils/scrollPosition';
import { windowHeight } from 'utils/size';
import Message from './Message'; import Message from './Message';
const fetchThreshold = 600; const fetchThreshold = 600;
@ -125,9 +126,14 @@ export default class MessageBox extends PureComponent {
if (scroll) { if (scroll) {
this.list.current.scrollToItem(messages.length + 1); this.list.current.scrollToItem(messages.length + 1);
} else if (messages.length > 0) { } else if (messages.length > 0) {
this.initialScrollTop = 0; let totalHeight = 14;
for (let i = 0; i < messages.length; i++) { 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) { if (this.bottom) {
saveScrollPos(this.scrollKey, -1); saveScrollPos(this.scrollKey, -1);
} else { } 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; const { clientHeight, scrollHeight } = this.outer.current;
this.scrollTop = scrollOffset;
this.bottom = scrollOffset + clientHeight >= scrollHeight - 20; this.bottom = scrollOffset + clientHeight >= scrollHeight - 20;
}; };