From 38738de6629c451d998859326db69731d8249683 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Thu, 17 Mar 2022 13:42:58 -0700
Subject: [PATCH] Appease eslint by extracting components
---
src/components/WindowSideBarButtons.js | 58 +++++++++----
.../WindowSideBarCollectionPanel.js | 82 ++++++++++++-------
src/components/WindowTopBarTitle.js | 26 +++---
3 files changed, 111 insertions(+), 55 deletions(-)
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index b5645522c..fd4c717f3 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -10,6 +10,28 @@ import AttributionIcon from '@material-ui/icons/CopyrightSharp';
import LayersIcon from '@material-ui/icons/LayersSharp';
import SearchIcon from '@material-ui/icons/SearchSharp';
import CanvasIndexIcon from './icons/CanvasIndexIcon';
+
+/** */
+function TabButton({ t, value, ...tabProps }) {
+ return (
+ <Tooltip title={t('openCompanionWindow', { context: value })}>
+ <Tab
+ {...tabProps}
+ value={value}
+ aria-label={
+ t('openCompanionWindow', { context: value })
+ }
+ disableRipple
+ />
+ </Tooltip>
+ );
+}
+
+TabButton.propTypes = {
+ t: PropTypes.func.isRequired,
+ value: PropTypes.string.isRequired,
+};
+
/**
*
*/
@@ -50,21 +72,6 @@ export class WindowSideBarButtons extends Component {
t,
} = this.props;
- /** */
- const TabButton = props => (
- <Tooltip title={t('openCompanionWindow', { context: props.value })}>
- <Tab
- {...props}
- classes={{ root: classes.tab, selected: classes.tabSelected }}
- aria-label={
- t('openCompanionWindow', { context: props.value })
- }
- disableRipple
- onKeyUp={this.handleKeyUp}
- />
- </Tooltip>
- );
-
return (
<Tabs
classes={{ flexContainer: classes.tabsFlexContainer, indicator: classes.tabsIndicator }}
@@ -80,24 +87,36 @@ export class WindowSideBarButtons extends Component {
{ panels.info && (
<TabButton
value="info"
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
icon={(<InfoIcon />)}
/>
)}
{ panels.attribution && (
<TabButton
value="attribution"
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
icon={(<AttributionIcon />)}
/>
)}
{ panels.canvas && (
<TabButton
value="canvas"
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
icon={(<CanvasIndexIcon />)}
/>
)}
{panels.annotations && (hasAnnotations || hasAnyAnnotations) && (
<TabButton
value="annotations"
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
icon={(
<Badge classes={{ badge: classes.badge }} invisible={!hasAnnotations} variant="dot">
<AnnotationIcon />
@@ -108,6 +127,9 @@ export class WindowSideBarButtons extends Component {
{panels.search && hasSearchService && (
<TabButton
value="search"
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
icon={(
<Badge classes={{ badge: classes.badge }} invisible={!hasSearchResults} variant="dot">
<SearchIcon />
@@ -118,6 +140,9 @@ export class WindowSideBarButtons extends Component {
{ panels.layers && hasAnyLayers && (
<TabButton
value="layers"
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
icon={(
<Badge classes={{ badge: classes.badge }} invisible={!hasCurrentLayers} variant="dot">
<LayersIcon />
@@ -128,6 +153,9 @@ export class WindowSideBarButtons extends Component {
{ PluginComponents
&& PluginComponents.map(PluginComponent => (
<TabButton
+ onKeyUp={this.handleKeyUp}
+ classes={{ root: classes.tab, selected: classes.tabSelected }}
+ t={t}
key={PluginComponent.value}
value={PluginComponent.value}
icon={<PluginComponent />}
diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js
index f480ec42c..cf58cccff 100644
--- a/src/components/WindowSideBarCollectionPanel.js
+++ b/src/components/WindowSideBarCollectionPanel.js
@@ -12,6 +12,40 @@ import ArrowUpwardIcon from '@material-ui/icons/ArrowUpwardSharp';
import CompanionWindow from '../containers/CompanionWindow';
import IIIFThumbnail from '../containers/IIIFThumbnail';
+/** */
+function Item({
+ manifest, canvasNavigation, variant, ...otherProps
+}) {
+ return (
+ <MenuItem
+ alignItems="flex-start"
+ button
+ component="li"
+ {...otherProps}
+ >
+ { variant === 'thumbnail' && (
+ <ListItemIcon>
+ <IIIFThumbnail
+ resource={manifest}
+ maxHeight={canvasNavigation.height}
+ maxWidth={canvasNavigation.width}
+ />
+ </ListItemIcon>
+ )}
+ <ListItemText>{WindowSideBarCollectionPanel.getUseableLabel(manifest)}</ListItemText>
+ </MenuItem>
+ );
+}
+
+Item.propTypes = {
+ canvasNavigation: PropTypes.shape({
+ height: PropTypes.number,
+ width: PropTypes.number,
+ }).isRequired,
+ manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ variant: PropTypes.string.isRequired,
+};
+
/** */
export class WindowSideBarCollectionPanel extends Component {
/** */
@@ -54,29 +88,6 @@ export class WindowSideBarCollectionPanel extends Component {
windowId,
} = this.props;
- /** */
- const Item = ({ manifest, ...otherProps }) => (
- <MenuItem
- className={classes.menuItem}
- alignItems="flex-start"
- button
- component="li"
- selected={manifestId === manifest.id}
- {...otherProps}
- >
- { variant === 'thumbnail' && (
- <ListItemIcon>
- <IIIFThumbnail
- resource={manifest}
- maxHeight={canvasNavigation.height}
- maxWidth={canvasNavigation.width}
- />
- </ListItemIcon>
- )}
- <ListItemText>{WindowSideBarCollectionPanel.getUseableLabel(manifest)}</ListItemText>
- </MenuItem>
- );
-
return (
<CompanionWindow
title={t(this.isMultipart() ? 'multipartCollection' : 'collection')}
@@ -127,7 +138,15 @@ export class WindowSideBarCollectionPanel extends Component {
};
return (
- <Item key={manifest.id} onClick={onClick} manifest={manifest} />
+ <Item
+ key={manifest.id}
+ onClick={onClick}
+ canvasNavigation={canvasNavigation}
+ manifest={manifest}
+ variant={variant}
+ className={classes.menuItem}
+ selected={manifestId === manifest.id}
+ />
);
})
}
@@ -142,7 +161,15 @@ export class WindowSideBarCollectionPanel extends Component {
};
return (
- <Item key={manifest.id} onClick={onClick} manifest={manifest} />
+ <Item
+ key={manifest.id}
+ onClick={onClick}
+ canvasNavigation={canvasNavigation}
+ manifest={manifest}
+ variant={variant}
+ className={classes.menuItem}
+ selected={manifestId === manifest.id}
+ />
);
})
}
@@ -159,14 +186,11 @@ WindowSideBarCollectionPanel.propTypes = {
}).isRequired,
classes: PropTypes.objectOf(PropTypes.string).isRequired,
collection: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- collectionId: PropTypes.string.isRequired,
collectionPath: PropTypes.arrayOf(PropTypes.string),
- error: PropTypes.string,
id: PropTypes.string.isRequired,
isFetching: PropTypes.bool,
manifestId: PropTypes.string.isRequired,
parentCollection: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- ready: PropTypes.bool,
t: PropTypes.func,
updateCompanionWindow: PropTypes.func.isRequired,
updateWindow: PropTypes.func.isRequired,
@@ -177,10 +201,8 @@ WindowSideBarCollectionPanel.propTypes = {
WindowSideBarCollectionPanel.defaultProps = {
collection: null,
collectionPath: [],
- error: null,
isFetching: false,
parentCollection: null,
- ready: false,
t: k => k,
variant: null,
};
diff --git a/src/components/WindowTopBarTitle.js b/src/components/WindowTopBarTitle.js
index ed36e8aff..bc2c46682 100644
--- a/src/components/WindowTopBarTitle.js
+++ b/src/components/WindowTopBarTitle.js
@@ -4,6 +4,19 @@ import Typography from '@material-ui/core/Typography';
import Skeleton from '@material-ui/lab/Skeleton';
import ErrorIcon from '@material-ui/icons/ErrorOutlineSharp';
+/** */
+function TitleTypography({ children, ...props }) {
+ return (
+ <Typography variant="h2" noWrap color="inherit" {...props}>
+ {children}
+ </Typography>
+ );
+}
+
+TitleTypography.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
/**
* WindowTopBarTitle
*/
@@ -17,17 +30,10 @@ export class WindowTopBarTitle extends Component {
classes, error, hideWindowTitle, isFetching, manifestTitle,
} = this.props;
- /** */
- const TitleTypography = props => (
- <Typography variant="h2" noWrap color="inherit" className={classes.title} {...props}>
- {props.children}
- </Typography>
- );
-
let title = null;
if (isFetching) {
title = (
- <TitleTypography>
+ <TitleTypography className={classes.title}>
<Skeleton variant="text" />
</TitleTypography>
);
@@ -35,7 +41,7 @@ export class WindowTopBarTitle extends Component {
title = (
<>
<ErrorIcon color="error" />
- <TitleTypography color="textSecondary">
+ <TitleTypography color="textSecondary" className={classes.title}>
{error}
</TitleTypography>
</>
@@ -44,7 +50,7 @@ export class WindowTopBarTitle extends Component {
title = (<div className={classes.title} />);
} else {
title = (
- <TitleTypography>
+ <TitleTypography className={classes.title}>
{manifestTitle}
</TitleTypography>
);
--
GitLab