diff options
Diffstat (limited to 'src/react/Tabs.js')
-rw-r--r-- | src/react/Tabs.js | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/src/react/Tabs.js b/src/react/Tabs.js new file mode 100644 index 0000000..c502038 --- /dev/null +++ b/src/react/Tabs.js @@ -0,0 +1,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; |