Skip to content
This repository has been archived by the owner on Jul 15, 2019. It is now read-only.

Commit

Permalink
Merge pull request #90 from alexnj/historystate-scrolloffset-backport
Browse files Browse the repository at this point in the history 
Historystate scrolloffset backport
  • Loading branch information
@lingyan
lingyan committed Sep 29, 2015
2 parents 6e3d8b7 + 61287d9 commit b47264c
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 19 deletions.
2 changes: 1 addition & 1 deletion docs/api/NavLink.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ in navigation events.
| navParams | Object | If `href` prop is not available, `navParams` object will be used together with `routeName` to generate the href for the link. This object needs to contain route params the route path needs. Eg. for a route path `/article/:id`, `navParams.id` will be the article ID. |
| followLink | boolean, default to false | If set to true, client side navigation will be disabled. NavLink will just act like a regular anchor link. |
| replaceState | boolean, default to false | If set to true, replaceState is being used instead of pushState |
| preserveScrollPosition | boolean, default to false | If set to true, the page will maintain its scroll position on route change. |
| preserveScrollPosition | boolean, default to false | If set to true, the page will maintain its scroll position while change to new route. This is useful for cases like on e-commerce site where user might want to change a product size. The url will change, but the scroll position needs to remain the same. |
| stopPropagation | boolean, default to false | If set to true, the click event will not be propagated beyond the NavLink |


Expand Down
26 changes: 11 additions & 15 deletions lib/handleHistory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,7 @@ function createComponent(Component, opts) {
}
this._history.on(this._onHistoryChange);

if (options.enableScroll) {
window.addEventListener('scroll', this._onScroll);
}
window.addEventListener('scroll', this._onScroll);
},
_onScroll: function (e) {
if (this._scrollTimer) {
Expand All @@ -98,12 +96,11 @@ function createComponent(Component, opts) {
var confirmResult = onBeforeUnloadText ? window.confirm(onBeforeUnloadText) : true;
var nav = props.currentNavigate || {};
var navParams = nav.params || {};
var enableScroll = options.enableScroll && nav.preserveScrollPosition;
var historyState = {
params: (nav.params || {}),
scroll: {
x: (enableScroll ? window.scrollX : 0),
y: (enableScroll ? window.scrollY : 0)
x: window.scrollX,
y: window.scrollY
}
};

Expand Down Expand Up @@ -137,9 +134,7 @@ function createComponent(Component, opts) {
componentWillUnmount: function () {
this._history.off(this._onHistoryChange);

if (options.enableScroll) {
window.removeEventListener('scroll', this._onScroll);
}
window.removeEventListener('scroll', this._onScroll);

historyCreated = false;
},
Expand All @@ -159,14 +154,14 @@ function createComponent(Component, opts) {
return;
}
historyState = {params: navParams};
if (options.enableScroll) {
if (nav.preserveScrollPosition) {
historyState.scroll = {x: window.scrollX, y: window.scrollY};
} else {
if (nav.preserveScrollPosition) {
historyState.scroll = {x: window.scrollX, y: window.scrollY};
} else {
if (options.enableScroll) {
window.scrollTo(0, 0);
historyState.scroll = {x: 0, y: 0};
debug('on click navigation, reset scroll position to (0, 0)');
}
historyState.scroll = {x: 0, y: 0};
}
var pageTitle = navParams.pageTitle || null;
if (navType === TYPE_REPLACESTATE) {
Expand Down Expand Up @@ -205,7 +200,8 @@ function createComponent(Component, opts) {
* @param {React.Component} Component
* @param {object} opts
* @param {boolean} opts.checkRouteOnPageLoad=false Performs navigate on first page load
* @param {boolean} opts.enableScroll=true Saves scroll position in history state
* @param {boolean} opts.enableScroll=true Scrolls to saved scroll position in history state;
* scrolls to (0, 0) if there is no scroll position saved in history state.
* @param {function} opts.historyCreator A factory for creating the history implementation
* @returns {React.Component}
*/
Expand Down
6 changes: 3 additions & 3 deletions tests/unit/lib/handleHistory-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ describe('handleHistory', function () {
<MockAppComponent context={mockContext} />
);
routeStore._handleNavigateStart({url: '/bar', method: 'GET'});
expect(testResult.pushState).to.eql({state: {params: {}}, title: null, url: '/bar'});
expect(testResult.pushState).to.eql({state: {params: {}, scroll: {x: 0, y: 0}}, title: null, url: '/bar'});
expect(testResult.scrollTo).to.equal(undefined);
});
it('update with different route, navigate.type=replacestate, enableScroll=false, do not reset scroll position', function () {
Expand All @@ -343,7 +343,7 @@ describe('handleHistory', function () {
<MockAppComponent context={mockContext} />
);
routeStore._handleNavigateStart({url: '/bar', method: 'GET', type: 'replacestate'});
expect(testResult.replaceState).to.eql({state: {params: {}}, title: null, url: '/bar'});
expect(testResult.replaceState).to.eql({state: {params: {}, scroll: {x: 0, y: 0}}, title: null, url: '/bar'});
expect(testResult.scrollTo).to.equal(undefined);
});
it('update with different route, navigate.type=default, reset scroll position', function () {
Expand Down Expand Up @@ -374,7 +374,7 @@ describe('handleHistory', function () {
<MockAppComponent context={mockContext} />
);
routeStore._handleNavigateStart({url: '/bar', method: 'GET'});
expect(testResult.pushState).to.eql({state: {params: {}}, title: null, url: '/bar'});
expect(testResult.pushState).to.eql({state: {params: {}, scroll: {x: 0, y: 0}}, title: null, url: '/bar'});
expect(testResult.scrollTo).to.equal(undefined);
});
it('do not pushState, navigate.type=popstate, restore scroll position', function () {
Expand Down

0 comments on commit b47264c

Please sign in to comment.