Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[added] preserveScrollPosition Route/Routes props #129

Merged
merged 1 commit into from
Aug 7, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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);
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had this stuff in one conditional, but I feel like this reads nicer.


module.exports = Routes;