Add support for an active class on the Link component

[jeroenverfallie]

When on the route, add an active class to links associated with the route.

     <Link
        signal={this.props.signals.somethingHappened}
        params={{foo: 'bar'}}
        activeClass="active"
        className="my-class"
      >Click me</Link>

A special case would be params.. sometimes you want the active class to show only when the params match, other times you want to only match the base.

[Guria]

@christianalfoni

• So we have to subscribe to url changes from store and we need access to controller instance. We can get it from context now, but I not sure if it always would there.
• Also we have to know which path in store subscribe to, since it could be changed in router options. We could access router instance at controller.service.router.

We need to decide how we would subscribe to url changes. Also I would suggest to split component onto smart and dumb one.

[Guria]

var 1

• expose controller.service.router.getUrl() which would be called in controller.on("change") callback.

var 2

• expose controller.service.router.on('change', callback)

var 3
...

[christianalfoni]

Hm, I think we should just listen to changes on controller and check path using the option on the router. That way time travelling etc. will work as expected.

Though this is starting to get very complex. A stated by @jeroenverfallie , sometimes you want the link to be active as parent of a path, but other times you do not want that. Only when it is the actual url.

I think we should maybe use a function here:

 <Link
        signal={this.props.signals.somethingHappened}
        params={{foo: 'bar'}}
        activeClass="active"
        isActive={function (routes, route) { // matching logic}
        className="my-class"
      >Click me</Link>

So by default it needs a perfect match, but you can decide whatever you want to make it active. Not quite sure about this.

[Guria]

We thought a little. This change brings extra complexity and doesn't fit well React/Flux ideas about state driven UI.
We suggest to use something like <Link className={this.props.page === 'home' ? 'active' : 'notactive'}/>. Routing will affect some path in store passed as this.props.page and className would be changed accordingly.

We must document such approach as best practice.

[NervosaX]

Perhaps this ticket should be closed @Guria?

[Guria]

Let it stay until it covered in docs

[Guria]

closed in favor to cerebral-legacy/cerebral-module-router#82