Merge fd8e03e into 687b169

YahooArchive · Jul 23, 2015 · 08c54b9 · 08c54b9
2 parents 687b169 + fd8e03e
commit 08c54b9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/lib/NavLink.js b/lib/NavLink.js
@@ -26,6 +26,7 @@ var NavLink = React.createClass({
         executeAction: React.PropTypes.func
     },
     propTypes: {
+        activeElement: React.PropTypes.string,
         currentRoute: React.PropTypes.object,
         currentNavigate: React.PropTypes.object,
         href: React.PropTypes.string,
@@ -116,6 +117,16 @@ var NavLink = React.createClass({
             className = className ? (className + ' ') : '';
             className += this.props.activeClass || 'active';
             style = objectAssign({}, style, this.props.activeStyle);
+            if (this.props.activeElement) {
+                return React.createElement(
+                    this.props.activeElement,
+                    objectAssign({}, this.props, {
+                        className: className,
+                        style: style
+                    }),
+                    this.props.children
+                );
+            }
         }
 
         return React.createElement(

diff --git a/tests/unit/lib/NavLink-test.js b/tests/unit/lib/NavLink-test.js
@@ -92,7 +92,7 @@ describe('NavLink', function () {
                 );
             }).to.throw();
         });
-        it('should set active state if href matches current route', function () {
+        it('should set active state by class name if href matches current route', function () {
             var navParams = {a: 1, b: 2};
             var link = ReactTestUtils.renderIntoDocument(
                 <MockAppComponent context={mockContext}>
@@ -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');
+        });
         it('should set active state with custom class and style', function () {
             var link = ReactTestUtils.renderIntoDocument(
                 <MockAppComponent context={mockContext}>