Skip to content
Snippets Groups Projects
grid.layout.tsx 2.57 KiB
Newer Older
  • Learn to ignore specific revisions
  • 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);
    
            <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>
        );
    };