From 6f9527b4c2c5b4115c8fd925123b8b4c3d70e0d1 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 28 May 2024 09:46:04 +0100 Subject: [PATCH] DashboardGrid: Ensure drag handle always follows the cursor (#88099) use flushSync in react-grid-layout --- ...act-grid-layout-npm-1.4.4-4024c5395b.patch | 121 ++++++++++++++++++ package.json | 5 +- yarn.lock | 46 +++---- 3 files changed, 144 insertions(+), 28 deletions(-) create mode 100644 .yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch diff --git a/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch b/.yarn/patches/react-grid-layout-npm-1.4.4-4024c5395b.patch new file mode 100644 index 00000000000..db47c9be1f2 --- /dev/null +++ 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 /*:: */{ + 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 /*:: */{ + 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 /*:: */{ + top, + left + }; +- this.setState({ +- dragging: null ++ _reactDOM.flushSync(() => { ++ this.setState({ ++ dragging: null ++ }); + }); + const { + x, +@@ -485,8 +492,10 @@ class GridItem extends _react.default.Component /*:: */{ + 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 { + 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 { + } + + 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 { + 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 { + size, + containerWidth + ); +- this.setState({ +- resizing: handlerName === "onResizeStop" ? null : updatedSize ++ flushSync(() => { ++ this.setState({ ++ resizing: handlerName === "onResizeStop" ? null : updatedSize ++ }); + }); + } + diff --git a/package.json b/package.json index 6ac0227edbf..0831fdf13f5 100644 --- 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": [ diff --git a/yarn.lock b/yarn.lock index ab34cf20422..c53990fd397 100644 --- 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: