Cleanup logic for asModal
to make it a little easier to use dynamically
This commit is contained in:
parent
69ac2ca40b
commit
6b16b9bc2a
12 changed files with 210 additions and 203 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
Reference in a new issue