55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import { Card } from "antd";
|
|
import React, { useState } from "react";
|
|
import { Responsive, WidthProvider } from "react-grid-layout";
|
|
//Combination of the following:
|
|
// /node_modules/react-grid-layout/css/styles.css
|
|
// /node_modules/react-resizable/css/styles.css
|
|
import "./dashboard-grid.styles.css";
|
|
|
|
const ResponsiveReactGridLayout = WidthProvider(Responsive);
|
|
export default function DashboardGridComponent() {
|
|
const [state, setState] = useState({
|
|
layout: [
|
|
{ x: 0, y: 0, w: 2, h: 2 },
|
|
{ x: 1, y: 0, w: 2, h: 2 },
|
|
{ x: 4, y: 0, w: 2, h: 2 }
|
|
]
|
|
});
|
|
|
|
const defaultProps = {
|
|
className: "layout",
|
|
breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
|
|
cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
|
|
rowHeight: 100
|
|
};
|
|
|
|
// We're using the cols coming back from this to calculate where to add new items.
|
|
const onBreakpointChange = (breakpoint, cols) => {
|
|
console.log("breakpoint, cols", breakpoint, cols);
|
|
setState({ ...state, breakpoint: breakpoint, cols: cols });
|
|
};
|
|
|
|
return (
|
|
<div style={{ width: "100%", height: " 100%" }}>
|
|
The Grid.
|
|
<ResponsiveReactGridLayout
|
|
{...defaultProps}
|
|
onBreakpointChange={onBreakpointChange}
|
|
onLayoutChange={layout => {
|
|
console.log("layout", layout);
|
|
setState({ ...state, layout });
|
|
}}
|
|
>
|
|
{state.layout.map((item, index) => {
|
|
console.log("item", item);
|
|
return (
|
|
<Card style={{ width: "100px" }} key={index} data-grid={item}>
|
|
A Card {index}
|
|
</Card>
|
|
);
|
|
})}
|
|
</ResponsiveReactGridLayout>
|
|
</div>
|
|
);
|
|
}
|