m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 10:25:00 +01:00
Code Releases Activity

Revert "remove page transitions"

Browse Source 
This reverts commit c0e333dd43.
This commit is contained in:
Matthias Kretschmann 2018-05-04 16:55:42 +02:00
parent dd58d7672d
commit 9522d190cc
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/layouts/index.jsx
View File

@ -1,10 +1,24 @@
import React from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import Head from '../components/atoms/Head' import Head from '../components/atoms/Head'
import Header from '../components/organisms/Header' import Header from '../components/organisms/Header'
import Footer from '../components/organisms/Footer' import Footer from '../components/organisms/Footer'
import { FadeIn } from '../components/atoms/Animations'
import './index.scss' import './index.scss'
class TransitionHandler extends Component {
shouldComponentUpdate() {
return this.props.location.pathname === window.location.pathname
}
render() {
const { children } = this.props
return <div className="transition-container">{children}</div>
}
}
const TemplateWrapper = ({ data, location, children }) => { const TemplateWrapper = ({ data, location, children }) => {
const meta = data.dataJson const meta = data.dataJson
const isHomepage = location.pathname === '/' const isHomepage = location.pathname === '/'
@ -14,20 +28,36 @@ const TemplateWrapper = ({ data, location, children }) => {
<Head meta={meta} location={location} /> <Head meta={meta} location={location} />
<Header meta={meta} isHomepage={isHomepage} /> <Header meta={meta} isHomepage={isHomepage} />
<main className="screen">{children()}</main> <main className="screen">
<TransitionGroup appear={true}>
<FadeIn
key={location.pathname}
timeout={{ enter: 300, exit: 200, appear: 300 }}
>
<TransitionHandler location={location}>
{children()}
</TransitionHandler>
</FadeIn>
</TransitionGroup>
</main>
<Footer meta={meta} /> <Footer meta={meta} />
</div> </div>
) )
} }
TransitionHandler.propTypes = {
children: PropTypes.any,
location: PropTypes.object.isRequired,
}
TemplateWrapper.propTypes = { TemplateWrapper.propTypes = {
children: PropTypes.func, children: PropTypes.func,
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
location: PropTypes.object.isRequired, location: PropTypes.object.isRequired,
} }
export default TemplateWrapper export default withRouter(TemplateWrapper)
export const query = graphql` export const query = graphql`
query metaQuery { query metaQuery {