Replace react-mosaic with mirador-mosaic

Author: cbeer

__tests__/src/components/Workspace.test.js

@@ -1,6 +1,5 @@
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
-import WorkspaceMosaic from '../../../src/containers/WorkspaceMosaic';
 import WorkspaceElastic from '../../../src/containers/WorkspaceElastic';
 import Window from '../../../src/containers/Window';
 import { Workspace } from '../../../src/components/Workspace';
@@ -17,7 +16,7 @@ function createWrapper(props) {
       isWorkspaceControlPanelVisible
       windowIds={['1', '2']}
       workspaceId="foo"
-      workspaceType="mosaic"
+      workspaceType="elastic"
       t={k => k}
       {...props}
     />,
@@ -39,20 +38,6 @@ describe('Workspace', () => {
       )).toBe(true);
     });
   });
-  describe('if workspace type is mosaic', () => {
-    it('should render <WorkspaceMosaic/> properly', () => {
-      const wrapper = createWrapper();
-
-      expect(wrapper.matchesElement(
-        <IIIFDropTarget>
-          <div className="mirador-workspace-viewport mirador-workspace-with-control-panel">
-            <Typography>miradorViewer</Typography>
-            <WorkspaceMosaic />
-          </div>
-        </IIIFDropTarget>,
-      )).toBe(true);
-    });
-  });
   describe('if workspace type is unknown', () => {
     it('should render <Window/> components as list', () => {
       const wrapper = createWrapper({ workspaceType: 'bubu' });

__tests__/src/components/WorkspaceMosaic.test.js

@@ -47,20 +47,21 @@
     "jss-rtl": "^0.3.0",
     "lodash": "^4.17.11",
     "manifesto.js": "^4.2.0",
+    "mirador-mosaic": "^0.0.1",
     "normalize-url": "^4.5.0",
     "openseadragon": "^2.4.2 || ^3.0.0 || ^4.0.0",
     "prop-types": "^15.6.2",
+    "rdndmb-html5-to-touch": "^8.0.0",
     "re-reselect": "^4.0.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dnd-multi-backend": "^5.0.0",
-    "react-dnd-touch-backend": "^10.0.2",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.0",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-full-screen": "^1.1.1",
     "react-i18next": "^11.7.0 || ^12.0.0",
     "react-image": "^4.0.1",
     "react-intersection-observer": "^9.0.0",
-    "react-mosaic-component": "^4.0.1",
     "react-redux": "^7.1.0 || ^8.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",
@@ -114,8 +115,8 @@
     "jsdom": "^21.0.0",
     "puppeteer": "^19.0.0",
     "raf": "^3.4.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
@@ -125,7 +126,7 @@
     "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   }
 }

__tests__/src/lib/MosaicLayout.test.js

@@ -6,8 +6,8 @@ import {
   ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import { DndContext, DndProvider } from 'react-dnd';
-import MultiBackend from 'react-dnd-multi-backend';
-import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
+import { MultiBackend } from 'react-dnd-multi-backend';
+import { HTML5toTouch } from 'rdndmb-html5-to-touch';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import createI18nInstance from '../i18n';

package.json

@@ -2,7 +2,6 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes';
 import ns from '../config/css-ns';
 import WindowTopBar from '../containers/WindowTopBar';
 import PrimaryWindow from '../containers/PrimaryWindow';
@@ -35,24 +34,19 @@ export class Window extends Component {
    */
   wrappedTopBar() {
     const {
-      windowId, workspaceType, windowDraggable,
+      dragHandle, windowId, windowDraggable,
     } = this.props;
 
     const topBar = (
-      <div>
+      <div ref={dragHandle}>
         <WindowTopBar
           windowId={windowId}
           windowDraggable={windowDraggable}
+          dragHandle={dragHandle}
         />
         <IIIFAuthentication windowId={windowId} />
       </div>
     );
-    if (workspaceType === 'mosaic' && windowDraggable) {
-      const { mosaicWindowActions } = this.context;
-      return mosaicWindowActions.connectDragSource(
-        topBar,
-      );
-    }
     return topBar;
   }
 
@@ -119,10 +113,12 @@ export class Window extends Component {
   }
 }
 
-Window.contextType = MosaicWindowContext;
-
 Window.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string),
+  dragHandle: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   focusWindow: PropTypes.func,
   isFetching: PropTypes.bool,
   label: PropTypes.string,
@@ -133,11 +129,11 @@ Window.propTypes = {
   view: PropTypes.string,
   windowDraggable: PropTypes.bool,
   windowId: PropTypes.string.isRequired,
-  workspaceType: PropTypes.string,
 };
 
 Window.defaultProps = {
   classes: {},
+  dragHandle: null,
   focusWindow: () => {},
   isFetching: false,
   label: null,
@@ -146,5 +142,4 @@ Window.defaultProps = {
   sideBarOpen: false,
   view: undefined,
   windowDraggable: null,
-  workspaceType: null,
 };

src/components/AppProviders.js

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Window from '../containers/Window';
-import WorkspaceMosaic from '../containers/WorkspaceMosaic';
 import WorkspaceElastic from '../containers/WorkspaceElastic';
+import WorkspaceGrid from '../containers/WorkspaceGrid';
 import ns from '../config/css-ns';
 import { IIIFDropTarget } from './IIIFDropTarget';
 
@@ -45,8 +45,8 @@ export class Workspace extends Component {
     switch (workspaceType) {
       case 'elastic':
         return <WorkspaceElastic />;
-      case 'mosaic':
-        return <WorkspaceMosaic />;
+      case 'grid':
+        return <WorkspaceGrid />;
       default:
         return windowIds.map(windowId => (
           <Window