Skip to content

Commit 8d90811

Browse files
AysnineAysnine
committed
Fix unique id and Add drag in item
1 parent 44c029a commit 8d90811

16 files changed

+330
-88
lines changed

‎react/README.md

+74-9
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,7 @@ function Simple() {
3535
}));
3636

3737
return (
38-
<GridStackContainer
39-
initialOptions={uncontrolledInitialOptions}
40-
renderRawContent
41-
>
38+
<GridStackContainer initialOptions={uncontrolledInitialOptions}>
4239
<GridStackItem id="item1">
4340
<div style={{ color: "yellow" }}>hello</div>
4441
</GridStackItem>
@@ -70,7 +67,7 @@ function Simple() {
7067
{/* Custom toolbar component. Access to grid stack context by useGridStackContext hook. */}
7168
<Toolbar />
7269

73-
<GridStackRender renderRawContent>
70+
<GridStackRender>
7471
<GridStackItem id="item1">
7572
<div style={{ color: "yellow" }}>hello</div>
7673
</GridStackItem>
@@ -84,6 +81,61 @@ function Simple() {
8481
}
8582
```
8683

84+
**Drag In**
85+
86+
Drag items from outside into the grid.
87+
88+
Code here: [src/examples/004-drag-in/index.tsx](src/examples/004-drag-in/index.tsx)
89+
90+
```tsx
91+
function DragIn() {
92+
const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
93+
...defaultGridOptions,
94+
children: [
95+
{ id: "004-item1", h: 2, w: 2, x: 0, y: 0 },
96+
{ id: "004-item2", h: 2, w: 2, x: 2, y: 0 },
97+
],
98+
}));
99+
100+
return (
101+
<div>
102+
<div
103+
style={{
104+
padding: "10px",
105+
display: "flex",
106+
flexDirection: "row",
107+
gap: "10px",
108+
border: "1px solid gray",
109+
marginBottom: "10px",
110+
}}
111+
>
112+
<GridStackDragInItem widget={{ h: 2, w: 2 }}>
113+
<div
114+
style={{
115+
border: "1px dashed green ",
116+
backgroundColor: "lime",
117+
padding: "0 10px",
118+
}}
119+
>
120+
Drag me add to the grid
121+
</div>
122+
</GridStackDragInItem>
123+
</div>
124+
125+
<GridStackContainer initialOptions={uncontrolledInitialOptions}>
126+
<GridStackItem id="004-item1">
127+
<div style={{ color: "yellow" }}>hello</div>
128+
</GridStackItem>
129+
130+
<GridStackItem id="004-item2">
131+
<div style={{ color: "blue" }}>grid</div>
132+
</GridStackItem>
133+
</GridStackContainer>
134+
</div>
135+
);
136+
}
137+
```
138+
87139
**Advanced**
88140

89141
Render item with widget map component info.
@@ -219,7 +271,7 @@ function CustomHandle() {
219271

220272
return (
221273
<GridStackProvider initialOptions={uncontrolledInitialOptions}>
222-
<GridStackRender renderRawContent>
274+
<GridStackRender>
223275
<GridStackItem id="item1">
224276
<div>Custom Handle</div>
225277

@@ -268,8 +320,6 @@ Render GridStack root container component.
268320

269321
```typescript
270322
type GridStackRenderProps = {
271-
renderRawContent?: boolean;
272-
273323
children: React.ReactNode;
274324
};
275325
```
@@ -295,6 +345,20 @@ type GridStackHandleReInitializerProps = {
295345
};
296346
```
297347

348+
#### GridStackDragInItem
349+
350+
Experimental component for dragging items from outside into the grid.
351+
352+
```typescript
353+
type GridStackDragInItemProps = {
354+
widget: Omit<GridStackWidget, "content">; // Widget configuration without content
355+
dragOptions?: DDDragOpt; // Drag options
356+
content?: ReactNode; // Optional content to render in the dragged clone
357+
children: React.ReactNode;
358+
// Plus other div props
359+
};
360+
```
361+
298362
### Contexts
299363

300364
#### GridStackContext
@@ -342,7 +406,7 @@ Provide rendering related functionality context.
342406

343407
```typescript
344408
type GridStackRenderContextType = {
345-
getWidgetContainer: (widgetId: string) => HTMLElement | null;
409+
getContainerByWidgetId: (widgetId: string) => HTMLElement | null;
346410
};
347411
```
348412

@@ -383,5 +447,6 @@ export type {
383447
GridStackItemProps,
384448
GridStackItemContextType,
385449
GridStackHandleReInitializerProps,
450+
GridStackDragInItemProps,
386451
};
387452
```

‎react/src/App.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Simple } from "./examples/001-simple";
44
import { Nested } from "./examples/002-nested";
55
import { CustomHandle } from "./examples/003-custom-handle";
66
import { Advanced } from "./examples/009-advanced";
7+
import { DragIn } from "./examples/004-drag-in";
78

89
export default function App() {
910
return (
@@ -19,6 +20,8 @@ export default function App() {
1920
<Nested />
2021
<h2>Custom Handle</h2>
2122
<CustomHandle />
23+
<h2 id="drag-in">Drag In (Copy)</h2>
24+
<DragIn />
2225
<h2 id="advanced">Advanced</h2>
2326
<Advanced />
2427
</div>

‎react/src/examples/000-simple/index.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,18 @@ export function Simple0() {
88
const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
99
...defaultGridOptions,
1010
children: [
11-
{ id: "item1", h: 2, w: 2, x: 0, y: 0 },
12-
{ id: "item2", h: 2, w: 2, x: 2, y: 0 },
11+
{ id: "000-item1", h: 2, w: 2, x: 0, y: 0 },
12+
{ id: "000-item2", h: 2, w: 2, x: 2, y: 0 },
1313
],
1414
}));
1515

1616
return (
17-
<GridStackContainer
18-
initialOptions={uncontrolledInitialOptions}
19-
renderRawContent
20-
>
21-
<GridStackItem id="item1">
17+
<GridStackContainer initialOptions={uncontrolledInitialOptions}>
18+
<GridStackItem id="000-item1">
2219
<div style={{ color: "yellow" }}>hello</div>
2320
</GridStackItem>
2421

25-
<GridStackItem id="item2">
22+
<GridStackItem id="000-item2">
2623
<div style={{ color: "blue" }}>grid</div>
2724
</GridStackItem>
2825
</GridStackContainer>

‎react/src/examples/001-simple/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@ export function Simple() {
1313
const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
1414
...defaultGridOptions,
1515
children: [
16-
{ id: "item1", h: 2, w: 2, x: 0, y: 0 },
17-
{ id: "item2", h: 2, w: 2, x: 2, y: 0 },
16+
{ id: "001-item1", h: 2, w: 2, x: 0, y: 0 },
17+
{ id: "001-item2", h: 2, w: 2, x: 2, y: 0 },
1818
],
1919
}));
2020

2121
return (
2222
<GridStackProvider initialOptions={uncontrolledInitialOptions}>
2323
<Toolbar />
2424

25-
<GridStackRender renderRawContent>
26-
<GridStackItem id="item1">
25+
<GridStackRender>
26+
<GridStackItem id="001-item1">
2727
<div style={{ color: "yellow" }}>hello</div>
2828
</GridStackItem>
2929

30-
<GridStackItem id="item2">
30+
<GridStackItem id="001-item2">
3131
<div style={{ color: "blue" }}>grid</div>
3232
</GridStackItem>
3333
</GridStackRender>

‎react/src/examples/002-nested/index.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ export function Nested() {
1313
const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
1414
...defaultGridOptions,
1515
children: [
16-
{ id: "item1", h: 2, w: 2, x: 0, y: 0 },
17-
{ id: "item2", h: 2, w: 2, x: 2, y: 0 },
16+
{ id: "002-item1", h: 2, w: 2, x: 0, y: 0 },
17+
{ id: "002-item2", h: 2, w: 2, x: 2, y: 0 },
1818
{
19-
id: "sub-grid-1",
19+
id: "002-sub-grid-1",
2020
h: 5,
2121
sizeToContent: true,
2222
subGridOpts: {
2323
children: [
2424
{
25-
id: "sub-grid-1-title",
25+
id: "002-sub-grid-1-title",
2626
locked: true,
2727
noMove: true,
2828
noResize: true,
@@ -31,8 +31,8 @@ export function Nested() {
3131
y: 0,
3232
content: "Sub Grid 1",
3333
},
34-
{ id: "item3", h: 2, w: 2, x: 0, y: 1 },
35-
{ id: "item4", h: 2, w: 2, x: 2, y: 0 },
34+
{ id: "002-item3", h: 2, w: 2, x: 0, y: 1 },
35+
{ id: "002-item4", h: 2, w: 2, x: 2, y: 0 },
3636
],
3737
},
3838
w: 12,
@@ -46,20 +46,20 @@ export function Nested() {
4646
<GridStackProvider initialOptions={uncontrolledInitialOptions}>
4747
<Toolbar />
4848

49-
<GridStackRender renderRawContent>
50-
<GridStackItem id="item1">
49+
<GridStackRender>
50+
<GridStackItem id="002-item1">
5151
<div style={{ color: "yellow" }}>hello</div>
5252
</GridStackItem>
5353

54-
<GridStackItem id="item2">
54+
<GridStackItem id="002-item2">
5555
<div style={{ color: "blue" }}>grid</div>
5656
</GridStackItem>
5757

58-
<GridStackItem id="item3">
58+
<GridStackItem id="002-item3">
5959
<div style={{ color: "brown" }}>nested one</div>
6060
</GridStackItem>
6161

62-
<GridStackItem id="item4">
62+
<GridStackItem id="002-item4">
6363
<div style={{ color: "purple" }}>nested two</div>
6464
</GridStackItem>
6565
</GridStackRender>

‎react/src/examples/003-custom-handle/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import {
1414
export function CustomHandle() {
1515
const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
1616
...defaultGridOptions,
17-
children: [{ id: "item1", h: 2, w: 2, x: 0, y: 0 }],
17+
children: [{ id: "003-item1", h: 2, w: 2, x: 0, y: 0 }],
1818
}));
1919

2020
return (
2121
<GridStackProvider initialOptions={uncontrolledInitialOptions}>
22-
<GridStackRender renderRawContent>
23-
<GridStackItem id="item1">
22+
<GridStackRender>
23+
<GridStackItem id="003-item1">
2424
<div>Custom Handle</div>
2525

2626
{/* Experimental: Render item with custom handle */}

‎react/src/examples/004-drag-in/index.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { GridStackOptions } from "gridstack";
2+
import { useState } from "react";
3+
import { defaultGridOptions } from "../../default-grid-options";
4+
import { GridStackItem, GridStackDragInItem } from "../../lib";
5+
import { GridStackContainer } from "../../lib/grid-stack-container";
6+
7+
export function DragIn() {
8+
const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
9+
...defaultGridOptions,
10+
children: [
11+
{ id: "004-item1", h: 2, w: 2, x: 0, y: 0 },
12+
{ id: "004-item2", h: 2, w: 2, x: 2, y: 0 },
13+
],
14+
}));
15+
16+
return (
17+
<div>
18+
<div
19+
style={{
20+
padding: "10px",
21+
display: "flex",
22+
flexDirection: "row",
23+
gap: "10px",
24+
border: "1px solid gray",
25+
marginBottom: "10px",
26+
}}
27+
>
28+
<GridStackDragInItem widget={{ h: 2, w: 2 }}>
29+
<div
30+
style={{
31+
border: "1px dashed green ",
32+
backgroundColor: "lime",
33+
padding: "0 10px",
34+
}}
35+
>
36+
Drag me add to the grid
37+
</div>
38+
</GridStackDragInItem>
39+
</div>
40+
41+
<GridStackContainer initialOptions={uncontrolledInitialOptions}>
42+
<GridStackItem id="004-item1">
43+
<div style={{ color: "yellow" }}>hello</div>
44+
</GridStackItem>
45+
46+
<GridStackItem id="004-item2">
47+
<div style={{ color: "blue" }}>grid</div>
48+
</GridStackItem>
49+
</GridStackContainer>
50+
</div>
51+
);
52+
}

0 commit comments

Comments
 (0)