6.9.14 (#804)

* fix: 713 * 6.9.13 * fix: onResize * fix: onResize * 6.9.14
bokuweb · Apr 21, 2024 · 419080c · 419080c
1 parent 854376f
commit 419080c
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,7 +21,7 @@
 ### :house: Internal
 -->
 
-## [6.9.13 (2024-04-21)](https://github.com/bokuweb/re-resizable/compare/v6.9.13...v6.9.11)
+## [6.9.14 (2024-04-21)](https://github.com/bokuweb/re-resizable/compare/v6.9.14...v6.9.11)
 
 ### :bug: Bug Fix
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "re-resizable",
-  "version": "6.9.13",
+  "version": "6.9.14",
   "description": "Resizable component for React.",
   "title": "re-resizable",
   "main": "./lib/index.es5.js",

diff --git a/src/index.tsx b/src/index.tsx
@@ -797,16 +797,12 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
     newWidth = newSize.newWidth;
     newHeight = newSize.newHeight;
 
-    let widthChangedWithGrid = false;
-    let heightChangedWithGrid = false;
     if (this.props.grid) {
       const newGridWidth = snap(newWidth, this.props.grid[0]);
       const newGridHeight = snap(newHeight, this.props.grid[1]);
       const gap = this.props.snapGap || 0;
       const w = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
       const h = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
-      widthChangedWithGrid = w !== newWidth;
-      heightChangedWithGrid = h !== newHeight;
       newWidth = w;
       newHeight = h;
     }
@@ -853,16 +849,20 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
       newState.flexBasis = newState.height;
     }
 
-    // For v18, update state sync
-    flushSync(() => {
-      this.setState(newState);
-    });
+    const widthChanged = this.state.width !== newState.width;
+    const heightChanged = this.state.height !== newState.height;
+    const flexBaseChanged = this.state.flexBasis !== newState.flexBasis;
+    const changed = widthChanged || heightChanged || flexBaseChanged;
+
+    if (changed) {
+      // For v18, update state sync
+      flushSync(() => {
+        this.setState(newState);
+      });
+    }
 
     if (this.props.onResize) {
-      if (!this.props.grid) {
-        this.props.onResize(event, direction, this.resizable, delta);
-        // fix #783
-      } else if (widthChangedWithGrid || heightChangedWithGrid) {
+      if (changed) {
         this.props.onResize(event, direction, this.resizable, delta);
       }
     }

diff --git a/stories/auto.stories.tsx b/stories/auto.stories.tsx
@@ -4,7 +4,11 @@ import { storiesOf } from '@storybook/react';
 import { style } from './style';
 
 storiesOf('auto', module)
-  .add('default', () => <Resizable style={style}>001</Resizable>)
+  .add('default', () => (
+    <Resizable style={style} onResize={e => console.log(e)}>
+      001
+    </Resizable>
+  ))
   .add('height', () => (
     <Resizable
       style={style}

diff --git a/stories/snap.stories.tsx b/stories/snap.stories.tsx
@@ -8,14 +8,25 @@ storiesOf('snapping', module)
     <Resizable
       style={style}
       snap={{ x: [100, 300, 450], y: [100, 300, 450] }}
-      snapGap={20}
+      snapGap={100}
       defaultSize={{ width: 50, height: 50 }}
+      onResize={a => {
+        console.log(a);
+      }}
     >
       001
     </Resizable>
   ))
   .add('grid', () => (
-    <Resizable style={style} grid={[100, 100]} snapGap={20} defaultSize={{ width: 50, height: 50 }}>
+    <Resizable
+      style={style}
+      grid={[100, 100]}
+      snapGap={20}
+      defaultSize={{ width: 50, height: 50 }}
+      onResize={a => {
+        console.log(a);
+      }}
+    >
       001
     </Resizable>
   ));