blob: c50203834050087bd73cae04ab3847bdff8b5c4f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
import React from 'react';
import TabPane from './TabPane.js';
class Tabs extends React.Component {
render() {
const {type, children = [], activeTab, onTabClick, className} = this.props;
return (
<div className={type === 'header' ? `sdc-tabs sdc-tabs-header ${className || ''}` : `sdc-tabs sdc-tabs-menu ${className || ''}`} >
<ul className='sdc-tabs-list' role='tablist'>
{children.map(child => React.cloneElement(child,
{
key: child.props.tabId,
onClick: () => onTabClick(child.props.tabId),
activeTab
}))}
</ul>
<TabPane>
{children.map(child => {
if (child.props.tabId === activeTab) {
return child.props.children;
}
})}
</TabPane>
</div>
);
}
}
export default Tabs;
|