Replace class components with functions + hooks.

.eslintrc

@@ -14,6 +14,7 @@
     "react/jsx-fragments": "off",
     "react/jsx-props-no-spreading": "off",
     "react/prefer-stateless-function": "off",
-    "react/function-component-definition": "off"
+    "react/function-component-definition": "off",
+    "react/require-default-props": "off"
   }
 }

__tests__/test-utils.js

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import { createStore, applyMiddleware } from 'redux';
 import { thunk } from 'redux-thunk';
 import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import createRootReducer from 'mirador/dist/es/src/state/reducers/rootReducer';
-import settings from 'mirador/dist/es/src/config/settings';
+import { rootReducer as createRootReducer, settings } from 'mirador';
 
 const rootReducer = createRootReducer();
 const theme = createTheme(settings.theme);

demo/src/index.js

@@ -1,4 +1,4 @@
-import Mirador from 'mirador/dist/es/src/index';
+import Mirador from 'mirador';
 import miradorDownloadPlugins from '../../src';
 
 const config = {

jest.config.js

@@ -13,7 +13,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   // Ignore Mirador/Manifesto/dnd libs code from jest transforms
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!(mirador|manifesto.js|react-dnd|dnd-core|@react-dnd|dnd-multi-backend|rdndmb-html5-to-touch))',
+    '<rootDir>/node_modules/(?!(mirador|manifesto.js|react-dnd|dnd-core|@react-dnd|dnd-multi-backend|rdndmb-html5-to-touch|react-mosaic-component2|lodash-es))',
   ],
   testPathIgnorePatterns: [
     '<rootDir>/__tests__/test-utils.js',

package.json

@@ -33,9 +33,10 @@
   "peerDependencies": {
     "@mui/material": "^5.x",
     "lodash": "^4.17.11",
-    "mirador": "^4.0.0-alpha.5",
+    "mirador": "^4.0.0-alpha.7",
     "react": "18.x",
-    "react-dom": "18.x"
+    "react-dom": "18.x",
+    "react-i18next": "^13.0.0 || ^14.0.0 || ^15.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",

src/ManifestDownloadLinks.js

@@ -1,36 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-
+import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
 import List from '@mui/material/List';
 import RenderingDownloadLink from './RenderingDownloadLink';
 
 /**
  * ManifestDownloadLinks ~
  */
-export default class ManifestDownloadLinks extends Component {
-  /**
-   * Returns the rendered component
-   */
-  render() {
-    const { renderings, t } = this.props;
+export default function ManifestDownloadLinks({ renderings }) {
+  const { t } = useTranslation();
 
-    return (
-      <React.Fragment>
-        <Typography variant="h3" sx={{ marginTop: '20px' }}>
-          {t('mirador-dl-plugin.other_download')}
-        </Typography>
-        <List>
-          {renderings.map((rendering) => (
-            <RenderingDownloadLink rendering={rendering} key={rendering.id} />
-          ))}
-        </List>
-      </React.Fragment>
-    );
-  }
+  return (
+    <>
+      <Typography variant="h3" sx={{ marginTop: '20px' }}>
+        {t('mirador-dl-plugin.other_download')}
+      </Typography>
+      <List>
+        {renderings.map((rendering) => (
+          <RenderingDownloadLink rendering={rendering} key={rendering.id} />
+        ))}
+      </List>
+    </>
+  );
 }
 
 ManifestDownloadLinks.propTypes = {
   renderings: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-  t: PropTypes.func.isRequired,
 };

src/MiradorDownloadDialog.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import {
   getCanvasLabel,
   getContainerId,
@@ -40,9 +41,20 @@ const mapStateToProps = (state, { windowId }) => ({
 /**
  * MiradorDownloadDialog ~
  */
-export class MiradorDownloadDialog extends Component {
-  renderings() {
-    const { manifest } = this.props;
+export function MiradorDownloadDialog({
+  canvases = [],
+  canvasLabel,
+  closeDialog,
+  containerId,
+  infoResponse,
+  manifest = {},
+  open = false,
+  restrictDownloadOnSizeDefinition = false,
+  viewType,
+  windowId,
+}) {
+  const { t } = useTranslation();
+  const renderings = useMemo(() => {
     if (
       !(
         manifest
@@ -53,71 +65,53 @@ export class MiradorDownloadDialog extends Component {
     ) return [];
 
     return manifest.getSequences()[0].getRenderings();
-  }
+  }, [manifest]);
 
-  /**
-   * Returns the rendered component
-   */
-  render() {
-    const {
-      canvases,
-      canvasLabel,
-      closeDialog,
-      containerId,
-      infoResponse,
-      open,
-      restrictDownloadOnSizeDefinition,
-      t,
-      viewType,
-      windowId,
-    } = this.props;
+  if (!open) return '';
 
-    if (!open) return '';
-
-    return (
-      <Dialog
-        data-testid="dialog-content"
-        container={document.querySelector(`#${containerId} .mirador-viewer`)}
-        disableEnforceFocus
-        onClose={closeDialog}
-        open={open}
-        scroll="paper"
-        fullWidth
-        maxWidth="xs"
-      >
-        <DialogTitle sx={{ paddingBottom: 0 }}>
-          <Typography variant="h2" component="span">{t('mirador-dl-plugin.download')}</Typography>
-        </DialogTitle>
-        <ScrollIndicatedDialogContent>
-          {canvases.map((canvas) => (
-            <CanvasDownloadLinks
-              canvas={canvas}
-              canvasLabel={canvasLabel(canvas.id)}
-              infoResponse={infoResponse(canvas.id)}
-              restrictDownloadOnSizeDefinition={
-                  restrictDownloadOnSizeDefinition
-                }
-              key={canvas.id}
-              t={t}
-              viewType={viewType}
-              windowId={windowId}
-            />
-          ))}
-          {this.renderings().length > 0 && (
-          <ManifestDownloadLinks
-            renderings={this.renderings()}
+  return (
+    <Dialog
+      data-testid="dialog-content"
+      container={document.querySelector(`#${containerId} .mirador-viewer`)}
+      disableEnforceFocus
+      onClose={closeDialog}
+      open={open}
+      scroll="paper"
+      fullWidth
+      maxWidth="xs"
+    >
+      <DialogTitle sx={{ paddingBottom: 0 }}>
+        <Typography variant="h2" component="span">{t('mirador-dl-plugin.download')}</Typography>
+      </DialogTitle>
+      <ScrollIndicatedDialogContent>
+        {canvases.map((canvas) => (
+          <CanvasDownloadLinks
+            canvas={canvas}
+            canvasLabel={canvasLabel(canvas.id)}
+            infoResponse={infoResponse(canvas.id)}
+            restrictDownloadOnSizeDefinition={
+                restrictDownloadOnSizeDefinition
+              }
+            key={canvas.id}
             t={t}
+            viewType={viewType}
+            windowId={windowId}
           />
-          )}
-        </ScrollIndicatedDialogContent>
-        <DialogActions>
-          <Button onClick={closeDialog} color="primary">
-            {t('mirador-dl-plugin.close')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
+        ))}
+        {renderings.length > 0 && (
+        <ManifestDownloadLinks
+          renderings={renderings}
+          t={t}
+        />
+        )}
+      </ScrollIndicatedDialogContent>
+      <DialogActions>
+        <Button onClick={closeDialog} color="primary">
+          {t('mirador-dl-plugin.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
 }
 
 MiradorDownloadDialog.propTypes = {
@@ -133,16 +127,9 @@ MiradorDownloadDialog.propTypes = {
   }),
   open: PropTypes.bool,
   restrictDownloadOnSizeDefinition: PropTypes.bool,
-  t: PropTypes.func.isRequired,
   viewType: PropTypes.string.isRequired,
   windowId: PropTypes.string.isRequired,
 };
-MiradorDownloadDialog.defaultProps = {
-  canvases: [],
-  manifest: {},
-  open: false,
-  restrictDownloadOnSizeDefinition: false,
-};
 
 export default {
   target: 'Window',

src/index.js

@@ -1,3 +1,4 @@
+import '@mui/material/styles/styled';
 import miradorDownloadPlugin from './miradorDownloadPlugin';
 import MiradorDownloadDialogPlugin from './MiradorDownloadDialog';
 

src/miradorDownloadPlugin.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -32,39 +33,29 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
   openDownloadDialog: () => dispatch({ type: 'OPEN_WINDOW_DIALOG', windowId, dialogType: 'download' }),
 });
 
-class MiradorDownload extends Component {
-  openDialogAndCloseMenu() {
-    const { handleClose, openDownloadDialog } = this.props;
-
+function MiradorDownload({ handleClose = () => {}, openDownloadDialog = () => {} }) {
+  const openDialogAndCloseMenu = useCallback(() => {
     openDownloadDialog();
     handleClose();
-  }
+  }, [handleClose, openDownloadDialog]);
 
-  render() {
-    const { t } = this.props;
+  const { t } = useTranslation();
 
-    return (
-      <MenuItem onClick={() => this.openDialogAndCloseMenu()}>
-        <ListItemIcon>
-          <VerticalAlignBottomIcon />
-        </ListItemIcon>
-        <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
-          {t('mirador-dl-plugin.download')}
-        </ListItemText>
-      </MenuItem>
-    );
-  }
+  return (
+    <MenuItem onClick={openDialogAndCloseMenu}>
+      <ListItemIcon>
+        <VerticalAlignBottomIcon />
+      </ListItemIcon>
+      <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
+        {t('mirador-dl-plugin.download')}
+      </ListItemText>
+    </MenuItem>
+  );
 }
 
 MiradorDownload.propTypes = {
   handleClose: PropTypes.func,
   openDownloadDialog: PropTypes.func,
-  t: PropTypes.func.isRequired,
-};
-
-MiradorDownload.defaultProps = {
-  handleClose: () => {},
-  openDownloadDialog: () => {},
 };
 
 export default {