From 9a226f85e45d037c0b8d45fcd981e4ce285ca60b Mon Sep 17 00:00:00 2001 From: Tyler Barnes Date: Tue, 10 Dec 2019 15:53:40 -0800 Subject: [PATCH] namespace layout global and move layout to wrap page to prevent remounting --- .eslintrc.json | 5 - example/.eslintrc.json | 2 +- package.json | 4 +- src/components/Layout.js | 9 +- src/components/TransitionHandler.js | 215 ++++++++++++++-------------- src/gatsby-node.js | 2 +- src/wrap-page.js | 10 +- 7 files changed, 120 insertions(+), 127 deletions(-) delete mode 100644 .eslintrc.json diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index d65d200..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "globals": { - "GATSBY_LAYOUT_COMPONENT_PATH": false - } -} diff --git a/example/.eslintrc.json b/example/.eslintrc.json index d65d200..089263a 100644 --- a/example/.eslintrc.json +++ b/example/.eslintrc.json @@ -1,5 +1,5 @@ { "globals": { - "GATSBY_LAYOUT_COMPONENT_PATH": false + "TL__GATSBY_LAYOUT_COMPONENT_PATH": false } } diff --git a/package.json b/package.json index 27cb844..7a4378f 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "license": "MIT", "scripts": { "release": "standard-version", - "copy-files": "mkdir lib || true && cp .eslintrc.json readme.md package.json lib", - "copy-files-src": "mkdir src || true && cp .eslintrc.json readme.md package.json src", + "copy-files": "mkdir lib || true && cp readme.md package.json lib", + "copy-files-src": "mkdir src || true && cp readme.md package.json src", "build": "yarn copy-files && babel src --out-dir lib --copy-files --ignore **/__tests__", "watch": "yarn copy-files && babel -w src --out-dir lib --copy-files --ignore **/__tests__ --verbose", "npm-publish": "git push --follow-tags origin master && yarn build && cd lib && npm publish && cd ../" diff --git a/src/components/Layout.js b/src/components/Layout.js index c645a03..6db1dcd 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -1,18 +1,19 @@ +/* eslint-disable no-undef */ const React = require('react') const preferDefault = m => (m && m.default) || m let Layout = false if ( - typeof GATSBY_LAYOUT_COMPONENT_PATH !== `undefined` && - !!GATSBY_LAYOUT_COMPONENT_PATH + typeof TL__GATSBY_LAYOUT_COMPONENT_PATH !== `undefined` && + !!TL__GATSBY_LAYOUT_COMPONENT_PATH ) { try { - Layout = preferDefault(require(GATSBY_LAYOUT_COMPONENT_PATH)) + Layout = preferDefault(require(TL__GATSBY_LAYOUT_COMPONENT_PATH)) } catch (e) { if (e.toString().indexOf(`Error: Cannot find module`) !== -1) { throw new Error( - `Couldn't find layout component at "${GATSBY_LAYOUT_COMPONENT_PATH}.\n\n` + + `Couldn't find layout component at "${TL__GATSBY_LAYOUT_COMPONENT_PATH}.\n\n` + `Please create layout component in that location or specify path to layout component in gatsby-config.js` ) } else { diff --git a/src/components/TransitionHandler.js b/src/components/TransitionHandler.js index 1717f20..7ed257d 100644 --- a/src/components/TransitionHandler.js +++ b/src/components/TransitionHandler.js @@ -3,7 +3,6 @@ import { Transition, TransitionGroup } from 'react-transition-group' import { Location } from '@reach/router' import TransitionRenderer from './TransitionRenderer' -import { LayoutComponent as Layout } from './Layout' import delayTransitionRender from './delayTransitionRender' import { Consumer } from '../context/createTransitionContext' import { returnTransitionState } from '../utils/returnTransitionState' @@ -44,121 +43,117 @@ export default class TransitionHandler extends Component { return ( {({ location: { action, pathname } }) => ( - -
- - - !!node && - !window.__tl_back_button_pressed && - onEnter({ - node, - action, - inTransition, - entryTrigger, - entryProps, - exitProps, - pathname, - updateContext, - triggerResolve, - preventScrollJump, - hash, - appearAfter: getMs( - appearAfter - ), - e, - }) +
+ + + !!node && + !window.__tl_back_button_pressed && + onEnter({ + node, + action, + inTransition, + entryTrigger, + entryProps, + exitProps, + pathname, + updateContext, + triggerResolve, + preventScrollJump, + hash, + appearAfter: getMs( + appearAfter + ), + e, + }) + } + onExit={node => + !!node && + !window.__tl_back_button_pressed && + onExit({ + node, + inTransition, + exitTrigger, + entryProps, + exitProps, + triggerResolve, + e, + }) + }> + {transitionStatus => { + const mount = + transitionStatus === + 'entering' || + transitionStatus === + 'entered' + + const states = { + entry: { + state: entryState, + delay: entryDelay, + length: entryLength, + }, + exit: { + state: exitState, + delay: exitDelay, + length: exitLength, + }, } - onExit={node => - !!node && - !window.__tl_back_button_pressed && - onExit({ - node, - inTransition, - exitTrigger, - entryProps, - exitProps, - triggerResolve, - e, - }) - }> - {transitionStatus => { - const mount = - transitionStatus === - 'entering' || - transitionStatus === - 'entered' - const states = { - entry: { - state: entryState, - delay: entryDelay, - length: entryLength, - }, - exit: { - state: exitState, - delay: exitDelay, - length: exitLength, - }, + const current = mount + ? states.entry + : states.exit + + const transitionState = returnTransitionState( + { + inTransition, + location: + props.location, + transitionIdHistory, + transitionStatus, + current, + mount, + ...states, } + ) - const current = mount - ? states.entry - : states.exit + const exitZindex = + exitProps.zIndex || 0 + const entryZindex = + entryProps.zIndex || 1 - const transitionState = returnTransitionState( - { - inTransition, - location: - props.location, - transitionIdHistory, - transitionStatus, - current, - mount, - ...states, + return ( + - ) - }} - - -
- + exitZindex={exitZindex} + transitionStatus={ + transitionStatus + } + transitionState={ + transitionState + } + children={children} + injectPageProps={ + injectPageProps + } + appearAfter={getMs( + appearAfter + )} + /> + ) + }} + + +
)} ) diff --git a/src/gatsby-node.js b/src/gatsby-node.js index 8a98f97..ef50dee 100644 --- a/src/gatsby-node.js +++ b/src/gatsby-node.js @@ -22,7 +22,7 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => { actions.setWebpackConfig({ plugins: [ plugins.define({ - GATSBY_LAYOUT_COMPONENT_PATH: JSON.stringify( + TL__GATSBY_LAYOUT_COMPONENT_PATH: JSON.stringify( absoluteComponentPath ), }), diff --git a/src/wrap-page.js b/src/wrap-page.js index 82d5594..27e5ee0 100644 --- a/src/wrap-page.js +++ b/src/wrap-page.js @@ -1,12 +1,14 @@ const React = require('react') const TransitionHandler = require('./components/TransitionHandler').default -const InternalProvider = require('./context/InternalProvider').default +const Layout = require('./components/Layout').LayoutComponent // eslint-disable-next-line react/prop-types,react/display-name module.exports = ({ element, props }, pluginOptions) => { return ( - - {element} - + + + {element} + + ) }