react-grid-layout - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

build/GridItem.js

@@ -8,2 +8,3 @@ "use strict";
 var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -170,4 +171,5 @@ var _reactDraggable = require("react-draggable");
      * @param  {Object} callbackData  an object with node, delta and position information
+     * @param  {boolean} dontFlush    if true, will not call flushSync
      */
-    _defineProperty(this, "onDrag", (e, _ref2) => {
+    _defineProperty(this, "onDrag", (e, _ref2, dontFlush) => {
       let {
@@ -218,6 +220,16 @@ node,
       };
-      this.setState({
-        dragging: newPosition
-      });
 
+      // dontFlush is set if we're calling from inside
+      if (dontFlush) {
+        this.setState({
+          dragging: newPosition
+        });
+      } else {
+        (0, _reactDom.flushSync)(() => {
+          this.setState({
+            dragging: newPosition
+          });
+        });
+      }
+
       // Call callback with this data
@@ -335,5 +347,7 @@ const {
         deltaY
-      });
+      }, true // dontFLush: avoid flushSync to temper warnings
+      );
     }
   }
+
   getPositionParams() /*: PositionParams*/{
@@ -488,4 +502,6 @@ let props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
       updatedSize = (0, _utils.resizeItemInDirection)(handle, position, size, containerWidth);
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      (0, _reactDom.flushSync)(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
       });
@@ -492,0 +508,0 @@ }

lib/GridItem.jsx

 // @flow
 import React from "react";
+import { flushSync } from "react-dom";
 import PropTypes from "prop-types";
@@ -296,7 +297,11 @@ import { DraggableCore } from "react-draggable";
 
-      this.onDrag(droppingPosition.e, {
-        node,
-        deltaX,
-        deltaY
-      });
+      this.onDrag(
+        droppingPosition.e,
+        {
+          node,
+          deltaX,
+          deltaY
+        },
+        true // dontFLush: avoid flushSync to temper warnings
+      );
     }
@@ -485,6 +490,8 @@ }
    * @param  {Object} callbackData  an object with node, delta and position information
+   * @param  {boolean} dontFlush    if true, will not call flushSync
    */
-  onDrag: (Event, ReactDraggableCallbackData) => void = (
+  onDrag: (Event, ReactDraggableCallbackData, boolean) => void = (
     e,
-    { node, deltaX, deltaY }
+    { node, deltaX, deltaY },
+    dontFlush
   ) => {
@@ -521,4 +528,12 @@ const { onDrag } = this.props;
     const newPosition: PartialPosition = { top, left };
-    this.setState({ dragging: newPosition });
 
+    // dontFlush is set if we're calling from inside
+    if (dontFlush) {
+      this.setState({ dragging: newPosition });
+    } else {
+      flushSync(() => {
+        this.setState({ dragging: newPosition });
+      });
+    }
+
     // Call callback with this data
@@ -598,4 +613,6 @@ const { x, y } = calcXY(positionParams, top, left, w, h);
       );
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      flushSync(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
       });
@@ -602,0 +619,0 @@ }

package.json

 {
   "name": "react-grid-layout",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

526942

0.22%

Lines of code

6641

0.45%

No dependency changes