60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { darken, saturate } from 'polished';
|
|
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
/**
|
|
* AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
|
|
* SEE: https://www.styled-components.com/docs/basics#coming-from-css
|
|
*/
|
|
export interface ButtonProps {
|
|
backgroundColor?: string;
|
|
borderColor?: string;
|
|
width?: string;
|
|
padding?: string;
|
|
type?: string;
|
|
isDisabled?: boolean;
|
|
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
|
|
<button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
|
|
{children}
|
|
</button>
|
|
);
|
|
|
|
const darkenOnHoverAmount = 0.1;
|
|
const darkenOnActiveAmount = 0.2;
|
|
const saturateOnFocusAmount = 0.2;
|
|
export const Button = styled(PlainButton)`
|
|
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
|
|
transition: background-color, opacity 0.5s ease;
|
|
padding: ${props => props.padding};
|
|
border-radius: 3px;
|
|
outline: none;
|
|
width: ${props => props.width};
|
|
background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
|
|
border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
|
|
&:hover {
|
|
background-color: ${props =>
|
|
!props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
|
|
}
|
|
&:active {
|
|
background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
|
|
}
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
&:focus {
|
|
background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
|
|
}
|
|
`;
|
|
|
|
Button.defaultProps = {
|
|
backgroundColor: 'red',
|
|
width: 'auto',
|
|
isDisabled: false,
|
|
padding: '1em 2.2em',
|
|
};
|
|
Button.displayName = 'Button';
|