fixes incorrect scroll direction when direction difference is zero, decrements react peerDependency to v16.8.0

Author: jacobsfletch

.eslintrc.js

@@ -39,5 +39,6 @@ module.exports = {
     "no-throw-literal": 0,
     "react/jsx-max-props-per-line": [1, { "maximum": 1 }],
     "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
+    "no-nested-ternary": 0,
   },
 };

demo/ScrollInfo.demo.js

@@ -46,10 +46,10 @@ const ScrollInfoDemo = (props) => {
           {`xPercentage: ${xPercentage},`}
           <br />
           &emsp;
-          {`yPercentage: ${yPercentage}`}
+          {`yPercentage: ${yPercentage},`}
           <br />
           &emsp;
-          {`totalPercentage: ${totalPercentage}`}
+          {`totalPercentage: ${totalPercentage},`}
           <br />
           &emsp;
           {`eventsFired: ${eventsFired},`}

dist/build.bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "@trbl/react-scroll-info",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "dist/build.bundle.js",
   "repository": "git@github.com:trouble/react-scroll-info.git",
   "description": "A roll, as of parchment or papyrus, used especially in the writing of a document.",
@@ -20,7 +20,7 @@
     "test": "echo \"No test specified\""
   },
   "peerDependencies": {
-    "react": "^16.11.0"
+    "react": "^16.8.0"
   },
   "dependencies": {
     "prop-types": "^15.7.2",

package.json

@@ -33,8 +33,10 @@ class ScrollInfoProvider extends Component {
 
   updateScrollInfo = () => {
     const {
-      x: lastScrollX,
-      y: lastScrollY,
+      x: prevScrollX,
+      y: prevScrollY,
+      xDirection: prevXDirection,
+      yDirection: prevYDirection,
       eventsFired,
       animationsFired,
     } = this.state;
@@ -46,12 +48,16 @@ class ScrollInfoProvider extends Component {
     const currentScrollX = animationsFired > 0 ? window.pageXOffset : 0;
     const currentScrollY = animationsFired > 0 ? window.pageYOffset : 0;
 
-    const xDifference = currentScrollX - lastScrollX;
-    const yDifference = currentScrollY - lastScrollY;
+    const xDifference = currentScrollX - prevScrollX;
+    const yDifference = currentScrollY - prevScrollY;
+
     const xPercentage = Number((currentScrollX / (document.body.scrollWidth - window.innerWidth)).toFixed(3));
     const yPercentage = Number((currentScrollY / (document.body.scrollHeight - window.innerHeight)).toFixed(3));
     const totalPercentage = Number(((xPercentage + yPercentage) / 2).toFixed(3));
 
+    const xDirection = xDifference > 0 ? 'right' : xDifference < 0 ? 'left' : prevXDirection;
+    const yDirection = yDifference > 0 ? 'down' : yDifference < 0 ? 'up' : prevYDirection;
+
     const scrollHasChanged = xDifference !== 0 || yDifference !== 0;
 
     this.setState({
@@ -60,8 +66,8 @@ class ScrollInfoProvider extends Component {
       y: currentScrollY,
       xDifference,
       yDifference,
-      xDirection: xDifference > 0 ? 'right' : 'left',
-      yDirection: yDifference > 0 ? 'down' : 'up',
+      xDirection,
+      yDirection,
       xPercentage,
       yPercentage,
       totalPercentage,