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

Get spinners back in working order

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 12:39:55 -07:00
parent d260200947
commit 5473edc006
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
16 changed files with 74 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

16
resources/scripts/components/elements/SpinnerOverlay.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
import Fade from '@/components/elements/Fade';
import tw from 'twin.macro';
interface Props {
visible: boolean;
@ -11,17 +11,17 @@ interface Props {
}
const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
<CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
<Fade timeout={150} in={visible} unmountOnExit>
<div
className={classNames('top-0 left-0 flex items-center justify-center w-full h-full rounded', {
absolute: !fixed,
fixed: fixed,
})}
css={[
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded`,
!fixed ? tw`absolute` : tw`fixed`,
]}
style={{ zIndex: 9999, background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
>
<Spinner size={size}/>
</div>
</CSSTransition>
</Fade>
);
export default SpinnerOverlay;