From 9ada1735456050f50b7f88d9eb9386efbca92550 Mon Sep 17 00:00:00 2001 From: Justin Coyne Date: Tue, 29 Oct 2024 15:41:10 -0500 Subject: [PATCH 1/3] Use ES6 default arguments to avoid deprecated defaultProps on function components (and update the eslint rules accordingly.) --- .eslintrc | 4 +++- src/components/BackgroundPluginArea.js | 8 ++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/.eslintrc b/.eslintrc index 6d549eac24..02a0b7d930 100644 --- a/.eslintrc +++ b/.eslintrc @@ -44,7 +44,9 @@ }], "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off", - "react/require-default-props": "off", + "react/require-default-props": [2, { + "functions": "defaultArguments" + }], "react-hooks/exhaustive-deps": "error", "testing-library/render-result-naming-convention": "off", "testing-library/no-render-in-lifecycle": [ diff --git a/src/components/BackgroundPluginArea.js b/src/components/BackgroundPluginArea.js index c59c745e6a..90b8b9c537 100644 --- a/src/components/BackgroundPluginArea.js +++ b/src/components/BackgroundPluginArea.js @@ -3,16 +3,12 @@ import ns from '../config/css-ns'; import { PluginHook } from './PluginHook'; /** invisible area where background plugins can add to */ -export const BackgroundPluginArea = props => ( +export const BackgroundPluginArea = ({ PluginComponents = [], ...props }) => (
- +
); BackgroundPluginArea.propTypes = { PluginComponents: PropTypes.array, // eslint-disable-line react/forbid-prop-types }; - -BackgroundPluginArea.defaultProps = { - PluginComponents: [], -}; From c0409cec6379f3255094fc2178f5f746854ed1dc Mon Sep 17 00:00:00 2001 From: Chris Beer Date: Wed, 6 Nov 2024 10:14:45 -0800 Subject: [PATCH 2/3] Use ES6 destructuring on the other functional components. --- .../components/ThumbnailNavigation.test.js | 2 +- src/components/AudioViewer.js | 12 +---- src/components/CompanionWindow.js | 46 +++++-------------- src/components/IIIFIFrameCommunication.js | 24 +++++----- src/components/IIIFThumbnail.js | 10 +--- src/components/MiradorMenuButton.js | 37 ++++++--------- src/components/MosaicRenderPreview.js | 2 +- .../ScrollIndicatedDialogContent.js | 8 +--- src/extend/PluginProvider.js | 8 +--- 9 files changed, 44 insertions(+), 105 deletions(-) diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js index bf7c89ae4d..0cb5607614 100644 --- a/__tests__/src/components/ThumbnailNavigation.test.js +++ b/__tests__/src/components/ThumbnailNavigation.test.js @@ -28,7 +28,7 @@ function Subject({ fixture = manifestJson, ...props }) { } Subject.propTypes = { - fixture: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types + fixture: PropTypes.object, // eslint-disable-line react/forbid-prop-types }; jest.mock( diff --git a/src/components/AudioViewer.js b/src/components/AudioViewer.js index 9ceb07d788..710b5aaedd 100644 --- a/src/components/AudioViewer.js +++ b/src/components/AudioViewer.js @@ -13,12 +13,8 @@ const StyledAudio = styled('audio')({ }); /** */ -export function AudioViewer(props) { +export function AudioViewer({ audioOptions = {}, audioResources = [], captions = [] }) { /* eslint-disable jsx-a11y/media-has-caption */ - /** */ - const { - captions, audioOptions, audioResources, - } = props; return ( @@ -44,9 +40,3 @@ AudioViewer.propTypes = { audioResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types }; - -AudioViewer.defaultProps = { - audioOptions: {}, - audioResources: [], - captions: [], -}; diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js index 3b0d04e28d..26b9fd7498 100644 --- a/src/components/CompanionWindow.js +++ b/src/components/CompanionWindow.js @@ -23,17 +23,18 @@ const StyledCloseButton = styled(MiradorMenuButton, { name: 'CompanionWindow', s /** * CompanionWindow */ -export function CompanionWindow(props) { +export function CompanionWindow(props) { // eslint-disable-line react/require-default-props + const { + ariaLabel = undefined, classes = {}, direction, paperClassName = '', onCloseClick = () => {}, updateCompanionWindow = undefined, isDisplayed = false, + position = null, t = key => key, title = null, children = undefined, titleControls = null, size = {}, + defaultSidebarPanelWidth = 235, defaultSidebarPanelHeight = 201, innerRef = undefined, + } = props; + /** */ - const openInNewStyle = () => { - const { direction } = props; - if (direction === 'rtl') return { transform: 'scale(-1, 1)' }; - return {}; - }; + const openInNewStyle = direction === 'rtl' ? { transform: 'scale(-1, 1)' } : {}; /** */ - const resizeHandles = () => { - const { direction, position } = props; + const resizeHandles = (() => { const positions = { ltr: { default: 'left', @@ -69,12 +70,7 @@ export function CompanionWindow(props) { } return base; - }; - const { - ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed, - position, t, title, children, titleControls, size, - defaultSidebarPanelWidth, defaultSidebarPanelHeight, innerRef, - } = props; + })(); const isBottom = (position === 'bottom' || position === 'far-bottom'); @@ -111,7 +107,7 @@ export function CompanionWindow(props) { width: isBottom ? 'auto' : defaultSidebarPanelWidth, }} disableDragging - enableResizing={resizeHandles()} + enableResizing={resizeHandles} minHeight={50} minWidth={position === 'left' ? 235 : 100} > @@ -130,7 +126,7 @@ export function CompanionWindow(props) { aria-label={t('openInCompanionWindow')} onClick={() => { updateCompanionWindow({ position: 'right' }); }} > - + ) : ( @@ -208,21 +204,3 @@ CompanionWindow.propTypes = { titleControls: PropTypes.node, updateCompanionWindow: PropTypes.func, }; - -CompanionWindow.defaultProps = { - ariaLabel: undefined, - children: undefined, - classes: {}, - defaultSidebarPanelHeight: 201, - defaultSidebarPanelWidth: 235, - innerRef: undefined, - isDisplayed: false, - onCloseClick: () => { }, - paperClassName: '', - position: null, - size: {}, - t: key => key, - title: null, - titleControls: null, - updateCompanionWindow: undefined, -}; diff --git a/src/components/IIIFIFrameCommunication.js b/src/components/IIIFIFrameCommunication.js index c26ef42dad..37b8211188 100644 --- a/src/components/IIIFIFrameCommunication.js +++ b/src/components/IIIFIFrameCommunication.js @@ -1,10 +1,20 @@ import { useEffect } from 'react'; import PropTypes from 'prop-types'; +const IIIFIFrameCommunicationDefaultProps = { + 'aria-hidden': true, + frameBorder: 0, + height: 1, + name: undefined, + scrolling: undefined, + style: { visibility: 'hidden' }, + width: 1, +}; + /** * Handle IIIF Auth token validation using iframe message events */ -export function IIIFIFrameCommunication({ handleReceiveMessage, ...props }) { +export function IIIFIFrameCommunication({ handleReceiveMessage = undefined, ...props }) { // Attaches the 'message' event listener to the window. useEffect(() => { if (!handleReceiveMessage) return undefined; @@ -19,6 +29,7 @@ export function IIIFIFrameCommunication({ handleReceiveMessage, ...props }) { // iframe "title" attribute is passed in via props for accessibility // eslint-disable-next-line jsx-a11y/iframe-has-title