|
import React from 'react' |
|
import PropTypes from 'prop-types' |
|
import classnames from 'classnames' |
|
|
|
import styles from './button.module.css' |
|
const cx = classnames.bind(styles) |
|
|
|
const defaultProps = { |
|
as: 'default', |
|
shape: 'rect', |
|
size: 'md', |
|
action: () => {} |
|
} |
|
|
|
const propTypes = { |
|
as: PropTypes.oneOf(['default', 'default-outline', 'primary', 'primary-outline']), |
|
type: PropTypes.oneOf([undefined, 'button', 'submit', 'reset']), |
|
size: PropTypes.oneOf(['sm', 'md', 'lg']), |
|
shape: PropTypes.oneOf(['rect', 'circle']), |
|
block: PropTypes.bool, |
|
disabled: PropTypes.bool, |
|
loading: PropTypes.bool, |
|
action: PropTypes.func, |
|
children: PropTypes.node, |
|
icon: PropTypes.func, |
|
focused: PropTypes.bool, |
|
className: PropTypes.oneOfType([ |
|
PropTypes.string, |
|
PropTypes.array, |
|
PropTypes.object |
|
]) |
|
} |
|
|
|
const Button = (props) => { |
|
const { |
|
as, |
|
type, |
|
shape, |
|
size, |
|
icon, |
|
block, |
|
disabled, |
|
loading, |
|
focused, |
|
action, |
|
children |
|
} = props |
|
|
|
const className = cx(styles.button, { |
|
[styles[`button--${as}`]]: as, |
|
[styles[`button--${shape}`]]: shape, |
|
[styles[`button--${size}`]]: size, |
|
[styles['button--iconed']]: icon, |
|
[styles['button--block']]: block, |
|
[styles['button--disabled']]: disabled, |
|
[styles['button--focused']]: focused, |
|
[styles['button--loading']]: loading |
|
}, props.className) |
|
|
|
const interactive = !disabled && !loading |
|
const clickHandler = (event) => { |
|
interactive && action(event) |
|
} |
|
|
|
return ( |
|
<button |
|
{...(type && { type })} |
|
{...(!interactive && { disabled: true })} |
|
className={className} |
|
onClick={clickHandler} |
|
> |
|
{ icon && icon() } |
|
{children} |
|
</button> |
|
) |
|
} |
|
|
|
Button.propTypes = propTypes |
|
Button.defaultProps = defaultProps |
|
|
|
export default Button |
