Started working on the fixed height/width and dynamic support for aut…

…osizer
Apollo-Spreadsheet · Oct 15, 2020 · 881b49d · 881b49d
1 parent 3f24f8d
commit 881b49d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)