Skip to content
Snippets Groups Projects
Commit 38738de6 authored by Chris Beer's avatar Chris Beer
Browse files

Appease eslint by extracting components

parent ba0b8d98
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/components/WindowSideBarButtons.js
+ 43
− 15
View file @ 38738de6
......@@ -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 />}
......
src/components/WindowSideBarCollectionPanel.js
+ 52
− 30
View file @ 38738de6
......@@ -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,
};
src/components/WindowTopBarTitle.js
+ 16
− 10
View file @ 38738de6
......@@ -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>
);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment