Merge pull request #834 from bradleyboy/link-activestyle-property

[added] Link activeStyle property

Author: mjackson

docs/api/components/Link.md

@@ -36,9 +36,13 @@ your route handler with `this.getQuery()`.
 
 ### `activeClassName`
 
-The className a `Link` receives when it's route is active. Defaults to
+The className a `Link` receives when its route is active. Defaults to
 `active`.
 
+### `activeStyle`
+
+Object, the styles to apply to the link element when its route is active.
+
 ### `onClick`
 
 A custom handler for the click event. Works just like a handler on an `<a>`
@@ -67,5 +71,8 @@ active -->
 
 <!-- change the activeClassName -->
 <Link activeClassName="current" to="user" params={{userId: user.id}}>{user.name}</Link>
+
+<!-- change style when link is active -->
+<Link style={{color: 'white'}} activeStyle={{color: 'red'}} to="user" params={{userId: user.id}} query={{foo: bar}}>{user.name}</Link>
 ```
 

modules/components/Link.js

@@ -42,6 +42,7 @@ var Link = React.createClass({
     to: PropTypes.string.isRequired,
     params: PropTypes.object,
     query: PropTypes.object,
+    activeStyle: PropTypes.object,
     onClick: PropTypes.func
   },
 
@@ -87,19 +88,26 @@ var Link = React.createClass({
     if (this.props.className)
       classNames[this.props.className] = true;
 
-    if (this.isActive(this.props.to, this.props.params, this.props.query))
+    if (this.getActiveState())
       classNames[this.props.activeClassName] = true;
 
     return classSet(classNames);
   },
 
+  getActiveState: function () {
+    return this.isActive(this.props.to, this.props.params, this.props.query);
+  },
+
   render: function () {
     var props = assign({}, this.props, {
       href: this.getHref(),
       className: this.getClassName(),
       onClick: this.handleClick
     });
 
+    if (props.activeStyle && this.getActiveState())
+      props.style = props.activeStyle;
+
     return React.DOM.a(props, this.props.children);
   }
 

modules/components/__tests__/Link-test.js

@@ -73,23 +73,82 @@ describe('A Link', function () {
         expect(a.className).toEqual('dontKillMe');
       }
 
-      steps.push(() => {
+      steps.push(function () {
+        assertActive();
+        TestLocation.push('/bar');
+      });
+
+      steps.push(function () {
+        assertInactive();
+        TestLocation.push('/foo');
+      });
+
+      steps.push(function () {
+        assertActive();
+        done();
+      });
+
+      Router.run(routes, TestLocation, function (Handler) {
+        React.render(<Handler/>, div, function () {
+          steps.shift()();
+        });
+      });
+    });
+
+    it('has applies activeStyle', function (done) {
+      var LinkHandler = React.createClass({
+        render: function () {
+          return (
+            <div>
+              <Link
+                to="foo"
+                style={{color: 'white'}}
+                activeStyle={{color: 'red'}}
+              >Link</Link>
+              <RouteHandler/>
+            </div>
+          );
+        }
+      });
+
+      var routes = (
+        <Route path="/" handler={LinkHandler}>
+          <Route name="foo" handler={Foo} />
+          <Route name="bar" handler={Bar} />
+        </Route>
+      );
+
+      var div = document.createElement('div');
+      TestLocation.history = ['/foo'];
+      var steps = [];
+
+      function assertActive () {
+        var a = div.querySelector('a');
+        expect(a.style.color).toEqual('red');
+      }
+
+      function assertInactive () {
+        var a = div.querySelector('a');
+        expect(a.style.color).toEqual('white');
+      }
+
+      steps.push(function () {
         assertActive();
         TestLocation.push('/bar');
       });
 
-      steps.push(() => {
+      steps.push(function () {
         assertInactive();
         TestLocation.push('/foo');
       });
 
-      steps.push(() => {
+      steps.push(function () {
         assertActive();
         done();
       });
 
       Router.run(routes, TestLocation, function (Handler) {
-        React.render(<Handler/>, div, () => {
+        React.render(<Handler/>, div, function () {
           steps.shift()();
         });
       });