Migrate from react-virtualized to react-window

client/package.json

@@ -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",

client/src/css/style.css

@@ -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;

client/src/js/components/pages/Chat/MessageBox.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { List } from 'react-virtualized/dist/commonjs/List';
+import { VariableSizeList as List } from 'react-window';
-import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+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;
+    const scrollToBottom = this.bottom;
-    this.scrollTop = -1;
+
+    window.requestAnimationFrame(() => {
+      const { messages } = this.props;
+
+      if (scrollToBottom && messages.length > 0) {
+        this.list.current.scrollToItem(messages.length + 1);
+      }
+    });
   }
 
-  componentWillUpdate(nextProps) {
+  getSnapshotBeforeUpdate(prevProps) {
-    if (nextProps.messages !== this.props.messages) {
+    if (prevProps.messages !== this.props.messages) {
-      this.list.recomputeRowHeights();
+      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 (prevProps.messages[0] !== this.props.messages[0]) {
-      if (nextProps.tab === this.props.tab) {
+      const { messages, hasMoreMessages } = this.props;
-        const addedMessages =
+
-          nextProps.messages.length - this.props.messages.length;
+      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 => {
+  getItemKey = index => {
-    this.list = el;
+    const { messages } = this.props;
-    if (el) {
+
-      // eslint-disable-next-line no-underscore-dangle
+    if (index === 0) {
-      this.container = el.Grid._scrollingContainer;
+      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,29 +151,28 @@ export default class MessageBox extends PureComponent {
     onAddMore(tab.server, tab.name);
   }, scrollbackDebounce);
 
-  handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
+  handleScroll = ({ scrollOffset, scrollDirection }) => {
-    if (this.mounted) {
+    if (
-      if (
+      !this.loading &&
-        !this.loading &&
+      this.props.hasMoreMessages &&
-        this.props.hasMoreMessages &&
+      scrollOffset <= fetchThreshold &&
-        scrollTop <= fetchThreshold &&
+      scrollDirection === 'backward'
-        scrollTop < this.prevScrollTop
+    ) {
-      ) {
+      this.fetchMore();
-        this.fetchMore();
-      }
-
-      if (this.loading && !this.ready) {
-        if (this.mouseDown) {
-          this.ready = true;
-          this.shouldAdd = true;
-        } else {
-          this.addMore();
-        }
-      }
-
-      this.bottom = scrollTop + clientHeight >= scrollHeight - 10;
-      this.prevScrollTop = scrollTop;
     }
+
+    if (this.loading && !this.ready) {
+      if (this.mouseDown) {
+        this.ready = true;
+        this.shouldAdd = true;
+      } else {
+        this.addMore();
+      }
+    }
+
+    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}
+              height={height}
-              rowCount={this.props.messages.length + 1}
+              itemCount={this.props.messages.length + 2}
-              rowHeight={this.getRowHeight}
+              itemKey={this.getItemKey}
-              rowRenderer={this.renderMessage}
+              itemSize={this.getRowHeight}
+              estimatedItemSize={32}
+              initialScrollOffset={this.initialScrollTop}
               onScroll={this.handleScroll}
-              className="rvlist-messages"
+              className="messagebox-window"
-              {...props}
+            >
-            />
+              {this.renderMessage}
+            </List>
           )}
         </AutoSizer>
       </div>

client/src/js/components/pages/Chat/UserList.js

@@ -1,27 +1,58 @@
 import React, { PureComponent } from 'react';
-import { List } from 'react-virtualized/dist/commonjs/List';
+import { VariableSizeList as List } from 'react-window';
-import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import classnames from 'classnames';
 import UserListItem from './UserListItem';
 
 export default class UserList extends PureComponent {
-  componentWillUpdate(nextProps) {
+  getSnapshotBeforeUpdate(prevProps) {
-    if (nextProps.users.size === this.props.users.size) {
+    const { users } = this.props;
-      this.list.forceUpdateGrid();
+
+    if (prevProps.users.length !== users.length) {
+      this.list.current.resetAfterIndex(
+        Math.min(prevProps.users.length, users.length) + 1
+      );
+    } else {
+      this.list.current.forceUpdate();
     }
+
+    return null;
   }
 
-  listRef = el => {
+  getItemHeight = index => {
-    this.list = el;
+    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 - 1]}
-        user={users[index]}
         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}
+              height={height}
-              rowCount={users.length}
+              itemCount={users.length + 2}
-              rowHeight={24}
+              itemKey={this.getItemKey}
-              rowRenderer={this.renderUser}
+              itemSize={this.getItemHeight}
-              className="rvlist-users"
+              estimatedItemSize={24}
-            />
+            >
+              {this.renderUser}
+            </List>
           )}
         </AutoSizer>
       </div>

client/src/js/modules/widthUpdates.js

@@ -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() {
+    function updateWidth(windowWidth) {
-      const windowWidth = window.innerWidth;
       let wrapWidth = windowWidth - scrollBarWidth - messagePadding;
       if (windowWidth > smallScreen) {
         wrapWidth -= menuWidth;
@@ -26,16 +26,6 @@ export default function widthUpdates({ store }) {
       }
     }
 
-    let resizeRAF;
+    addResizeListener(updateWidth, true);
-
-    function resize() {
-      if (resizeRAF) {
-        window.cancelAnimationFrame(resizeRAF);
-      }
-      resizeRAF = window.requestAnimationFrame(updateWidth);
-    }
-
-    updateWidth();
-    window.addEventListener('resize', resize);
   });
 }

client/src/js/utils/size.js

@@ -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);
+  }
+}

client/yarn.lock

@@ -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:
+react-virtualized-auto-sizer@^1.0.2:
-  version "9.20.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.20.1.tgz#02dc08fe9070386b8c48e2ac56bce7af0208d22d"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
-  integrity sha512-xIWxBsyNAjceqD3hsE0nw5TcDVxKbIepsHhvS2XneHmNz0KlKxdLdGBmGZBM9ZesEmbZ5EO0Sw70TB1MeCmpbQ==
+  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"
+    "@babel/runtime" "^7.0.0"
-    classnames "^2.2.3"
+    memoize-one "^3.1.1"
-    dom-helpers "^2.4.0 || ^3.0.0"
-    loose-envify "^1.3.0"
-    prop-types "^15.6.0"
-    react-lifecycles-compat "^3.0.4"
 
 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"