Port ignoreScrollBehavior from #388 to the new API

Author: gaearon

modules/__tests__/Router-test.js

@@ -346,6 +346,90 @@ describe('Router.run', function () {
     });
   });
 
+  describe('ignoreScrollBehavior', function () {
+    var routes = (
+      <Route handler={Nested}>
+        <Route handler={Foo} ignoreScrollBehavior>
+          <Route handler={Foo} path='/feed' />
+          <Route handler={Foo} path='/discover' />
+        </Route>
+        <Route path='/search' handler={Foo} ignoreScrollBehavior />
+        <Route path='/about' handler={Foo} />
+      </Route>
+    );
+
+    var div, didUpdateScroll;
+    beforeEach(function (done) {
+      TestLocation.history = [ '/feed' ];
+
+      div = document.createElement('div');
+      document.body.appendChild(div);
+
+      var MockScrollBehavior = {
+        updateScrollPosition() {
+          didUpdateScroll = true;
+        }
+      };
+
+      Router.create({
+        routes: routes,
+        location: TestLocation,
+        scrollBehavior: MockScrollBehavior
+      }).run(function (Handler) {
+        React.render(<Handler/>, div, function () {
+          done();
+        });
+      });
+    });
+
+    afterEach(function () {
+      div.parentNode.removeChild(div);
+      didUpdateScroll = false;
+    });
+
+    it('calls updateScroll the first time', function () {
+      expect(didUpdateScroll).toBe(true);
+    });
+
+    describe('decides whether to update scroll on transition', function () {
+      beforeEach(function () {
+        didUpdateScroll = false;
+      });
+
+      afterEach(function () {
+        TestLocation.pop();
+      });
+
+      it('calls updateScroll when no ancestors ignore scroll', function () {
+        TestLocation.push('/about');
+        expect(didUpdateScroll).toBe(true);
+      });
+
+      it('calls updateScroll when no ancestors ignore scroll although source and target do', function () {
+        TestLocation.push('/search');
+        expect(didUpdateScroll).toBe(true);
+      });
+
+      it('calls updateScroll when source is same as target and does not ignore scroll', function () {
+        TestLocation.push('/about?page=2');
+        expect(didUpdateScroll).toBe(true);
+      });
+
+      it('does not call updateScroll when common ancestor ignores scroll', function () {
+        TestLocation.push('/discover');
+        expect(didUpdateScroll).toBe(false);
+      });
+
+      it('does not call updateScroll when source is same as target and ignores scroll', function () {
+        TestLocation.push('/search');
+        didUpdateScroll = false;
+
+        TestLocation.push('/search?q=test');
+        expect(didUpdateScroll).toBe(false);
+      });
+    });
+  });
+
   describe('makePath', function () {
     var router;
     beforeEach(function () {

modules/components/__tests__/Routes-test.js

@@ -2,6 +2,23 @@ var invariant = require('react/lib/invariant');
 var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
 var getWindowScrollPosition = require('../utils/getWindowScrollPosition');
 
+function shouldUpdateScroll(state, prevState) {
+  if (!prevState) {
+    return true;
+  }
+
+  var routes = state.routes;
+  var prevRoutes = prevState.routes;
+
+  var sharedAncestorRoutes = routes.filter(function (route) {
+    return prevRoutes.indexOf(route) !== -1;
+  });
+
+  return !sharedAncestorRoutes.some(function (route) {
+    return route.ignoreScrollBehavior;
+  });
+}
+
 /**
  * Provides the router with the ability to manage window scroll position
  * according to its scroll behavior.
@@ -25,8 +42,8 @@ var Scrolling = {
     this._scrollHistory[this.state.path] = getWindowScrollPosition();
   },
 
-  componentDidUpdate: function () {
-    this._updateScroll();
+  componentDidUpdate: function (prevProps, prevState) {
+    this._updateScroll(prevState);
   },
 
   componentWillUnmount: function () {
@@ -40,7 +57,11 @@ var Scrolling = {
     return this._scrollHistory[path] || null;
   },
 
-  _updateScroll: function () {
+  _updateScroll: function (prevState) {
+    if (!shouldUpdateScroll(this.state, prevState)) {
+      return;
+    }
+
     var scrollBehavior = this.getScrollBehavior();
 
     if (scrollBehavior)

modules/mixins/Scrolling.js

@@ -55,6 +55,10 @@ function createRoute(element, parentRoute, namedRoutes) {
 
   var route = { name: props.name };
 
+  if (props.ignoreScrollBehavior) {
+    route.ignoreScrollBehavior = true;
+  }
+
   if (type === Redirect.type) {
     route.handler = createRedirectHandler(props.to, props.params, props.query);
     props.path = props.path || props.from || '*';