Merge pull request #29 from taion/update

Clean up support for non-window elements

Author: taion

.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": ["es2015-loose", "stage-1", "react"],
+  "presets": [
+    ["es2015", { "loose": true }],
+    "stage-1",
+    "react"
+  ],
   "plugins": ["add-module-exports"]
 }

.eslintrc

@@ -1,6 +1,9 @@
 {
   "extends": "airbnb",
   "parser": "babel-eslint",
+  "globals": {
+    "__DEV__": false
+  },
   "rules": {
     "max-len": [2, 79]
   }

README.md

@@ -6,9 +6,9 @@ react-router-scroll is a React Router middleware that adds scroll management usi
 
 ## Usage
 
-```js
+```jsx
 import { applyRouterMiddleware, browserHistory, Router } from 'react-router';
-import useScroll from 'react-router-scroll';
+import { useScroll } from 'react-router-scroll';
 
 /* ... */
 
@@ -45,7 +45,7 @@ You can return:
 - a position array such as `[0, 100]` to scroll to that position
 - a truthy value to get normal scroll behavior
 
-```js
+```jsx
 useScroll((prevRouterProps, { location }) => (
   prevRouterProps && location.pathname !== prevRouterProps.location.pathname
 ));
@@ -63,6 +63,43 @@ useScroll((prevRouterProps, { routes }) => {
 });
 ```
 
+### Scrolling elements other than `window`
+
+Use `<ScrollContainer>` to manage the scroll behavior of elements other than `window`. Each `<ScrollContainer>` must be given a unique `scrollKey`, and can be given an optional `shouldUpdateScroll` callback that behaves as above.
+
+```jsx
+import { ScrollContainer } from 'react-router-scroll';
+
+function Page() {
+  /* ... */
+
+  return (
+    <ScrollContainer
+      scrollKey={scrollKey}
+      shouldUpdateScroll={shouldUpdateScroll}
+    >
+      <MyScrollableComponent />
+    </ScrollContainer>
+  );
+}
+```
+
+`<ScrollContainer>` does not support on-the-fly changes to `scrollKey` or to the DOM node for its child.
+
+### Notes
+
+#### Minimizing bundle size
+
+If you are not using `<ScrollContainer>`, you can reduce your bundle size by importing the `useScroll` module directly.
+
+```jsx
+import useScroll from 'react-router-scroll/lib/useScroll';
+```
+
+#### Server rendering
+
+Do not apply the `useScroll` middleware when rendering on a server. You may use `<ScrollContainer>` in server-rendered components, however, as it will do nothing when rendering on a server.
+
 [build-badge]: https://img.shields.io/travis/taion/react-router-scroll/master.svg
 [build]: https://travis-ci.org/taion/react-router-scroll
 

karma.conf.js

@@ -3,8 +3,6 @@ const webpack = require('webpack');
 module.exports = config => {
   const { env } = process;
 
-  const isCi = env.CONTINUOUS_INTEGRATION === 'true';
-
   config.set({
     frameworks: ['mocha'],
 
@@ -23,6 +21,7 @@ module.exports = config => {
       plugins: [
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify('test'),
+          __DEV__: true,
         }),
       ],
       devtool: 'cheap-module-inline-source-map',
@@ -46,7 +45,5 @@ module.exports = config => {
     },
 
     browsers: env.BROWSER ? env.BROWSER.split(',') : ['Chrome', 'Firefox'],
-
-    singleRun: isCi,
   });
 };

package.json

@@ -10,7 +10,9 @@
     "build": "rimraf lib && babel src -d lib",
     "lint": "eslint src test *.js",
     "prepublish": "npm run build",
-    "test": "npm run lint && karma start"
+    "tdd": "cross-env NODE_ENV=test karma start",
+    "test": "npm run lint && npm run testonly",
+    "testonly": "npm run tdd -- --single-run"
   },
   "repository": {
     "type": "git",
@@ -28,44 +30,44 @@
   },
   "homepage": "https://github.com/taion/react-router-scroll#readme",
   "dependencies": {
-    "history": "^2.1.1",
-    "scroll-behavior": "^0.7.0"
+    "history": "^2.1.2",
+    "scroll-behavior": "^0.8.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",
     "react-router": "^2.3.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.10.4",
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.13.2",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-polyfill": "^6.9.1",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-1": "^6.5.0",
+    "babel-preset-stage-1": "^6.13.0",
     "chai": "^3.5.0",
+    "cross-env": "^2.0.0",
     "dom-helpers": "^2.4.0",
     "eslint": "^2.13.1",
     "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.10.2",
+    "eslint-plugin-import": "^1.12.0",
     "eslint-plugin-jsx-a11y": "^1.5.5",
     "eslint-plugin-react": "^5.2.2",
-    "history": "^2.1.2",
-    "karma": "^1.1.1",
+    "karma": "^1.1.2",
     "karma-chrome-launcher": "^1.0.1",
     "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.0.4",
+    "karma-mocha-reporter": "^2.1.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.5.3",
-    "react": "^15.2.1",
-    "react-dom": "^15.2.1",
-    "react-router": "^2.5.2",
-    "rimraf": "^2.5.3",
+    "mocha": "^3.0.1",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-router": "^2.6.1",
+    "rimraf": "^2.5.4",
+    "warning": "^3.0.0",
     "webpack": "^1.13.1"
   }
 }

src/ScrollBehaviorContainer.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import ScrollBehavior from 'scroll-behavior/lib/ScrollBehavior';
+
+const propTypes = {
+  shouldUpdateScroll: React.PropTypes.func,
+  routerProps: React.PropTypes.object.isRequired,
+  children: React.PropTypes.element.isRequired,
+};
+
+const childContextTypes = {
+  scrollBehavior: React.PropTypes.object.isRequired,
+};
+
+class ScrollBehaviorContext extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    const { routerProps } = props;
+
+    this.scrollBehavior = new ScrollBehavior(
+      routerProps.router,
+      () => this.props.routerProps.location,
+      this.shouldUpdateScroll,
+    );
+
+    this.scrollBehavior.updateScroll(null, routerProps);
+  }
+
+  getChildContext() {
+    return {
+      scrollBehavior: this,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { routerProps } = this.props;
+    const prevRouterProps = prevProps.routerProps;
+
+    if (routerProps.location === prevRouterProps.location) {
+      return;
+    }
+
+    this.scrollBehavior.updateScroll(prevRouterProps, routerProps);
+  }
+
+  componentWillUnmount() {
+    this.scrollBehavior.stop();
+  }
+
+  shouldUpdateScroll = (prevRouterProps, routerProps) => {
+    const { shouldUpdateScroll } = this.props;
+    if (!shouldUpdateScroll) {
+      return true;
+    }
+
+    // Hack to allow accessing scrollBehavior.readPosition().
+    return shouldUpdateScroll.call(
+      this.scrollBehavior, prevRouterProps, routerProps
+    );
+  };
+
+  registerElement = (key, element, shouldUpdateScroll) => {
+    this.scrollBehavior.registerElement(
+      key, element, shouldUpdateScroll, this.props.routerProps
+    );
+  };
+
+  unregisterElement = (key) => {
+    this.scrollBehavior.unregisterElement(key);
+  };
+
+  render() {
+    return this.props.children;
+  }
+}
+
+ScrollBehaviorContext.propTypes = propTypes;
+ScrollBehaviorContext.childContextTypes = childContextTypes;
+
+export default ScrollBehaviorContext;