Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

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;