Skip to content

Commit

Permalink
[added] preserveScrollPosition Route/Routes props
Browse files Browse the repository at this point in the history
closes #121
  • Loading branch information
ryanflorence committed Aug 7, 2014
1 parent d63e85b commit 21f4f57
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 4 deletions.
6 changes: 6 additions & 0 deletions docs/api/components/Route.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ inherit the path of their parent.

The component to be rendered when the route is active.

### `preserveScrollPosition`

If `true`, the router will not scroll the window up when the route is
transitioned to. Defaults to `false`. Ignored if the parent `<Routes/>`
has been set to `true`.

### `children`

Routes can be nested. When a child route matches, the parent route's
Expand Down
11 changes: 9 additions & 2 deletions docs/api/components/Routes.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,15 @@ works without a server, if you use `history` your server will need to
support it.

For browsers that don't support the HTML5 history API the router will
fall back to `window.location` if you choose `history`. This way all
users get the same urls and can share them.
fall back to `window.location` if you choose `history`, in other words,
the router will simply cause a full page reload. This way all users get
the same urls and can share them.

### `preserveScrollPosition`

If `true`, the router will not scroll the window up globally when any
route is transitioned to. Defaults to `false`. When `false`, the
`<Route/>` gets to decide whether or not to scroll on transition.

Example
-------
Expand Down
9 changes: 8 additions & 1 deletion modules/components/Route.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,17 @@ var Route = React.createClass({

},

getDefaultProps: function() {
return {
preserveScrollPosition: false
};
},

propTypes: {
handler: React.PropTypes.any.isRequired,
path: React.PropTypes.string,
name: React.PropTypes.string
name: React.PropTypes.string,
preserveScrollPosition: React.PropTypes.bool
},

render: function () {
Expand Down
16 changes: 15 additions & 1 deletion modules/components/Routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,13 @@ var Routes = React.createClass({

propTypes: {
location: React.PropTypes.oneOf([ 'hash', 'history' ]).isRequired,
preserveScrollPosition: React.PropTypes.bool
},

getDefaultProps: function () {
return {
location: 'hash'
location: 'hash',
preserveScrollPosition: false
};
},

Expand Down Expand Up @@ -339,6 +341,8 @@ function syncWithTransition(routes, transition) {
})
};

// TODO: add functional test
maybeScrollWindow(routes, toMatches[toMatches.length - 1]);
routes.setState(state);

return state;
Expand Down Expand Up @@ -436,4 +440,14 @@ function reversedArray(array) {
return array.slice(0).reverse();
}

function maybeScrollWindow(routes, match) {
if (routes.props.preserveScrollPosition)
return;

if (!match || match.route.props.preserveScrollPosition)
return;

window.scrollTo(0, 0);
}

module.exports = Routes;

0 comments on commit 21f4f57

Please sign in to comment.