Migrate components to MUI v5 with sx/styled API

ProjectMirador · Sep 18, 2023 · c5603a4 · c5603a4
1 parent fb9634c
commit c5603a4
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 57 deletions.
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
@@ -14,7 +14,7 @@ export class WorkspaceAddButton extends Component {
    */
   render() {
     const {
-      classes, t, setWorkspaceAddVisibility, isWorkspaceAddVisible, useExtendedFab,
+      t, setWorkspaceAddVisibility, isWorkspaceAddVisible, useExtendedFab,
     } = this.props;
     return (
       <Tooltip title={isWorkspaceAddVisible ? t('closeAddResourceMenu') : t('addResource')}>
@@ -28,8 +28,19 @@ export class WorkspaceAddButton extends Component {
               ? t('closeAddResourceMenu')
               : ((useExtendedFab && t('startHere')) || t('addResource'))
           }
-          className={classes.fab}
-          classes={{ primary: classes.fabPrimary, secondary: classes.fabSecondary }}
+          sx={{
+            '.MuiFab-primary': {
+              '&:focus': {
+                backgroundColor: 'primary.dark',
+              },
+            },
+            '.MuiFab-secondary': {
+              '&:focus': {
+                backgroundColor: 'secondary.dark',
+              },
+            },
+            margin: 1,
+          }}
           variant={useExtendedFab ? 'extended' : 'circular'}
           onClick={() => { setWorkspaceAddVisibility(!isWorkspaceAddVisible); }}
         >
@@ -46,7 +57,6 @@ export class WorkspaceAddButton extends Component {
 }
 
 WorkspaceAddButton.propTypes = {
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
   isWorkspaceAddVisible: PropTypes.bool,
   setWorkspaceAddVisibility: PropTypes.func.isRequired,
   t: PropTypes.func,

diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js
@@ -1,13 +1,27 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { styled, lighten, darken } from '@mui/material/styles';
 import ErrorDialog from '../containers/ErrorDialog';
 import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
 import Workspace from '../containers/Workspace';
 import WorkspaceAdd from '../containers/WorkspaceAdd';
 import BackgroundPluginArea from '../containers/BackgroundPluginArea';
 import ns from '../config/css-ns';
 
+const StyledMain = styled('main')(({ theme }) => {
+  const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
+
+  return {
+    background: getBackgroundColor(theme.palette.shades.light, 0.1),
+    bottom: 0,
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  };
+});
+
 /**
  * This is the top level Mirador component.
  * @prop {Object} manifests
@@ -20,7 +34,6 @@ export class WorkspaceArea extends Component {
   render() {
     const {
       areaRef,
-      classes,
       controlPanelVariant,
       isWorkspaceAddVisible,
       isWorkspaceControlPanelVisible,
@@ -34,8 +47,8 @@ export class WorkspaceArea extends Component {
           isWorkspaceControlPanelVisible
             && <WorkspaceControlPanel variant={controlPanelVariant} />
         }
-        <main
-          className={classNames(classes.viewer, ns('viewer'))}
+        <StyledMain
+          className={ns('viewer')}
           lang={lang}
           aria-label={t('workspace')}
           {...(areaRef ? { ref: areaRef } : {})}
@@ -47,15 +60,14 @@ export class WorkspaceArea extends Component {
           }
           <ErrorDialog />
           <BackgroundPluginArea />
-        </main>
+        </StyledMain>
       </>
     );
   }
 }
 
 WorkspaceArea.propTypes = {
   areaRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
   controlPanelVariant: PropTypes.string,
   isWorkspaceAddVisible: PropTypes.bool,
   isWorkspaceControlPanelVisible: PropTypes.bool.isRequired,

diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import withStyles from '@mui/styles/withStyles';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { withPlugins } from '../extend/withPlugins';
@@ -57,30 +56,8 @@ const mapStateToProps = (state, { width }) => {
  */
 const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility };
 
-/**
- *
- * @param theme
- * @returns {{ctrlBtn: {margin: (number|string)}}}
- */
-const styles = theme => ({
-  fab: {
-    margin: theme.spacing(1),
-  },
-  fabPrimary: {
-    '&:focus': {
-      backgroundColor: theme.palette.primary.dark,
-    },
-  },
-  fabSecondary: {
-    '&:focus': {
-      backgroundColor: theme.palette.secondary.dark,
-    },
-  },
-});
-
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   withWidth({ initialWidth: 'xs' }),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('WorkspaceAddButton'),

diff --git a/src/containers/WorkspaceArea.js b/src/containers/WorkspaceArea.js
@@ -1,8 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { lighten, darken } from '@mui/material/styles';
-import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceArea } from '../components/WorkspaceArea';
 import { getConfig, getWindowIds, getWorkspace } from '../state/selectors';
@@ -21,30 +19,8 @@ const mapStateToProps = state => (
   }
 );
 
-/**
- *
- * @param theme
- * @returns {{background: {background: string}}}
- */
-const styles = (theme) => {
-  const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
-
-  return {
-    viewer: {
-      background: getBackgroundColor(theme.palette.shades.light, 0.1),
-      bottom: 0,
-      left: 0,
-      overflow: 'hidden',
-      position: 'absolute',
-      right: 0,
-      top: 0,
-    },
-  };
-};
-
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps),
   withPlugins('WorkspaceArea'),
 );