DashboardGrid: Ensure drag handle always follows the cursor (#88099)

use flushSync in react-grid-layout
2025-02-25 18:55:37 -06:00 · 2024-05-28 09:46:04 +01:00
parent 3d9908f363
commit 6f9527b4c2
3 changed files with 144 additions and 28 deletions
--- a/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch
+++ b/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch
@@ -0,0 +1,121 @@
+diff --git a/build/GridItem.js b/build/GridItem.js
+index 0a700da9f1180ca532e32e04dc7ea50f2e67b96c..a2e4673fa1133aeaa4018cc01312ca386c3395f5 100644
+--- a/build/GridItem.js
+++ b/build/GridItem.js
+@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
+ });
+ exports.default = void 0;
+ var _react = _interopRequireDefault(require("react"));
+var _reactDOM = require("react-dom");
+ var _propTypes = _interopRequireDefault(require("prop-types"));
+ var _reactDraggable = require("react-draggable");
+ var _reactResizable = require("react-resizable");
+@@ -147,8 +148,10 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
+       const pTop = parentRect.top / transformScale;
+       newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+       newPosition.top = cTop - pTop + offsetParent.scrollTop;
+-      this.setState({
+-        dragging: newPosition
+      _reactDOM.flushSync(() => {
+        this.setState({
+          dragging: newPosition
+        });
+       });
+ 
+       // Call callback with this data
+@@ -213,8 +216,10 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
+         top,
+         left
+       };
+-      this.setState({
+-        dragging: newPosition
+      _reactDOM.flushSync(() => {
+        this.setState({
+          dragging: newPosition
+        });
+       });
+ 
+       // Call callback with this data
+@@ -261,8 +266,10 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
+         top,
+         left
+       };
+-      this.setState({
+-        dragging: null
+      _reactDOM.flushSync(() => {
+        this.setState({
+          dragging: null
+        });
+       });
+       const {
+         x,
+@@ -485,8 +492,10 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
+     let updatedSize = size;
+     if (node) {
+       updatedSize = (0, _utils.resizeItemInDirection)(handle, position, size, containerWidth);
+-      this.setState({
+-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      _reactDOM.flushSync(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
+       });
+     }
+ 
+diff --git a/lib/GridItem.jsx b/lib/GridItem.jsx
+index dbe41f92388f19d3e476690fa0ee5584ab9d5bb4..1e4713667cd7dadd6618fe06176804a02ee3ccc2 100644
+--- a/lib/GridItem.jsx
+++ b/lib/GridItem.jsx
+@@ -1,5 +1,6 @@
+ // @flow
+ import React from "react";
+import { flushSync } from "react-dom";
+ import PropTypes from "prop-types";
+ import { DraggableCore } from "react-draggable";
+ import { Resizable } from "react-resizable";
+@@ -459,7 +460,9 @@ export default class GridItem extends React.Component<Props, State> {
+     const pTop = parentRect.top / transformScale;
+     newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+     newPosition.top = cTop - pTop + offsetParent.scrollTop;
+-    this.setState({ dragging: newPosition });
+    flushSync(() => {
+      this.setState({ dragging: newPosition });
+    });
+ 
+     // Call callback with this data
+     const { x, y } = calcXY(
+@@ -516,7 +519,9 @@ export default class GridItem extends React.Component<Props, State> {
+     }
+ 
+     const newPosition: PartialPosition = { top, left };
+-    this.setState({ dragging: newPosition });
+    flushSync(() => {
+      this.setState({ dragging: newPosition });
+    });
+ 
+     // Call callback with this data
+     const { containerPadding } = this.props;
+@@ -549,7 +554,9 @@ export default class GridItem extends React.Component<Props, State> {
+     const { w, h, i, containerPadding } = this.props;
+     const { left, top } = this.state.dragging;
+     const newPosition: PartialPosition = { top, left };
+-    this.setState({ dragging: null });
+    flushSync(() => {
+      this.setState({ dragging: null });
+    });
+ 
+     const { x, y } = calcXY(
+       this.getPositionParams(),
+@@ -605,8 +612,10 @@ export default class GridItem extends React.Component<Props, State> {
+         size,
+         containerWidth
+       );
+-      this.setState({
+-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      flushSync(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
+       });
+     }
+ 
--- a/package.json
+++ b/package.json
@@ -354,7 +354,7 @@
    "react-dom": "18.2.0",
    "react-draggable": "4.4.6",
    "react-dropzone": "^14.2.3",
-    "react-grid-layout": "1.4.4",
+    "react-grid-layout": "patch:react-grid-layout@npm%3A1.4.4#~/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch",
    "react-highlight-words": "0.20.0",
    "react-hook-form": "^7.49.2",
    "react-i18next": "^14.0.0",
@@ -414,7 +414,8 @@
    "history@4.10.1": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
    "history@^4.9.0": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
    "redux": "^5.0.0",
-    "@storybook/blocks@npm:8.0.10": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch"
+    "@storybook/blocks@npm:8.0.10": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch",
+    "react-grid-layout": "patch:react-grid-layout@npm%3A1.4.4#~/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch"
  },
  "workspaces": {
    "packages": [
--- a/yarn.lock
+++ b/yarn.lock
@@ -16943,7 +16943,7 @@ __metadata:
    react-dom: "npm:18.2.0"
    react-draggable: "npm:4.4.6"
    react-dropzone: "npm:^14.2.3"
-    react-grid-layout: "npm:1.4.4"
+    react-grid-layout: "patch:react-grid-layout@npm%3A1.4.4#~/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch"
    react-highlight-words: "npm:0.20.0"
    react-hook-form: "npm:^7.49.2"
    react-i18next: "npm:^14.0.0"
@@ -20251,13 +20251,6 @@ __metadata:
  languageName: node
  linkType: hard

-"lodash.isequal@npm:^4.0.0":
-  version: 4.5.0
-  resolution: "lodash.isequal@npm:4.5.0"
-  checksum: 10/82fc58a83a1555f8df34ca9a2cd300995ff94018ac12cc47c349655f0ae1d4d92ba346db4c19bbfc90510764e0c00ddcc985a358bdcd4b3b965abf8f2a48a214
-  languageName: node
-  linkType: hard
-
 "lodash.ismatch@npm:^4.4.0":
  version: 4.4.0
  resolution: "lodash.ismatch@npm:4.4.0"
@@ -24784,7 +24777,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-draggable@npm:4.4.6, react-draggable@npm:^4.0.0, react-draggable@npm:^4.0.3, react-draggable@npm:^4.4.5":
+"react-draggable@npm:4.4.6, react-draggable@npm:^4.0.3, react-draggable@npm:^4.4.5":
  version: 4.4.6
  resolution: "react-draggable@npm:4.4.6"
  dependencies:
@@ -24860,22 +24853,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-grid-layout@npm:1.3.4":
-  version: 1.3.4
-  resolution: "react-grid-layout@npm:1.3.4"
-  dependencies:
-    clsx: "npm:^1.1.1"
-    lodash.isequal: "npm:^4.0.0"
-    prop-types: "npm:^15.8.1"
-    react-draggable: "npm:^4.0.0"
-    react-resizable: "npm:^3.0.4"
-  peerDependencies:
-    react: ">= 16.3.0"
-    react-dom: ">= 16.3.0"
-  checksum: 10/944ab133e59bfaa5633625f57be9f69133b5cec2de0232d9581e2c988e257ebafe010ee9bbbff6c2754f9d7d8bb0053072bac103f20fc232be2a58e15d14fc64
-  languageName: node
-  linkType: hard
-
 "react-grid-layout@npm:1.4.4":
  version: 1.4.4
  resolution: "react-grid-layout@npm:1.4.4"
@@ -24893,6 +24870,23 @@ __metadata:
  languageName: node
  linkType: hard

+"react-grid-layout@patch:react-grid-layout@npm%3A1.4.4#~/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch":
+  version: 1.4.4
+  resolution: "react-grid-layout@patch:react-grid-layout@npm%3A1.4.4#~/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch::version=1.4.4&hash=e69ce6"
+  dependencies:
+    clsx: "npm:^2.0.0"
+    fast-equals: "npm:^4.0.3"
+    prop-types: "npm:^15.8.1"
+    react-draggable: "npm:^4.4.5"
+    react-resizable: "npm:^3.0.5"
+    resize-observer-polyfill: "npm:^1.5.1"
+  peerDependencies:
+    react: ">= 16.3.0"
+    react-dom: ">= 16.3.0"
+  checksum: 10/fcc4fe40e38d723870dbc138af9a4a58dff6459efd191d03a66de2e663e169591a66d77b0f377bad780f64f4e24ca41735e4b2ecd99ae7c48071a0b8a1876a25
+  languageName: node
+  linkType: hard
+
 "react-highlight-words@npm:0.20.0":
  version: 0.20.0
  resolution: "react-highlight-words@npm:0.20.0"
@@ -25117,7 +25111,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-resizable@npm:3.0.5, react-resizable@npm:^3.0.4, react-resizable@npm:^3.0.5":
+"react-resizable@npm:3.0.5, react-resizable@npm:^3.0.5":
  version: 3.0.5
  resolution: "react-resizable@npm:3.0.5"
  dependencies: