Remove resize event workaround (see react-grid-layout/react-grid-layo…

…ut#1839)
xh · Dec 30, 2024 · 81e12dd · 81e12dd
1 parent 4a6ec28
commit 81e12dd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 41 deletions.
diff --git a/desktop/cmp/dash/canvas/DashCanvas.ts b/desktop/cmp/dash/canvas/DashCanvas.ts
@@ -19,7 +19,6 @@ import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAd
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {TEST_ID} from '@xh/hoist/utils/js';
-import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
@@ -52,12 +51,6 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
             isResizable = !model.layoutLocked,
             [padX, padY] = model.containerPadding ?? [10, 10];
 
-        ref = composeRefs(
-            ref,
-            model.ref,
-            useOnVisibleChange(viz => model.onVisibleChange(viz))
-        );
-
         return refreshContextView({
             model: model.refreshContextModel,
             item: div({
@@ -67,7 +60,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isResizable ? `${className}--resizable` : null
                 ),
                 style: {padding: `${padY}px ${padX}px`},
-                ref,
+                ref: composeRefs(ref, model.ref),
                 onContextMenu: e => onContextMenu(e, model),
                 items: [
                     reactGridLayout({

diff --git a/desktop/cmp/dash/canvas/DashCanvasModel.ts b/desktop/cmp/dash/canvas/DashCanvasModel.ts
@@ -97,7 +97,6 @@ export class DashCanvasModel
     @observable.ref layout: any[] = [];
     ref = createObservableRef<HTMLElement>();
     isResizing: boolean;
-    private scrollbarVisible: boolean;
     private isLoadingState: boolean;
 
     get rglLayout() {
@@ -194,19 +193,10 @@ export class DashCanvasModel
             });
         }
 
-        this.addReaction(
-            {
-                track: () => this.viewState,
-                run: () => (this.state = this.buildState())
-            },
-            {
-                when: () => !!this.ref.current,
-                run: () => {
-                    const {current: node} = this.ref;
-                    this.scrollbarVisible = node.offsetWidth > node.clientWidth;
-                }
-            }
-        );
+        this.addReaction({
+            track: () => this.viewState,
+            run: () => (this.state = this.buildState())
+        });
     }
 
     /** Removes all views from the canvas */
@@ -385,12 +375,6 @@ export class DashCanvasModel
         return model;
     }
 
-    // Trigger window resize event when component becomes visible to ensure layout adjusted to
-    // current window size - fixes https://github.com/xh/hoist-react/issues/3215
-    onVisibleChange(visible: boolean) {
-        if (visible) this.fireWindowResizeEvent();
-    }
-
     onRglLayoutChange(rglLayout) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
         this.setLayout(rglLayout);
@@ -404,15 +388,6 @@ export class DashCanvasModel
 
         this.layout = layout;
         if (!this.isLoadingState) this.state = this.buildState();
-
-        // Check if scrollbar visibility has changed, and force resize event if so
-        const node = this.ref.current;
-        if (!node) return;
-        const scrollbarVisible = node.offsetWidth > node.clientWidth;
-        if (scrollbarVisible !== this.scrollbarVisible) {
-            this.fireWindowResizeEvent();
-            this.scrollbarVisible = scrollbarVisible;
-        }
     }
 
     @action
@@ -530,8 +505,4 @@ export class DashCanvasModel
 
         return {x: defaultX, y: endY ?? rows};
     }
-
-    private fireWindowResizeEvent() {
-        window.dispatchEvent(new Event('resize'));
-    }
 }