[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
kyletsang · May 13, 2015 · d3f57c5 · d3f57c5
1 parent 659976c
commit d3f57c5
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+  });
+
 
 });