From 17fd75d71242c5ebb8974bcbde403f2461e9583f Mon Sep 17 00:00:00 2001
From: haoxin <coderhaoxin@outlook.com>
Date: Sat, 19 Sep 2015 15:09:39 +0800
Subject: [PATCH] Add Tabs

---
 src/index.js |  3 +-
 src/tabs.js  | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/tabs.js

diff --git a/src/index.js b/src/index.js
index ce37ffc..c84e85a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,8 @@ const components = {
   Checkbox: require('./checkbox'),
   Radio: require('./radio'),
   Switch: require('./switch'),
-  IconToggle: require('./icon-toggle')
+  IconToggle: require('./icon-toggle'),
+  Tabs: require('./tabs')
 };
 
 module.exports = components;
diff --git a/src/tabs.js b/src/tabs.js
new file mode 100644
index 0000000..7b8da42
--- /dev/null
+++ b/src/tabs.js
@@ -0,0 +1,91 @@
+'use strict';
+
+const React = require('react');
+const mdl = require('material-design-lite/material.min');
+const classnames = require('classnames');
+
+const baseClasses = {
+  'mdl-tabs': true,
+  'mdl-js-tabs': true
+};
+
+const tabBaseClasses = {
+  'mdl-tabs__tab': true
+};
+
+const panelBaseClasses = {
+  'mdl-tabs__panel': true
+};
+
+class Tabs extends React.Component {
+
+  componentDidMount(){
+    const node = React.findDOMNode(this);
+    mdl.upgradeElement(node, 'MaterialTabs');
+  }
+
+  componentWillUnmount(){
+    const node = React.findDOMNode(this);
+    mdl.downgradeElements(node);
+  }
+
+  render(){
+    const {
+      className,
+      ripple,
+      tabs
+    } = this.props;
+
+    const classes = classnames(baseClasses, {
+      'mdl-js-ripple-effect': ripple
+    }, className);
+
+    return (
+      <div {...this.props} className={classes}>
+        <div className={'mdl-tabs__tab-bar'}>
+          {
+            tabs.map((tab) => {
+              const tabClasses = classnames(tabBaseClasses, {
+                'is-active': tab.active
+              });
+              return (<a href={'#' + tab.id} className={tabClasses}>{tab.name}</a>);
+            })
+          }
+        </div>
+
+        <div>
+          {
+            tabs.map((tab) => {
+              const panelClasses = classnames(panelBaseClasses, {
+                'is-active': tab.active
+              });
+
+              return (
+                <div id={tab.id} className={panelClasses}>
+                  {
+                    tab.items.map((item) => {
+                      return (<p>{item}</p>);
+                    })
+                  }
+                </div>
+              );
+            })
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+Tabs.propTypes = {
+  className: React.PropTypes.string,
+  ripple: React.PropTypes.bool,
+  tabs: React.PropTypes.arrayOf(React.PropTypes.shape({
+    id: React.PropTypes.string,
+    name: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
+    active: React.PropTypes.bool,
+    items: React.PropTypes.arrayOf(React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]))
+  }))
+};
+
+module.exports = Tabs;