Adjust to functional components

ProjectMirador · Jan 7, 2025 · 029bb2f · 029bb2f
1 parent 4d5cb2b
commit 029bb2f
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 84 deletions.
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
@@ -28,57 +28,44 @@ const StyledToolbar = styled(Toolbar, { name: 'WindowTopBar', slot: 'toolbar' })
 /**
  * WindowTopBar
  */
-export class WindowTopBar extends Component {
-  /**
-   * render
-   * @return
-   */
-  render() {
-    const {
-      windowId, toggleWindowSideBar, t, focusWindow, allowWindowSideBar, component,
-    } = this.props;
+export function WindowTopBar({
+  windowId, toggleWindowSideBar, focusWindow = () => {}, allowWindowSideBar = true, component = 'nav',
+}) {
+  const { t } = useTranslation();
+  const ownerState = arguments[0]; // eslint-disable-line prefer-rest-params
 
-    return (
-      <Root component={component} aria-label={t('windowNavigation')} position="relative" color="default" enableColorOnDark>
-        <StyledToolbar
-          disableGutters
-          onMouseDown={focusWindow}
-          ownerState={this.props}
-          className={classNames(ns('window-top-bar'))}
-          variant="dense"
+  return (
+    <Root component={component} aria-label={t('windowNavigation')} position="relative" color="default" enableColorOnDark>
+      <StyledToolbar
+        disableGutters
+        onMouseDown={focusWindow}
+        ownerState={ownerState}
+        className={classNames(ns('window-top-bar'))}
+        variant="dense"
+      >
+        {allowWindowSideBar && (
+        <MiradorMenuButton
+          aria-label={t('toggleWindowSideBar')}
+          onClick={toggleWindowSideBar}
+          className={ns('window-menu-btn')}
         >
-          {allowWindowSideBar && (
-            <MiradorMenuButton
-              aria-label={t('toggleWindowSideBar')}
-              onClick={toggleWindowSideBar}
-              className={ns('window-menu-btn')}
-            >
-              <MenuIcon />
-            </MiradorMenuButton>
-          )}
-          <WindowTopBarMenu
-            windowId={windowId}
-            {...this.props}
-          />
-        </StyledToolbar>
-      </Root>
-    );
-  }
+          <MenuIcon />
+        </MiradorMenuButton>
+        )}
+        <WindowTopBarMenu
+          windowId={windowId}
+          ownerState={ownerState}
+        />
+      </StyledToolbar>
+    </Root>
+  );
 }
 
 WindowTopBar.propTypes = {
-  allowClose: PropTypes.bool,
-  allowFullscreen: PropTypes.bool,
-  allowMaximize: PropTypes.bool,
-  allowTopMenuButton: PropTypes.bool,
   allowWindowSideBar: PropTypes.bool,
   component: PropTypes.elementType,
   focused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   focusWindow: PropTypes.func,
-  maximized: PropTypes.bool,
-  maximizeWindow: PropTypes.func,
-  minimizeWindow: PropTypes.func,
-  removeWindow: PropTypes.func.isRequired,
   toggleWindowSideBar: PropTypes.func.isRequired,
   windowDraggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   windowId: PropTypes.string.isRequired,

diff --git a/src/components/WindowTopBarMenu.js b/src/components/WindowTopBarMenu.js
@@ -5,6 +5,7 @@ import CloseIcon from '@mui/icons-material/CloseSharp';
 import classNames from 'classnames';
 import ResizeObserver from 'react-resize-observer';
 import { Portal } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import WindowTopMenuButton from '../containers/WindowTopMenuButton';
 import WindowTopBarPluginArea from '../containers/WindowTopBarPluginArea';
 import WindowTopBarPluginMenu from '../containers/WindowTopBarPluginMenu';
@@ -16,9 +17,9 @@ import WindowMinIcon from './icons/WindowMinIcon';
 import ns from '../config/css-ns';
 import PluginContext from '../extend/PluginContext';
 
-const IconButtonsWrapper = styled('div', ({}))(({}) => ({
+const IconButtonsWrapper = styled('div')({
   display: 'flex',
-}));
+});
 
 const InvisibleIconButtonsWrapper = styled(IconButtonsWrapper)(() => ({
   visibility: 'hidden',
@@ -39,11 +40,13 @@ const removeAttributes = (attributeList = [], node) => {
 /**
  * WindowTopBarMenu
  */
-export function WindowTopBarMenu(props) {
-  const {
-    removeWindow, windowId, t, maximizeWindow, maximized, minimizeWindow,
-    allowClose, allowMaximize, allowFullscreen, allowTopMenuButton,
-  } = props;
+export function WindowTopBarMenu({
+  removeWindow, windowId,
+  maximizeWindow = () => {}, maximized = false, minimizeWindow = () => {}, allowClose = true, allowMaximize = true,
+  allowFullscreen = false, allowTopMenuButton = true
+  ,
+}) {
+  const { t } = useTranslation();
 
   const [outerW, setOuterW] = React.useState();
   const [visibleButtonsNum, setVisibleButtonsNum] = React.useState(0);
@@ -96,7 +99,7 @@ export function WindowTopBarMenu(props) {
     const children = Array.from(portalRef.current.childNodes ?? []);
     let accWidth = 0;
     // sum widths of top bar elements until wider than half of the available space
-    let newVisibleButtonsNum = children.reduce((acc, child, index) => {
+    let newVisibleButtonsNum = children.reduce((acc, child) => {
       const width = child?.offsetWidth;
       accWidth += width;
       if (accWidth <= (0.5 * outerW)) {
@@ -160,18 +163,5 @@ WindowTopBarMenu.propTypes = {
   maximizeWindow: PropTypes.func,
   minimizeWindow: PropTypes.func,
   removeWindow: PropTypes.func.isRequired,
-  t: PropTypes.func,
   windowId: PropTypes.string.isRequired,
 };
-
-WindowTopBarMenu.defaultProps = {
-  allowClose: true,
-  allowFullscreen: false,
-  allowMaximize: true,
-  allowTopMenuButton: true,
-  container: null,
-  maximized: false,
-  maximizeWindow: () => {},
-  minimizeWindow: () => {},
-  t: key => key,
-};
diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js
@@ -1,16 +1,23 @@
-import React from 'react';
+import { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import Menu from '@mui/material/Menu';
 import MoreVertIcon from '@mui/icons-material/MoreVertSharp';
-import { PluginHook } from './PluginHook';
+import Menu from '@mui/material/Menu';
+import { useTranslation } from 'react-i18next';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
+import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
 
 /**
  *
  */
-export function WindowTopBarPluginMenu(props) {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
+export function WindowTopBarPluginMenu({
+  PluginComponents = [], windowId, menuIcon = <MoreVertIcon />, moreButtons = null,
+}) {
+  const { t } = useTranslation();
+  const container = useContext(WorkspaceContext);
+  const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
   /**
    * Set the anchorEl state to the click target
   */
@@ -27,11 +34,9 @@ export function WindowTopBarPluginMenu(props) {
     setOpen(false);
   };
 
-  const {
-    windowId, t, menuIcon, container, moreButtons,
-  } = props;
-
   const windowPluginMenuId = `window-plugin-menu_${windowId}`;
+  if (!PluginComponents || PluginComponents.length === 0) return null;
+
   return (
     <>
       <MiradorMenuButton
@@ -59,12 +64,11 @@ export function WindowTopBarPluginMenu(props) {
         onClose={handleMenuClose}
       >
         {moreButtons}
-        <PluginHook {...props} />
+        <PluginHook handleClose={handleMenuClose} {...pluginProps} />
       </Menu>
     </>
   );
 }
-// "<rootDir>/**/__tests__/integration/mirador/plugins/add.test.js"
 
 WindowTopBarPluginMenu.propTypes = {
   anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -77,12 +81,3 @@ WindowTopBarPluginMenu.propTypes = {
   ),
   windowId: PropTypes.string.isRequired,
 };
-
-WindowTopBarPluginMenu.defaultProps = {
-  anchorEl: null,
-  container: null,
-  menuIcon: <MoreVertIcon />,
-  moreButtons: null,
-  open: false,
-  PluginComponents: [],
-};