react-grid-layout 0.16.4 → 0.17.1

package/.babelrc.js

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        targets: "> 0.25%, not dead",
+      }
+    ],
+    "@babel/react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-flow-comments",
+    "@babel/plugin-proposal-class-properties",
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "espower"
+      ]
+    }
+  }
+}

package/.browserslistrc

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

package/.flowconfig

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

package/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+examples/

package/.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "auto"
+}

package/.travis.yml

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

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # Changelog
 
+0.17.1 (Oct 29, 2019)
+----
+
+### Bugfixes
+
+- Surround `navigator` check in `try/catch` to avoid problems with mocked navigators [#1057](https://github.com/STRML/react-grid-layout/pull/1054)
+- TransformScale is not applied properly while dragging an element [#1046](https://github.com/STRML/react-grid-layout/pull/1054)
+
+0.17.0 (Oct 24, 2019)
+----
+
+It's been 18 months since the last release, and this is a pretty large one! For references on the items below, see https://github.com/STRML/react-grid-layout/milestone/1?closed=1.
+
+Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, and for giving it a much-needed shot in the arm, and thanks to the rest of our contributors.
+
+### New Features
+
+- Added ability to drag items into the grid from outside. [#980](https://github.com/STRML/react-grid-layout/pull/980). See [the example](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html).
+  - This is especially exciting as it opens up new "widget toolbox" use cases such as [Example 14](https://strml.github.io/react-grid-layout/examples/14-toolbox.html) with more intuitive interaction. Thanks @daynin.
+- `transformScale` prop [#987](https://github.com/STRML/react-grid-layout/pull/987)
+- `<ResponsiveReactGridLayout>` now supports margin-per-breakpoint [#1016](https://github.com/STRML/react-grid-layout/pull/1016)
+
+
+### Bugfixes
+
+- `onWidthChange` only called on breakpoint changes [#770](https://github.com/STRML/react-grid-layout/pull/770)
+- Various movement bugs when compaction is off [#766](https://github.com/STRML/react-grid-layout/pull/766)
+- Don't fire `onDragStop` if an item is only clicked, not dragged [#1023](https://github.com/STRML/react-grid-layout/pull/1023)
+- Fix infinite loop when dragging over a static element. [#1019](https://github.com/STRML/react-grid-layout/pull/1019)
+
+### Internal Refactors
+
+- Both `react-draggable` and `react-resizable` dependencies are now React 16.9 compatible, as is now `react-grid-layout`.
+  - [RGL PR #990](https://github.com/STRML/react-grid-layout/pull/990)
+  - [react-resizable](https://github.com/STRML/react-resizable/pull/112/commits/541dee69b8e45d91a533855609472b481634edee)
+  - [react-draggable](https://github.com/mzabriskie/react-draggable/commit/fea778c8e89db2a4e1a35e563b65634f8146e7e4)
+- Webpack 4 [#907](https://github.com/STRML/react-grid-layout/pull/907)
+- Babel 7 [#1013](https://github.com/STRML/react-grid-layout/pull/1013)
+- Flow 0.110 [#995](https://github.com/STRML/react-grid-layout/pull/995)
+- Jest [#774](https://github.com/STRML/react-grid-layout/pull/774)
+- Various build simplifications [#773](https://github.com/STRML/react-grid-layout/pull/773)
+- Various PR bots - thanks @daynin
+
+0.16.6 (Mar 8, 2018)
+----
+
+- Fixed collision issue where items below could rearrange on a move.
+  - The root cause was "teleportation", or practically the same bug that leads to Pac-Man going through
+    ghosts now and then. If a large element moves up by a few grid units, the space it vacates can suddenly
+    become occupiable by an element below it. Rather than the collision happening properly, they exchange spaces
+    atomically. The fix is to move items down one grid unit at a time to ensure
+    this rearrangement does not happen.
+  - Thanks @torkelo for your hard work on this for Grafana 5, which I very unfortunately managed to break
+    when refactoring for 0.16.1.
+  - Ref: #650, #739
+- Added a "Toolbox" demo (thanks @jhob)
+
+0.16.5 (Feb 26, 2018)
+----
+
+- Minor fix to `isUserAction` on certain types of compaction cascades (#714, #720, #729)
+
+0.16.4 (Feb 15, 2018)
+----
+
+- Skip null items in processGridItem (#578)
+- Resize is broken for grids with preventCollision: true, fixes #655 (#656)
+- Minor refactoring
+
 0.16.3 (Jan 31, 2018)
 ----
 

package/README.md

@@ -16,7 +16,7 @@ RGL is React-only and does not require jQuery.
 ![BitMEX UI](http://i.imgur.com/oo1NT6c.gif)
 > GIF from production usage on [BitMEX.com](https://www.bitmex.com)
 
-[**[Demo](https://strml.github.io/react-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md) | [WebpackBin Editable demo](https://www.webpackbin.com/bins/-Kvr2qCxorvGMgVMxkmI)**]
+[**[Demo](https://strml.github.io/react-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
 
 ## Table of Contents
 
@@ -46,6 +46,10 @@ RGL is React-only and does not require jQuery.
 1. [Minimum and Maximum Width/Height](https://strml.github.io/react-grid-layout/examples/9-min-max-wh.html)
 1. [Dynamic Minimum and Maximum Width/Height](https://strml.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
 1. [No Vertical Compacting (Free Movement)](https://strml.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
+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
 
@@ -58,6 +62,10 @@ RGL is React-only and does not require jQuery.
 - [Stoplight](https://app.stoplight.io)
 - [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!*
 
@@ -108,11 +116,11 @@ produce a grid with three items where:
 - item `b` will be restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks
 - users will be able to freely drag and resize item `c`
 
-```javascript
-var ReactGridLayout = require('react-grid-layout');
+```js
+import GridLayout from 'react-grid-layout';
 
-var MyFirstGrid = React.createClass({
-  render: function() {
+class MyFirstGrid extends React.Component {
+  render() {
     // layout is an array of objects, see the demo for more complete usage
     var layout = [
       {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
@@ -120,33 +128,34 @@ var MyFirstGrid = React.createClass({
       {i: 'c', x: 4, y: 0, w: 1, h: 2}
     ];
     return (
-      <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
+      <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
         <div key="a">a</div>
         <div key="b">b</div>
         <div key="c">c</div>
-      </ReactGridLayout>
+      </GridLayout>
     )
   }
-});
+}
 ```
 
 You may also choose to set layout properties directly on the children:
 
-```javascript
-var ReactGridLayout = require('react-grid-layout');
+```js
+import GridLayout from 'react-grid-layout';
 
-var MyFirstGrid = React.createClass({
-  render: function () {
+class MyFirstGrid extends React.Component {
+  render() {
     return (
-      <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
+      <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
         <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
         <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
         <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
-      </ReactGridLayout>
+      </GridLayout>
     )
   }
-});
+}
 ```
+
 ### Usage without Browserify/Webpack
 
 A module usable in a `<script>` tag is included [here](/dist/react-grid-layout.min.js). It uses a UMD shim and
@@ -156,21 +165,23 @@ excludes `React`, so it must be otherwise available in your application, either
 
 To make RGL responsive, use the `<ResponsiveReactGridLayout>` element:
 
-```javascript
-var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
-//...
-render: function() {
-  // {lg: layout1, md: layout2, ...}
-  var layouts = getLayoutsFromSomewhere();
-  return (
-    <ResponsiveReactGridLayout className="layout" layouts={layouts}
-      breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
-      cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
-      <div key="1">1</div>
-      <div key="2">2</div>
-      <div key="3">3</div>
-    </ResponsiveReactGridLayout>
-  )
+```js
+import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
+
+class MyResponsiveGrid extends React.Component {
+  render() {
+    // {lg: layout1, md: layout2, ...}
+    var layouts = getLayoutsFromSomewhere();
+    return (
+      <ResponsiveGridLayout className="layout" layouts={layouts}
+        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+        <div key="1">1</div>
+        <div key="2">2</div>
+        <div key="3">3</div>
+      </ResponsiveGridLayout>
+    )
+  }
 }
 ```
 
@@ -191,23 +202,25 @@ Both `<ResponsiveReactGridLayout>` and `<ReactGridLayout>` take `width` to calcu
 positions on drag events. In simple cases a HOC `WidthProvider` can be used to automatically determine
 width upon initialization and window resize events.
 
-```javascript
-import {Responsive, WidthProvider} from 'react-grid-layout';
-const ResponsiveReactGridLayout = WidthProvider(Responsive);
-
-//...
-render() {
-  // {lg: layout1, md: layout2, ...}
-  var layouts = getLayoutsFromSomewhere();
-  return (
-    <ResponsiveReactGridLayout className="layout" layouts={layouts}
-      breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
-      cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
-      <div key="1">1</div>
-      <div key="2">2</div>
-      <div key="3">3</div>
-    </ResponsiveReactGridLayout>
-  )
+```js
+import { Responsive, WidthProvider } from 'react-grid-layout';
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+class MyResponsiveGrid extends React.Component {
+  render() {
+    // {lg: layout1, md: layout2, ...}
+    var layouts = getLayoutsFromSomewhere();
+    return (
+      <ResponsiveGridLayout className="layout" layouts={layouts}
+        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+        <div key="1">1</div>
+        <div key="2">2</div>
+        <div key="3">3</div>
+      </ResponsiveGridLayout>
+    )
+  }
 }
 ```
 
@@ -225,7 +238,7 @@ listens to window `'resize'` events. If you need more power and flexibility, try
 
 RGL supports the following properties (see the source for the final word on this):
 
-```javascript
+```js
 //
 // Basic props
 //
@@ -274,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
 //
@@ -282,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
 //
@@ -313,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
@@ -321,7 +359,7 @@ onResizeStop: ItemCallback
 The responsive grid layout can be used instead. It supports all of the props above, excepting `layout`.
 The new properties and changes are:
 
-```javascript
+```js
 // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
 // Breakpoint names are arbitrary but must match in the cols and layouts objects.
 breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
@@ -329,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}
@@ -368,7 +415,7 @@ Any `<GridItem>` properties defined directly will take precedence over globally-
 example, if the layout has the property `isDraggable: false`, but the grid item has the prop `isDraggable: true`, the item
 will be draggable.
 
-```javascript
+```js
 {
 
   // A string corresponding to the component key
@@ -397,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