Merge pull request #3959 from ProjectMirador/no-sizme

Remove react-sizeme to silence findDOMNode deprecation warnings
ProjectMirador · Oct 30, 2024 · b848acc · b848acc
2 parents c2fb050 + 19c2694
commit b848acc
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 126 deletions.
diff --git a/__tests__/src/extend/withSize.test.js b/__tests__/src/extend/withSize.test.js
@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { withSize } from '../../../src/extend/withSize';
+
+/** Mock ResizeObserver */
+class ResizeObserver {
+  /** */
+  constructor(callback) {
+    this.callback = callback;
+  }
+
+  /** */
+  observe(element) {
+    // Fake a resize event
+    setTimeout(() => {
+      this.callback([{ contentRect: { height: 300, width: 400 } }]);
+    }, 0);
+  }
+
+  /** */
+  disconnect() { jest.fn(); } // eslint-disable-line
+}
+
+// Replace the global ResizeObserver with the mock
+global.ResizeObserver = ResizeObserver;
+
+/** */
+const TestComponent = ({ size }) => (
+  <div>
+    {size.width}
+    {size.height}
+  </div>
+);
+
+TestComponent.propTypes = {
+  size: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }).isRequired,
+};
+
+const WrappedTestComponent = withSize()(TestComponent);
+
+test('it should render with size', async () => {
+  render(<WrappedTestComponent />);
+
+  // Assert that the updated size is reflected
+  expect(await screen.findByText(/400/)).toBeInTheDocument();
+  expect(await screen.findByText(/300/)).toBeInTheDocument();
+});
diff --git a/package.json b/package.json
@@ -68,7 +68,6 @@
     "react-redux": "^8.0.0 || ^9.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",
-    "react-sizeme": "^2.6.7 || ^3.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "redux": "^5.0.0",

diff --git a/setupJest.js b/setupJest.js
@@ -1,18 +1,22 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import fetchMock from 'jest-fetch-mock';
-import sizeMe from 'react-sizeme';
 import i18next from 'i18next';
 import { setupIntersectionMocking } from 'react-intersection-observer/test-utils';
 import en from './src/locales/en/translation.json';
 
 jest.setTimeout(10000);
 
-sizeMe.noPlaceholders = true;
-
 const { TextEncoder } = require('util');
 
 global.TextEncoder = TextEncoder;
 
+// Mock the browser's native ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  disconnect: jest.fn(),
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+}));
+
 // Setup Jest to mock fetch
 fetchMock.enableMocks();
 

diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
@@ -1,4 +1,4 @@
-import { Children, cloneElement, Component } from 'react';
+import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/CloseSharp';
@@ -23,17 +23,17 @@ const StyledCloseButton = styled(MiradorMenuButton, { name: 'CompanionWindow', s
 /**
  * CompanionWindow
  */
-export class CompanionWindow extends Component {
+export function CompanionWindow(props) {
   /** */
-  openInNewStyle() {
-    const { direction } = this.props;
+  const openInNewStyle = () => {
+    const { direction } = props;
     if (direction === 'rtl') return { transform: 'scale(-1, 1)' };
     return {};
-  }
+  };
 
   /** */
-  resizeHandles() {
-    const { direction, position } = this.props;
+  const resizeHandles = () => {
+    const { direction, position } = props;
     const positions = {
       ltr: {
         default: 'left',
@@ -69,126 +69,119 @@ export class CompanionWindow extends Component {
     }
 
     return base;
-  }
+  };
+  const {
+    ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
+    position, t, title, children, titleControls, size,
+    defaultSidebarPanelWidth, defaultSidebarPanelHeight, innerRef,
+  } = props;
 
-  /**
-   * render
-   * @return
-   */
-  render() {
-    const {
-      ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
-      position, t, title, children, titleControls, size,
-      defaultSidebarPanelWidth, defaultSidebarPanelHeight, innerRef,
-    } = this.props;
+  const isBottom = (position === 'bottom' || position === 'far-bottom');
 
-    const isBottom = (position === 'bottom' || position === 'far-bottom');
-
-    const childrenWithAdditionalProps = Children.map(children, (child) => {
-      if (!child) return null;
-      return cloneElement(
-        child,
-        {
-          parentactions: {
-            closeCompanionWindow: onCloseClick,
-          },
+  const childrenWithAdditionalProps = Children.map(children, (child) => {
+    if (!child) return null;
+    return cloneElement(
+      child,
+      {
+        parentactions: {
+          closeCompanionWindow: onCloseClick,
         },
-      );
-    });
+      },
+    );
+  });
 
-    return (
-      <Root
-        ownerState={this.props}
-        ref={innerRef}
-        style={{
-          display: isDisplayed ? null : 'none',
-          order: position === 'left' ? -1 : null,
+  return (
+    <Root
+      ownerState={props}
+      ref={innerRef}
+      style={{
+        display: isDisplayed ? null : 'none',
+        order: position === 'left' ? -1 : null,
+      }}
+      className={[ns(`companion-window-${position}`), paperClassName, position === 'bottom' ? classes.horizontal : classes.vertical].join(' ')}
+      square
+      component="aside"
+      aria-label={ariaLabel || title}
+    >
+      <StyledRnd
+        style={{ display: 'inherit', position: 'inherit' }}
+        ownerState={props}
+        default={{
+          height: isBottom ? defaultSidebarPanelHeight : '100%',
+          width: isBottom ? 'auto' : defaultSidebarPanelWidth,
         }}
-        className={[ns(`companion-window-${position}`), paperClassName, position === 'bottom' ? classes.horizontal : classes.vertical].join(' ')}
-        square
-        component="aside"
-        aria-label={ariaLabel || title}
+        disableDragging
+        enableResizing={resizeHandles()}
+        minHeight={50}
+        minWidth={position === 'left' ? 235 : 100}
       >
-        <StyledRnd
-          style={{ display: 'inherit', position: 'inherit' }}
-          ownerState={this.props}
-          default={{
-            height: isBottom ? defaultSidebarPanelHeight : '100%',
-            width: isBottom ? 'auto' : defaultSidebarPanelWidth,
-          }}
-          disableDragging
-          enableResizing={this.resizeHandles()}
-          minHeight={50}
-          minWidth={position === 'left' ? 235 : 100}
-        >
 
-          <StyledToolbar
-            variant="dense"
-            className={[ns('companion-window-header'), size.width < 370 ? classes.small : null].join(' ')}
-            disableGutters
-          >
-            <StyledTitle variant="h3">{title}</StyledTitle>
-            {
-              position === 'left'
-                ? updateCompanionWindow
-                  && (
-                    <MiradorMenuButton
-                      aria-label={t('openInCompanionWindow')}
-                      onClick={() => { updateCompanionWindow({ position: 'right' }); }}
-                    >
-                      <OpenInNewIcon style={this.openInNewStyle()} />
-                    </MiradorMenuButton>
-                  )
-                : (
-                  <>
-                    {
-                      updateCompanionWindow && (
-                        <StyledPositionButton
-                          aria-label={position === 'bottom' ? t('moveCompanionWindowToRight') : t('moveCompanionWindowToBottom')}
-                          onClick={() => { updateCompanionWindow({ position: position === 'bottom' ? 'right' : 'bottom' }); }}
-                        >
-                          <MoveIcon />
-                        </StyledPositionButton>
-                      )
-                    }
-                    <StyledCloseButton
-                      sx={{
-                        ...(size.width < 370 && {
-                          order: 'unset',
-                        }),
-                      }}
-                      aria-label={t('closeCompanionWindow')}
-                      onClick={onCloseClick}
-                    >
-                      <CloseIcon />
-                    </StyledCloseButton>
-                  </>
-                )
-            }
-            {
-              titleControls && (
-                <StyledTitleControls
-                  ownerState={{ position }}
-                  sx={{
-                    order: isBottom || size.width < 370 ? 'unset' : 1000,
-                  }}
-                  className={ns('companion-window-title-controls')}
+        <StyledToolbar
+          variant="dense"
+          className={[ns('companion-window-header'), size.width < 370 ? 'test' : null].join(' ')}
+          disableGutters
+        >
+          <StyledTitle variant="h3">{title}</StyledTitle>
+          {
+            position === 'left'
+              ? updateCompanionWindow
+              && (
+                <MiradorMenuButton
+                  aria-label={t('openInCompanionWindow')}
+                  onClick={() => { updateCompanionWindow({ position: 'right' }); }}
                 >
-                  {titleControls}
-                </StyledTitleControls>
+                  <OpenInNewIcon style={openInNewStyle()} />
+                </MiradorMenuButton>
               )
-            }
-          </StyledToolbar>
-          <Contents
-            className={ns('scrollto-scrollable')}
-            elevation={0}
-          >
-            {childrenWithAdditionalProps}
-          </Contents>
-        </StyledRnd>
-      </Root>
-    );
-  }
+              : (
+                <>
+                  {
+                    updateCompanionWindow && (
+                      <StyledPositionButton
+                        aria-label={position === 'bottom' ? t('moveCompanionWindowToRight') : t('moveCompanionWindowToBottom')}
+                        onClick={() => { updateCompanionWindow({ position: position === 'bottom' ? 'right' : 'bottom' }); }}
+                      >
+                        <MoveIcon />
+                      </StyledPositionButton>
+                    )
+                  }
+                  <StyledCloseButton
+                    sx={{
+                      ...(size.width < 370 && {
+                        order: 'unset',
+                      }),
+                    }}
+                    aria-label={t('closeCompanionWindow')}
+                    onClick={onCloseClick}
+                  >
+                    <CloseIcon />
+                  </StyledCloseButton>
+                </>
+              )
+          }
+          {
+            titleControls && (
+              <StyledTitleControls
+                ownerState={{ position }}
+                sx={{
+                  order: isBottom || size.width < 370 ? 'unset' : 1000,
+                }}
+                className={ns('companion-window-title-controls')}
+              >
+                {titleControls}
+              </StyledTitleControls>
+            )
+          }
+        </StyledToolbar>
+        <Contents
+          className={ns('scrollto-scrollable')}
+          elevation={0}
+        >
+          {childrenWithAdditionalProps}
+        </Contents>
+      </StyledRnd>
+    </Root>
+  );
 }
 
 CompanionWindow.propTypes = {
@@ -224,7 +217,7 @@ CompanionWindow.defaultProps = {
   defaultSidebarPanelWidth: 235,
   innerRef: undefined,
   isDisplayed: false,
-  onCloseClick: () => {},
+  onCloseClick: () => { },
   paperClassName: '',
   position: null,
   size: {},

diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withSize } from 'react-sizeme';
+import { withSize } from '../extend/withSize';
 import { withPlugins } from '../extend/withPlugins';
 import { withRef } from '../extend/withRef';
 import * as actions from '../state/actions';
@@ -46,8 +46,8 @@ const mapDispatchToProps = (dispatch, { windowId, id }) => ({
 
 const enhance = compose(
   withRef(),
-  withTranslation(),
   withSize(),
+  withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('CompanionWindow'),
 );

diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { withSize } from 'react-sizeme';
+import { withSize } from '../extend/withSize';
 import { withPlugins } from '../extend/withPlugins';
 import { getShowZoomControlsConfig, getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';