diff --git a/__tests__/src/components/Window.test.js b/__tests__/src/components/Window.test.js index 5e8160376..ecfe22afb 100644 --- a/__tests__/src/components/Window.test.js +++ b/__tests__/src/components/Window.test.js @@ -1,4 +1,4 @@ -import { MosaicWindowContext } from 'react-mosaic-component2'; +import { MosaicWindowContext } from 'react-mosaic-component'; import { render, screen } from '@tests/utils/test-utils'; import { Window } from '../../../src/components/Window'; diff --git a/package.json b/package.json index 48895850f..dfd10edc4 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "react-full-screen": "^1.1.1", "react-image": "^4.0.1", "react-intersection-observer": "^10.0.0", - "react-mosaic-component2": "^7.0.0", + "react-mosaic-component": "^7.0.0-beta0", "react-redux": "^8.0.0 || ^9.0.0", "react-resize-observer": "^1.1.1", "react-rnd": "~10.4.0", diff --git a/src/components/Window.jsx b/src/components/Window.jsx index f9869f2fb..73cf091b5 100644 --- a/src/components/Window.jsx +++ b/src/components/Window.jsx @@ -2,7 +2,7 @@ import { useContext, useCallback } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; -import { MosaicWindowContext } from 'react-mosaic-component2'; +import { MosaicWindowContext } from 'react-mosaic-component'; import { ErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; import ns from '../config/css-ns'; diff --git a/src/components/WorkspaceMosaic.jsx b/src/components/WorkspaceMosaic.jsx index 33e3c5f63..dc46e1abb 100644 --- a/src/components/WorkspaceMosaic.jsx +++ b/src/components/WorkspaceMosaic.jsx @@ -4,8 +4,8 @@ import { styled } from '@mui/material/styles'; import GlobalStyles from '@mui/material/GlobalStyles'; import { DndContext } from 'react-dnd'; import { - Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves, -} from 'react-mosaic-component2'; + Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves, convertLegacyToNary, +} from 'react-mosaic-component'; import difference from 'lodash/difference'; import isEqual from 'lodash/isEqual'; import classNames from 'classnames'; @@ -78,19 +78,19 @@ const determineWorkspaceLayout = (currentLayout, windowIds, currentWindowPaths = export function WorkspaceMosaic({ layout = undefined, updateWorkspaceMosaicLayout, windowIds = [], workspaceId, }) { - const toolbarControls = []; - const additionalControls = []; - const windowPaths = useRef({}); const dndContext = useContext(DndContext); + // Convert legacy layout format to new format if needed + const normalizedLayout = layout ? convertLegacyToNary(layout) : layout; + useEffect(() => { - const leaveKeys = getLeaves(layout); + const leaveKeys = getLeaves(normalizedLayout); // Handle some trivial layout cases: // 1. No layout // 2. No windows // 3. Not enough windows to create a layout - if (!layout || windowIds.length === 0 || leaveKeys.length < 2) { + if (!normalizedLayout || windowIds.length === 0 || leaveKeys.length < 2) { updateWorkspaceMosaicLayout(createBalancedTreeFromLeaves(windowIds)); return undefined; @@ -101,16 +101,15 @@ export function WorkspaceMosaic({ return undefined; } - const newLayout = determineWorkspaceLayout(layout, windowIds, windowPaths.current); + const newLayout = determineWorkspaceLayout(normalizedLayout, windowIds, windowPaths.current); - if (!isEqual(newLayout, layout)) updateWorkspaceMosaicLayout(newLayout); + if (!isEqual(newLayout, normalizedLayout)) updateWorkspaceMosaicLayout(newLayout); return undefined; - }, [layout, windowIds, windowPaths, updateWorkspaceMosaicLayout]); + }, [normalizedLayout, windowIds, updateWorkspaceMosaicLayout]); + + const toolbarControls = []; - /** - * Render a tile (Window) in the Mosaic. - */ const tileRenderer = (id, path) => { if (!windowIds.includes(id)) return null; windowPaths.current[id] = path; @@ -118,7 +117,6 @@ export function WorkspaceMosaic({ return ( } diff --git a/src/lib/MosaicLayout.js b/src/lib/MosaicLayout.js index f9dfe3d5d..f25f47803 100644 --- a/src/lib/MosaicLayout.js +++ b/src/lib/MosaicLayout.js @@ -1,7 +1,7 @@ import { createRemoveUpdate, updateTree, getNodeAtPath, getOtherDirection, getPathToCorner, Corner, -} from 'react-mosaic-component2'; +} from 'react-mosaic-component'; import dropRight from 'lodash/dropRight'; /** */