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({ TabPane 1 content TabPane 2 content + TabPane 3 content ); } 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 = ( TabPane 1 content TabPane 2 content + TabPane 3 content ); 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 = ( TabPane 1 content TabPane 2 content + TabPane 3 content ); 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 ( + className={className} + disabled={disabled}> {tab} ); 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( + + Tab 1 content + Tab 2 content + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'disabled')); + }); + + it('Should not show content when clicking disabled tab', function () { + let tab1 = Tab 1; + let instance = ReactTestUtils.renderIntoDocument( + + Tab 1 content + Tab 2 content + + ); + + 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); + }); + });