From d3f57c5f4c0ac68fb70aaaeef1deca8d23ac50f7 Mon Sep 17 00:00:00 2001
From: Travis Cooper <traviscooper@gmail.com>
Date: Wed, 13 May 2015 10:28:35 -0400
Subject: [PATCH] [added] TabbedArea allows disabled tabs

Added disabled example to TabbedArea

Added disabled example to TabbedArea

Added disabled example to TabbedArea

Test for TabbedArea passing 'disabled'

Updated test

Add test and fix lint issues
---
 docs/examples/TabbedAreaControlled.js   |  1 +
 docs/examples/TabbedAreaNoAnimation.js  |  1 +
 docs/examples/TabbedAreaUncontrolled.js |  1 +
 src/TabPane.js                          |  3 ++-
 src/TabbedArea.js                       |  5 ++--
 test/TabbedAreaSpec.js                  | 32 +++++++++++++++++++++++++
 6 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/docs/examples/TabbedAreaControlled.js b/docs/examples/TabbedAreaControlled.js
index 82bf84f400..690bf09f63 100644
--- a/docs/examples/TabbedAreaControlled.js
+++ b/docs/examples/TabbedAreaControlled.js
@@ -15,6 +15,7 @@ const ControlledTabArea = React.createClass({
       <TabbedArea activeKey={this.state.key} onSelect={this.handleSelect}>
         <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
         <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
+        <TabPane eventKey={3} tab='Tab 3' disabled={true}>TabPane 3 content</TabPane>
       </TabbedArea>
     );
   }
diff --git a/docs/examples/TabbedAreaNoAnimation.js b/docs/examples/TabbedAreaNoAnimation.js
index e4d4b7a323..2b9067632a 100644
--- a/docs/examples/TabbedAreaNoAnimation.js
+++ b/docs/examples/TabbedAreaNoAnimation.js
@@ -2,6 +2,7 @@ const tabbedAreaInstance = (
   <TabbedArea defaultActiveKey={1} animation={false}>
     <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
     <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
+    <TabPane eventKey={3} tab='Tab 3' disabled={true}>TabPane 3 content</TabPane>
   </TabbedArea>
 );
 
diff --git a/docs/examples/TabbedAreaUncontrolled.js b/docs/examples/TabbedAreaUncontrolled.js
index c22c7ad9c5..90af3efcc3 100644
--- a/docs/examples/TabbedAreaUncontrolled.js
+++ b/docs/examples/TabbedAreaUncontrolled.js
@@ -2,6 +2,7 @@ const tabbedAreaInstance = (
   <TabbedArea defaultActiveKey={2}>
     <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
     <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
+    <TabPane eventKey={3} tab='Tab 3' disabled={true}>TabPane 3 content</TabPane>
   </TabbedArea>
 );
 
diff --git a/src/TabPane.js b/src/TabPane.js
index ed3d59a1e1..bd41a6cf9e 100644
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -6,7 +6,8 @@ const TabPane = React.createClass({
   propTypes: {
     active:          React.PropTypes.bool,
     animation:       React.PropTypes.bool,
-    onAnimateOutEnd: React.PropTypes.func
+    onAnimateOutEnd: React.PropTypes.func,
+    disabled:        React.PropTypes.bool
   },
 
   getDefaultProps() {
diff --git a/src/TabbedArea.js b/src/TabbedArea.js
index 646a917bc9..c49f236238 100644
--- a/src/TabbedArea.js
+++ b/src/TabbedArea.js
@@ -105,12 +105,13 @@ const TabbedArea = React.createClass({
   },
 
   renderTab(child) {
-    let {eventKey, className, tab } = child.props;
+    let {eventKey, className, tab, disabled } = child.props;
     return (
       <NavItem
         ref={'tab' + eventKey}
         eventKey={eventKey}
-        className={className} >
+        className={className}
+        disabled={disabled}>
         {tab}
       </NavItem>
     );
diff --git a/test/TabbedAreaSpec.js b/test/TabbedAreaSpec.js
index 2d4e60e3d1..dd10d29f32 100644
--- a/test/TabbedAreaSpec.js
+++ b/test/TabbedAreaSpec.js
@@ -197,5 +197,37 @@ describe('TabbedArea', function () {
     assert.equal(tabPane[1].getDOMNode().getAttribute('class').match(/pull-right/)[0], 'pull-right');
   });
 
+  it('Should pass disabled to NavItem', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <TabbedArea activeKey={1}>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2} disabled={true}>Tab 2 content</TabPane>
+      </TabbedArea>
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'disabled'));
+  });
+
+  it('Should not show content when clicking disabled tab', function () {
+    let tab1 = <span className="tab1">Tab 1</span>;
+    let instance = ReactTestUtils.renderIntoDocument(
+      <TabbedArea defaultActiveKey={2} animation={false}>
+        <TabPane tab={tab1} eventKey={1} disabled={true}>Tab 1 content</TabPane>
+        <TabPane tab="Tab 2" eventKey={2}>Tab 2 content</TabPane>
+      </TabbedArea>
+    );
+
+    let tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+    let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
+
+    ReactTestUtils.Simulate.click(
+      ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab1')
+    );
+
+    assert.equal(panes[0].props.active, false);
+    assert.equal(panes[1].props.active, true);
+    assert.equal(tabbedArea.refs.tabs.props.activeKey, 2);
+  });
+
 
 });