From 8c9e9946c0c8bab555c83d4e841e4529334e5dcc Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 5 Feb 2019 15:26:53 +0200
Subject: [PATCH] Parameterize view tabs
---
src/client/components/Manuscripts.js | 21 +++++++++++++++-
src/client/components/ViewTabs.js | 36 +++++++++++++++-------------
2 files changed, 40 insertions(+), 17 deletions(-)
diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js
index 372d735d..2b688bc5 100644
--- a/src/client/components/Manuscripts.js
+++ b/src/client/components/Manuscripts.js
@@ -9,7 +9,26 @@ import Deck from './Deck';
let Manuscripts = props => {
return (
<React.Fragment>
- <ViewTabs routeProps={props.routeProps} />
+ <ViewTabs
+ routeProps={props.routeProps}
+ tabs={{
+ '/manuscripts/table': {
+ label: 'table',
+ value: 0,
+ icon: 'CalendarViewDay',
+ },
+ '/manuscripts/production_places': {
+ label: 'production places',
+ value: 1,
+ icon: 'AddLocation',
+ },
+ '/manuscripts/migrations': {
+ label: 'migrations',
+ value: 2,
+ icon: 'Redo',
+ }
+ }}
+ />
<Route
exact path='/manuscripts'
render={() => <Redirect to='manuscripts/table' />}
diff --git a/src/client/components/ViewTabs.js b/src/client/components/ViewTabs.js
index 57875dfb..00d616ec 100644
--- a/src/client/components/ViewTabs.js
+++ b/src/client/components/ViewTabs.js
@@ -34,28 +34,31 @@ class ViewTabs extends React.Component {
}
pathnameToValue = pathname => {
- let value;
- switch (pathname) {
- case '/manuscripts/production_places':
- value = 1;
+ return this.props.tabs[pathname].value;
+ }
+
+ renderIcon = iconString => {
+ let icon = '';
+ switch (iconString) {
+ case 'CalendarViewDay':
+ icon = <CalendarViewDayIcon />;
+ break;
+ case 'AddLocation':
+ icon = <AddLocationIcon />;
break;
- case '/manuscripts/migrations':
- value = 2;
+ case 'Redo':
+ icon = <RedoIcon />;
break;
- default:
- value = 0;
}
- return value;
+ return icon;
}
handleChange = (event, value) => {
this.setState({ value });
};
-
-
render() {
- const { classes } = this.props;
+ const { classes, tabs } = this.props;
return (
<Paper className={classes.root}>
<Tabs
@@ -65,9 +68,9 @@ class ViewTabs extends React.Component {
textColor="secondary"
variant="fullWidth"
>
- <Tab icon={<CalendarViewDayIcon />} label="table" component={Link} to="/manuscripts" />
- <Tab icon={<AddLocationIcon />} label="production places" component={Link} to="/manuscripts/production_places" />
- <Tab icon={<RedoIcon />} label="migrations" component={Link} to="/manuscripts/migrations" />
+ {Object.keys(tabs).map(key =>
+ <Tab key={key} icon={this.renderIcon(tabs[key].icon)} label={tabs[key].label} component={Link} to={key} />
+ )}
</Tabs>
</Paper>
);
@@ -76,7 +79,8 @@ class ViewTabs extends React.Component {
ViewTabs.propTypes = {
classes: PropTypes.object.isRequired,
- routeProps: PropTypes.object.isRequired
+ routeProps: PropTypes.object.isRequired,
+ tabs: PropTypes.object.isRequired
};
export default withStyles(styles)(ViewTabs);
--
GitLab