m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-30 05:31:44 +02: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 withRouter from 'react-router-dom/withRouter'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import Head from '../components/atoms/Head'
import Header from '../components/organisms/Header'
import Footer from '../components/organisms/Footer'
import { FadeIn } from '../components/atoms/Animations'
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 meta = data.dataJson
const isHomepage = location.pathname === '/'
@ -14,20 +28,36 @@ const TemplateWrapper = ({ data, location, children }) => {
<Head meta={meta} location={location} />
<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} />
</div>
)
}
TransitionHandler.propTypes = {
children: PropTypes.any,
location: PropTypes.object.isRequired,
}
TemplateWrapper.propTypes = {
children: PropTypes.func,
data: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
}
export default TemplateWrapper
export default withRouter(TemplateWrapper)
export const query = graphql`
query metaQuery {