Skip to content

Commit 795c06f

Browse files
cykoderpieh
cykoder
authored and
pieh
committed
[V2] Fix and rework using page transitions (#6010)
* Update using-page-transitions example for gatsby V2 Signed-off-by: Sam Hellawell <[email protected]> * fix Browser history needs a DOM error on build Signed-off-by: Sam Hellawell <[email protected]> * Rework and fix transitions in build for v2 Signed-off-by: Sam Hellawell <[email protected]> * fix warnings in transition.js Signed-off-by: Sam Hellawell <[email protected]> * fix eslint warnings * replace UNSAFE_componentWillReceiveProps with getDerivedStateFromProps
1 parent 58731fe commit 795c06f

File tree

10 files changed

+264
-254
lines changed

10 files changed

+264
-254
lines changed

‎examples/using-page-transitions/gatsby-browser.js‎

Lines changed: 8 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
/* eslint-disable react/prop-types */
21
/* globals window CustomEvent */
3-
import React, { createElement } from "react"
4-
import { Transition } from "react-transition-group"
52
import createHistory from "history/createBrowserHistory"
63

7-
import getTransitionStyle from "./src/utils/getTransitionStyle"
8-
94
const timeout = 250
105
const historyExitingEventType = `history::exiting`
116

@@ -16,73 +11,14 @@ const getUserConfirmation = (pathname, callback) => {
1611
callback(true)
1712
}, timeout)
1813
}
19-
const history = createHistory({ getUserConfirmation })
20-
// block must return a string to conform
21-
history.block((location, action) => location.pathname)
22-
exports.replaceHistory = () => history
23-
24-
class ReplaceComponentRenderer extends React.Component {
25-
constructor(props) {
26-
super(props)
27-
this.state = { exiting: false, nextPageResources: {} }
28-
this.listenerHandler = this.listenerHandler.bind(this)
29-
}
30-
31-
listenerHandler(event) {
32-
const nextPageResources = this.props.loader.getResourcesForPathname(
33-
event.detail.pathname,
34-
nextPageResources => this.setState({ nextPageResources })
35-
) || {}
36-
this.setState({ exiting: true, nextPageResources })
37-
}
38-
39-
componentDidMount() {
40-
window.addEventListener(historyExitingEventType, this.listenerHandler)
41-
}
4214

43-
componentWillUnmount() {
44-
window.removeEventListener(historyExitingEventType, this.listenerHandler)
45-
}
46-
47-
componentWillReceiveProps(nextProps) {
48-
if (this.props.location.key !== nextProps.location.key) {
49-
this.setState({ exiting: false, nextPageResources: {} })
50-
}
51-
}
52-
53-
render() {
54-
const transitionProps = {
55-
timeout: {
56-
enter: 0,
57-
exit: timeout,
58-
},
59-
appear: true,
60-
in: !this.state.exiting,
61-
key: this.props.location.key,
62-
}
63-
return (
64-
<Transition {...transitionProps}>
65-
{
66-
(status) => createElement(this.props.pageResources.component, {
67-
...this.props,
68-
...this.props.pageResources.json,
69-
transition: {
70-
status,
71-
timeout,
72-
style: getTransitionStyle({ status, timeout }),
73-
nextPageResources: this.state.nextPageResources,
74-
},
75-
})
76-
}
77-
</Transition>
78-
)
79-
}
15+
let history
16+
if (typeof document !== 'undefined') {
17+
history = createHistory({ getUserConfirmation })
18+
// block must return a string to conform
19+
history.block((location, action) => location.pathname)
8020
}
8121

82-
// eslint-disable-next-line react/display-name
83-
exports.replaceComponentRenderer = ({ props, loader }) => {
84-
if (props.layout) {
85-
return undefined
86-
}
87-
return createElement(ReplaceComponentRenderer, { ...props, loader })
88-
}
22+
export let replaceHistory = () => history
23+
24+
export { historyExitingEventType, timeout }

‎examples/using-page-transitions/package.json‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,22 @@
44
"version": "1.0.0",
55
"author": "Steven Surgnier <[email protected]>",
66
"dependencies": {
7-
"gatsby": "latest",
8-
"gatsby-plugin-react-helmet": "^2.0.1",
7+
"gatsby": "next",
8+
"gatsby-plugin-react-helmet": "next",
9+
"react": "^16.4.1",
10+
"react-dom": "^16.4.1",
911
"react-helmet": "^5.2.0",
1012
"react-transition-group": "^2.2.1"
1113
},
12-
"keywords": ["gatsby"],
14+
"keywords": [
15+
"gatsby"
16+
],
1317
"license": "MIT",
1418
"main": "n/a",
1519
"scripts": {
1620
"build": "gatsby build",
1721
"develop": "gatsby develop",
18-
"format":
19-
"prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
22+
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
2023
"test": "echo \"Error: no test specified\" && exit 1"
2124
}
2225
}

‎examples/using-page-transitions/src/layouts/index.css‎ renamed to ‎examples/using-page-transitions/src/components/layout.css‎

File renamed without changes.

‎examples/using-page-transitions/src/layouts/index.js‎ renamed to ‎examples/using-page-transitions/src/components/layout.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react"
2-
import PropTypes from "prop-types"
32
import { Link } from "gatsby"
43
import Helmet from "react-helmet"
54

6-
import "./index.css"
5+
import "./layout.css"
6+
7+
import Transition from "./transition"
78

89
const Header = () => (
910
<div
@@ -52,13 +53,11 @@ const TemplateWrapper = ({ children }) => (
5253
paddingTop: 0,
5354
}}
5455
>
55-
{children()}
56+
<Transition>
57+
{children}
58+
</Transition>
5659
</div>
5760
</div>
5861
)
5962

60-
TemplateWrapper.propTypes = {
61-
children: PropTypes.func,
62-
}
63-
6463
export default TemplateWrapper

‎examples/using-page-transitions/src/components/transition.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from "react"
2+
import { Transition as ReactTransition } from "react-transition-group"
3+
import getTransitionStyle from "../utils/getTransitionStyle"
4+
import { historyExitingEventType, timeout } from "../../gatsby-browser"
5+
6+
class Transition extends React.Component {
7+
constructor(props) {
8+
super(props)
9+
this.state = { exiting: false }
10+
this.listenerHandler = this.listenerHandler.bind(this)
11+
}
12+
13+
listenerHandler(event) {
14+
this.setState({ exiting: true })
15+
}
16+
17+
componentDidMount() {
18+
window.addEventListener(historyExitingEventType, this.listenerHandler)
19+
}
20+
21+
componentWillUnmount() {
22+
window.removeEventListener(historyExitingEventType, this.listenerHandler)
23+
}
24+
25+
static getDerivedStateFromProps({ exiting }) {
26+
if (exiting) {
27+
return { exiting: false }
28+
}
29+
return null
30+
}
31+
32+
render() {
33+
const transitionProps = {
34+
timeout: {
35+
enter: 0,
36+
exit: timeout,
37+
},
38+
appear: true,
39+
in: !this.state.exiting
40+
}
41+
42+
return (
43+
<ReactTransition {...transitionProps}>
44+
{
45+
(status) => (
46+
<div style={{
47+
...getTransitionStyle({ status, timeout })
48+
}}>
49+
{this.props.children}
50+
</div>
51+
)
52+
}
53+
</ReactTransition>
54+
)
55+
}
56+
}
57+
58+
export default Transition

‎examples/using-page-transitions/src/pages/404.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from "react"
2+
import TemplateWrapper from "../components/layout"
23

34
const NotFoundPage = () => (
4-
<div>
5-
<h1>NOT FOUND</h1>
6-
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
7-
</div>
5+
<TemplateWrapper>
6+
<div>
7+
<h1>NOT FOUND</h1>
8+
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
9+
</div>
10+
</TemplateWrapper>
811
)
912

1013
export default NotFoundPage

‎examples/using-page-transitions/src/pages/cat.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
/* eslint-disable react/prop-types */
22
import React from "react"
33
import { Link } from "gatsby"
4+
import TemplateWrapper from "../components/layout"
45

5-
const Cat = ({ transition }) => (
6-
<div style={transition && transition.style}>
7-
<h1>meow</h1>
8-
<div>
9-
<Link to="/">Go to home</Link>
10-
</div>
11-
<div>
12-
<Link to="/dog/">Go to dog</Link>
13-
</div>
14-
<div>
15-
<Link to="/long-page/">Go to long page</Link>
16-
</div>
17-
</div>
6+
const Cat = () => (
7+
<TemplateWrapper>
8+
<h1>meow</h1>
9+
<div>
10+
<Link to="/">Go to home</Link>
11+
</div>
12+
<div>
13+
<Link to="/dog/">Go to dog</Link>
14+
</div>
15+
<div>
16+
<Link to="/long-page/">Go to long page</Link>
17+
</div>
18+
</TemplateWrapper>
1819
)
1920

2021
export default Cat

‎examples/using-page-transitions/src/pages/dog.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
/* eslint-disable react/prop-types */
22
import React from "react"
33
import { Link } from "gatsby"
4+
import TemplateWrapper from "../components/layout"
45

56
const Dog = ({ transition }) => (
6-
<div style={transition && transition.style}>
7-
<h1>ruff</h1>
8-
<div>
9-
<Link to="/">Go to home</Link>
7+
<TemplateWrapper>
8+
<div style={transition && transition.style}>
9+
<h1>ruff</h1>
10+
<div>
11+
<Link to="/">Go to home</Link>
12+
</div>
13+
<div>
14+
<Link to="/cat/">Go to cat</Link>
15+
</div>
16+
<div>
17+
<Link to="/long-page/">Go to long page</Link>
18+
</div>
1019
</div>
11-
<div>
12-
<Link to="/cat/">Go to cat</Link>
13-
</div>
14-
<div>
15-
<Link to="/long-page/">Go to long page</Link>
16-
</div>
17-
</div>
20+
</TemplateWrapper>
1821
)
1922

2023
export default Dog

‎examples/using-page-transitions/src/pages/index.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
/* eslint-disable react/prop-types */
22
import React from "react"
33
import { Link } from "gatsby"
4+
import TemplateWrapper from "../components/layout"
45

56
const Index = ({ transition }) => (
6-
<div style={transition && transition.style}>
7-
<h1>animals</h1>
8-
<div>
9-
<Link to="/cat/">Go to cat</Link>
7+
<TemplateWrapper>
8+
<div style={transition && transition.style}>
9+
<h1>animals</h1>
10+
<div>
11+
<Link to="/cat/">Go to cat</Link>
12+
</div>
13+
<div>
14+
<Link to="/dog/">Go to dog</Link>
15+
</div>
16+
<div>
17+
<Link to="/long-page/">Go to long page</Link>
18+
</div>
1019
</div>
11-
<div>
12-
<Link to="/dog/">Go to dog</Link>
13-
</div>
14-
<div>
15-
<Link to="/long-page/">Go to long page</Link>
16-
</div>
17-
</div>
20+
</TemplateWrapper>
1821
)
1922

2023
export default Index

0 commit comments

Comments
 (0)