Merge branch 'master' into lm-fix-dynamic-remount

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["es2015", {"loose": true}],
+    ["env", {"loose": true}],
     "stage-1",
     "react"
   ]

.browserslistrc

@@ -0,0 +1,3 @@
+> 0.25%
+ie 11
+not dead

.eslintrc.json

@@ -20,5 +20,10 @@
     "browser": true,
     "node": true,
     "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.65.0
+0.107.0
 
 [ignore]
 

.github/labeler.yml

@@ -0,0 +1,29 @@
+documentation:
+  - test/examples/**/*
+  - README.md
+  - examples/**/*
+
+core:
+  - lib/**/*
+
+release:
+  - dist/**/*
+
+tests:
+  - test/spec/**/*
+
+deps:
+  - yarn.lock
+
+infrastructure:
+  - .github/**/*
+  - .babelrc
+  - .eslintignore
+  - .eslintrc.json
+  - .flowconfig
+  - .gitignore
+  - .npmignore
+  - .travis.yml
+  - build.sh
+  - package.json
+  - webpack*

.github/workflows/label.yml

@@ -0,0 +1,12 @@
+name: Labeler
+on: [pull_request]
+
+jobs:
+  label:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/labeler@v2
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/stale.yml

@@ -0,0 +1,18 @@
+name: "Close stale issues and PRs"
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/stale@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days'
+        stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this PR will be closed in 7 days'
+        stale-pr-label: 'stale'
+        exempt-pr-label: 'stale'
+        days-before-stale: 30
+        days-before-close: 7

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 node_js:
-  - "6"
-  - "7"
+  - "node"
+  - "lts/*"
 script:
   - make build test
 cache: yarn

Makefile

@@ -42,7 +42,7 @@ view-example: build-example
 
 # FIXME flow is usually global
 lint:
-	./node_modules/.bin/flow
+	@$(BIN)/flow
 	@$(BIN)/eslint --ext .js,.jsx $(LIB) $(TEST)
 	@$(BIN)/valiquire $(LIB)
 

README.md

@@ -49,6 +49,7 @@ RGL is React-only and does not require jQuery.
 1. [Prevent Collision](https://strml.github.io/react-grid-layout/examples/12-prevent-collision.html)
 1. [Error Case](https://strml.github.io/react-grid-layout/examples/13-error-case.html)
 1. [Toolbox](https://strml.github.io/react-grid-layout/examples/14-toolbox.html)
+1. [Drag From Outside](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -62,6 +63,9 @@ RGL is React-only and does not require jQuery.
 - [Reflect](https://reflect.io)
 - [ez-Dashing](https://github.com/ylacaute/ez-Dashing)
 - [Kibana](https://www.elastic.co/products/kibana)
+- [Graphext](https://graphext.com/)
+- [Monday](https://support.monday.com/hc/en-us/articles/360002187819-What-are-the-Dashboards-)
+- [Quadency](https://quadency.com/)
 
 *Know of others? Create a PR to let me know!*
 
@@ -283,6 +287,14 @@ containerPadding: ?[number, number] = margin,
 // if you like.
 rowHeight: ?number = 150,
 
+// Configuration of a dropping element. Dropping element is a "virtual" element 
+// which appears when you drag over some element from outside.
+// It can be changed by passing specific parameters:
+//  i - id of an element
+//  w - width of an element
+//  h - height of an element
+droppingItem?: { i: string, w: number, h: number }
+
 //
 // Flags
 //
@@ -291,11 +303,26 @@ isResizable: ?boolean = true,
 // Uses CSS3 translate() instead of position top/left.
 // This makes about 6x faster paint performance
 useCSSTransforms: ?boolean = true,
+// If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has "transform: scale(n)" css property,
+// we should set scale coefficient to avoid render artefacts while dragging.
+transformScale: ?number = 1,
 
 // If true, grid items won't change position when being
 // dragged over.
 preventCollision: ?boolean = false;
 
+// If true, droppable elements (with `draggable={true}` attribute) 
+// can be dropped on the grid. It triggers "onDrop" callback
+// with position and event object as parameters. 
+// It can be useful for dropping an element in a specific position
+//
+// NOTE: In case of using Firefox you should add
+// `onDragStart={e => e.dataTransfer.setData('text/plain', '')}` attribute
+// along with `draggable={true}` otherwise this feature will work incorrect.
+// onDragStart attribute is required for Firefox for a dragging initialization
+// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
+isDroppable: ?boolean = false
+
 //
 // Callbacks
 //
@@ -322,7 +349,9 @@ onResizeStart: ItemCallback,
 // Calls when resize movement happens.
 onResize: ItemCallback,
 // Calls when resize is complete.
-onResizeStop: ItemCallback
+onResizeStop: ItemCallback,
+// Calls when some element has been dropped
+onDrop: (elemParams: { x: number, y: number, e: Event }) => void
 ```
 
 ### Responsive Grid Layout Props
@@ -338,6 +367,15 @@ breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
 // # of cols. This is a breakpoint -> cols map, e.g. {lg: 12, md: 10, ...}
 cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
 
+
+// margin (in pixels). Can be specified either as horizontal and vertical margin, e.g. `[10, 10]` or as a breakpoint -> margin map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
+margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
+
+
+// containerPadding (in pixels). Can be specified either as horizontal and vertical padding, e.g. `[10, 10]` or as a breakpoint -> containerPadding map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
+containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
+
+
 // layouts is an object mapping breakpoints to layouts.
 // e.g. {lg: Layout, md: Layout, ...}
 layouts: {[key: $Keys<breakpoints>]: Layout}
@@ -406,7 +444,7 @@ will be draggable.
 
 If you have a feature request, please add it as an issue or make a pull request.
 
-If you have a bug to report, please reproduce the bug in [WebpackBin](http://www.webpackbin.com/VymTE3zWG) to help
+If you have a bug to report, please reproduce the bug in [CodeSandbox](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js) to help
 us easily isolate it.
 
 ## TODO List

css/styles.css

@@ -20,6 +20,10 @@
   will-change: transform;
 }
 
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
 .react-grid-item.react-grid-placeholder {
   background: red;
   opacity: 0.2;

examples/0-showcase.html

@@ -16,9 +16,9 @@ <h3>React-Grid-Layout Demo 0 - Showcase</h3>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/0-showcase.jsx">View this example's source</a></li>
 
       <li><a href="1-basic.html"><b>⇢ </b>View the next example: "Basic"</a></li>
-        </ul>
-           <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
-           <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
-        <div id="content"></div>
+    </ul>
+    <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
+    <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/1-basic.html

@@ -18,9 +18,9 @@ <h3>React-Grid-Layout Demo 1 - Basic</h3>
       <li><a href="0-showcase.html"><b>⇠</b> View the previous example: "Showcase"</a></li>
 
       <li><a href="2-no-dragging.html"><b>⇢ </b>View the next example: "No Dragging"</a></li>
-        </ul>
-           <p>Try dragging the elements around.</p>
-           <p>This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.</p>
-        <div id="content"></div>
+    </ul>
+    <p>Try dragging the elements around.</p>
+    <p>This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/10-dynamic-min-max-wh.html

@@ -18,9 +18,9 @@ <h3>React-Grid-Layout Demo 10 - Dynamic Minimum and Maximum Width/Height</h3>
       <li><a href="9-min-max-wh.html"><b>⇠</b> View the previous example: "Minimum and Maximum Width/Height"</a></li>
 
       <li><a href="11-no-vertical-compact.html"><b>⇢ </b>View the next example: "No Vertical Compacting (Free Movement)"</a></li>
-        </ul>
-           <p>Your application may have more complex rules for determining an element's mins and maxes. This demo demonstrates how to use the `onResize` handler to accomplish this.</p>
-           <p>In this grid, all elements are allowed a max width of 2 if the height < 3, and a min width of 2 if the height >= 3.</p>
-        <div id="content"></div>
+    </ul>
+    <p>Your application may have more complex rules for determining an element's mins and maxes. This demo demonstrates how to use the `onResize` handler to accomplish this.</p>
+    <p>In this grid, all elements are allowed a max width of 2 if the height < 3, and a min width of 2 if the height >= 3.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/11-no-vertical-compact.html

@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 11 - No Vertical Compacting (Free Movement)</h3>
       <li><a href="10-dynamic-min-max-wh.html"><b>⇠</b> View the previous example: "Dynamic Minimum and Maximum Width/Height"</a></li>
 
       <li><a href="12-prevent-collision.html"><b>⇢ </b>View the next example: "Prevent Collision"</a></li>
-        </ul>
-           <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
-        <div id="content"></div>
+    </ul>
+    <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/12-prevent-collision.html

@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 12 - Prevent Collision</h3>
       <li><a href="11-no-vertical-compact.html"><b>⇠</b> View the previous example: "No Vertical Compacting (Free Movement)"</a></li>
 
       <li><a href="13-error-case.html"><b>⇢ </b>View the next example: "Error Case"</a></li>
-        </ul>
-           <p>You may want to turn off rearrangement so items don't move arround when dragging. Set the property `preventCollision` to `true` to achieve this effect. It's particularly useful with `verticalCompact` set to `false`.</p>
-        <div id="content"></div>
+    </ul>
+    <p>You may want to turn off rearrangement so items don't move arround when dragging. Set the property `preventCollision` to `true` to achieve this effect. It's particularly useful with `verticalCompact` set to `false`.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/13-error-case.html

@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 13 - Error Case</h3>
       <li><a href="12-prevent-collision.html"><b>⇠</b> View the previous example: "Prevent Collision"</a></li>
 
       <li><a href="14-toolbox.html"><b>⇢ </b>View the next example: "Toolbox"</a></li>
-        </ul>
-           <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>
-        <div id="content"></div>
+    </ul>
+    <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>
+    <div id="content"></div>
   </body>
 </html>

examples/14-toolbox.html

@@ -16,8 +16,9 @@ <h3>React-Grid-Layout Demo 14 - Toolbox</h3>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/14-toolbox.jsx">View this example's source</a></li>
 
       <li><a href="13-error-case.html"><b>⇠</b> View the previous example: "Error Case"</a></li>
-            </ul>
-           <p>This includes an interactive toolbox. Try dragging widgets into it!</p>
-        <div id="content"></div>
+      <li><a href="15-drag-from-outside.html"><b>⇢ </b>View the next example: "Drag From Outside"</a></li>
+    </ul>
+    <p>This demonstrates how to implement a toolbox to add and remove widgets.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/15-drag-from-outside.html

@@ -0,0 +1,24 @@
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script src="http://localhost:4002/dist/commons.js"></script>
+    <script src="http://localhost:4002/dist/15-drag-from-outside.bundle.js"></script>
+    <title>RGL Example 15 - Drag From Outside</title>
+  </head>
+  <body>
+    <h3>React-Grid-Layout Demo 15 - Drag From Outside</h3>
+    <ul>
+      <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
+      <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/15-drag-from-outside.jsx">View this example's source</a></li>
+
+      <li><a href="14-toolbox.html"><b>⇢ </b>View the previous example: "Toolbox"</a></li>
+    </ul>
+    <p>This demo shows what happens when an item is added from outside of the grid.</p>
+    <p>Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.</p>
+    <div id="content"></div>
+  </body>
+</html>

examples/2-no-dragging.html

@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 2 - No Dragging</h3>
       <li><a href="1-basic.html"><b>⇠</b> View the previous example: "Basic"</a></li>
 
       <li><a href="3-messy.html"><b>⇢ </b>View the next example: "Messy"</a></li>
-        </ul>
-           <p>This particular example has dragging and resizing turned off.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This particular example has dragging and resizing turned off.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/3-messy.html

@@ -18,10 +18,10 @@ <h3>React-Grid-Layout Demo 3 - Messy</h3>
       <li><a href="2-no-dragging.html"><b>⇠</b> View the previous example: "No Dragging"</a></li>
 
       <li><a href="4-grid-property.html"><b>⇢ </b>View the next example: "Grid Item Properties"</a></li>
-        </ul>
-           <p>This demo shows what happens when elements are placed randomly all over the layout.</p>
-           <p>RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done in the vertical dimension. If objects all have the same width, they will be packed efficiently.</p>
-           <p>If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, out of bounds, etc), they will be automatically corrected on startup. See the source of this demo, where elements are placed randomly in the layout.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo shows what happens when elements are placed randomly all over the layout.</p>
+    <p>RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done in the vertical dimension. If objects all have the same width, they will be packed efficiently.</p>
+    <p>If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, out of bounds, etc), they will be automatically corrected on startup. See the source of this demo, where elements are placed randomly in the layout.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/4-grid-property.html

@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 4 - Grid Item Properties</h3>
       <li><a href="3-messy.html"><b>⇠</b> View the previous example: "Messy"</a></li>
 
       <li><a href="5-static-elements.html"><b>⇢ </b>View the next example: "Static Elements"</a></li>
-        </ul>
-           <p>This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.</p>
+    <div id="content"></div>
   </body>
 </html>

examples/5-static-elements.html

@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 5 - Static Elements</h3>
       <li><a href="4-grid-property.html"><b>⇠</b> View the previous example: "Grid Item Properties"</a></li>
 
       <li><a href="6-dynamic-add-remove.html"><b>⇢ </b>View the next example: "Dynamic Add/Remove"</a></li>
-        </ul>
-           <p>This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements move themselves around a static element.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements move themselves around a static element.</p>
+    <div id="content"></div>
   </body>
 </html>