From 5fbe93387814aac733597ed4fdf74df5ce61b8d4 Mon Sep 17 00:00:00 2001 From: Michael Jackson Date: Fri, 11 Sep 2015 14:05:31 -0700 Subject: [PATCH] [changed] Do not add "active" class by default Must use or in order to enable "active" behavior on links. If neither of these are present, links do not check if they are active. Fixes #1873 --- modules/Link.js | 33 +++++++++++++++++++-------------- modules/__tests__/Link-test.js | 4 ++-- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/modules/Link.js b/modules/Link.js index 2d409a23a1..2557ad4520 100644 --- a/modules/Link.js +++ b/modules/Link.js @@ -11,6 +11,14 @@ function isModifiedEvent(event) { return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); } +function isEmptyObject(object) { + for (var p in object) + if (object.hasOwnProperty(p)) + return false; + + return true; +} + /** * A is used to create an element that links to a route. * When that route is active, the link gets an "active" class name @@ -47,9 +55,8 @@ var Link = React.createClass({ getDefaultProps() { return { - className: '', - activeClassName: 'active', onlyActiveOnIndex: false, + className: '', style: {} }; }, @@ -83,26 +90,24 @@ var Link = React.createClass({ }, render() { - var { to, query, onlyActiveOnIndex } = this.props; - - var props = { - ...this.props, - onClick: this.handleClick - }; - var { history } = this.context; + var { activeClassName, activeStyle, onlyActiveOnIndex, to, query, state, onClick, ...props } = this.props; + + props.onClick = this.handleClick; // Ignore if rendered outside the context // of history, simplifies unit testing. if (history) { props.href = history.createHref(to, query); - if (history.isActive(to, query, onlyActiveOnIndex)) { - if (props.activeClassName) - props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName; + if (activeClassName || (activeStyle != null && !isEmptyObject(activeStyle))) { + if (history.isActive(to, query, onlyActiveOnIndex)) { + if (activeClassName) + props.className += props.className === '' ? activeClassName : ` ${activeClassName}`; - if (props.activeStyle) - props.style = { ...props.style, ...props.activeStyle }; + if (activeStyle) + props.style = { ...props.style, ...activeStyle }; + } } } diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js index ad20ffa043..bae0faa41a 100644 --- a/modules/__tests__/Link-test.js +++ b/modules/__tests__/Link-test.js @@ -71,8 +71,8 @@ describe('A ', function () { render() { return (
- Michael - Ryan + Michael + Ryan
); }