From 561d8439dbffe9de44e0a22da943275c3777e055 Mon Sep 17 00:00:00 2001
From: Tyler Barnes <tyler@known.design>
Date: Tue, 26 Mar 2019 20:59:23 -0700
Subject: [PATCH] fix: move appearAfter logic to transition renderer

Having it in delay transition render was causing some exiting pages to dissapear when they shouldn't.
---
 src/components/TransitionHandler.js     |  2 +-
 src/components/TransitionRenderer.js    | 24 +++++++++++++++++++++++-
 src/components/delayTransitionRender.js | 19 +++----------------
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/TransitionHandler.js b/src/components/TransitionHandler.js
index 921373f..b9864e6 100644
--- a/src/components/TransitionHandler.js
+++ b/src/components/TransitionHandler.js
@@ -47,7 +47,6 @@ export default class TransitionHandler extends Component {
                       <DelayedTransition
                         key={pathname} // we're using seconds but transitiongroup uses ms
                         delay={getMs(entryDelay)}
-                        appearAfter={getMs(appearAfter)}
                         timeout={{
                           enter: getMs(entryLength),
                           exit: getMs(exitLength)
@@ -123,6 +122,7 @@ export default class TransitionHandler extends Component {
                               transitionStatus={transitionStatus}
                               transitionState={transitionState}
                               children={children}
+                              appearAfter={getMs(appearAfter)}
                             />
                           );
                         }}
diff --git a/src/components/TransitionRenderer.js b/src/components/TransitionRenderer.js
index bcd4ecd..f1ac80b 100644
--- a/src/components/TransitionRenderer.js
+++ b/src/components/TransitionRenderer.js
@@ -1,12 +1,33 @@
 import React, { Component, cloneElement } from "react";
+import { setTimeout, clearTimeout } from "requestanimationframe-timer";
 import { PublicProvider } from "../context/createTransitionContext";
 
 export default class TransitionRenderer extends Component {
+  state = {
+    shouldBeVisible: !!!this.props.appearAfter
+  };
+
   shouldComponentUpdate(nextProps) {
     // only rerender if the transition status changes.
     return this.props.transitionStatus !== nextProps.transitionStatus;
   }
 
+  componentDidMount = () => {
+    const delay = typeof this.props.delay === "number" ? this.props.delay : 0;
+    const appearafter =
+      typeof this.props.appearAfter === "number" ? this.props.appearAfter : 0;
+    const timeout = delay + appearafter;
+
+    this.appearTimeout = setTimeout(
+      () => this.setState({ shouldBeVisible: true }),
+      timeout
+    );
+  };
+
+  componentWillUnmount = () => {
+    clearTimeout(this.appearTimeout);
+  };
+
   render() {
     const {
       mount,
@@ -23,7 +44,8 @@ export default class TransitionRenderer extends Component {
           mount ? "tl-wrapper--mount" : "tl-wrapper--unmount"
         } tl-wrapper-status--${transitionStatus}`}
         style={{
-          zIndex: mount ? entryZindex : exitZindex
+          zIndex: mount ? entryZindex : exitZindex,
+          opacity: this.state.shouldBeVisible ? 1 : 0
         }}
       >
         <PublicProvider value={{ ...transitionState }}>
diff --git a/src/components/delayTransitionRender.js b/src/components/delayTransitionRender.js
index 44d8a42..6678da7 100644
--- a/src/components/delayTransitionRender.js
+++ b/src/components/delayTransitionRender.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { setTimeout } from "requestanimationframe-timer";
+import { setTimeout, clearTimeout } from "requestanimationframe-timer";
 
 export default function delayTransitionRender(WrappedComponent) {
   class DelayedTransitionWrapper extends Component {
@@ -10,8 +10,7 @@ export default function delayTransitionRender(WrappedComponent) {
         // if there is a delay, set shouldRender to false
         // then in componentdid mount shouldRender becomes true
         // after the delay.
-        shouldRender: !!!this.props.delay,
-        shouldBeVisible: !!!this.props.appearAfter
+        shouldRender: !!!this.props.delay
       };
     }
 
@@ -20,27 +19,15 @@ export default function delayTransitionRender(WrappedComponent) {
         () => this.setState({ shouldRender: true }),
         this.props.delay
       );
-
-      this.appearTimeout = setTimeout(
-        () => this.setState({ shouldBeVisible: true }),
-        this.props.delay + this.props.appearAfter
-      );
     }
 
     componentWillUnmount() {
       clearTimeout(this.renderTimeout);
-      clearTimeout(this.appearTimeout);
     }
 
     render() {
       return this.state.shouldRender || typeof window === `undefined` ? (
-        <span
-          style={{
-            opacity: this.state.shouldBeVisible ? 1 : 0
-          }}
-        >
-          <WrappedComponent {...this.props} />
-        </span>
+        <WrappedComponent {...this.props} />
       ) : null;
     }
   }