From 881b49d223d3bd265a29d38342259895aff5d135 Mon Sep 17 00:00:00 2001
From: Rodrigo <monstawoodwow@gmail.com>
Date: Thu, 15 Oct 2020 10:16:13 +0100
Subject: [PATCH] Started working on the fixed height/width and dynamic support
 for autosizer

---
 src/gridContainer/GridContainer.tsx | 10 ++++++----
 src/gridWrapper/GridWrapper.tsx     |  2 +-
 src/index.tsx                       |  8 +++++++-
 stories/Basic.stories.tsx           |  6 +++---
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/gridContainer/GridContainer.tsx b/src/gridContainer/GridContainer.tsx
index 17e0a37..28c5f4b 100644
--- a/src/gridContainer/GridContainer.tsx
+++ b/src/gridContainer/GridContainer.tsx
@@ -13,7 +13,8 @@ import shallowDiffers from '../helpers/shallowDiffers'
 
 const useStyles = makeStyles(() => ({
 	root: {
-		// height: '100%',
+		height: '100%',
+		width: '100%',
 		// overflowY: 'hidden',
 		// overflowX: 'hidden',
 		/** @todo Margin remove **/
@@ -140,6 +141,7 @@ export const GridContainer = React.memo(
 
 		function render(containerWidth: number, containerHeight = 400) {
 			const remainingWidth = buildColumnTotalWidth(containerWidth)
+			console.log({ containerWidth, containerHeight })
 				return (
 					<ColumnSizer
 						columnMinWidth={minColumnWidth}
@@ -190,9 +192,9 @@ export const GridContainer = React.memo(
 		}
 
 		return (
-			<div id="grid-container" className={classes.root} ref={gridContainerRef}>
-				<AutoSizer disableHeight>{({ width }) => render(width)}</AutoSizer>
-			</div>
+				<div id="grid-container" className={classes.root} ref={gridContainerRef}>
+					<AutoSizer disableHeight={true} defaultHeight={800}>{({ width, height }) => render(width, height)}</AutoSizer>
+				</div>
 		)
 	},
 )
diff --git a/src/gridWrapper/GridWrapper.tsx b/src/gridWrapper/GridWrapper.tsx
index a65de82..6144e7e 100644
--- a/src/gridWrapper/GridWrapper.tsx
+++ b/src/gridWrapper/GridWrapper.tsx
@@ -86,7 +86,7 @@ const GridWrapper = forwardRef((props: GridWrapperProps, componentRef: React.Ref
 	useEffect(() => {
 		cache.clearAll()
 		gridRef.current?.recomputeGridSize()
-	}, [props.data])
+	}, [props.data, props.width, props.height])
 
 	const onCellDoubleClick =
 		({ event, cell, columnIndex, rowIndex }: CellEventParams<React.MouseEvent<HTMLDivElement>>) => {
diff --git a/src/index.tsx b/src/index.tsx
index 3967d51..3010ac3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -39,6 +39,12 @@ const useStyles = makeStyles(() => ({
 			display: 'none',
 		},
 	},
+	apolloRoot: {
+		height: '100%',
+		width: '100%',
+		flex: 1,
+		display: 'flex'
+	},
 	bodyContainer: {
 		outline: 'none',
 		// 'scrollbar-width': 'none',
@@ -246,7 +252,7 @@ export const ApolloSpreadSheet = forwardRef(
 		// }, [props.outsideClickDeselects, focused])
 
 		return (
-				<div id="apollo-spreadhsheet" ref={rootRef} style={{ height: '100%', width: '100%'}}>
+				<div className={classes.apolloRoot} ref={rootRef}>
 					<GridContainer
 						headers={headers}
 						minColumnWidth={minColumnWidth}
diff --git a/stories/Basic.stories.tsx b/stories/Basic.stories.tsx
index fbf8bd8..cbff512 100644
--- a/stories/Basic.stories.tsx
+++ b/stories/Basic.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import { ApolloSpreadSheet } from '../src'
-import { Button, Checkbox, FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'
+import { Box, Button, Checkbox, FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
 import { GridApi } from '../src/types/grid-api.type'
 import { GridTheme } from '../src/types/grid-theme'
 import { makeStyles } from '@material-ui/core/styles'
@@ -223,7 +223,7 @@ const MainTable = () => {
 	}
 
 	return (
-		<>
+		<Box height={"90vh"} width={"100%"} style={{ overflow: 'hidden'}}>
 			<Button variant="contained" color={'primary'} onClick={createRowOnBottom}>
 				Create row on bottom
 			</Button>
@@ -286,7 +286,7 @@ const MainTable = () => {
 						: undefined
 				}
 			/>
-		</>
+		</Box>
 	)
 }
 storiesOf('VirtualizedTable (DEMOS)', module)