summaryrefslogtreecommitdiffstats
path: root/src/react/Tabs.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/react/Tabs.js')
-rw-r--r--src/react/Tabs.js29
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;