Skip to content

Commit

Permalink
Yet another large refactoring (hooray!)
Browse files Browse the repository at this point in the history
[added] Navigation mixin for components that need to modify the URL
[added] CurrentPath mixin for components that need to know the current URL path
[added] getActiveRoutes, getActiveParams, and getActiveQuery methods to ActiveState mixin
[removed] Awkward updateActiveState callback from ActiveState mixin
[removed] Router.PathState (use Router.CurrentPath instead)
[removed] Router.Transitions (use Router.Navigation instead)
[removed] Router.RouteLookup (because it was useless)
[added] <Routes scrollBehavior="browser"> as an alternative to scrollBehavior="imitateBrowser"
[changed] <Routes fixedPath> => <Routes initialPath>. Currently only used in testing, but will be useful for SSR
[added] <Routes onTransition> but starting to think the <Routes on*> hooks should be private
  • Loading branch information
mjackson committed Oct 6, 2014
1 parent 931daf4 commit ed0cf62
Show file tree
Hide file tree
Showing 34 changed files with 1,146 additions and 1,110 deletions.
7 changes: 6 additions & 1 deletion modules/actions/LocationActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ var LocationActions = {
/**
* Indicates the most recent entry should be removed from the history stack.
*/
POP: 'pop'
POP: 'pop',

/**
* Indicates that a route transition is finished.
*/
FINISHED_TRANSITION: 'finished-transition'

};

Expand Down
23 changes: 23 additions & 0 deletions modules/behaviors/ImitateBrowserBehavior.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
var LocationActions = require('../actions/LocationActions');

/**
* A scroll behavior that attempts to imitate the default behavior
* of modern browsers.
*/
var ImitateBrowserBehavior = {

updateScrollPosition: function (position, actionType) {
switch (actionType) {
case LocationActions.PUSH:
case LocationActions.REPLACE:
window.scrollTo(0, 0);
break;
case LocationActions.POP:
window.scrollTo(position.x, position.y);
break;
}
}

};

module.exports = ImitateBrowserBehavior;
13 changes: 13 additions & 0 deletions modules/behaviors/ScrollToTopBehavior.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* A scroll behavior that always scrolls to the top of the page
* after a transition.
*/
var ScrollToTopBehavior = {

updateScrollPosition: function () {
window.scrollTo(0, 0);
}

};

module.exports = ScrollToTopBehavior;
32 changes: 7 additions & 25 deletions modules/components/Link.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var React = require('react');
var merge = require('react/lib/merge');
var ActiveState = require('../mixins/ActiveState');
var Transitions = require('../mixins/Transitions');
var Navigation = require('../mixins/Navigation');

function isLeftClickEvent(event) {
return event.button === 0;
Expand Down Expand Up @@ -33,11 +33,11 @@ var Link = React.createClass({

displayName: 'Link',

mixins: [ ActiveState, Transitions ],
mixins: [ ActiveState, Navigation ],

propTypes: {
to: React.PropTypes.string.isRequired,
activeClassName: React.PropTypes.string.isRequired,
to: React.PropTypes.string.isRequired,
params: React.PropTypes.object,
query: React.PropTypes.object,
onClick: React.PropTypes.func
Expand All @@ -49,35 +49,17 @@ var Link = React.createClass({
};
},

getInitialState: function () {
return {
isActive: false
};
},

updateActiveState: function () {
this.setState({
isActive: this.isActive(this.props.to, this.props.params, this.props.query)
});
},

componentWillReceiveProps: function (nextProps) {
this.setState({
isActive: this.isActive(nextProps.to, nextProps.params, nextProps.query)
});
},

handleClick: function (event) {
var allowTransition = true;
var onClickResult;
var clickResult;

if (this.props.onClick)
onClickResult = this.props.onClick(event);
clickResult = this.props.onClick(event);

if (isModifiedEvent(event) || !isLeftClickEvent(event))
return;

if (onClickResult === false || event.defaultPrevented === true)
if (clickResult === false || event.defaultPrevented === true)
allowTransition = false;

event.preventDefault();
Expand All @@ -100,7 +82,7 @@ var Link = React.createClass({
getClassName: function () {
var className = this.props.className || '';

if (this.state.isActive)
if (this.isActive(this.props.to, this.props.params, this.props.query))
className += ' ' + this.props.activeClassName;

return className;
Expand Down
Loading

0 comments on commit ed0cf62

Please sign in to comment.