Skip to content

Commit 23dd97d

Browse files
STRMLSTRML
authored
Merge pull request react-grid-layout#741 from jhob/feat/toolbox-click
Toolbox example
2 parents 9ff2d83 + 3f0a846 commit 23dd97d

File tree

6 files changed

+354
-72
lines changed

6 files changed

+354
-72
lines changed

‎examples/13-error-case.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ <h3>React-Grid-Layout Demo 13 - Error Case</h3>
1616
<li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/13-error-case.jsx">View this example's source</a></li>
1717

1818
<li><a href="12-prevent-collision.html"><b>⇠</b> View the previous example: "Prevent Collision"</a></li>
19-
</ul>
19+
20+
<li><a href="14-toolbox.html"><b>⇢ </b>View the next example: "Toolbox"</a></li>
21+
</ul>
2022
<p>This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not move over 3.</p>
2123
<div id="content"></div>
2224
</body>

‎examples/14-toolbox.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!--
2+
Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
3+
-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<script src="http://localhost:4002/dist/commons.js"></script>
9+
<script src="http://localhost:4002/dist/14-toolbox.bundle.js"></script>
10+
<title>RGL Example 14 - Toolbox</title>
11+
</head>
12+
<body>
13+
<h3>React-Grid-Layout Demo 14 - Toolbox</h3>
14+
<ul>
15+
<li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
16+
<li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/14-toolbox.jsx">View this example's source</a></li>
17+
18+
<li><a href="13-error-case.html"><b>⇠</b> View the previous example: "Error Case"</a></li>
19+
</ul>
20+
<p>This includes an interactive toolbox. Try dragging widgets into it!</p>
21+
<div id="content"></div>
22+
</body>
23+
</html>

‎examples/example-styles.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ body {
5050
.react-grid-item .add {
5151
cursor: pointer;
5252
}
53-
.react-grid-dragHandleExample{
53+
.react-grid-dragHandleExample {
5454
cursor: move; /* fallback if grab cursor is unsupported */
5555
cursor: grab;
5656
cursor: -moz-grab;
@@ -60,3 +60,38 @@ li b {
6060
font-size: 19px;
6161
line-height: 14px;
6262
}
63+
64+
.toolbox {
65+
background-color: #dfd;
66+
width: 100%;
67+
height: 120px;
68+
overflow: scroll;
69+
}
70+
71+
.hide-button {
72+
cursor: pointer;
73+
position: absolute;
74+
font-size: 20px;
75+
top: 0px;
76+
right: 5px;
77+
}
78+
79+
.toolbox__title {
80+
font-size: 24px;
81+
margin-bottom: 5px;
82+
}
83+
.toolbox__items {
84+
display: block;
85+
}
86+
.toolbox__items__item {
87+
display: inline-block;
88+
text-align: center;
89+
line-height: 40px;
90+
cursor: pointer;
91+
width: 40px;
92+
height: 40px;
93+
padding: 10px;
94+
margin: 5px;
95+
border: 1px solid black;
96+
background-color: #ddd;
97+
}

‎examples/vars.js‎

Lines changed: 74 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,134 @@
1-
'use strict';
1+
"use strict";
22

33
module.exports = [
44
{
5-
title: 'Showcase',
6-
source: 'showcase',
5+
title: "Showcase",
6+
source: "showcase",
77
paragraphs: [
8-
'React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable ' +
9-
'widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.',
10-
'Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.'
8+
"React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable " +
9+
"widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.",
10+
"Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints."
1111
]
1212
},
1313
{
14-
title: 'Basic',
15-
source: 'basic',
14+
title: "Basic",
15+
source: "basic",
1616
paragraphs: [
17-
'Try dragging the elements around.',
18-
'This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.'
17+
"Try dragging the elements around.",
18+
"This is a basic, non-responsive layout with dragging and resizing. Usage is very simple."
1919
]
2020
},
2121
{
22-
title: 'No Dragging',
23-
source: 'no-dragging',
22+
title: "No Dragging",
23+
source: "no-dragging",
2424
paragraphs: [
25-
'This particular example has dragging and resizing turned off.'
25+
"This particular example has dragging and resizing turned off."
2626
]
2727
},
2828
{
29-
title: 'Messy',
30-
source: 'messy',
29+
title: "Messy",
30+
source: "messy",
3131
paragraphs: [
32-
'This demo shows what happens when elements are placed randomly all over the layout.',
33-
'RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done ' +
34-
'in the vertical dimension. If objects all have the same width, they will be packed efficiently.',
35-
'If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, ' +
36-
'out of bounds, etc), they will be automatically corrected on startup. See the ' +
37-
'source of this demo, where elements are placed randomly in the layout.'
32+
"This demo shows what happens when elements are placed randomly all over the layout.",
33+
"RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done " +
34+
"in the vertical dimension. If objects all have the same width, they will be packed efficiently.",
35+
"If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, " +
36+
"out of bounds, etc), they will be automatically corrected on startup. See the " +
37+
"source of this demo, where elements are placed randomly in the layout."
3838
]
3939
},
4040
{
41-
title: 'Grid Item Properties',
42-
source: 'grid-property',
41+
title: "Grid Item Properties",
42+
source: "grid-property",
4343
paragraphs: [
44-
'This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.',
44+
"This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property."
4545
]
4646
},
4747
{
48-
title: 'Static Elements',
49-
source: 'static-elements',
48+
title: "Static Elements",
49+
source: "static-elements",
5050
paragraphs: [
51-
'This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements ' +
52-
'move themselves around a static element.'
51+
"This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements " +
52+
"move themselves around a static element."
5353
]
5454
},
5555
{
56-
title: 'Dynamic Add/Remove',
57-
source: 'dynamic-add-remove',
56+
title: "Dynamic Add/Remove",
57+
source: "dynamic-add-remove",
5858
paragraphs: [
59-
'This demo shows what happens when items are dynamically added and removed.',
59+
"This demo shows what happens when items are dynamically added and removed.",
6060
'You can remove an item by clicking its "x", and add a new one with the button.',
61-
'To further illustration RGL\'s capacities, this particular example is responsive. Trying resizing the window.'
61+
"To further illustration RGL's capacities, this particular example is responsive. Trying resizing the window."
6262
]
6363
},
6464
{
65-
title: 'LocalStorage',
66-
source: 'localstorage',
65+
title: "LocalStorage",
66+
source: "localstorage",
6767
paragraphs: [
68-
'This simple demo synchronizes to localStorage.',
69-
'Try moving and resizing elements, then reloading.'
68+
"This simple demo synchronizes to localStorage.",
69+
"Try moving and resizing elements, then reloading."
7070
]
7171
},
7272
{
73-
title: 'Responsive with LocalStorage',
74-
source: 'localstorage-responsive',
73+
title: "Responsive with LocalStorage",
74+
source: "localstorage-responsive",
7575
paragraphs: [
76-
'This simple demo synchronizes to localStorage for each responsive breakpoint.',
77-
'Try moving and resizing elements, changing window width, moving some more, and refreshing.',
78-
'Each breakpoint has a separate layout. The <code>onLayoutChange</code> callback calls back with ' +
79-
'a hash of breakpoints to layouts, which is then synchronized to localStorage.'
76+
"This simple demo synchronizes to localStorage for each responsive breakpoint.",
77+
"Try moving and resizing elements, changing window width, moving some more, and refreshing.",
78+
"Each breakpoint has a separate layout. The <code>onLayoutChange</code> callback calls back with " +
79+
"a hash of breakpoints to layouts, which is then synchronized to localStorage."
8080
]
8181
},
8282
{
83-
title: 'Minimum and Maximum Width/Height',
84-
source: 'min-max-wh',
83+
title: "Minimum and Maximum Width/Height",
84+
source: "min-max-wh",
8585
paragraphs: [
86-
'You can set min and max dimensions on a grid item by using the `minW`, `maxW`, `minH`, and `maxH` properties.',
87-
'In this demo, the min and max dimensions are generated automatically. Try resizing the items below.',
88-
'If your mins and maxes collide: for example min > max, or the initial dimensions are out of range, ' +
89-
'an error will be thrown.'
86+
"You can set min and max dimensions on a grid item by using the `minW`, `maxW`, `minH`, and `maxH` properties.",
87+
"In this demo, the min and max dimensions are generated automatically. Try resizing the items below.",
88+
"If your mins and maxes collide: for example min > max, or the initial dimensions are out of range, " +
89+
"an error will be thrown."
9090
]
9191
},
9292
{
93-
title: 'Dynamic Minimum and Maximum Width/Height',
94-
source: 'dynamic-min-max-wh',
93+
title: "Dynamic Minimum and Maximum Width/Height",
94+
source: "dynamic-min-max-wh",
9595
paragraphs: [
96-
'Your application may have more complex rules for determining an element\'s mins and maxes. This demo ' +
97-
'demonstrates how to use the `onResize` handler to accomplish this.',
98-
'In this grid, all elements are allowed a max width of 2 if the height < 3, ' +
99-
'and a min width of 2 if the height >= 3.'
96+
"Your application may have more complex rules for determining an element's mins and maxes. This demo " +
97+
"demonstrates how to use the `onResize` handler to accomplish this.",
98+
"In this grid, all elements are allowed a max width of 2 if the height < 3, " +
99+
"and a min width of 2 if the height >= 3."
100100
]
101101
},
102102
{
103-
title: 'No Vertical Compacting (Free Movement)',
104-
source: 'no-vertical-compact',
103+
title: "No Vertical Compacting (Free Movement)",
104+
source: "no-vertical-compact",
105105
paragraphs: [
106-
'You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the ' +
107-
'property `verticalCompact` to `false` to achieve this effect.'
106+
"You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the " +
107+
"property `verticalCompact` to `false` to achieve this effect."
108108
]
109109
},
110110
{
111-
title: 'Prevent Collision',
112-
source: 'prevent-collision',
111+
title: "Prevent Collision",
112+
source: "prevent-collision",
113113
paragraphs: [
114-
'You may want to turn off rearrangement so items don\'t move arround when dragging. Set the ' +
115-
'property `preventCollision` to `true` to achieve this effect. ' +
116-
'It\'s particularly useful with `verticalCompact` set to `false`.'
114+
"You may want to turn off rearrangement so items don't move arround when dragging. Set the " +
115+
"property `preventCollision` to `true` to achieve this effect. " +
116+
"It's particularly useful with `verticalCompact` set to `false`."
117117
]
118118
},
119119
{
120-
title: 'Error Case',
121-
source: 'error-case',
120+
title: "Error Case",
121+
source: "error-case",
122122
paragraphs: [
123-
'This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not ' +
124-
'move over 3.'
123+
"This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not " +
124+
"move over 3."
125125
]
126126
},
127+
{
128+
title: "Toolbox",
129+
source: "toolbox",
130+
paragraphs: [
131+
"This demonstrates how to implement a toolbox to add and remove widgets."
132+
]
133+
}
127134
];

‎lib/ReactGridLayout.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -453,14 +453,17 @@ export default class ReactGridLayout extends React.Component<Props, State> {
453453
// to find collisions faster
454454
let hasCollisions;
455455
if (preventCollision) {
456-
const collisions = getAllCollisions(layout, { ...l, w, h }).filter((layoutItem) => layoutItem.i !== l.i);
456+
const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
457+
layoutItem => layoutItem.i !== l.i
458+
);
457459
hasCollisions = collisions.length > 0;
458460

459461
// If we're colliding, we need adjust the placeholder.
460462
if (hasCollisions) {
461463
// adjust w && h to maximum allowed space
462-
let leastX = Infinity, leastY = Infinity;
463-
collisions.forEach((layoutItem) => {
464+
let leastX = Infinity,
465+
leastY = Infinity;
466+
collisions.forEach(layoutItem => {
464467
if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
465468
if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
466469
});

0 commit comments

Comments
 (0)