[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

Author: traviscooper

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>
     );
   }

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>
 );
 

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>
 );
 

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() {

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>
     );

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);
+  });
+
 
 });