diff --git a/__tests__/src/components/AccessTokenSender.test.js b/__tests__/src/components/AccessTokenSender.test.js
index 33d56e0ada4c3a5f6bb0036847941ea784418a63..d14f10a556cb8d994a2c4bc1a2999fadb1b45753 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 23c279ff140fa029e8c8b8c0adad4d2d6468bab3..2e3178bab9a6b4d222861dc2a0cc3004b40f32c1 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 da0178315ea735140e548ba9a6ffa506183524d0..ad865d63dab0cd05901265415cc6d263618c5ea0 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 f6c49ba3cccc8b3865a1aefef80d8e5b953effa9..6db2b464cfb440374d01469df7be36e53c43ddbb 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 b6c7953106d6fff824bbf86bd484f375a1f49c7c..ecb4a6d3f7de6891e958139b7ca8c0e95ebac435 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 15c3729ea513c20f2fd7c09197d20262e90e17aa..c30044db7e6b9a0028151acafd6bdba79d3f524b 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 436019f42c32ebe0ab8cef43a0e3141445a412aa..c27ef214d9867e68ce60e042f83bc09e827cfe19 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 2760b012f1a06e992e9d802da45e47c6ce2c779e..90a731d6c068e94f1de6f68fc63b6895b52d353e 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 7e923fe2fa125eee63747b38d3907e7613354f15..454d407ec1562adb5d49c711cbcfbcb9e23d39f5 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 137a4ef0bcf3f1ed42a78e90ef5df08073752b2e..37263106c9ae5913124c29c44f1bf6b0318e98a0 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 53e65d67117f2b899e2535677041313eb3fedd71..df4d9012427cfeb2757ff7b6bd375731d2b6986f 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 909e73944ed823600330f2338fa7fc897f9a5a3b..7bc32d1e84afd2838eefe8575e48f90eae1cdb77 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 a003b9a4007fece59dd7c349cf6222c014485f80..91fd0b40d3305341d53c50f0bbc58ab67913db2d 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 e2177036c9f25700a5b8f7d7fc969b22814758aa..24cf3bd7b8d864036f46323de5d2ff34eda7ccc2 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 9fcf686288aa914dd32bec1247819a19c060e86f..3f352eddd9139a964ae92f2b4d9f2e6b6d079696 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 552681b8afaa228012d7332d67fb55a02422a2f0..05cecad9b6325d91cba30d8db6d7e54c5f22d0c0 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 355a0787b4a29d3b171eec044dc8eab8eaf9d05e..21c76dda1e794a2db646fa8f58a6ef23a57b28ee 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 909b218a95b8fe3d3604ddb4d7105b89f4fbfe2b..b880e180a3b41a7f7ae9013c2f8731ce2a2264af 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 bea3b9c9d7841984402499ace1c848e58ae0cdf0..badc3e77fb57c5cdb6da04aed9726e9baf182ede 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 fb85a483815b11b45d68ddccb007814fd9f54915..dae19d7fd9da452a5a97e796b781ce7c351cc2b8 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 5381a60a305cb2c6cede7eb707c924bb55035477..eaeceaae43ea026917d68940037e207b4070d639 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 ce5ec626f4317974bf6fd0dbf143fe6c41c219f0..63e32ac03e89f14dcb7895c4e7167c3ba5d4d8ad 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 b3e6e4b3c00aa04a6caf668076311e70619e6181..f19331c035f682de00e35ff64a8b22c83bd959f8 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 667b99bff1fd32d65a8081972e3ab1a21283ece0..91257b42a43f02891218dcce4cb7b68c89c001ff 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 />}>