extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2025-01-08 15:19:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adds prop for button to show progress loader

Browse Source
This commit is contained in:
Alicia Sykes 2023-08-24 12:35:46 +01:00
parent 86bb64a4d0
commit 93aa496a30
1 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Form/Button.tsx
View File

@ -1,7 +1,9 @@
import styled from 'styled-components';
import styled, { keyframes } from 'styled-components';
import colors from 'styles/colors';
import { InputSize, applySize } from 'styles/dimensions';
type LoadState = 'loading' | 'success' | 'error';
interface ButtonProps {
children: React.ReactNode;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
@ -10,6 +12,7 @@ interface ButtonProps {
fgColor?: string,
styles?: string,
title?: string,
loadState?: LoadState,
};
const StyledButton = styled.button<ButtonProps>`
@ -19,6 +22,9 @@ const StyledButton = styled.button<ButtonProps>`
font-family: PTMono;
box-sizing: border-box;
width: -moz-available;
display: flex;
justify-content: center;
gap: 1rem;
box-shadow: 3px 3px 0px ${colors.fgShadowColor};
&:hover {
box-shadow: 5px 5px 0px ${colors.fgShadowColor};
@ -36,8 +42,29 @@ const StyledButton = styled.button<ButtonProps>`
${props => props.styles}
`;
const spinAnimation = keyframes`
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
`;
const SimpleLoader = styled.div`
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 4px solid ${colors.background};
width: 1rem;
height: 1rem;
animation: ${spinAnimation} 1s linear infinite;
`;
const Loader = (props: { loadState: LoadState }) => {
if (props.loadState === 'loading') return <SimpleLoader />
if (props.loadState === 'success') return <span>✔</span>
if (props.loadState === 'error') return <span>✗</span>
return <span></span>;
};
const Button = (props: ButtonProps): JSX.Element => {
const { children, size, bgColor, fgColor, onClick, styles, title } = props;
const { children, size, bgColor, fgColor, onClick, styles, title, loadState } = props;
return (
<StyledButton
onClick={onClick || (() => null) }
@ -47,6 +74,7 @@ const Button = (props: ButtonProps): JSX.Element => {
styles={styles}
title={title?.toString()}
>
{ loadState && <Loader loadState={loadState} /> }
{children}
</StyledButton>
);