Skip to content
This repository has been archived by the owner on Jul 15, 2019. It is now read-only.

Add NavLink option to use another element type for active state #69

Merged
merged 4 commits into from Sep 24, 2015
Merged

Add NavLink option to use another element type for active state #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fd8e03e
Add activeElement property
Jul 23, 2015
3d4012d
Merge remote-tracking branch 'upstream/master'
Sep 2, 2015
9ba834f
Add activeElement to createNavLinkComponent
Sep 2, 2015
2ea18fc
Revert auto merge error
Sep 2, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions lib/createNavLinkComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ module.exports = function createNavLinkComponent (overwriteSpec) {
},
_getState: function (props) {
var routeStore = this.context.getStore(RouteStore);
var activeElement = props.activeElement;
var href = this._getHrefFromProps(props);
var className = props.className;
var style = props.style;
Expand All @@ -77,6 +78,7 @@ module.exports = function createNavLinkComponent (overwriteSpec) {
style = objectAssign({}, style, props.activeStyle);
}
return {
activeElement: activeElement,
href: href,
isActive: isActive,
className: className,
Expand Down Expand Up @@ -157,6 +159,20 @@ module.exports = function createNavLinkComponent (overwriteSpec) {
},
render: function () {
this.receivedNewProps = false;

if (this.state.isActive) {
if (this.state.activeElement) {
return React.createElement(
this.state.activeElement,
objectAssign({}, this.props, {
className: this.state.className,
style: this.state.style
}),
this.props.children
);
}
}

return React.createElement(
'a',
objectAssign({}, {
Expand Down
9 changes: 9 additions & 0 deletions tests/unit/lib/NavLink-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,15 @@ describe('NavLink', function () {
);
expect(link.getDOMNode().getAttribute('class')).to.equal('active');
});
it('should set active state by tag name if the optional activeElement property is set', function () {
var navParams = {a: 1, b: 2};
var link = ReactTestUtils.renderIntoDocument(
<MockAppComponent context={mockContext}>
<NavLink activeElement="span" routeName='foo' />
</MockAppComponent>
);
expect(link.getDOMNode().nodeName.toLowerCase()).to.equal('span');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getDOMNode is deprecated
https://facebook.github.io/react/docs/top-level-api.html#react.finddomnode

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would apply to all tests, not my pull request in particular. I like to be consistent. :)

});
it('should set active state with custom class and style', function () {
var link = ReactTestUtils.renderIntoDocument(
<MockAppComponent context={mockContext}>
Expand Down