From 142ef97911abaec96c5bc0779b322374437a56b5 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Wed, 8 Jan 2020 22:04:49 +0300 Subject: 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. --- package-lock.json | 5 +++++ package.json | 1 + src/components/SmartList/SmartList.js | 37 ++++++++++++++++++----------------- 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 ( - - {renderItem} - +
+ + {({ width, height }) => ( + + {renderItem} + + )} + +
); }; -- cgit v1.2.3