Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

Commit

Permalink
fix: move appearAfter logic to transition renderer
Browse files Browse the repository at this point in the history
Having it in delay transition render was causing some exiting pages to dissapear when they shouldn't.
  • Loading branch information
Tyler Barnes committed Mar 27, 2019
1 parent 8ff6993 commit 561d843
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 18 deletions.
2 changes: 1 addition & 1 deletion src/components/TransitionHandler.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -123,6 +122,7 @@ export default class TransitionHandler extends Component {
transitionStatus={transitionStatus}
transitionState={transitionState}
children={children}
appearAfter={getMs(appearAfter)}
/>
);
}}
Expand Down
24 changes: 23 additions & 1 deletion src/components/TransitionRenderer.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 }}>
Expand Down
19 changes: 3 additions & 16 deletions src/components/delayTransitionRender.js
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
};
}

Expand All @@ -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;
}
}
Expand Down

0 comments on commit 561d843

Please sign in to comment.