2021-02-27 13:46:41 +00:00
|
|
|
import React from 'react';
|
2021-02-27 23:51:13 +00:00
|
|
|
|
2021-02-27 13:46:41 +00:00
|
|
|
import Tab from './Tab';
|
2021-03-01 12:06:02 +00:00
|
|
|
import ErrorBoundary from '../../../ErrorBoundary';
|
2021-02-27 13:46:41 +00:00
|
|
|
|
|
|
|
export default class Tabs extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
currentTab: this.props.children[0].props.label
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
onClick = (tab) => {
|
|
|
|
this.setState({ currentTab: tab });
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let className = 'sidebar';
|
|
|
|
let tabClass = 'tab-content';
|
|
|
|
let optionsText = (<h1>Options</h1>);
|
|
|
|
|
|
|
|
if (this.props.navbar) {
|
|
|
|
className = 'modalNavbar';
|
|
|
|
tabClass = '';
|
|
|
|
optionsText = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span className='tabs'>
|
|
|
|
<ul className={className}>
|
|
|
|
{optionsText}
|
|
|
|
{this.props.children.map((tab) => {
|
|
|
|
return (
|
|
|
|
<Tab
|
|
|
|
currentTab={this.state.currentTab}
|
|
|
|
key={tab.props.label}
|
|
|
|
label={tab.props.label}
|
|
|
|
onClick={this.onClick}
|
|
|
|
navbar={this.props.navbar || false}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</ul>
|
|
|
|
<div className={tabClass}>
|
2021-03-01 12:06:02 +00:00
|
|
|
<ErrorBoundary>
|
2021-02-27 13:46:41 +00:00
|
|
|
{this.props.children.map((child) => {
|
|
|
|
if (child.props.label !== this.state.currentTab) return undefined;
|
|
|
|
return child.props.children;
|
|
|
|
})}
|
2021-03-01 12:06:02 +00:00
|
|
|
</ErrorBoundary>
|
2021-02-27 13:46:41 +00:00
|
|
|
</div>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|