Commit a2445eed authored by Oleksii Savran's avatar Oleksii Savran

Links on accession browser tabs

parent 51a04e94
...@@ -7,9 +7,7 @@ import * as React from 'react'; ...@@ -7,9 +7,7 @@ import * as React from 'react';
import {translate} from 'react-i18next'; import {translate} from 'react-i18next';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {bindActionCreators} from 'redux';
import { navigateTo } from 'actions/navigation';
import MuiTabs from '@material-ui/core/Tabs'; import MuiTabs from '@material-ui/core/Tabs';
import MuiTab from '@material-ui/core/Tab'; import MuiTab from '@material-ui/core/Tab';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
...@@ -62,6 +60,9 @@ const styles = (theme) => ({ ...@@ -62,6 +60,9 @@ const styles = (theme) => ({
}, },
tabsArea: { tabsArea: {
alignSelf: 'flex-end' as 'flex-end', alignSelf: 'flex-end' as 'flex-end',
'& a': {
color: 'black',
}
} }
}); });
/*tslint:enable*/ /*tslint:enable*/
...@@ -83,7 +84,7 @@ class Tab extends React.Component<ITabProps, any> { ...@@ -83,7 +84,7 @@ class Tab extends React.Component<ITabProps, any> {
class Tabs extends React.Component<any> { class Tabs extends React.Component<any> {
public render() { public render() {
const { tab, children, navigateTo, actions, classes, t } = this.props; const { tab, children, actions, classes, t } = this.props;
const tabs = (children as Tab[]).map((ch) => { const tabs = (children as Tab[]).map((ch) => {
return { return {
...@@ -97,15 +98,20 @@ class Tabs extends React.Component<any> { ...@@ -97,15 +98,20 @@ class Tabs extends React.Component<any> {
return t.name === tab; return t.name === tab;
}) || 0; }) || 0;
const tabChange = (e, index) => {
navigateTo(tabs[index].to);
};
return ( return (
<Grid container className={ `pr-10 ${classes.root}` }> <Grid container className={ `pr-10 ${classes.root}` }>
<Grid item className={ `float-left ${classes.tabsArea}` }> <Grid item className={ `float-left ${classes.tabsArea}` }>
<MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }> <MuiTabs value={ currentTab } indicatorColor="primary">
{ tabs.map((tab) => <MuiTab key={ tab.to } label={ typeof tab.label === 'string' ? t(tab.label) : tab.label } />) } { tabs.map((tab) => {
return (
<MuiTab
key={ tab.to }
label={ typeof tab.label === 'string' ? t(tab.label) : tab.label }
component={ Link as any }
{ ...tab }
/>
);
}) }
</MuiTabs> </MuiTabs>
</Grid> </Grid>
<Grid item className={ `float-right ${classes.actionsArea}` }> <Grid item className={ `float-right ${classes.actionsArea}` }>
...@@ -121,10 +127,6 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -121,10 +127,6 @@ const mapStateToProps = (state, ownProps) => ({
foo: ownProps, foo: ownProps,
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ const tabs = translate()(connect(mapStateToProps, null)(withStyles(styles)(Tabs)));
navigateTo,
}, dispatch);
const tabs = translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Tabs)));
export { tabs as default, Tab }; export { tabs as default, Tab };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment