From 04ba639ecab2a61ba5aad58cae12c5cc6298493a Mon Sep 17 00:00:00 2001
From: Brad Daily <brad@bradleyboy.com>
Date: Fri, 13 Feb 2015 15:53:46 -0600
Subject: [PATCH] [added] Link activeStyle property

---
 docs/api/components/Link.md               |  9 +++-
 modules/components/Link.js                | 10 +++-
 modules/components/__tests__/Link-test.js | 59 +++++++++++++++++++++++
 3 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/docs/api/components/Link.md b/docs/api/components/Link.md
index 9f4a707ec7..c5efeaf460 100644
--- a/docs/api/components/Link.md
+++ b/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>
 ```
 
diff --git a/modules/components/Link.js b/modules/components/Link.js
index 9ed4f9fbcf..14c9072679 100644
--- a/modules/components/Link.js
+++ b/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,12 +88,16 @@ 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(),
@@ -100,6 +105,9 @@ var Link = React.createClass({
       onClick: this.handleClick
     });
 
+    if (props.activeStyle && this.getActiveState())
+      props.style = props.activeStyle;
+
     return React.DOM.a(props, this.props.children);
   }
 
diff --git a/modules/components/__tests__/Link-test.js b/modules/components/__tests__/Link-test.js
index d1f83d4946..c7b9ec642e 100644
--- a/modules/components/__tests__/Link-test.js
+++ b/modules/components/__tests__/Link-test.js
@@ -94,6 +94,65 @@ describe('A Link', function () {
         });
       });
     });
+
+    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(() => {
+        assertActive();
+        TestLocation.push('/bar');
+      });
+
+      steps.push(() => {
+        assertInactive();
+        TestLocation.push('/foo');
+      });
+
+      steps.push(() => {
+        assertActive();
+        done();
+      });
+
+      Router.run(routes, TestLocation, function (Handler) {
+        React.render(<Handler/>, div, () => {
+          steps.shift()();
+        });
+      });
+    });
   });
 
   describe('when clicked', function () {