react-grid-layout 0.17.1 → 0.18.3

package/.babelrc.js

@@ -1,25 +1,21 @@
-'use strict';
+// @flow
+
+const es6Compat = process.env.BABEL_ES_COMPAT === "6" || process.env.NODE_ENV === "test";
 
 module.exports = {
-  "presets": [
+  presets: [
     [
       "@babel/preset-env",
       {
-        targets: "> 0.25%, not dead",
-      }
+        targets: es6Compat ? "maintained node versions" : "> 0.25%, not dead"
+      },
     ],
     "@babel/react",
     "@babel/preset-flow"
   ],
-  "plugins": [
+  plugins: [
     "@babel/plugin-transform-flow-comments",
     "@babel/plugin-proposal-class-properties",
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "espower"
-      ]
-    }
-  }
-}
+    "babel-plugin-preval"
+  ]
+};

package/.flowconfig

@@ -1,11 +1,23 @@
 [version]
-0.110.1
+^0.119.0
 
 [ignore]
+<PROJECT_ROOT>/build/.*
+<PROJECT_ROOT>/dist/.*
+# Speeds parsing:
+.*/node_modules/@babel.*
+.*/node_modules/babel.*
 
 [include]
 
 [libs]
 interfaces/
+flow-typed/
 
 [options]
+emoji=true
+module.use_strict=true
+suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowFixMe.*
+suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowBug.*
+suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.*
+suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowNative.*

package/.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
 node_js:
-  - "node"
+  - 8
+  - 10
+  - 12
   - "lts/*"
 script:
   - make build test

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # Changelog
 
+0.18.3 (Mar 16, 2020)
+----
+
+### Bugfixes
+  - Fix `shouldComponentUpdate` interfering with droppability ([#1152](https://github.com/STRML/react-grid-layout/issues/1152))
+
+### Internal Changes
+  - New Enzyme test suite added to prevent regression. If you have time, we could really use more test cases that reflect your use cases!
+
+0.18.2 (Feb 26, 2020)
+----
+
+### Bugfixes
+  - `shouldComponentUpdate`:
+    - A too-aggressive implementation of `shouldComponentUpdate` was shipped in 0.18.0-0.18.1 ([#1123](https://github.com/STRML/react-grid-layout/pull/1123)), which did not compare the `children` object. While this works well in many simple implementations of RGL, it breaks in more complex applications.
+    - Reference equality of `props.children` and `nextProps.children` is now added to `<ReactGridLayout>` and `<GridItem>`. If you wish to take advantage of the performance improvements from the `shouldComponentUpdate` work, memoize your children.
+    - A section has been added to the [README](/README.md#Performance) explaining how this works.
+    - Fixed [#1150](https://github.com/STRML/react-grid-layout/issues/1150), [#1151](https://github.com/STRML/react-grid-layout/issues/1151).
+
+0.18.1 (Feb 25, 2020)
+----
+
+This release contains typedef changes only.
+
+### Bugfixes
+  - Flow types:
+    - Make Props to `<ReactGridLayout>` and `<ResponsiveReactGridLayout>` exact.
+    - Fix loss of props refinement when passing through `WidthProvider`.
+    - Fix Flow errors as surfaced in [#1138](https://github.com/STRML/react-grid-layout/pull/1138).
+    - Modify examples to use types so that the above type error can't resurface
+
+0.18.0 (Feb 25, 2020)
+----
+
+Thanks to all of our maintainers for this big release. 0.18.0 contains a large number of bugfixes that users have been asking for. Please read the full list so you know what to expect. Some of the biggest improvements include fixing changes of `isResizable`/`isDraggable` without a remount ([#892](https://github.com/STRML/react-grid-layout/pull/892)), fixes to prop changes on `ResponsiveReactGridLayout` ([#1090](https://github.com/STRML/react-grid-layout/pull/1090)), `shouldComponentUpdate` improvements for speed ([#1123](https://github.com/STRML/react-grid-layout/pull/1123)), improvements to droppability ([#1127](https://github.com/STRML/react-grid-layout/pull/1127)), and much more.
+
+### (Potentially) Breaking Changes
+
+- You can now locally set `isDraggable`/`isResizable` on a `static` item and it will have that property. This could be useful, but be sure to check your layouts if you use `static`. Relates to [#1060](https://github.com/STRML/react-grid-layout/pull/1060).
+- `shouldComponentUpdate` is now implemented on major components to improve render speed while you manipulate the layout. In our testing there are no issues. If you encounter one, please open an issue asap and we'll get it fixed. See [#1123](https://github.com/STRML/react-grid-layout/pull/1123).
+
+### New Features
+
+- You can now manipulate `isDraggable`/`isResizable` without the child component remounting. We do this by always rendering the child `<Resizable>` and `<Draggable>` wrappers, optionally in a `disabled` state. This feature has been heavily requested. [#892](https://github.com/STRML/react-grid-layout/pull/892)
+- The event is now passed as `e` on the `onDrop` callback. [#1065](https://github.com/STRML/react-grid-layout/pull/1065)
+- Pass `transformScale` to `Resizable`. [#1075](https://github.com/STRML/react-grid-layout/pull/1075)
+
+### Bugfixes
+
+- Fix handling of width changes in `ResponsiveReactGridLayout`. [#1090](https://github.com/STRML/react-grid-layout/pull/1090)
+  - Fixes ignored changes of breakpoints and columns. See also [issue #1083](https://github.com/STRML/react-grid-layout/issues/1083).
+- Forbid layout change on click without drag. [#1044](https://github.com/STRML/react-grid-layout/pull/1044)
+- Do not mutate `layouts` prop. [#1064](https://github.com/STRML/react-grid-layout/pull/1064)
+- Ensure locally set `isDraggable`/`isResizable` on a `GridItem` overrides the global setting on the layout. [#1060](https://github.com/STRML/react-grid-layout/pull/1060)
+- Avoid additional element jumping when an item is dropped. [#1127](https://github.com/STRML/react-grid-layout/issues/1127)
+- Don't use `String#includes` for Firefox test. [#1096](https://github.com/STRML/react-grid-layout/pull/1096)
+
+### Internal Refactors
+
+- Added `shouldComponentUpdate` to major elements for speed. Significant [performance improvements](https://github.com/STRML/react-grid-layout/pull/1032#issuecomment-541604763) while dragging. Started in [#1032](https://github.com/STRML/react-grid-layout/pull/1032) and finished in [#1123](https://github.com/STRML/react-grid-layout/pull/1123).
+  - A [fun trick for the curious](https://github.com/STRML/react-grid-layout/blob/44e200067b3640c3230f5511e8624a7c629d2f9a/lib/fastRGLPropsEqual.js).
+- Internal refactor of dropping capability. It is now more predictable and uses similar unit labels (`left`, `top`) to other features. [#1128](https://github.com/STRML/react-grid-layout/issues/1128)
+- Upgrade devDependencies.
+- Remove ESPower from test suite (not useful with Jest).
+
+
 0.17.1 (Oct 29, 2019)
 ----
 

package/README.md

@@ -29,6 +29,8 @@ RGL is React-only and does not require jQuery.
 - [Grid Layout Props](#grid-layout-props)
 - [Responsive Grid Layout Props](#responsive-grid-layout-props)
 - [Grid Item Props](#grid-item-props)
+- [User Recipes](../../wiki/Users-recipes)
+- [Performance](#performance)
 - [Contribute](#contribute)
 - [TODO List](#todo-list)
 
@@ -66,6 +68,7 @@ RGL is React-only and does not require jQuery.
 - [Graphext](https://graphext.com/)
 - [Monday](https://support.monday.com/hc/en-us/articles/360002187819-What-are-the-Dashboards-)
 - [Quadency](https://quadency.com/)
+- [Hakkiri](https://www.hakkiri.io)
 
 *Know of others? Create a PR to let me know!*
 
@@ -87,6 +90,7 @@ RGL is React-only and does not require jQuery.
 
 |Version         | Compatibility    |
 |----------------|------------------|
+| >= 0.17.0      | React 0.16       |
 | >= 0.11.3      | React 0.14 & v15 |
 | >= 0.10.0      | React 0.14       |
 | 0.8. - 0.9.2   | React 0.13       |
@@ -122,7 +126,7 @@ import GridLayout from 'react-grid-layout';
 class MyFirstGrid extends React.Component {
   render() {
     // layout is an array of objects, see the demo for more complete usage
-    var layout = [
+    const layout = [
       {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
       {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
       {i: 'c', x: 4, y: 0, w: 1, h: 2}
@@ -171,7 +175,7 @@ import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
 class MyResponsiveGrid extends React.Component {
   render() {
     // {lg: layout1, md: layout2, ...}
-    var layouts = getLayoutsFromSomewhere();
+    const layouts = getLayoutsFromSomewhere();
     return (
       <ResponsiveGridLayout className="layout" layouts={layouts}
         breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
@@ -287,7 +291,7 @@ containerPadding: ?[number, number] = margin,
 // if you like.
 rowHeight: ?number = 150,
 
-// Configuration of a dropping element. Dropping element is a "virtual" element 
+// 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
@@ -311,9 +315,9 @@ transformScale: ?number = 1,
 // dragged over.
 preventCollision: ?boolean = false;
 
-// If true, droppable elements (with `draggable={true}` attribute) 
+// 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. 
+// 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
@@ -351,7 +355,7 @@ onResize: ItemCallback,
 // Calls when resize is complete.
 onResizeStop: ItemCallback,
 // Calls when some element has been dropped
-onDrop: (elemParams: { x: number, y: number, e: Event }) => void
+onDrop: (elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void
 ```
 
 ### Responsive Grid Layout Props
@@ -413,7 +417,7 @@ are out of range.
 
 Any `<GridItem>` properties defined directly will take precedence over globally-set options. For
 example, if the layout has the property `isDraggable: false`, but the grid item has the prop `isDraggable: true`, the item
-will be draggable.
+will be draggable, even if the item is marked `static: true`.
 
 ```js
 {
@@ -440,6 +444,42 @@ will be draggable.
 }
 ```
 
+### Performance
+
+`<ReactGridLayout>` has [an optimized `shouldComponentUpdate` implementation](lib/ReactGridLayout.jsx), but it relies on the user memoizing the `children` array:
+
+
+```js
+// lib/ReactGridLayout.jsx
+// ...
+shouldComponentUpdate(nextProps: Props, nextState: State) {
+  return (
+    // NOTE: this is almost always unequal. Therefore the only way to get better performance
+    // from SCU is if the user intentionally memoizes children. If they do, and they can
+    // handle changes properly, performance will increase.
+    this.props.children !== nextProps.children ||
+    !fastRGLPropsEqual(this.props, nextProps, isEqual) ||
+    !isEqual(this.state.activeDrag, nextState.activeDrag)
+  );
+}
+// ...
+```
+
+If you memoize your children, you can take advantage of this, and reap faster rerenders. For example:
+
+```js
+function MyGrid(props) {
+  const children = React.useMemo(() => {
+    return new Array(props.count).fill(undefined).map((val, idx) => {
+      return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;
+    });
+  }, [props.count]);
+  return <ReactGridLayout cols={12}>{children}</ReactGridLayout>;
+}
+```
+
+Because the `children` prop doesn't change between rerenders, updates to `<MyGrid>` won't result in new renders, improving performance.
+
 ## Contribute
 
 If you have a feature request, please add it as an issue or make a pull request.

package/__mocks__/react-grid-layout.js

@@ -0,0 +1,2 @@
+// Used by jest as it requires some example files, which pull from 'react-grid-layout'
+module.exports = require('../index-dev');