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

Migrate from react-virtualized to react-window

This commit is contained in:
Ken-Håvard Lieng 2018-10-26 07:00:37 +02:00
parent 675e350da3
commit 4482dd33ce
8 changed files with 241 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
assets/bindata.go
View File

File diff suppressed because one or more lines are too long

3
client/package.json
View File

@ -67,7 +67,8 @@
"react-dom": "^16.5.2",
"react-hot-loader": "^4.3.11",
"react-redux": "^5.0.2",
"react-virtualized": "^9.20.1",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.2.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",

17
client/src/css/style.css
View File

@ -601,8 +601,9 @@ input.chat-title {
padding-top: 40px;
}
.VirtualScroll {
.messagebox-window {
overflow-x: hidden !important;
overflow-y: scroll !important;
}
.message {
@ -789,20 +790,6 @@ input.message-input-nick.invalid {
text-align: center;
}
.ReactVirtualized__List {
box-sizing: content-box !important;
outline: none;
}
.rvlist-messages {
padding: 7px 0;
overflow-y: scroll !important;
}
.rvlist-users {
padding: 10px 0;
}
@media (max-width: 600px) {
.app-info {
font-size: 12px;

135
client/src/js/components/pages/Chat/MessageBox.js
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import { List } from 'react-virtualized/dist/commonjs/List';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
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 Message from './Message';
@ -12,40 +12,56 @@ const fetchThreshold = 600;
const scrollbackDebounce = 100;
export default class MessageBox extends PureComponent {
componentWillMount() {
constructor(props) {
super(props);
this.loadScrollPos();
}
componentDidMount() {
this.mounted = true;
this.scrollTop = -1;
const scrollToBottom = this.bottom;
window.requestAnimationFrame(() => {
const { messages } = this.props;
if (scrollToBottom && messages.length > 0) {
this.list.current.scrollToItem(messages.length + 1);
}
});
}
componentWillUpdate(nextProps) {
if (nextProps.messages !== this.props.messages) {
this.list.recomputeRowHeights();
getSnapshotBeforeUpdate(prevProps) {
if (prevProps.messages !== this.props.messages) {
this.list.current.resetAfterIndex(0);
}
if (nextProps.tab !== this.props.tab) {
if (prevProps.tab !== this.props.tab) {
this.saveScrollPos();
this.bottom = false;
}
if (nextProps.messages[0] !== this.props.messages[0]) {
if (nextProps.tab === this.props.tab) {
const addedMessages =
nextProps.messages.length - this.props.messages.length;
if (prevProps.messages[0] !== this.props.messages[0]) {
const { messages, hasMoreMessages } = this.props;
if (prevProps.tab === this.props.tab) {
const addedMessages = messages.length - prevProps.messages.length;
let addedHeight = 0;
for (let i = 0; i < addedMessages; i++) {
addedHeight += nextProps.messages[i].height;
addedHeight += messages[i].height;
}
this.nextScrollTop = addedHeight + this.container.scrollTop;
this.nextScrollTop = addedHeight + this.outer.current.scrollTop;
if (!hasMoreMessages) {
this.nextScrollTop -= 93;
}
}
this.loading = false;
this.ready = false;
}
return null;
}
componentDidUpdate(prevProps) {
@ -54,10 +70,10 @@ export default class MessageBox extends PureComponent {
}
if (this.nextScrollTop > 0) {
this.container.scrollTop = this.nextScrollTop;
this.list.current.scrollTo(this.nextScrollTop);
this.nextScrollTop = 0;
} else if (this.bottom) {
this.list.scrollToRow(this.props.messages.length);
this.list.current.scrollToItem(this.props.messages.length + 1);
}
}
@ -65,24 +81,34 @@ export default class MessageBox extends PureComponent {
this.saveScrollPos();
}
getRowHeight = ({ index }) => {
getRowHeight = index => {
const { messages, hasMoreMessages } = this.props;
if (index === 0) {
if (this.props.hasMoreMessages) {
if (hasMoreMessages) {
return 100;
}
return 0;
return 7;
} else if (index === messages.length + 1) {
return 7;
}
return this.props.messages[index - 1].height;
return messages[index - 1].height;
};
listRef = el => {
this.list = el;
if (el) {
// eslint-disable-next-line no-underscore-dangle
this.container = el.Grid._scrollingContainer;
getItemKey = index => {
const { messages } = this.props;
if (index === 0) {
return 'top';
} else if (index === messages.length + 1) {
return 'bottom';
}
return messages[index - 1].id;
};
list = React.createRef();
outer = React.createRef();
updateScrollKey = () => {
const { tab } = this.props;
this.scrollKey = `msg:${tab.server}:${tab.name}`;
@ -94,14 +120,14 @@ export default class MessageBox extends PureComponent {
if (pos >= 0) {
this.bottom = false;
if (scroll) {
this.list.scrollToPosition(pos);
this.list.current.scrollTo(pos);
} else {
this.scrollTop = pos;
this.initialScrollTop = pos;
}
} else {
this.bottom = true;
if (scroll) {
this.list.scrollToRow(this.props.messages.length);
this.list.current.scrollToItem(this.props.messages.length + 1);
}
}
};
@ -110,7 +136,7 @@ export default class MessageBox extends PureComponent {
if (this.bottom) {
saveScrollPos(this.scrollKey, -1);
} else {
saveScrollPos(this.scrollKey, this.container.scrollTop);
saveScrollPos(this.scrollKey, this.outer.current.scrollTop);
}
};
@ -125,13 +151,12 @@ export default class MessageBox extends PureComponent {
onAddMore(tab.server, tab.name);
}, scrollbackDebounce);
handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
if (this.mounted) {
handleScroll = ({ scrollOffset, scrollDirection }) => {
if (
!this.loading &&
this.props.hasMoreMessages &&
scrollTop <= fetchThreshold &&
scrollTop < this.prevScrollTop
scrollOffset <= fetchThreshold &&
scrollDirection === 'backward'
) {
this.fetchMore();
}
@ -145,9 +170,9 @@ export default class MessageBox extends PureComponent {
}
}
this.bottom = scrollTop + clientHeight >= scrollHeight - 10;
this.prevScrollTop = scrollTop;
}
const { clientHeight, scrollHeight } = this.outer.current;
this.bottom = scrollOffset + clientHeight >= scrollHeight - 20;
};
handleMouseDown = () => {
@ -165,23 +190,26 @@ export default class MessageBox extends PureComponent {
};
renderMessage = ({ index, style }) => {
const { messages } = this.props;
if (index === 0) {
if (this.props.hasMoreMessages) {
return (
<div key="top" className="messagebox-top-indicator" style={style}>
<div className="messagebox-top-indicator" style={style}>
Loading messages...
</div>
);
}
return null;
} else if (index === messages.length + 1) {
return null;
}
const { messages, coloredNicks, onNickClick } = this.props;
const { coloredNicks, onNickClick } = this.props;
const message = messages[index - 1];
return (
<Message
key={message.id}
message={message}
coloredNick={coloredNicks}
style={style}
@ -191,13 +219,6 @@ export default class MessageBox extends PureComponent {
};
render() {
const props = {};
if (this.bottom) {
props.scrollToIndex = this.props.messages.length;
} else if (this.scrollTop >= 0) {
props.scrollTop = this.scrollTop;
}
return (
<div
className="messagebox"
@ -207,16 +228,20 @@ export default class MessageBox extends PureComponent {
<AutoSizer>
{({ width, height }) => (
<List
ref={this.listRef}
ref={this.list}
outerRef={this.outer}
width={width}
height={height - 14}
rowCount={this.props.messages.length + 1}
rowHeight={this.getRowHeight}
rowRenderer={this.renderMessage}
height={height}
itemCount={this.props.messages.length + 2}
itemKey={this.getItemKey}
itemSize={this.getRowHeight}
estimatedItemSize={32}
initialScrollOffset={this.initialScrollTop}
onScroll={this.handleScroll}
className="rvlist-messages"
{...props}
/>
className="messagebox-window"
>
{this.renderMessage}
</List>
)}
</AutoSizer>
</div>

69
client/src/js/components/pages/Chat/UserList.js
View File

@ -1,27 +1,58 @@
import React, { PureComponent } from 'react';
import { List } from 'react-virtualized/dist/commonjs/List';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
import { VariableSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import classnames from 'classnames';
import UserListItem from './UserListItem';
export default class UserList extends PureComponent {
componentWillUpdate(nextProps) {
if (nextProps.users.size === this.props.users.size) {
this.list.forceUpdateGrid();
}
getSnapshotBeforeUpdate(prevProps) {
const { users } = this.props;
if (prevProps.users.length !== users.length) {
this.list.current.resetAfterIndex(
Math.min(prevProps.users.length, users.length) + 1
);
} else {
this.list.current.forceUpdate();
}
listRef = el => {
this.list = el;
return null;
}
getItemHeight = index => {
const { users } = this.props;
if (index === 0) {
return 12;
} else if (index === users.length + 1) {
return 10;
}
return 24;
};
renderUser = ({ index, style, key }) => {
getItemKey = index => {
const { users } = this.props;
if (index === 0) {
return 'top';
} else if (index === users.length + 1) {
return 'bottom';
}
return index;
};
list = React.createRef();
renderUser = ({ index, style }) => {
const { users, coloredNicks, onNickClick } = this.props;
if (index === 0 || index === users.length + 1) {
return null;
}
return (
<UserListItem
key={key}
user={users[index]}
user={users[index - 1]}
coloredNick={coloredNicks}
style={style}
onClick={onNickClick}
@ -41,14 +72,16 @@ export default class UserList extends PureComponent {
<AutoSizer disableWidth>
{({ height }) => (
<List
ref={this.listRef}
ref={this.list}
width={200}
height={height - 20}
rowCount={users.length}
rowHeight={24}
rowRenderer={this.renderUser}
className="rvlist-users"
/>
height={height}
itemCount={users.length + 2}
itemKey={this.getItemKey}
itemSize={this.getItemHeight}
estimatedItemSize={24}
>
{this.renderUser}
</List>
)}
</AutoSizer>
</div>

16
client/src/js/modules/widthUpdates.js
View File

@ -2,6 +2,7 @@ import { getCharWidth } from 'state/app';
import { updateMessageHeight } from 'state/messages';
import { when } from 'utils/observe';
import { measureScrollBarWidth } from 'utils';
import { addResizeListener } from 'utils/size';
const menuWidth = 200;
const messagePadding = 30;
@ -13,8 +14,7 @@ export default function widthUpdates({ store }) {
const scrollBarWidth = measureScrollBarWidth();
let prevWrapWidth;
function updateWidth() {
const windowWidth = window.innerWidth;
function updateWidth(windowWidth) {
let wrapWidth = windowWidth - scrollBarWidth - messagePadding;
if (windowWidth > smallScreen) {
wrapWidth -= menuWidth;
@ -26,16 +26,6 @@ export default function widthUpdates({ store }) {
}
}
let resizeRAF;
function resize() {
if (resizeRAF) {
window.cancelAnimationFrame(resizeRAF);
}
resizeRAF = window.requestAnimationFrame(updateWidth);
}
updateWidth();
window.addEventListener('resize', resize);
addResizeListener(updateWidth, true);
});
}

45
client/src/js/utils/size.js Normal file
View File

@ -0,0 +1,45 @@
let width, height;
const listeners = [];
function update() {
width = window.innerWidth;
height = window.innerHeight;
for (let i = 0; i < listeners.length; i++) {
listeners[i](width, height);
}
}
let resizeRAF;
function resize() {
if (resizeRAF) {
window.cancelAnimationFrame(resizeRAF);
}
resizeRAF = window.requestAnimationFrame(update);
}
update();
window.addEventListener('resize', resize);
export function windowWidth() {
return width;
}
export function windowHeight() {
return height;
}
export function addResizeListener(f, init) {
listeners.push(f);
if (init) {
f(width, height);
}
}
export function removeResizeListener(f) {
const i = listeners.indexOf(f);
if (i > -1) {
listeners.splice(i, 1);
}
}

50
client/yarn.lock
View File

@ -714,6 +714,13 @@
"@babel/plugin-transform-react-jsx-self" "^7.0.0"
"@babel/plugin-transform-react-jsx-source" "^7.0.0"
"@babel/runtime@^7.0.0":
version "7.1.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.2.tgz#81c89935f4647706fc54541145e6b4ecfef4b8e3"
integrity sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==
dependencies:
regenerator-runtime "^0.12.0"
"@babel/template@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0.tgz#c2bc9870405959c89a9c814376a2ecb247838c80"
@ -2132,11 +2139,6 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.3:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
integrity sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=
classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@ -2966,11 +2968,6 @@ doctrine@^2.1.0:
dependencies:
esutils "^2.0.2"
"dom-helpers@^2.4.0 || ^3.0.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
integrity sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg==
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@ -5979,7 +5976,7 @@ longest@^1.0.1:
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
integrity sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=
@ -6062,6 +6059,11 @@ mem@^1.1.0:
dependencies:
mimic-fn "^1.0.0"
memoize-one@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
integrity sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA==
memory-fs@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
@ -7662,17 +7664,18 @@ react-redux@^5.0.2:
loose-envify "^1.1.0"
prop-types "^15.6.0"
react-virtualized@^9.20.1:
version "9.20.1"
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.20.1.tgz#02dc08fe9070386b8c48e2ac56bce7af0208d22d"
integrity sha512-xIWxBsyNAjceqD3hsE0nw5TcDVxKbIepsHhvS2XneHmNz0KlKxdLdGBmGZBM9ZesEmbZ5EO0Sw70TB1MeCmpbQ==
react-virtualized-auto-sizer@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
react-window@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.2.1.tgz#d5a8b7f8cfbd0890910caad9ffdcdab78189024c"
integrity sha512-rVk4f755+Q4xrcXPTlFi7GAJW/WPqJnfIl8stdPvBkoW0VM+vGDwM9Xn/9iYYWF4zE1AwO8wtr4qTEiHntbh0A==
dependencies:
babel-runtime "^6.26.0"
classnames "^2.2.3"
dom-helpers "^2.4.0 || ^3.0.0"
loose-envify "^1.3.0"
prop-types "^15.6.0"
react-lifecycles-compat "^3.0.4"
"@babel/runtime" "^7.0.0"
memoize-one "^3.1.1"
react@^16.5.2:
version "16.5.2"
@ -7815,6 +7818,11 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
regenerator-runtime@^0.12.0:
version "0.12.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
regenerator-transform@^0.13.3:
version "0.13.3"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"