Constraints

1"use client";
2 
3import {
4  DndGrid,
5  defaultConstraints,
6  type Layout,
7  type LayoutConstraint,
8  snapToGrid,
9} from "@dnd-grid/react";
10import { useState } from "react";
11 
12const topBandConstraint: LayoutConstraint = {
13  name: "topBand(4)",
14  constrainPosition(item, x, y) {
15    const maxY = Math.max(0, 4 - item.h);
16    return { x, y: Math.min(y, maxY) };
17  },
18};
19 
20const gridConstraints: LayoutConstraint[] = [
21  ...defaultConstraints,
22  snapToGrid(2, 1),
23];
24 
25const initialLayout: Layout = [
26  { id: "snap", x: 0, y: 0, w: 3, h: 2 },
27  {
28    id: "limits",
29    x: 3,
30    y: 0,
31    w: 3,
32    h: 2,
33    minW: 2,
34    maxW: 5,
35    minH: 2,
36    maxH: 4,
37  },
38  {
39    id: "band",
40    x: 6,
41    y: 0,
42    w: 3,
43    h: 2,
44    constraints: [topBandConstraint],
45  },
46];
47 
48export function ConstraintsExample() {
49  const [layout, setLayout] = useState<Layout>(initialLayout);
50 
51  return (
52    <DndGrid
53      cols={12}
54      constraints={gridConstraints}
55      layout={layout}
56      onLayoutChange={setLayout}
57      rowHeight={50}
58    >
59      {layout.map((item) => (
60        <div className="grid-item" key={item.id}>
61          {item.id}
62        </div>
63      ))}
64    </DndGrid>
65  );
66}