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.

1 files changed, 19 insertions, 18 deletions

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