Upgrade react-virtualized to 9.3.0

client/package.json

@@ -13,7 +13,7 @@
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-0": "^6.22.0",
-    "css-loader": "^0.26.1",
+    "css-loader": "^0.27.3",
     "eslint": "^3.15.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-loader": "^1.6.1",
@@ -33,7 +33,7 @@
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.3",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.16.0",
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.17.0"
@@ -42,7 +42,7 @@
     "autolinker": "git+https://github.com/robbie-c/Autolinker.js.git",
     "backo": "^1.1.0",
     "base64-arraybuffer": "^0.1.5",
-    "eventemitter2": "^3.0.0",
+    "eventemitter2": "^4.0.0",
     "history": "^4.5.1",
     "immutable": "^3.8.1",
     "lodash": "^4.17.4",
@@ -51,7 +51,7 @@
     "react-redux": "^5.0.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.8",
-    "react-virtualized": "^4.10.0",
+    "react-virtualized": "^9.3.0",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^2.5.4"

client/src/css/style.css

@@ -518,6 +518,10 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   text-overflow: ellipsis;
 }
 
+.ReactVirtualized__Grid {
+  outline: none;
+}
+
 @media (max-width: 600px) {
   .tablist {
     width: 200px;

client/src/js/components/Message.js

@@ -31,7 +31,8 @@ export default class Message extends PureComponent {
 
     const style = {
       paddingLeft: `${window.messageIndent + 15}px`,
-      textIndent: `-${window.messageIndent}px`
+      textIndent: `-${window.messageIndent}px`,
+      ...this.props.style
     };
 
     return (

client/src/js/components/MessageBox.js

@@ -1,20 +1,17 @@
 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 Message from './Message';
+import { scrollBarWidth } from '../util';
+
+const sbWidth = scrollBarWidth();
+const listStyle = { padding: '7px 0', boxSizing: 'content-box' };
 
 export default class MessageBox extends PureComponent {
-  state = {
-    height: window.innerHeight - 100
-  };
-
-  componentDidMount() {
-    this.updateWidth();
-    window.addEventListener('resize', this.handleResize);
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.tab !== this.props.tab) {
+      this.bottom = true;
     }
-
-  componentWillReceiveProps() {
-    const el = this.list.refs.scrollingContainer;
-    this.autoScroll = el.scrollTop + el.offsetHeight === el.scrollHeight;
   }
 
   componentWillUpdate(nextProps) {
@@ -24,70 +21,57 @@ export default class MessageBox extends PureComponent {
   }
 
   componentDidUpdate() {
+    if (this.bottom) {
+      this.list.scrollToRow(this.props.messages.size);
+    }
+
     this.updateWidth();
-
-    if (this.autoScroll) {
-      const el = this.list.refs.scrollingContainer;
-      el.scrollTop = el.scrollHeight;
-    }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  getRowHeight = index => {
-    const { messages } = this.props;
-
-    if (index === 0 || index === messages.size + 1) {
-      return 7;
-    }
-
-    return messages.get(index - 1).height;
-  };
-
-  updateWidth = resize => {
-    const { isChannel, setWrapWidth, updateMessageHeight } = this.props;
-    if (this.list) {
-      let width = this.list.refs.scrollingContainer.clientWidth - 30;
-
-      if (isChannel) {
-        width += 200;
-      }
-
-      if (this.width !== width) {
-        this.width = width;
-        setWrapWidth(width);
-
-        if (resize) {
-          updateMessageHeight();
-        }
-      }
-    }
-  };
+  getRowHeight = ({ index }) => this.props.messages.get(index).height;
 
   listRef = el => { this.list = el; };
 
-  handleResize = () => {
-    this.updateWidth(true);
-    this.setState({ height: window.innerHeight - 100 });
-  };
+  updateWidth = () => {
+    const { isChannel, setWrapWidth, updateMessageHeight } = this.props;
+    let wrapWidth = this.width;
 
-  renderMessage = index => {
-    const { messages } = this.props;
-
-    if (index === 0 || index === messages.size + 1) {
-      return <span style={{ height: '7px' }} />;
+    if (isChannel) {
+      wrapWidth += 200;
     }
 
-    const { select, openPrivateChat } = this.props;
-    const message = messages.get(index - 1);
+    // eslint-disable-next-line no-underscore-dangle
+    const c = this.list.Grid._scrollingContainer;
+    if (c.scrollHeight > c.clientHeight) {
+      wrapWidth -= sbWidth;
+    }
+
+    if (this.wrapWidth !== wrapWidth) {
+      this.wrapWidth = wrapWidth;
+      setWrapWidth(wrapWidth);
+      updateMessageHeight();
+    }
+  };
+
+  handleResize = size => {
+    this.width = size.width - 30;
+    this.updateWidth();
+  };
+
+  handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
+    this.bottom = scrollTop + clientHeight >= scrollHeight;
+  };
+
+  renderMessage = ({ index, style, key }) => {
+    const { messages, select, openPrivateChat } = this.props;
 
     return (
       <Message
-        message={message}
+        key={key}
+        message={messages.get(index)}
         select={select}
         openPrivateChat={openPrivateChat}
+        style={style}
       />
     );
   };
@@ -95,13 +79,20 @@ export default class MessageBox extends PureComponent {
   render() {
     return (
       <div className="messagebox">
-        <VirtualScroll
+        <AutoSizer onResize={this.handleResize}>
+          {({ width, height }) => (
+            <List
               ref={this.listRef}
-          height={this.state.height}
-          rowsCount={this.props.messages.size + 2}
+              width={width}
+              height={height - 14}
+              rowCount={this.props.messages.size}
               rowHeight={this.getRowHeight}
               rowRenderer={this.renderMessage}
+              onScroll={this.handleScroll}
+              style={listStyle}
             />
+          )}
+        </AutoSizer>
       </div>
     );
   }

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
+        <AutoSizer disableWidth>
+          {({ height }) => (
+            <List
               ref={this.listRef}
-          height={this.state.height}
-          rowsCount={this.props.users.size + 2}
-          rowHeight={this.getRowHeight}
+              width={200}
+              height={height - 20}
+              rowCount={this.props.users.size}
+              rowHeight={24}
               rowRenderer={this.renderUser}
+              style={listStyle}
             />
+          )}
+        </AutoSizer>
       </div>
     );
   }

client/src/js/components/UserListItem.js

@@ -9,6 +9,10 @@ export default class UserListItem extends PureComponent {
   };
 
   render() {
-    return <p onClick={this.handleClick}>{this.props.user.renderName}</p>;
+    return (
+      <p style={this.props.style} onClick={this.handleClick}>
+        {this.props.user.renderName}
+      </p>
+    );
   }
 }

client/src/js/containers/Chat.js

@@ -93,6 +93,7 @@ class Chat extends PureComponent {
         <MessageBox
           messages={messages}
           isChannel={tab.channel !== null}
+          tab={tab}
           setWrapWidth={this.props.setWrapWidth}
           updateMessageHeight={this.props.updateMessageHeight}
           select={this.props.select}

client/src/js/util/index.js

@@ -25,7 +25,7 @@ export function stringWidth(str, font) {
   return ctx.measureText(str).width;
 }
 
-export function scrollbarWidth() {
+export function scrollBarWidth() {
   const outer = document.createElement('div');
   outer.style.visibility = 'hidden';
   outer.style.width = '100px';