Skip to content

Commit 2ec824c

Browse files
hbcarloshbcarlos
committed
Merge branch 'develop' of https://github.com/gridstack/gridstack.js into develop
2 parents 84cec8d + 8500483 commit 2ec824c

28 files changed

+315
-29
lines changed

‎demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ <h1>Demos</h1>
1515
<li><a href="nested.html">Nested grids</a></li>
1616
<li><a href="responsive.html">Responsive</a></li>
1717
<li><a href="react.html">ReactJS</a></li>
18+
<li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
1819
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
1920
<li><a href="serialization.html">Serialization</a></li>
2021
<li><a href="static.html">Static</a></li>

‎demo/react-hooks.html

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Gridstack.js React integration example</title>
8+
<link rel="stylesheet" href="demo.css" />
9+
<script src="../dist/gridstack-h5.js"></script>
10+
11+
<!-- Scripts to use react inside html -->
12+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
13+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
14+
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
15+
</head>
16+
17+
<body>
18+
<div>
19+
<h1>Using GridStack.js with React hooks</h1>
20+
<p>
21+
As with any virtualDOM-based framework, you need to check if Reacthas rendered the DOM (or any updates to it)
22+
<strong>before</strong> you initialize GridStack or call its methods. This example shows how to make rendered
23+
components widgets:
24+
</p>
25+
<ol>
26+
<li>Render items, each with a reference</li>
27+
<li>Convert each rendered item to a widget using the reference and the <a
28+
href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">
29+
makeWidget</a> function</li>
30+
</ol>
31+
</div>
32+
<div>
33+
<h2>Controlled stack</h2>
34+
<div id="controlled-stack"></div>
35+
</div>
36+
<div>
37+
<h2>Uncontrolled stack</h2>
38+
<div id="uncontrolled-stack"></div>
39+
</div>
40+
</body>
41+
42+
<script type="text/babel">
43+
const { useState, useEffect, createRef, useRef } = React
44+
45+
const Item = ({ id }) => <div>I am item: {id}</div>
46+
47+
//
48+
// Controlled example
49+
//
50+
51+
const ControlledStack = ({ items, addItem }) => {
52+
const refs = useRef({})
53+
const gridRef = useRef()
54+
55+
if (Object.keys(refs.current).length !== items.length) {
56+
items.forEach(({ id }) => {
57+
refs.current[id] = refs.current[id] || createRef()
58+
})
59+
}
60+
61+
useEffect(() => {
62+
gridRef.current =
63+
gridRef.current ||
64+
GridStack.init(
65+
{
66+
float: true,
67+
},
68+
'.controlled'
69+
)
70+
const grid = gridRef.current
71+
grid.batchUpdate()
72+
grid.removeAll(false)
73+
items.forEach(({ id }) => grid.makeWidget(refs.current[id].current))
74+
grid.commit()
75+
}, [items])
76+
77+
return (
78+
<div>
79+
<button onClick={addItem}>Add new widget</button>
80+
<div className={`grid-stack controlled`}>
81+
{items.map((item, i) => {
82+
return (
83+
<div ref={refs.current[item.id]} key={item.id} className={'grid-stack-item'}>
84+
<div className="grid-stack-item-content">
85+
<Item {...item} />
86+
</div>
87+
</div>
88+
)
89+
})}
90+
</div>
91+
</div>
92+
)
93+
}
94+
95+
const ControlledExample = () => {
96+
const [items, setItems] = useState([{ id: 'item-1' }, { id: 'item-2' }])
97+
98+
return (
99+
<ControlledStack
100+
items={items}
101+
addItem={() => setItems([...items, { id: `item-${items.length + 1}` }])}
102+
/>
103+
)
104+
}
105+
106+
//
107+
// Uncontrolled example
108+
//
109+
110+
const UncontrolledExample = () => {
111+
const gridRef = useRef()
112+
113+
const [state, setState] = useState({
114+
count: 0,
115+
info: '',
116+
items: [
117+
{ x: 2, y: 1, h: 2 },
118+
{ x: 2, y: 4, w: 3 },
119+
{ x: 4, y: 2 },
120+
{ x: 3, y: 1, h: 2 },
121+
{ x: 0, y: 6, w: 2, h: 2 },
122+
],
123+
})
124+
125+
useEffect(() => {
126+
gridRef.current =
127+
gridRef.current ||
128+
GridStack.init(
129+
{
130+
float: true,
131+
cellHeight: '70px',
132+
minRow: 1,
133+
},
134+
'.uncontrolled'
135+
)
136+
137+
const grid = gridRef.current
138+
139+
grid.on('dragstop', (event, element) => {
140+
const node = element.gridstackNode
141+
setState(prevState => ({
142+
...prevState,
143+
info: `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`,
144+
}))
145+
146+
let timerId
147+
window.clearTimeout(timerId)
148+
timerId = window.setTimeout(() => {
149+
setState(prevState => ({
150+
...prevState,
151+
info: '',
152+
}))
153+
}, 2000)
154+
})
155+
}, [])
156+
157+
return (
158+
<div>
159+
<button
160+
onClick={() => {
161+
const grid = gridRef.current
162+
const node = state.items[state.count] || {
163+
x: Math.round(12 * Math.random()),
164+
y: Math.round(5 * Math.random()),
165+
w: Math.round(1 + 3 * Math.random()),
166+
h: Math.round(1 + 3 * Math.random()),
167+
}
168+
node.id = node.content = String(state.count)
169+
setState(prevState => ({
170+
...prevState,
171+
count: prevState.count + 1,
172+
}))
173+
grid.addWidget(node)
174+
}}
175+
>
176+
Add Widget
177+
</button>
178+
<div>{JSON.stringify(state)}</div>
179+
<section class="grid-stack uncontrolled"></section>
180+
</div>
181+
)
182+
}
183+
184+
ReactDOM.render(<ControlledExample />, document.getElementById('controlled-stack'))
185+
ReactDOM.render(<UncontrolledExample />, document.getElementById('uncontrolled-stack'))
186+
187+
</script>
188+
189+
</html>

‎doc/CHANGES.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8-
- [3.1.2 (2020-12-7)](#311-2020-12-7)
8+
- [3.1.2-dev](#312-dev)
9+
- [3.1.2 (2020-12-7)](#312-2020-12-7)
910
- [3.1.0 (2020-12-4)](#310-2020-12-4)
1011
- [3.0.0 (2020-11-29)](#300-2020-11-29)
1112
- [2.2.0 (2020-11-7)](#220-2020-11-7)
@@ -43,6 +44,10 @@ Change log
4344

4445
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
4546

47+
## 3.1.2-dev
48+
49+
- fix [1535](https://github.com/gridstack/gridstack.js/issues/1535) use batchUpdate() around grid init to make sure gs-y attributes are respected.
50+
4651
## 3.1.2 (2020-12-7)
4752

4853
- fix [1419](https://github.com/gridstack/gridstack.js/issues/1419) dragging into a fixed row grid works better (check if it will fit, else try to append, else won't insert)

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gridstack",
3-
"version": "3.1.2",
3+
"version": "3.1.2-dev",
44
"description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
55
"main": "./dist/gridstack.js",
66
"types": "./dist/gridstack.d.ts",

‎spec/e2e/html/1017-items-no-x-y-for-autoPosition.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
grid items have no x,y position, just size. Used to come up with wrong size and overlap. https://github.com/gridstack/gridstack.js/issues/1017
3-
Now, will have element 5 (autoPosition but small x,y), 1,2,4, then 3 (too big to fit)
3+
Now, will have element 5 (position first with small x,y), 1,2,4, then 3 (too big to fit)
44
-->
55
<!DOCTYPE html>
66
<html lang="en">
@@ -35,7 +35,7 @@
3535
<div class="grid-stack-item" gs-w="3" gs-h="1" gs-id="4">
3636
<div class="grid-stack-item-content">item 4</div>
3737
</div>
38-
<div class="grid-stack-item" gs-x="1" gs-y="1" gs-w="1" gs-h="1" gs-id="5" gs-auto-position="false">
38+
<div class="grid-stack-item" gs-x="1" gs-y="1" gs-w="1" gs-h="1" gs-id="5">
3939
<div class="grid-stack-item-content">item 5 first</div>
4040
</div>
4141
</div>

‎spec/e2e/html/1535-out-of-order.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Out of order</title>
8+
9+
<link rel="stylesheet" href="../../../demo/demo.css"/>
10+
<script src="../../../dist/gridstack-h5.js"></script>
11+
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>Out of order demo</h1>
16+
<div class="grid-stack">
17+
<div class="grid-stack-item" gs-x="0" gs-y="2" gs-w="12" gs-h="1">
18+
<div class="grid-stack-item-content">
19+
This should be at position <span class="order-number">2</span>
20+
</div>
21+
</div>
22+
<div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="12" gs-h="1">
23+
<div class="grid-stack-item-content">
24+
This should be at position <span class="order-number">1</span>
25+
</div>
26+
</div>
27+
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="12" gs-h="1">
28+
<div class="grid-stack-item-content">
29+
This should be at position <span class="order-number">0</span>
30+
</div>
31+
</div>
32+
<div class="grid-stack-item" gs-x="0" gs-y="4" gs-w="12" gs-h="1">
33+
<div class="grid-stack-item-content">
34+
This should be at position <span class="order-number">4</span>
35+
</div>
36+
</div>
37+
<div class="grid-stack-item" gs-x="0" gs-y="5" gs-w="12" gs-h="1">
38+
<div class="grid-stack-item-content">
39+
This should be at position <span class="order-number">5</span>
40+
</div>
41+
</div>
42+
<div class="grid-stack-item" gs-x="0" gs-y="6" gs-w="12" gs-h="1">
43+
<div class="grid-stack-item-content">
44+
This should be at position <span class="order-number">6</span>
45+
</div>
46+
</div>
47+
<div class="grid-stack-item" gs-x="0" gs-y="7" gs-w="12" gs-h="1">
48+
<div class="grid-stack-item-content">
49+
This should be at position <span class="order-number">7</span>
50+
</div>
51+
</div>
52+
<div class="grid-stack-item" gs-x="0" gs-y="11" gs-w="12" gs-h="1">
53+
<div class="grid-stack-item-content">
54+
This should be at position <span class="order-number">11</span>
55+
</div>
56+
</div>
57+
<div class="grid-stack-item" gs-x="0" gs-y="8" gs-w="12" gs-h="1">
58+
<div class="grid-stack-item-content">
59+
This should be at position <span class="order-number">8</span>
60+
</div>
61+
</div>
62+
<div class="grid-stack-item" gs-x="0" gs-y="9" gs-w="12" gs-h="1">
63+
<div class="grid-stack-item-content">
64+
This should be at position <span class="order-number">9</span>
65+
</div>
66+
</div>
67+
<div class="grid-stack-item" gs-x="0" gs-y="12" gs-w="12" gs-h="1">
68+
<div class="grid-stack-item-content">
69+
This should be at position <span class="order-number">12</span>
70+
</div>
71+
</div>
72+
<div class="grid-stack-item" gs-x="0" gs-y="10" gs-w="12" gs-h="1">
73+
<div class="grid-stack-item-content">
74+
This should be at position <span class="order-number">10</span>
75+
</div>
76+
</div>
77+
<div class="grid-stack-item" gs-x="0" gs-y="3" gs-w="12" gs-h="1">
78+
<div class="grid-stack-item-content">
79+
This should be at position <span class="order-number">3</span>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
<script src="events.js"></script>
85+
<script type="text/javascript">
86+
GridStack.init({cellHeight: 70});
87+
</script>
88+
</body>
89+
</html>

‎src/gridstack-dd.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-GridStackDD.get().ts 3.1.2 @preserve
1+
// gridstack-GridStackDD.get().ts 3.1.2-dev @preserve
22

33
/**
44
* https://gridstackjs.com/

‎src/gridstack-ddi.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-ddi.ts 3.1.2 @preserve
1+
// gridstack-ddi.ts 3.1.2-dev @preserve
22

33
/**
44
* https://gridstackjs.com/

‎src/gridstack-engine.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-engine.ts 3.1.2 @preserve
1+
// gridstack-engine.ts 3.1.2-dev @preserve
22

33
/**
44
* https://gridstackjs.com/

‎src/gridstack-extra.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* gridstack 3.1.2 extra CSS for [2-11] columns (non default)
2+
* gridstack 3.1.2-dev extra CSS for [2-11] columns (non default)
33
* https://gridstackjs.com/
44
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
55
* gridstack.js may be freely distributed under the MIT license.

0 commit comments

Comments
 (0)