grid.layout.tsx

import React, { ReactElement, useEffect, useRef, useState } from 'react';
import RGL, { WidthProvider } from "react-grid-layout";

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import './grid.layout.scss';

const ResponsiveGridLayout = WidthProvider(RGL);

interface GridLayoutProps {
    children: ReactElement;
}

const RowCount = 2;
const padding = 80;

export const GridLayout: React.FC<GridLayoutProps> = ({ children }) => {
    const [rowHeight, setRowHeight] = useState<number>(0);
    const [containerHeight, setContainerHeight] = useState<number>(0);
    const [mounted, setMounted] = useState<boolean>(false);
    const containerRef = useRef<HTMLDivElement>(null);

    const layouts = [
        { i: 'device-list', x: 0, y: 0, w: 2, h: 1, minW: 1, minH: 1 },
        { i: 'device-metadata', x: 0, y: 1, w: 2, h: 1, minW: 1, minH: 1 },
        { i: 'device-details', x: 3, y: 0, w: 2, h: 2, minW: 1, minH: 1 }
    ];

    const calcHeights = () => {
        const container = containerRef.current;
        if (!container) {
            const height = document.body.clientHeight * 0.7;
            setRowHeight(Math.floor(height / RowCount));
            return;
        }
        const { top } = container.getBoundingClientRect();
        const height = document.body.clientHeight - (top + padding);
        setContainerHeight(height);
        setRowHeight(Math.floor(height / RowCount));
    };

    useEffect(() => {
        calcHeights();
    }, [containerRef.current]);

    useEffect(() => {
        setMounted(true);
        window.addEventListener('resize', calcHeights);
        return () => window.removeEventListener('resize', calcHeights);
    }, []);

    return (
        <div
            ref={containerRef}
            style={{
                display: mounted ? 'block' : 'none',
                height: `${containerHeight}px`,
            }}
        >
            <ResponsiveGridLayout
                cols={5}
                layout={layouts}
                maxRows={RowCount}
                rowHeight={rowHeight}
                margin={[20, 20]}
                draggableHandle=".drag-handle"
                isDraggable={true}
                isResizable={true}
                resizeHandles={['se']}
                useCSSTransforms={true}
                resizeHandle={
                    <div className="custom-resize-handle">
                        <div className="resize-handle-inner" />
                    </div>
                }
            >
                {children.props.children}
            </ResponsiveGridLayout>
        </div>
    );
};