Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[added] TabbedArea NavItem renderTab() className

TabbedArea TabPane rendering doesn't carry across the className
property.  This means it is not easy for users to customize
the look/feel of the tabs.

Added className to the properties copied in the renderTab function
and also pass additional properties down via ...other
  • Loading branch information
thehuey committed Apr 22, 2015
1 parent 8a901fd commit 1d8b7c7
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 4 deletions.
9 changes: 5 additions & 4 deletions src/TabbedArea.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,13 @@ const TabbedArea = React.createClass({
},

renderTab(child) {
let key = child.props.eventKey;
let {eventKey, className, tab } = child.props;
return (
<NavItem
ref={'tab' + key}
eventKey={key}>
{child.props.tab}
ref={'tab' + eventKey}
eventKey={eventKey}
className={className} >
{tab}
</NavItem>
);
},
Expand Down
16 changes: 16 additions & 0 deletions test/TabbedAreaSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,20 @@ describe('TabbedArea', function () {

assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'nav-pills'));
});

it('Should pass className to rendered Tab NavItem', function () {
let instance = ReactTestUtils.renderIntoDocument(
<TabbedArea activeKey={3}>
<TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
<TabPane className="pull-right" tab="Tab 2" eventKey={3}>Tab 3 content</TabPane>
</TabbedArea>
);

let tabPane = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);

assert.equal(tabPane.length, 2);
assert.equal(tabPane[1].getDOMNode().getAttribute('class').match(/pull-right/)[0], 'pull-right');
});


});

0 comments on commit 1d8b7c7

Please sign in to comment.