Skip to content

Commit

Permalink
Replace react-mosaic with mirador-mosaic
Browse files Browse the repository at this point in the history
  • Loading branch information
cbeer committed Feb 22, 2023
1 parent f42b0e1 commit 63ceb33
Show file tree
Hide file tree
Showing 16 changed files with 152 additions and 405 deletions.
17 changes: 1 addition & 16 deletions __tests__/src/components/Workspace.test.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,7 +16,7 @@ function createWrapper(props) {
isWorkspaceControlPanelVisible
windowIds={['1', '2']}
workspaceId="foo"
workspaceType="mosaic"
workspaceType="elastic"
t={k => k}
{...props}
/>,
Expand All @@ -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' });
Expand Down
133 changes: 0 additions & 133 deletions __tests__/src/components/WorkspaceMosaic.test.js

This file was deleted.

19 changes: 10 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +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",
"re-reselect": "^4.0.0",
"react-aria-live": "^2.0.5",
"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",
Expand Down Expand Up @@ -115,8 +115,9 @@
"jsdom": "^21.0.0",
"puppeteer": "^19.0.0",
"raf": "^3.4.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"rdndmb-html5-to-touch": "^8.0.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",
Expand All @@ -126,7 +127,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"
}
}
4 changes: 2 additions & 2 deletions src/components/AppProviders.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,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';
Expand Down
19 changes: 8 additions & 11 deletions src/components/Window.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -35,24 +34,19 @@ export class Window extends Component {
*/
wrappedTopBar() {
const {
windowId, workspaceType, windowDraggable,
dragHandle, windowId, workspaceType, 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;
}

Expand Down Expand Up @@ -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,
Expand All @@ -138,6 +134,7 @@ Window.propTypes = {

Window.defaultProps = {
classes: {},
dragHandle: null,
focusWindow: () => {},
isFetching: false,
label: null,
Expand Down
6 changes: 3 additions & 3 deletions src/components/Workspace.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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
Expand Down
48 changes: 48 additions & 0 deletions src/components/WorkspaceGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Component, useContext, useCallback } from 'react';
import PropTypes from 'prop-types';
import { DndContext } from 'react-dnd';
import { Grid, GridContext, GridDispatchContext } from 'mirador-mosaic';
import Window from '../containers/Window';
import { useDispatch } from 'react-redux'

/**
* Represents a work area that contains any number of windows
* @memberof Workspace
* @private
*/
const WorkspaceGrid = ({ gridTemplate, windowIds }) => {
const dndContext = useContext(DndContext);
const dispatch = useDispatch();

const wrappedDispatch = useCallback((action) => {
dispatch({ ...action, type: `mirador/grid/${action.type}` });
}, [dispatch]);

return (
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<GridContext.Provider value={gridTemplate}>
<GridDispatchContext.Provider value={wrappedDispatch}>
<Grid dragAndDropManager={dndContext.dragDropManager}>
{
windowIds.map(windowId => (
<Window
id={windowId}
key={windowId}
windowId={windowId}
/>
))
}
</Grid>
</GridDispatchContext.Provider>
</GridContext.Provider>
</div>
);
}


WorkspaceGrid.propTypes = {
gridTemplate: PropTypes.object,
windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default WorkspaceGrid;
Loading

0 comments on commit 63ceb33

Please sign in to comment.