StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix some issues with navigating in the router and bad animations

Browse source
This commit is contained in:
Dane Everitt 2019-06-28 22:17:29 -07:00
parent 3db7698170
commit 8ac8a370f8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 73 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

52
resources/scripts/TransitionRouter.tsx
View file

@ -1,38 +1,32 @@
import React from 'react';
import { Route, Switch } from 'react-router';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { BrowserRouter } from 'react-router-dom';
type Props = Readonly<{
basename: string;
children: React.ReactNode;
}>;
export default ({ basename, children }: Props) => (
<BrowserRouter basename={basename}>
<Route
render={({ location }) => (
<TransitionGroup className={'route-transition-group'}>
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
<section>
<Switch location={location}>
{children}
</Switch>
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
<p className={'text-right text-neutral-500 text-xs'}>
&copy; 2015 - 2019&nbsp;
<a
href={'https://pterodactyl.io'}
className={'no-underline text-neutral-500 hover:text-neutral-300'}
>
Pterodactyl Software
</a>
</p>
</div>
</section>
</CSSTransition>
</TransitionGroup>
)}
/>
</BrowserRouter>
export default ({ children }: Props) => (
<Route
render={({ location }) => (
<TransitionGroup className={'route-transition-group'}>
<CSSTransition key={location.key} timeout={250} classNames={'fade'}>
<section>
{children}
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
<p className={'text-right text-neutral-500 text-xs'}>
&copy; 2015 - 2019&nbsp;
<a
href={'https://pterodactyl.io'}
className={'no-underline text-neutral-500 hover:text-neutral-300'}
>
Pterodactyl Software
</a>
</p>
</div>
</section>
</CSSTransition>
</TransitionGroup>
)}
/>
);