64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
|
// @flow
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
|
||
|
|
import Tab from './Tab';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The type of the React {@code Component} props of {@link Tabs}
|
||
|
|
*/
|
||
|
|
type Props = {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Handler for selecting the tab.
|
||
|
|
*/
|
||
|
|
onSelect: Function,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The index of the selected tab.
|
||
|
|
*/
|
||
|
|
selected: number,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Tabs information.
|
||
|
|
*/
|
||
|
|
tabs: Object
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A React component that implements tabs.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
export default class Tabs extends Component<Props> {
|
||
|
|
/**
|
||
|
|
* Implements the React Components's render method.
|
||
|
|
*
|
||
|
|
* @inheritdoc
|
||
|
|
*/
|
||
|
|
render() {
|
||
|
|
const { onSelect, selected, tabs } = this.props;
|
||
|
|
const { content } = tabs[selected];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className = 'tab-container'>
|
||
|
|
<div className = 'tab-content'>
|
||
|
|
{ content }
|
||
|
|
</div>
|
||
|
|
{ tabs.length > 1 ? (
|
||
|
|
<div className = 'tab-buttons'>
|
||
|
|
{
|
||
|
|
tabs.map((tab, index) => (
|
||
|
|
<Tab
|
||
|
|
index = { index }
|
||
|
|
isSelected = { index === selected }
|
||
|
|
key = { index }
|
||
|
|
label = { tab.label }
|
||
|
|
onSelect = { onSelect } />
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>) : null
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|