Cleanup logic for asModal to make it a little easier to use dynamically

This commit is contained in:
Dane Everitt 2021-05-16 12:35:49 -07:00
parent 69ac2ca40b
commit 6b16b9bc2a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 210 additions and 203 deletions

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { Suspense } from 'react';
import styled, { css, keyframes } from 'styled-components/macro';
import tw from 'twin.macro';
@ -10,6 +10,11 @@ interface Props {
isBlue?: boolean;
}
interface Spinner extends React.FC<Props> {
Size: Record<'SMALL' | 'BASE' | 'LARGE', SpinnerSize>;
Suspense: React.FC<Props>;
}
const spin = keyframes`
to { transform: rotate(360deg); }
`;
@ -30,7 +35,7 @@ const SpinnerComponent = styled.div<Props>`
border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
`;
const Spinner = ({ centered, ...props }: Props) => (
const Spinner: Spinner = ({ centered, ...props }) => (
centered ?
<div
css={[
@ -43,12 +48,19 @@ const Spinner = ({ centered, ...props }: Props) => (
:
<SpinnerComponent {...props}/>
);
Spinner.DisplayName = 'Spinner';
Spinner.displayName = 'Spinner';
Spinner.Size = {
SMALL: 'small' as SpinnerSize,
BASE: 'base' as SpinnerSize,
LARGE: 'large' as SpinnerSize,
SMALL: 'small',
BASE: 'base',
LARGE: 'large',
};
Spinner.Suspense = ({ children, centered = true, size = Spinner.Size.LARGE, ...props }) => (
<Suspense fallback={<Spinner centered={centered} size={size} {...props}/>}>
{children}
</Suspense>
);
Spinner.Suspense.displayName = 'Spinner.Suspense';
export default Spinner;

View file

@ -1,10 +0,0 @@
import React, { Suspense } from 'react';
import Spinner from '@/components/elements/Spinner';
const SuspenseSpinner: React.FC = ({ children }) => (
<Suspense fallback={<Spinner size={'large'} centered/>}>
{children}
</Suspense>
);
export default SuspenseSpinner;