From 2c6913c9eb42dc1a0ddc5fd2d5c7b07782b70f1b Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Thu, 17 Mar 2022 12:02:03 -0700
Subject: [PATCH] Remove unnecessary fragments
---
.../src/components/AccessTokenSender.test.js | 2 +-
.../src/components/LabelValueMetadata.test.js | 2 +-
.../src/components/MiradorMenuButton.test.js | 2 +-
__tests__/src/components/NestedMenu.test.js | 4 +-
__tests__/src/components/ScrollTo.test.js | 2 +-
.../SidebarIndexTableOfContents.test.js | 18 ++++----
.../components/WindowTopBarPluginMenu.test.js | 7 +--
src/components/AccessTokenSender.js | 2 +-
src/components/AnnotationsOverlay.js | 2 +-
src/components/CanvasAnnotations.js | 2 +-
src/components/CollectionDialog.js | 2 +-
src/components/CompanionWindowFactory.js | 2 +-
src/components/LabelValueMetadata.js | 2 +-
src/components/LocalePicker.js | 2 +-
src/components/OpenSeadragonViewer.js | 24 +++++-----
src/components/PrimaryWindow.js | 8 ++--
src/components/SearchPanelNavigation.js | 45 +++++++++----------
src/components/SidebarIndexItem.js | 14 +++---
src/components/SidebarIndexTableOfContents.js | 22 +++++----
src/components/ThumbnailNavigation.js | 2 +-
src/components/WindowSideBar.js | 32 +++++++------
src/components/WindowTopBarPluginArea.js | 4 +-
src/components/WindowTopBarPluginMenu.js | 2 +-
src/components/WindowViewer.js | 4 +-
24 files changed, 95 insertions(+), 113 deletions(-)
diff --git a/__tests__/src/components/AccessTokenSender.test.js b/__tests__/src/components/AccessTokenSender.test.js
index 33d56e0ad..d14f10a55 100644
--- a/__tests__/src/components/AccessTokenSender.test.js
+++ b/__tests__/src/components/AccessTokenSender.test.js
@@ -20,7 +20,7 @@ describe('AccessTokenSender', () => {
it('renders nothing if there is no url', () => {
wrapper = createWrapper({});
- expect(wrapper.matchesElement(<></>)).toBe(true);
+ expect(wrapper.isEmptyRender()).toBe(true);
});
it('renders properly', () => {
diff --git a/__tests__/src/components/LabelValueMetadata.test.js b/__tests__/src/components/LabelValueMetadata.test.js
index 23c279ff1..2e3178bab 100644
--- a/__tests__/src/components/LabelValueMetadata.test.js
+++ b/__tests__/src/components/LabelValueMetadata.test.js
@@ -59,7 +59,7 @@ describe('LabelValueMetadata', () => {
it('renders an empty fragment instead of an empty dl', () => {
expect(wrapper.find('dl').length).toEqual(0);
- expect(wrapper.matchesElement(<></>)).toBe(true);
+ expect(wrapper.isEmptyRender()).toBe(true);
});
});
diff --git a/__tests__/src/components/MiradorMenuButton.test.js b/__tests__/src/components/MiradorMenuButton.test.js
index da0178315..ad865d63d 100644
--- a/__tests__/src/components/MiradorMenuButton.test.js
+++ b/__tests__/src/components/MiradorMenuButton.test.js
@@ -11,7 +11,7 @@ import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
function createWrapper(props) {
return shallow(
<MiradorMenuButton aria-label="The Label" containerId="mirador" {...props}>
- <>icon</>
+ icon
</MiradorMenuButton>,
);
}
diff --git a/__tests__/src/components/NestedMenu.test.js b/__tests__/src/components/NestedMenu.test.js
index f6c49ba3c..6db2b464c 100644
--- a/__tests__/src/components/NestedMenu.test.js
+++ b/__tests__/src/components/NestedMenu.test.js
@@ -13,11 +13,11 @@ import { NestedMenu } from '../../../src/components/NestedMenu';
function createWrapper(props) {
return shallow(
<NestedMenu
- icon={<>GivenIcon</>}
+ icon="GivenIcon"
label="GivenLabel"
{...props}
>
- <>GivenChildren</>
+ GivenChildren
</NestedMenu>,
);
}
diff --git a/__tests__/src/components/ScrollTo.test.js b/__tests__/src/components/ScrollTo.test.js
index b6c795310..ecb4a6d3f 100644
--- a/__tests__/src/components/ScrollTo.test.js
+++ b/__tests__/src/components/ScrollTo.test.js
@@ -10,7 +10,7 @@ function createWrapper(props) {
scrollTo
{...props}
>
- <>Child Prop</>
+ Child Prop
</ScrollTo>,
);
}
diff --git a/__tests__/src/components/SidebarIndexTableOfContents.test.js b/__tests__/src/components/SidebarIndexTableOfContents.test.js
index 15c3729ea..c30044db7 100644
--- a/__tests__/src/components/SidebarIndexTableOfContents.test.js
+++ b/__tests__/src/components/SidebarIndexTableOfContents.test.js
@@ -95,7 +95,7 @@ describe('SidebarIndexTableOfContents', () => {
it('toggles branch nodes on click, but not leaf nodes', () => {
const wrapper = createWrapper({ setCanvas, toggleNode });
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
expect(node0.prop('nodeId')).toBe('0-0');
node0.simulate('click');
@@ -120,7 +120,7 @@ describe('SidebarIndexTableOfContents', () => {
setCanvas,
toggleNode,
});
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
expect(node0.prop('nodeId')).toBe('0-0');
@@ -143,7 +143,7 @@ describe('SidebarIndexTableOfContents', () => {
setCanvas,
toggleNode,
});
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
expect(node0.prop('nodeId')).toBe('0-0');
const node00 = node0.children().at(0).childAt(0);
@@ -161,7 +161,7 @@ describe('SidebarIndexTableOfContents', () => {
it('toggles branch nodes (but not leaf nodes) with Space or Enter key', () => {
const wrapper = createWrapper({ setCanvas, toggleNode });
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
node0.simulate(...createKeydownProps('Enter'));
expect(toggleNode).toHaveBeenCalledTimes(1);
@@ -180,7 +180,7 @@ describe('SidebarIndexTableOfContents', () => {
it('calls setCanvas only on click for ranges with canvases that do not have children', () => {
const wrapper = createWrapper({ setCanvas, toggleNode });
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
expect(node0.prop('nodeId')).toBe('0-0');
node0.simulate('click');
@@ -204,7 +204,7 @@ describe('SidebarIndexTableOfContents', () => {
toggleNode,
windowId: 'w1',
});
- const treeView = version2wrapper.children(TreeView).at(0);
+ const treeView = version2wrapper.find(TreeView);
const node3 = treeView.childAt(3).childAt(0);
expect(node3.prop('nodeId')).toBe('0-3');
node3.simulate('click');
@@ -216,7 +216,7 @@ describe('SidebarIndexTableOfContents', () => {
toggleNode,
windowId: 'w1',
});
- const treeViewVersion3 = version3wrapper.children(TreeView).at(0);
+ const treeViewVersion3 = version3wrapper.find(TreeView);
const rootNode = treeViewVersion3.childAt(0).childAt(0);
const version3node1 = rootNode.childAt(1).childAt(0);
expect(version3node1.prop('nodeId')).toBe('0-0-1');
@@ -236,7 +236,7 @@ describe('SidebarIndexTableOfContents', () => {
it('does not select a canvas when opening a node with the right arrow key', () => {
const wrapper = createWrapper({ setCanvas, toggleNode });
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
expect(node0.prop('nodeId')).toBe('0-0');
node0.simulate(...createKeydownProps('ArrowRight'));
@@ -246,7 +246,7 @@ describe('SidebarIndexTableOfContents', () => {
it('does not select a canvas when closing a node with the left arrow key', () => {
const wrapper = createWrapper({ expandedNodeIds: ['0-0'], setCanvas, toggleNode });
- const treeView = wrapper.children(TreeView).at(0);
+ const treeView = wrapper.find(TreeView);
const node0 = treeView.childAt(0).childAt(0);
expect(node0.prop('nodeId')).toBe('0-0');
node0.simulate(...createKeydownProps('ArrowLeft'));
diff --git a/__tests__/src/components/WindowTopBarPluginMenu.test.js b/__tests__/src/components/WindowTopBarPluginMenu.test.js
index 436019f42..c27ef214d 100644
--- a/__tests__/src/components/WindowTopBarPluginMenu.test.js
+++ b/__tests__/src/components/WindowTopBarPluginMenu.test.js
@@ -21,12 +21,9 @@ describe('WindowTopBarPluginMenu', () => {
let wrapper;
describe('when there are no plugins present', () => {
- it('renders a Fragment (and no Button/Menu/PluginHook)', () => {
+ it('renders nothing (and no Button/Menu/PluginHook)', () => {
wrapper = createWrapper();
- expect(wrapper.find('Fragment').length).toBe(1);
- expect(wrapper.find(Menu).length).toBe(0);
- expect(wrapper.find(MiradorMenuButton).length).toBe(0);
- expect(wrapper.find(PluginHook).length).toBe(0);
+ expect(wrapper.isEmptyRender()).toBe(true);
});
});
diff --git a/src/components/AccessTokenSender.js b/src/components/AccessTokenSender.js
index 2760b012f..90a731d6c 100644
--- a/src/components/AccessTokenSender.js
+++ b/src/components/AccessTokenSender.js
@@ -22,7 +22,7 @@ export class AccessTokenSender extends Component {
/** */
render() {
const { url } = this.props;
- if (!url) return <></>;
+ if (!url) return null;
/**
login, clickthrough/kiosk open @id, wait for close
diff --git a/src/components/AnnotationsOverlay.js b/src/components/AnnotationsOverlay.js
index 7e923fe2f..454d407ec 100644
--- a/src/components/AnnotationsOverlay.js
+++ b/src/components/AnnotationsOverlay.js
@@ -388,7 +388,7 @@ export class AnnotationsOverlay extends Component {
render() {
const { viewer } = this.props;
- if (!viewer) return <></>;
+ if (!viewer) return null;
return ReactDOM.createPortal(
(
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 137a4ef0b..37263106c 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -62,7 +62,7 @@ export class CanvasAnnotations extends Component {
listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds,
containerRef,
} = this.props;
- if (annotations.length === 0) return <></>;
+ if (annotations.length === 0) return null;
return (
<>
diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js
index 53e65d671..df4d90124 100644
--- a/src/components/CollectionDialog.js
+++ b/src/components/CollectionDialog.js
@@ -155,7 +155,7 @@ export class CollectionDialog extends Component {
// to maybe pass a ref.
if (!this.dialogContainer()) {
this.forceUpdate();
- return <></>;
+ return null;
}
if (!ready) return this.placeholder();
diff --git a/src/components/CompanionWindowFactory.js b/src/components/CompanionWindowFactory.js
index 909e73944..7bc32d1e8 100644
--- a/src/components/CompanionWindowFactory.js
+++ b/src/components/CompanionWindowFactory.js
@@ -60,7 +60,7 @@ export class CompanionWindowFactory extends Component {
const type = CompanionWindowRegistry[content];
- if (!type) return <></>;
+ if (!type) return null;
return React.createElement(type, { id, windowId });
}
diff --git a/src/components/LabelValueMetadata.js b/src/components/LabelValueMetadata.js
index a003b9a40..91fd0b40d 100644
--- a/src/components/LabelValueMetadata.js
+++ b/src/components/LabelValueMetadata.js
@@ -17,7 +17,7 @@ export class LabelValueMetadata extends Component {
const { defaultLabel, labelValuePairs } = this.props;
if (labelValuePairs.length === 0) {
- return (<></>);
+ return null;
}
/* eslint-disable react/no-array-index-key */
diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
index e2177036c..24cf3bd7b 100644
--- a/src/components/LocalePicker.js
+++ b/src/components/LocalePicker.js
@@ -21,7 +21,7 @@ export class LocalePicker extends Component {
setLocale,
} = this.props;
- if (!setLocale || availableLocales.length < 2) return <></>;
+ if (!setLocale || availableLocales.length < 2) return null;
return (
<FormControl>
<Select
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index 9fcf68628..3f352eddd 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -355,20 +355,18 @@ export class OpenSeadragonViewer extends Component {
));
return (
- <>
- <section
- className={classNames(ns('osd-container'), classes.osdContainer)}
- id={`${windowId}-osd`}
- ref={this.ref}
- aria-label={t('item', { label })}
- aria-live="polite"
- >
- { drawAnnotations
+ <section
+ className={classNames(ns('osd-container'), classes.osdContainer)}
+ id={`${windowId}-osd`}
+ ref={this.ref}
+ aria-label={t('item', { label })}
+ aria-live="polite"
+ >
+ { drawAnnotations
&& <AnnotationsOverlay viewer={viewer} windowId={windowId} /> }
- { enhancedChildren }
- <PluginHook viewer={viewer} {...{ ...this.props, children: null }} />
- </section>
- </>
+ { enhancedChildren }
+ <PluginHook viewer={viewer} {...{ ...this.props, children: null }} />
+ </section>
);
}
}
diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js
index 552681b8a..05cecad9b 100644
--- a/src/components/PrimaryWindow.js
+++ b/src/components/PrimaryWindow.js
@@ -33,11 +33,9 @@ export class PrimaryWindow extends Component {
} = this.props;
if (isCollection) {
return (
- <>
- <SelectCollection
- windowId={windowId}
- />
- </>
+ <SelectCollection
+ windowId={windowId}
+ />
);
}
if (isFetching === false) {
diff --git a/src/components/SearchPanelNavigation.js b/src/components/SearchPanelNavigation.js
index 355a0787b..21c76dda1 100644
--- a/src/components/SearchPanelNavigation.js
+++ b/src/components/SearchPanelNavigation.js
@@ -53,30 +53,29 @@ export class SearchPanelNavigation extends Component {
if (searchHits.length < numTotal) {
lengthText += '+';
}
+
+ if (searchHits.length === 0) return null;
+
return (
- <>
- {(searchHits.length > 0) && (
- <Typography variant="body2" align="center" classes={classes}>
- <MiradorMenuButton
- aria-label={t('searchPreviousResult')}
- disabled={!this.hasPreviousResult(currentHitIndex)}
- onClick={() => this.previousSearchResult(currentHitIndex)}
- >
- <ChevronLeftIcon style={iconStyle} />
- </MiradorMenuButton>
- <span style={{ unicodeBidi: 'plaintext' }}>
- {t('pagination', { current: currentHitIndex + 1, total: lengthText })}
- </span>
- <MiradorMenuButton
- aria-label={t('searchNextResult')}
- disabled={!this.hasNextResult(currentHitIndex)}
- onClick={() => this.nextSearchResult(currentHitIndex)}
- >
- <ChevronRightIcon style={iconStyle} />
- </MiradorMenuButton>
- </Typography>
- )}
- </>
+ <Typography variant="body2" align="center" classes={classes}>
+ <MiradorMenuButton
+ aria-label={t('searchPreviousResult')}
+ disabled={!this.hasPreviousResult(currentHitIndex)}
+ onClick={() => this.previousSearchResult(currentHitIndex)}
+ >
+ <ChevronLeftIcon style={iconStyle} />
+ </MiradorMenuButton>
+ <span style={{ unicodeBidi: 'plaintext' }}>
+ {t('pagination', { current: currentHitIndex + 1, total: lengthText })}
+ </span>
+ <MiradorMenuButton
+ aria-label={t('searchNextResult')}
+ disabled={!this.hasNextResult(currentHitIndex)}
+ onClick={() => this.nextSearchResult(currentHitIndex)}
+ >
+ <ChevronRightIcon style={iconStyle} />
+ </MiradorMenuButton>
+ </Typography>
);
}
}
diff --git a/src/components/SidebarIndexItem.js b/src/components/SidebarIndexItem.js
index 909b218a9..b880e180a 100644
--- a/src/components/SidebarIndexItem.js
+++ b/src/components/SidebarIndexItem.js
@@ -12,14 +12,12 @@ export class SidebarIndexItem extends Component {
} = this.props;
return (
- <>
- <Typography
- className={classNames(classes.label)}
- variant="body1"
- >
- {label}
- </Typography>
- </>
+ <Typography
+ className={classNames(classes.label)}
+ variant="body1"
+ >
+ {label}
+ </Typography>
);
}
}
diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js
index bea3b9c9d..badc3e77f 100644
--- a/src/components/SidebarIndexTableOfContents.js
+++ b/src/components/SidebarIndexTableOfContents.js
@@ -113,21 +113,19 @@ export class SidebarIndexTableOfContents extends Component {
} = this.props;
if (!treeStructure) {
- return <></>;
+ return null;
}
return (
- <>
- <TreeView
- className={classes.root}
- defaultCollapseIcon={<ExpandMoreIcon color="action" />}
- defaultExpandIcon={<ChevronRightIcon color="action" />}
- defaultEndIcon={<></>}
- expanded={expandedNodeIds}
- >
- {this.buildTreeItems(treeStructure.nodes, visibleNodeIds, containerRef, nodeIdToScrollTo)}
- </TreeView>
- </>
+ <TreeView
+ className={classes.root}
+ defaultCollapseIcon={<ExpandMoreIcon color="action" />}
+ defaultExpandIcon={<ChevronRightIcon color="action" />}
+ defaultEndIcon={null}
+ expanded={expandedNodeIds}
+ >
+ {this.buildTreeItems(treeStructure.nodes, visibleNodeIds, containerRef, nodeIdToScrollTo)}
+ </TreeView>
);
}
}
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index fb85a4838..dae19d7fd 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -181,7 +181,7 @@ export class ThumbnailNavigation extends Component {
windowId,
} = this.props;
if (position === 'off') {
- return <></>;
+ return null;
}
const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
const itemData = {
diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js
index 5381a60a3..eaeceaae4 100644
--- a/src/components/WindowSideBar.js
+++ b/src/components/WindowSideBar.js
@@ -18,23 +18,21 @@ export class WindowSideBar extends Component {
} = this.props;
return (
- <>
- <Drawer
- variant="persistent"
- className={classNames(classes.drawer)}
- classes={{ paper: classNames(classes.paper) }}
- anchor={direction === 'rtl' ? 'right' : 'left'}
- PaperProps={{
- 'aria-label': t('sidebarPanelsNavigation'),
- component: 'nav',
- style: { height: '100%', position: 'relative' },
- }}
- SlideProps={{ direction: direction === 'rtl' ? 'left' : 'right', mountOnEnter: true, unmountOnExit: true }}
- open={sideBarOpen}
- >
- <WindowSideBarButtons windowId={windowId} />
- </Drawer>
- </>
+ <Drawer
+ variant="persistent"
+ className={classNames(classes.drawer)}
+ classes={{ paper: classNames(classes.paper) }}
+ anchor={direction === 'rtl' ? 'right' : 'left'}
+ PaperProps={{
+ 'aria-label': t('sidebarPanelsNavigation'),
+ component: 'nav',
+ style: { height: '100%', position: 'relative' },
+ }}
+ SlideProps={{ direction: direction === 'rtl' ? 'left' : 'right', mountOnEnter: true, unmountOnExit: true }}
+ open={sideBarOpen}
+ >
+ <WindowSideBarButtons windowId={windowId} />
+ </Drawer>
);
}
}
diff --git a/src/components/WindowTopBarPluginArea.js b/src/components/WindowTopBarPluginArea.js
index ce5ec626f..63e32ac03 100644
--- a/src/components/WindowTopBarPluginArea.js
+++ b/src/components/WindowTopBarPluginArea.js
@@ -8,9 +8,7 @@ export class WindowTopBarPluginArea extends Component {
/** */
render() {
return (
- <>
- <PluginHook {...this.props} />
- </>
+ <PluginHook {...this.props} />
);
}
}
diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js
index b3e6e4b3c..f19331c03 100644
--- a/src/components/WindowTopBarPluginMenu.js
+++ b/src/components/WindowTopBarPluginMenu.js
@@ -49,7 +49,7 @@ export class WindowTopBarPluginMenu extends Component {
} = this.props;
const { anchorEl } = this.state;
- if (!PluginComponents || PluginComponents.length === 0) return (<></>);
+ if (!PluginComponents || PluginComponents.length === 0) return null;
return (
<>
diff --git a/src/components/WindowViewer.js b/src/components/WindowViewer.js
index 667b99bff..91257b42a 100644
--- a/src/components/WindowViewer.js
+++ b/src/components/WindowViewer.js
@@ -29,9 +29,7 @@ export class WindowViewer extends Component {
const { hasError } = this.state;
- if (hasError) {
- return <></>;
- }
+ if (hasError) return null;
return (
<Suspense fallback={<div />}>
--
GitLab