import { useLayoutEffect, useState, useRef } from "react"; import { useWindowSize } from "../../hooks/useWindowSize"; import { Box } from "@material-ui/core"; export const ViewPanel = ({ children, bottomElementId, offset, ...rest }) => { const windowSize = useWindowSize(); const [height, setHeight] = useState(0); const ref = useRef(); useLayoutEffect(() => { if (windowSize.height) { try { const boundingRect = ref.current.getBoundingClientRect(); const bottomElementRect = document.getElementById(bottomElementId).getBoundingClientRect(); let height = Math.round(Math.abs(boundingRect.top - bottomElementRect.top)); if (offset) { height -= offset; } setHeight(height); } catch (error) { setHeight("auto"); } } }, [windowSize, bottomElementId, offset]); return ( <Box ref={ref} style={{ height }} {...rest}> {children} </Box> ); };