react-grid-layout 1.1.0 → 1.2.2

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.133.0
+^0.145.0
 
 [ignore]
 <PROJECT_ROOT>/build/.*
@@ -15,5 +15,6 @@ interfaces/
 flow-typed/
 
 [options]
+sharedmemory.heap_size=3221225472
 emoji=true
 module.use_strict=true

package/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
+make lint
+make test

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+1.2.2 (Mar 1, 2021)
+---
+
+### Bugfixes
+  - `onResize` as changed in 1.2.1 did not correctly save the layout. This is now fixed.
+    - As you might guess, we need more test coverage! PRs are very welcome, I'll buy you beers on Cashapp or Patreon or whatever you like.
+
+1.2.1 (Mar 1, 2021)
+---
+
+## Organization Changes
+
+We have created the [React-Grid-Layout Organization](https://github.com/react-grid-layout)! Therefore the repository
+[has moved](https://github.com/react-grid-layout/react-grid-layout).
+
+This organization will grow as time goes on, and also contains the dependencies of RGL.
+
+### Bugfixes
+  - Use `classList` in Firefox onDragOver hack. [#1310](https://github.com/STRML/react-grid-layout/pull/1310)
+  - Fix `scale` property. As `scale` support was added to dependencies, this caused double-compensation for scale, causing the dragged element not to follow the cursor. [#1393](https://github.com/STRML/react-grid-layout/pull/1393)
+  - Fix horizontal compact mode issue where it inadventently would compact the bottom of the grid. This is not useful nor intended. Thanks @s4m3. [#1390](https://github.com/STRML/react-grid-layout/pull/1390)
+  - Fix `onLayoutChange` sometimes not triggering on resize. We weren't cloning the layout item before modifying it. Thanks @xcqwan. [#1289](https://github.com/react-grid-layout/react-grid-layout/pull/1289)
+
+### Internal Refactors
+  - Updated to the latest versions of all dependencies (enzyme, webpack, jest, flow).
+  - Held back React@17 as enzyme is [not yet ready](https://github.com/enzymejs/enzyme/issues/2429).
+
+1.2.0 (Nov 17, 2020)
+---
+
+### New Features
+  - You can now customize your resizable handle component as supported by [`react-resizable`](https://github.com/STRML/react-resizable/blob/09fd865c0e1cc570caa8d67e44a2e56172d3d816/examples/ExampleLayout.js#L72). For example:
+  ```js
+    <ReactGridLayout resizeHandle={<span className="custom-handle custom-handle-se" />} {...props} />
+  ````
+  Thanks @typeetfunc [#1303](https://github.com/STRML/react-grid-layout/pull/1303)
+
+### Bugfixes
+  - Fix `onDrop` handler not firing on Firefox if you drop over the placeholder.
+    - Thanks @Charles-Lamoureux [#1333](https://github.com/STRML/react-grid-layout/pull/1333)
+  - Various example style fixes [#1283](https://github.com/STRML/react-grid-layout/pull/1283) [#1299](https://github.com/STRML/react-grid-layout/pull/1299)
+
+1.1.1 (Sep 10, 2020)
+---
+
+Republish to add `dist/` folder for unpkg use.
+
 1.1.0 (Sep 3, 2020)
 ---
 
@@ -26,10 +73,10 @@
 React-Grid-Layout has been in `0.x` status for far too long. With the addition of some new features in this version and a breaking change, I thought it was time to move to a stable semver.
 
 ### Breaking Changes
-   - `onDrop` callback now has a form more consistent with other callbacks.
-     - Previous type: `(elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void`
-     - New type: `(layout: Layout, item: ?LayoutItem, e: Event) => void`
-     - Thanks @ceberhar [#1169](https://github.com/STRML/react-grid-layout/pull/1169)
+  - `onDrop` callback now has a form more consistent with other callbacks.
+    - Previous type: `(elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void`
+    - New type: `(layout: Layout, item: ?LayoutItem, e: Event) => void`
+    - Thanks @ceberhar [#1169](https://github.com/STRML/react-grid-layout/pull/1169)
   - Dropping Node 8 compatibility and testing due to devDep incompatibilities
 
 ### New Features

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) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
+[**[Demo](https://react-grid-layout.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
 
@@ -36,24 +36,25 @@ RGL is React-only and does not require jQuery.
 
 ## Demos
 
-1. [Showcase](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
-1. [Basic](https://strml.github.io/react-grid-layout/examples/1-basic.html)
-1. [No Dragging/Resizing (Layout Only)](https://strml.github.io/react-grid-layout/examples/2-no-dragging.html)
-1. [Messy Layout Autocorrect](https://strml.github.io/react-grid-layout/examples/3-messy.html)
-1. [Layout Defined on Children](https://strml.github.io/react-grid-layout/examples/4-grid-property.html)
-1. [Static Elements](https://strml.github.io/react-grid-layout/examples/5-static-elements.html)
-1. [Adding/Removing Elements](https://strml.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
-1. [Saving Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/7-localstorage.html)
-1. [Saving a Responsive Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html)
-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)
-1. [Bounded Layout](https://strml.github.io/react-grid-layout/examples/16-bounded.html)
-1. [Resizable Handles](https://strml.github.io/react-grid-layout/examples/17-resizable-handles.html)
+1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)
+1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html)
+1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/2-no-dragging.html)
+1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/3-messy.html)
+1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/4-grid-property.html)
+1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/5-static-elements.html)
+1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
+1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/7-localstorage.html)
+1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/8-localstorage-responsive.html)
+1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/9-min-max-wh.html)
+1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
+1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
+1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html)
+1. [Error Case](https://react-grid-layout.github.io/react-grid-layout/examples/13-error-case.html)
+1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html)
+1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html)
+1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)
+1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
+1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -71,6 +72,8 @@ RGL is React-only and does not require jQuery.
 - [Monday](https://support.monday.com/hc/en-us/articles/360002187819-What-are-the-Dashboards-)
 - [Quadency](https://quadency.com/)
 - [Hakkiri](https://www.hakkiri.io)
+- [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)
+- [Statsout](https://statsout.com/)
 
 *Know of others? Create a PR to let me know!*
 
@@ -340,6 +343,8 @@ isDroppable: ?boolean = false
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
 resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+// Custom component for resize handles
+resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)
 
 //
 // Callbacks

package/build/GridItem.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,12 +21,12 @@ var _utils = require("./utils");
 
 var _calculateUtils = require("./calculateUtils");
 
+var _ReactGridLayoutPropTypes = require("./ReactGridLayoutPropTypes");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -45,7 +47,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -78,11 +80,11 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "currentNode", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e
-    /*: Event*/
-    , _ref) {
+    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e, _ref) {
       var node = _ref.node;
-      var onDragStart = _this.props.onDragStart;
+      var _this$props = _this.props,
+          onDragStart = _this$props.onDragStart,
+          transformScale = _this$props.transformScale;
       if (!onDragStart) return;
       var newPosition
       /*: PartialPosition*/
@@ -95,10 +97,10 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       if (!offsetParent) return;
       var parentRect = offsetParent.getBoundingClientRect();
       var clientRect = node.getBoundingClientRect();
-      var cLeft = clientRect.left / _this.props.transformScale;
-      var pLeft = parentRect.left / _this.props.transformScale;
-      var cTop = clientRect.top / _this.props.transformScale;
-      var pTop = parentRect.top / _this.props.transformScale;
+      var cLeft = clientRect.left / transformScale;
+      var pLeft = parentRect.left / transformScale;
+      var cTop = clientRect.top / transformScale;
+      var pTop = parentRect.top / transformScale;
       newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
       newPosition.top = cTop - pTop + offsetParent.scrollTop;
 
@@ -118,18 +120,12 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onDrag", function (e
-    /*: Event*/
-    , _ref2) {
+    _defineProperty(_assertThisInitialized(_this), "onDrag", function (e, _ref2) {
       var node = _ref2.node,
           deltaX = _ref2.deltaX,
           deltaY = _ref2.deltaY;
-      var _this$props = _this.props,
-          onDrag = _this$props.onDrag,
-          transformScale = _this$props.transformScale;
+      var onDrag = _this.props.onDrag;
       if (!onDrag) return;
-      deltaX /= transformScale;
-      deltaY /= transformScale;
 
       if (!_this.state.dragging) {
         throw new Error("onDrag called before onDragStart.");
@@ -185,9 +181,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onDragStop", function (e
-    /*: Event*/
-    , _ref3) {
+    _defineProperty(_assertThisInitialized(_this), "onDragStop", function (e, _ref3) {
       var node = _ref3.node;
       var onDragStop = _this.props.onDragStop;
       if (!onDragStop) return;
@@ -225,27 +219,15 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResizeStop", function (e
-    /*: Event*/
-    , callbackData
-    /*: { node: HTMLElement, size: Position }*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onResizeStop", function (e, callbackData) {
       _this.onResizeHandler(e, callbackData, "onResizeStop");
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function (e
-    /*: Event*/
-    , callbackData
-    /*: { node: HTMLElement, size: Position }*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function (e, callbackData) {
       _this.onResizeHandler(e, callbackData, "onResizeStart");
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResize", function (e
-    /*: Event*/
-    , callbackData
-    /*: { node: HTMLElement, size: Position }*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onResize", function (e, callbackData) {
       _this.onResizeHandler(e, callbackData, "onResize");
     });
 
@@ -258,7 +240,9 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
     /*: Props*/
     , nextState
     /*: State*/
-    ) {
+    )
+    /*: boolean*/
+    {
       // We can't deeply compare children. If the developer memoizes them, we can
       // use this optimization.
       if (this.props.children !== nextProps.children) return true;
@@ -428,7 +412,8 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
           maxW = _this$props6.maxW,
           maxH = _this$props6.maxH,
           transformScale = _this$props6.transformScale,
-          resizeHandles = _this$props6.resizeHandles;
+          resizeHandles = _this$props6.resizeHandles,
+          resizeHandle = _this$props6.resizeHandle;
       var positionParams = this.getPositionParams(); // This is the max possible width - doesn't go to infinity because of the width of the window
 
       var maxWidth = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, cols - x, 0).width; // Calculate min/max constraints using our min & maxes
@@ -450,7 +435,8 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
         onResizeStart: this.onResizeStart,
         onResize: this.onResize,
         transformScale: transformScale,
-        resizeHandles: resizeHandles
+        resizeHandles: resizeHandles,
+        handle: resizeHandle
       }, child);
     }
     /**
@@ -461,7 +447,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "onResizeHandler",
-
+    value:
     /**
      * Wrapper around drag events to provide more useful data.
      * All drag events call the function with the given handler name,
@@ -470,11 +456,13 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
      * @param  {String} handlerName Handler name to wrap.
      * @return {Function}           Handler function.
      */
-    value: function onResizeHandler(e
+    function onResizeHandler(e
     /*: Event*/
     , _ref4, handlerName
     /*: string*/
-    ) {
+    )
+    /*: void*/
+    {
       var node = _ref4.node,
           size = _ref4.size;
       var handler = this.props[handlerName];
@@ -609,6 +597,9 @@ _defineProperty(GridItem, "propTypes", {
   },
   // ID is nice to have for callbacks
   i: _propTypes.default.string.isRequired,
+  // Resize handle options
+  resizeHandles: _ReactGridLayoutPropTypes.resizeHandlesType,
+  resizeHandle: _ReactGridLayoutPropTypes.resizeHandleType,
   // Functions
   onDragStop: _propTypes.default.func,
   onDragStart: _propTypes.default.func,