Adjust LeftPane height when NetworkDialog pops out of view

ts/components/LeftPane.tsx

@@ -1,5 +1,6 @@
+import Measure, { BoundingRect, MeasuredComponentProps } from 'react-measure';
 import React from 'react';
-import { AutoSizer, List } from 'react-virtualized';
+import { List } from 'react-virtualized';
 import { debounce, get } from 'lodash';
 
 import {
@@ -54,6 +55,12 @@ export class LeftPane extends React.Component<PropsType> {
   public containerRef = React.createRef<HTMLDivElement>();
   public setFocusToFirstNeeded = false;
   public setFocusToLastNeeded = false;
+  public state = {
+    dimensions: {
+      height: 0,
+      width: 0,
+    },
+  };
 
   public renderRow = ({
     index,
@@ -157,6 +164,10 @@ export class LeftPane extends React.Component<PropsType> {
     }
   };
 
+  public handleResize = ({ bounds }: { bounds: BoundingRect }) => {
+    this.setState({ dimensions: bounds });
+  };
+
   public handleFocus = () => {
     const { selectedConversationId } = this.props;
     const { current: container } = this.containerRef;
@@ -327,36 +338,34 @@ export class LeftPane extends React.Component<PropsType> {
     //   It also ensures that we scroll to the top when switching views.
     const listKey = showArchived ? 1 : 0;
 
+    const { height, width } = this.state.dimensions;
+
     // Note: conversations is not a known prop for List, but it is required to ensure that
     //   it re-renders when our conversation data changes. Otherwise it would just render
     //   on startup and scroll.
     const list = (
       <div
+        aria-live="polite"
         className="module-left-pane__list"
         key={listKey}
-        aria-live="polite"
+        onFocus={this.handleFocus}
+        onKeyDown={this.handleKeyDown}
+        ref={this.containerRef}
         role="group"
         tabIndex={-1}
-        ref={this.containerRef}
-        onKeyDown={this.handleKeyDown}
-        onFocus={this.handleFocus}
       >
-        <AutoSizer>
-          {({ height, width }) => (
         <List
-              ref={this.listRef}
-              onScroll={this.onScroll}
           className="module-left-pane__virtual-list"
           conversations={conversations}
           height={height}
+          onScroll={this.onScroll}
+          ref={this.listRef}
           rowCount={length}
           rowHeight={68}
-              tabIndex={-1}
           rowRenderer={this.renderRow}
+          tabIndex={-1}
           width={width}
         />
-          )}
-        </AutoSizer>
       </div>
     );
 
@@ -390,7 +399,9 @@ export class LeftPane extends React.Component<PropsType> {
     } = this.props;
 
     return (
-      <div className="module-left-pane">
+      <Measure bounds={true} onResize={this.handleResize}>
+        {({ measureRef }: MeasuredComponentProps) => (
+          <div className="module-left-pane" ref={measureRef}>
             <div className="module-left-pane__header">
               {showArchived ? this.renderArchivedHeader() : renderMainHeader()}
             </div>
@@ -399,6 +410,8 @@ export class LeftPane extends React.Component<PropsType> {
             {renderUpdateDialog()}
             {this.renderList()}
           </div>
+        )}
+      </Measure>
     );
   }
 }

ts/util/lint/exceptions.json

@@ -11644,7 +11644,7 @@
     "rule": "React-createRef",
     "path": "ts/components/LeftPane.js",
     "line": "        this.listRef = react_1.default.createRef();",
-    "lineNumber": 15,
+    "lineNumber": 16,
     "reasonCategory": "usageTrusted",
     "updated": "2019-11-05T01:14:21.081Z",
     "reasonDetail": "Used for focus management"