From ebe588718c87942ba8efc8cb902aa5a122c1ff98 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 4 Jul 2020 09:46:26 -0700 Subject: [PATCH] Fix route transitioning --- package.json | 4 +- resources/scripts/TransitionRouter.tsx | 21 ++++++--- resources/scripts/components/App.tsx | 1 + .../scripts/components/elements/Fade.tsx | 43 +++++++++++++++++++ resources/scripts/routers/DashboardRouter.tsx | 2 +- yarn.lock | 14 +++--- 6 files changed, 71 insertions(+), 14 deletions(-) create mode 100644 resources/scripts/components/elements/Fade.tsx diff --git a/package.json b/package.json index e836b2dd4..4023446df 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "react-i18next": "^11.2.1", "react-redux": "^7.1.0", "react-router-dom": "^5.1.2", - "react-transition-group": "^4.3.0", + "react-transition-group": "^4.4.1", "sockette": "^2.0.6", "styled-components": "^5.1.1", "styled-components-breakpoint": "^3.0.0-preview.20", @@ -66,7 +66,7 @@ "@types/react-redux": "^7.1.1", "@types/react-router": "^5.1.3", "@types/react-router-dom": "^5.1.3", - "@types/react-transition-group": "^2.9.2", + "@types/react-transition-group": "^4.4.0", "@types/styled-components": "^5.1.0", "@types/uuid": "^3.4.5", "@types/webpack-env": "^1.15.2", diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx index abe421d41..19c06d43a 100644 --- a/resources/scripts/TransitionRouter.tsx +++ b/resources/scripts/TransitionRouter.tsx @@ -1,17 +1,28 @@ import React from 'react'; import { Route } from 'react-router'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; +import { SwitchTransition } from 'react-transition-group'; +import Fade from '@/components/elements/Fade'; +import styled from 'styled-components/macro'; +import tw from 'twin.macro'; + +const StyledSwitchTransition = styled(SwitchTransition)` + ${tw`relative`}; + + & section { + ${tw`absolute w-full top-0 left-0`}; + } +`; const TransitionRouter: React.FC = ({ children }) => ( ( - - + +
{children}
- - + + )} /> ); diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx index dac7fd102..286261742 100644 --- a/resources/scripts/components/App.tsx +++ b/resources/scripts/components/App.tsx @@ -12,6 +12,7 @@ import ProgressBar from '@/components/elements/ProgressBar'; import NotFound from '@/components/screens/NotFound'; import tw from 'twin.macro'; import GlobalStylesheet from '@/assets/css/GlobalStylesheet'; +import TransitionRouter from '@/TransitionRouter'; interface ExtendedWindow extends Window { SiteConfiguration?: SiteSettings; diff --git a/resources/scripts/components/elements/Fade.tsx b/resources/scripts/components/elements/Fade.tsx new file mode 100644 index 000000000..62850283e --- /dev/null +++ b/resources/scripts/components/elements/Fade.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import tw from 'twin.macro'; +import styled from 'styled-components/macro'; +import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition'; + +interface Props extends Omit { + timeout: number; +} + +const Container = styled.div<{ timeout: number }>` + .fade-enter, .fade-exit { + will-change: opacity; + } + + .fade-enter { + ${tw`opacity-0`}; + + &.fade-enter-active { + ${tw`opacity-100 transition-opacity ease-in`}; + transition-duration: ${props => props.timeout}ms; + } + } + + .fade-exit { + ${tw`opacity-100`}; + + &.fade-exit-active { + ${tw`opacity-0 transition-opacity ease-in`}; + transition-duration: ${props => props.timeout}ms; + } + } +`; + +const Fade: React.FC = ({ timeout, children, ...props }) => ( + + + {children} + + +); +Fade.displayName = 'Fade'; + +export default Fade; diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx index 7e8f476a2..c3abf3176 100644 --- a/resources/scripts/routers/DashboardRouter.tsx +++ b/resources/scripts/routers/DashboardRouter.tsx @@ -3,12 +3,12 @@ import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer'; import NavigationBar from '@/components/NavigationBar'; import DashboardContainer from '@/components/dashboard/DashboardContainer'; -import TransitionRouter from '@/TransitionRouter'; import AccountApiContainer from '@/components/dashboard/AccountApiContainer'; import NotFound from '@/components/screens/NotFound'; import styled from 'styled-components/macro'; import tw from 'twin.macro'; import config from '@/../../tailwind.config.js'; +import TransitionRouter from '@/TransitionRouter'; const SubNavigation = styled.div` ${tw`w-full bg-neutral-700 shadow`}; diff --git a/yarn.lock b/yarn.lock index 54098ef2a..f814aec3e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1069,9 +1069,10 @@ "@types/history" "*" "@types/react" "*" -"@types/react-transition-group@^2.9.2": - version "2.9.2" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d" +"@types/react-transition-group@^4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d" + integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w== dependencies: "@types/react" "*" @@ -6960,9 +6961,10 @@ react-router@5.1.2: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-transition-group@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683" +react-transition-group@^4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" + integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== dependencies: "@babel/runtime" "^7.5.5" dom-helpers "^5.0.1"