Fix height resizing of VirtualList (#3072)

package.json

@@ -226,6 +226,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
+    "react-virtualized-auto-sizer": "^1.0.5",
     "readable-stream": "^3.6.0",
     "request": "^2.88.2",
     "request-promise-native": "^1.0.9",
@@ -285,6 +286,7 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/react-select": "3.1.2",
     "@types/react-table": "^7.7.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/readable-stream": "^2.3.9",
     "@types/request": "^2.48.5",
@@ -311,7 +313,6 @@
     "circular-dependency-plugin": "^5.2.2",
     "color": "^3.1.2",
     "concurrently": "^5.2.0",
-    "css-element-queries": "^1.2.3",
     "css-loader": "^5.2.6",
     "deepdash": "^5.3.5",
     "dompurify": "^2.0.11",

src/renderer/components/virtual-list/virtual-list.tsx

@@ -29,10 +29,9 @@ import { Align, ListChildComponentProps, ListOnScrollProps, VariableSizeList } f
 import { cssNames, noop } from "../../utils";
 import type { TableRowProps } from "../table/table-row";
 import type { ItemObject } from "../../item.store";
-import throttle from "lodash/throttle";
 import debounce from "lodash/debounce";
 import isEqual from "lodash/isEqual";
-import ResizeSensor from "css-element-queries/src/ResizeSensor";
+import AutoSizer from "react-virtualized-auto-sizer";
 
 interface Props<T extends ItemObject = any> {
   items: T[];
@@ -48,7 +47,6 @@ interface Props<T extends ItemObject = any> {
 }
 
 interface State {
-  height: number;
   overscanCount: number;
 }
 
@@ -63,17 +61,13 @@ export class VirtualList extends Component<Props, State> {
   static defaultProps = defaultProps as object;
 
   private listRef = React.createRef<VariableSizeList>();
-  private parentRef = React.createRef<HTMLDivElement>();
 
   public state: State = {
     overscanCount: this.props.initialOffset,
-    height: 0,
   };
 
   componentDidMount() {
-    this.setListHeight();
     this.scrollToSelectedItem();
-    new ResizeSensor(this.parentRef.current as any as Element, this.setListHeight);
     this.setState({ overscanCount: this.props.readyOffset });
   }
 
@@ -85,18 +79,6 @@ export class VirtualList extends Component<Props, State> {
     }
   }
 
-  setListHeight = throttle(() => {
-    const { parentRef, state: { height } } = this;
-
-    if (!parentRef.current) return;
-    const parentHeight = parentRef.current.clientHeight;
-
-    if (parentHeight === height) return;
-    this.setState({
-      height: parentHeight,
-    });
-  }, 250);
-
   getItemSize = (index: number) => this.props.rowHeights[index];
 
   scrollToSelectedItem = debounce(() => {
@@ -114,28 +96,32 @@ export class VirtualList extends Component<Props, State> {
 
   render() {
     const { width, className, items, getRow, onScroll, outerRef } = this.props;
-    const { height, overscanCount } = this.state;
+    const { overscanCount } = this.state;
     const rowData: RowData = {
       items,
       getRow
     };
 
     return (
-      <div className={cssNames("VirtualList", className)} ref={this.parentRef}>
-        <VariableSizeList
-          className="list"
-          width={width}
-          height={height}
-          itemSize={this.getItemSize}
-          itemCount={items.length}
-          itemData={rowData}
-          overscanCount={overscanCount}
-          ref={this.listRef}
-          outerRef={outerRef}
-          onScroll={onScroll}
-        >
-          {Row}
-        </VariableSizeList>
+      <div className={cssNames("VirtualList", className)}>
+        <AutoSizer disableWidth>
+          {({ height }) => (
+            <VariableSizeList
+              className="list"
+              width={width}
+              height={height}
+              itemSize={this.getItemSize}
+              itemCount={items.length}
+              itemData={rowData}
+              overscanCount={overscanCount}
+              ref={this.listRef}
+              outerRef={outerRef}
+              onScroll={onScroll}
+            >
+              {Row}
+            </VariableSizeList>
+          )}
+        </AutoSizer>
       </div>
     );
   }

yarn.lock

@@ -1666,6 +1666,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized-auto-sizer@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272"
+  integrity sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-window@^1.8.2":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
@@ -4358,11 +4365,6 @@ css-box-model@^1.2.0:
   dependencies:
     tiny-invariant "^1.0.6"
 
-css-element-queries@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.3.tgz#e14940b1fcd4bf0da60ea4145d05742d7172e516"
-  integrity sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q==
-
 css-loader@^5.2.6:
   version "5.2.6"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
@@ -11997,6 +11999,11 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized-auto-sizer@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
+  integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
+
 react-window@^1.8.5:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"