Newer
Older
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;
}
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();
useEffect(() => {
setMounted(true);
window.addEventListener('resize', calcHeights);
return () => window.removeEventListener('resize', calcHeights);
<div
ref={containerRef}
style={{
display: mounted ? 'block' : 'none',
rowHeight={rowHeight}
margin={[20, 20]}
draggableHandle=".drag-handle"
isDraggable={true}
isResizable={true}
useCSSTransforms={true}
resizeHandle={
<div className="custom-resize-handle">
<div className="resize-handle-inner" />
</div>
}
</ResponsiveGridLayout>
</div>
);
};