Merge pull request #13 from TylerBarnes/prevent-scroll-jumping-on-save

Prevent scroll jumping on save during development by adding a wrapper…

Author: TylerBarnes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-transition-link",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "A link component for page transitions in gatsby.",
   "repository": "https://github.com/TylerBarnes/gatsby-plugin-transition-link",
   "homepage": "https://gatsby-plugin-transition-link.netlify.com/",

src/AniLink/PaintDrip.js

@@ -22,6 +22,7 @@ export default class PaintDrip extends Component {
     rgb = color ? convert.keyword.rgb(color) : rgb;
 
     canvas.style.zIndex = 10000;
+    canvas.style.top = 0;
     canvas.style.position = "fixed";
 
     let vw = (canvas.width = window.innerWidth);

src/components/TransitionHandler.js

@@ -9,9 +9,35 @@ import { getMs } from "../utils/secondsMs";
 import { onEnter } from "../functions/onEnter";
 import { onExit } from "../functions/onExit";
 import { LayoutComponent as Layout } from "./Layout";
+import pageMinHeight from "../functions/pageMinHeight";
 
 const DelayedTransition = delayTransitionRender(Transition);
 export default class TransitionHandler extends Component {
+  constructor(props) {
+    super(props);
+
+    this.wrapper = React.createRef();
+    this.updatePageMinHeight = this.updatePageMinHeight.bind(this);
+  }
+  componentDidMount() {
+    this.updatePageMinHeight();
+    window.addEventListener("resize", this.updatePageMinHeight);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updatePageMinHeight);
+  }
+
+  updatePageMinHeight() {
+    setTimeout(
+      () =>
+        pageMinHeight({
+          node: this.wrapper
+        }),
+      1
+    );
+  }
+
   render() {
     const { props } = this;
     const { children } = props;
@@ -30,6 +56,7 @@ export default class TransitionHandler extends Component {
           exitProps,
           transitionIdHistory,
           inTransition,
+          updateContext,
           e
         }) => {
           return (
@@ -53,6 +80,8 @@ export default class TransitionHandler extends Component {
                           entryProps,
                           exitProps,
                           pathname,
+                          updateContext,
+                          pageMinHeight,
                           e
                         })
                       }
@@ -99,6 +128,7 @@ export default class TransitionHandler extends Component {
 
                         return (
                           <div
+                            ref={n => (this.wrapper = n)}
                             className="tl-wrapper"
                             style={{
                               position: "absolute",

src/context/InternalProvider.js

@@ -6,6 +6,7 @@ class InternalProvider extends Component {
   state = {
     inTransition: false,
     transitionIdHistory: [],
+    wrapperMinHeight: false,
     // event
     e: false,
     // exit

src/functions/onEnter.js

@@ -5,8 +5,12 @@ const onEnter = ({
   entryProps,
   exitProps,
   pathname,
+  pageMinHeight,
+  updateContext,
   e
 }) => {
+  pageMinHeight({ node, updateContext });
+
   if (inTransition) {
     window.scrollTo(0, 0);
   } else {

src/functions/pageMinHeight.js

@@ -0,0 +1,8 @@
+// this function is used to set the outerwrapper height to keep the page from jumping up on save during development.
+export default function pageMinHeight({ node, updateContext }) {
+  const minHeight = node.offsetHeight;
+  if (minHeight > 0) {
+    sessionStorage.setItem("wrapperMinHeight", node.offsetHeight);
+    updateContext && updateContext({ wrapperMinHeight: node.offsetHeight });
+  }
+}

src/wrap-page.js

@@ -1,12 +1,28 @@
 const React = require("react");
 const TransitionHandler = require("./components/TransitionHandler").default;
 const InternalProvider = require("./context/InternalProvider").default;
+const Consumer = require("./context/createTransitionContext").Consumer;
 
 // eslint-disable-next-line react/prop-types,react/display-name
 module.exports = ({ element, props }) => {
+  const minHeight = sessionStorage.getItem("wrapperMinHeight");
   return (
     <InternalProvider>
-      <TransitionHandler {...props}>{element}</TransitionHandler>
+      <Consumer>
+        {({ wrapperMinHeight }) => (
+          <div
+            style={{
+              position: "relative",
+              zIndex: 0,
+              minHeight: wrapperMinHeight
+                ? `${wrapperMinHeight}px`
+                : `${minHeight}px`
+            }}
+          >
+            <TransitionHandler {...props}>{element}</TransitionHandler>
+          </div>
+        )}
+      </Consumer>
     </InternalProvider>
   );
 };