Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change: add loading state to project board

Browse Source
This commit is contained in:
Jordan Knott
2020-07-16 21:14:26 -05:00
parent a90ace7a06
commit 45a92636cb
5 changed files with 207 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/shared/components/Button/index.tsx
View File

@ -1,11 +1,11 @@
import React, { useRef } from 'react';
import styled, { css } from 'styled-components/macro';
const Text = styled.span<{ fontSize: string }>`
const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
position: relative;
display: flex;
align-items: center;
justify-content: center;
justify-content: ${props => props.justifyTextContent};
transition: all 0.2s ease;
font-size: ${props => props.fontSize};
color: rgba(${props => props.theme.colors.text.secondary});
@ -112,6 +112,7 @@ type ButtonProps = {
type?: 'button' | 'submit';
className?: string;
onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
justifyTextContent?: string;
};
const Button: React.FC<ButtonProps> = ({
@ -120,6 +121,7 @@ const Button: React.FC<ButtonProps> = ({
color = 'primary',
variant = 'filled',
type = 'button',
justifyTextContent = 'center',
onClick,
className,
children,
@ -134,7 +136,9 @@ const Button: React.FC<ButtonProps> = ({
case 'filled':
return (
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Filled>
);
case 'outline':
@ -147,13 +151,17 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Outline>
);
case 'flat':
return (
<Flat ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Flat>
);
case 'lineDown':
@ -166,7 +174,9 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
<LineX color={color} />
</LineDown>
);
@ -180,13 +190,17 @@ const Button: React.FC<ButtonProps> = ({
disabled={disabled}
color={color}
>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Gradient>
);
case 'relief':
return (
<Relief ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
<Text fontSize={fontSize}>{children}</Text>
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
{children}
</Text>
</Relief>
);
default: