Upgrade react-virtualized to 9.3.0

client/src/js/components/UserList.js

@@ -1,47 +1,23 @@
 import React, { PureComponent } from 'react';
-import { VirtualScroll } from 'react-virtualized';
+import { List } from 'react-virtualized/dist/commonjs/List';
+import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import UserListItem from './UserListItem';
 
+const listStyle = { padding: '10px 0', boxSizing: 'content-box' };
+
 export default class UserList extends PureComponent {
-  state = {
-    height: window.innerHeight - 100
-  };
-
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-  }
-
   componentWillUpdate(nextProps) {
     if (nextProps.users.size === this.props.users.size) {
       this.list.forceUpdate();
     }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  getRowHeight = index => {
-    if (index === 0 || index === this.props.users.size + 1) {
-      return 10;
-    }
-
-    return 24;
-  };
-
   listRef = el => { this.list = el; };
 
-  handleResize = () => this.setState({ height: window.innerHeight - 100 });
+  renderUser = ({ index, style }) => {
+    const { users, tab, openPrivateChat, select } = this.props;
+    const user = users.get(index);
 
-  renderUser = index => {
-    const { users } = this.props;
-
-    if (index === 0 || index === users.size + 1) {
-      return <span style={{ height: '10px' }} />;
-    }
-
-    const { tab, openPrivateChat, select } = this.props;
-    const user = users.get(index - 1);
     return (
       <UserListItem
         key={user.nick}
@@ -49,6 +25,7 @@ export default class UserList extends PureComponent {
         tab={tab}
         openPrivateChat={openPrivateChat}
         select={select}
+        style={style}
       />
     );
   };
@@ -64,13 +41,19 @@ export default class UserList extends PureComponent {
 
     return (
       <div className={className} style={style}>
-        <VirtualScroll
-          ref={this.listRef}
-          height={this.state.height}
-          rowsCount={this.props.users.size + 2}
-          rowHeight={this.getRowHeight}
-          rowRenderer={this.renderUser}
-        />
+        <AutoSizer disableWidth>
+          {({ height }) => (
+            <List
+              ref={this.listRef}
+              width={200}
+              height={height - 20}
+              rowCount={this.props.users.size}
+              rowHeight={24}
+              rowRenderer={this.renderUser}
+              style={listStyle}
+            />
+          )}
+        </AutoSizer>
       </div>
     );
   }