Wrap SmartList into AutoSizer

This component now takes all available space, so if you want
to use it, you have to put it into a container which already
has non-zero width and height.

This commit temporarily breaks Scoreboard page.

3 files changed, 25 insertions, 18 deletions

diff --git a/package-lock.json b/package-lock.json
index d85924a..294ec7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11352,6 +11352,11 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-virtualized-auto-sizer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
+      "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
+    },
     "react-window": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",
diff --git a/package.json b/package.json
index eeba040..df38254 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0",
+    "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5"
   },
   "scripts": {
diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
index 6cd774b..975cbbd 100644
--- a/src/components/SmartList/SmartList.js
+++ b/src/components/SmartList/SmartList.js
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { FixedSizeList } from "react-window";
+import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core';
 
 
 const useStyles = makeStyles(theme => ({
@@ -12,25 +13,25 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const SmartList = ({ height, width, cellHeight, itemCount, renderItem }) => {
+const SmartList = ({ itemSize, itemCount, renderItem }) => {
   const classes = useStyles();
 
-  if (!height) {
-    const windowHeight = window.innerHeight;
-    const headerHeight = document.getElementsByClassName("MuiAppBar-root")[0].clientHeight;
-    height = windowHeight - headerHeight
-  }
-
   return (
-    <FixedSizeList
-      height={height}
-      width={width}
-      itemSize={cellHeight}
-      itemCount={itemCount}
-      className={classes.root}
-    >
-      {renderItem}
-    </FixedSizeList>
+    <div style={{ flex: '1 1 auto'}}>
+      <AutoSizer>
+        {({ width, height }) => (
+          <FixedSizeList
+            height={height}
+            width={width}
+            itemSize={itemSize}
+            itemCount={itemCount}
+            className={classes.root}
+          >
+            {renderItem}
+          </FixedSizeList>
+        )}
+      </AutoSizer>
+    </div>
   );
 };