You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.6 KiB
81 lines
1.6 KiB
6 years ago
|
import React from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import styled from 'styled-components'
|
||
|
|
import { Button as BaseButton, Flex, Text } from 'rebass'
|
||
|
|
import Spinner from './Spinner'
|
||
|
|
|
||
|
|
const Wrapper = styled(BaseButton)`
|
||
|
|
transition: all 0.25s;
|
||
|
|
outline: none;
|
||
|
|
border-radius: 5;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: '18px';
|
||
|
|
&:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
&:hover:enabled {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
Wrapper.displayName = 'Button'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @render react
|
||
|
|
* @name Button
|
||
|
|
* @example
|
||
|
|
* <Button><Basic button</Button>
|
||
|
|
*/
|
||
|
|
class Button extends React.PureComponent {
|
||
|
|
static displayName = 'Button'
|
||
|
|
static defaultProps = {
|
||
|
|
processing: false,
|
||
|
|
size: 'medium',
|
||
|
|
variant: 'normal'
|
||
|
|
}
|
||
|
|
static propTypes = {
|
||
|
|
processing: PropTypes.bool,
|
||
|
|
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
||
|
|
variant: PropTypes.string
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { children, processing, size, ...rest } = this.props
|
||
|
|
const sizes = {
|
||
|
|
small: {
|
||
|
|
x: 3,
|
||
|
|
y: 2,
|
||
|
|
fontSize: 's'
|
||
|
|
},
|
||
|
|
medium: {
|
||
|
|
x: 3,
|
||
|
|
y: 2,
|
||
|
|
fontSize: 'm'
|
||
|
|
},
|
||
|
|
large: {
|
||
|
|
x: 5,
|
||
|
|
y: 3,
|
||
|
|
fontSize: 'l'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<Wrapper
|
||
|
|
px={sizes[size]['x']}
|
||
|
|
py={sizes[size]['y']}
|
||
|
|
fontSize={sizes[size]['fontSize']}
|
||
|
|
{...rest}
|
||
|
|
>
|
||
|
|
{processing ? (
|
||
|
|
<Flex>
|
||
|
|
{processing && <Spinner size="2em" mr="0.5em" />}
|
||
|
|
<Text fontFamily="sans">{children}</Text>
|
||
|
|
</Flex>
|
||
|
|
) : (
|
||
|
|
<Text fontFamily="sans">{children}</Text>
|
||
|
|
)}
|
||
|
|
</Wrapper>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Button
|