diff --git a/CHANGELOG.md b/CHANGELOG.md index f2f4cb806..f6ef7fa3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,10 @@ provided by FontAwesome. * Improved accuracy of `PersistOptions.type` enum. +### 📚 Libraries + +* react-grid-layout `1.4.3 → 1.5.0` + ## v70.0.0 - 2024-11-15 ### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - changes to advanced persistence APIs) diff --git a/desktop/cmp/dash/canvas/DashCanvas.ts b/desktop/cmp/dash/canvas/DashCanvas.ts index f8723ff98..42ab3cb0a 100644 --- 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'; @@ -49,13 +48,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory({ render({className, model, testId}, ref) { const isDraggable = !model.layoutLocked, - isResizable = !model.layoutLocked; - - ref = composeRefs( - ref, - model.ref, - useOnVisibleChange(viz => model.onVisibleChange(viz)) - ); + isResizable = !model.layoutLocked, + [padX, padY] = model.containerPadding; return refreshContextView({ model: model.refreshContextModel, @@ -65,7 +59,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory({ isDraggable ? `${className}--draggable` : null, isResizable ? `${className}--resizable` : null ), - ref, + style: {padding: `${padY}px ${padX}px`}, + ref: composeRefs(ref, model.ref), onContextMenu: e => onContextMenu(e, model), items: [ reactGridLayout({ @@ -77,7 +72,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory({ compactType: model.compact ? 'vertical' : null, margin: model.margin, maxRows: model.maxRows, - containerPadding: model.containerPadding, + containerPadding: [0, 0], // Workaround for https://github.com/react-grid-layout/react-grid-layout/issues/1990 autoSize: true, isBounded: true, draggableHandle: diff --git a/desktop/cmp/dash/canvas/DashCanvasModel.ts b/desktop/cmp/dash/canvas/DashCanvasModel.ts index 4bdf826ef..c491de5c3 100644 --- a/desktop/cmp/dash/canvas/DashCanvasModel.ts +++ b/desktop/cmp/dash/canvas/DashCanvasModel.ts @@ -27,22 +27,28 @@ import { } from 'lodash'; export interface DashCanvasConfig extends DashConfig { - /** Total number of columns (x coordinates for views correspond with column numbers). */ + /** + * Total number of columns (x coordinates for views correspond with column numbers). + * Default `12`. + */ columns?: number; - /** Height of each row in pixels (y coordinates for views correspond with row numbers). */ + /** + * Height of each row in pixels (y coordinates for views correspond with row numbers). + * Default `50`. + */ rowHeight?: number; - /** Whether views should "compact" vertically to condense vertical space. */ + /** Whether views should "compact" vertically to condense vertical space. Default `true`. */ compact?: boolean; - /** Between items [x,y] in pixels. */ + /** Between items [x,y] in pixels. Default `[10, 10]`. */ margin?: [number, number]; - /** Maximum number of rows permitted for this container. */ + /** Maximum number of rows permitted for this container. Default `Infinity`. */ maxRows?: number; - /** Padding inside the container [x, y] in pixels. */ + /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */ containerPadding?: [number, number]; } @@ -97,7 +103,6 @@ export class DashCanvasModel @observable.ref layout: any[] = []; ref = createObservableRef(); isResizing: boolean; - private scrollbarVisible: boolean; private isLoadingState: boolean; get rglLayout() { @@ -131,7 +136,7 @@ export class DashCanvasModel compact = true, margin = [10, 10], maxRows = Infinity, - containerPadding = null, + containerPadding = margin, extraMenuItems }: DashCanvasConfig) { super(); @@ -194,19 +199,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 +381,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 +394,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 +511,4 @@ export class DashCanvasModel return {x: defaultX, y: endY ?? rows}; } - - private fireWindowResizeEvent() { - window.dispatchEvent(new Event('resize')); - } } diff --git a/package.json b/package.json index c40d801e0..ed253736b 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "react-beautiful-dnd": "~13.1.0", "react-dates": "~21.8.0", "react-dropzone": "~10.2.2", - "react-grid-layout": "1.4.3", + "react-grid-layout": "1.5.0", "react-markdown": "~9.0.1", "react-onsenui": "~1.13.2", "react-popper": "~2.3.0", diff --git a/yarn.lock b/yarn.lock index 153b9cc55..078cf71b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6427,10 +6427,10 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== -react-grid-layout@1.4.3: - version "1.4.3" - resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.4.3.tgz#9622c4dbdbc863bf1a29a50ed5c35c4c52922d3a" - integrity sha512-maZJfspM5aDmO/1kJj1U13HQ44rh6svcV7VQPOU9c2UfZhh8Z5AuZb+iVrzETWjsisHBYD3e2zckVovUnqvGHA== +react-grid-layout@1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.5.0.tgz#b6cc9412b58cf8226aebc0df7673d6fa782bdee2" + integrity sha512-WBKX7w/LsTfI99WskSu6nX2nbJAUD7GD6nIXcwYLyPpnslojtmql2oD3I2g5C3AK8hrxIarYT8awhuDIp7iQ5w== dependencies: clsx "^2.0.0" fast-equals "^4.0.3"