80 lines
1.6 KiB
JavaScript
80 lines
1.6 KiB
JavaScript
import { NavLink } from 'react-router-dom'
|
|
import classNames from 'classnames/bind'
|
|
|
|
export default class Button extends PureComponent {
|
|
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
text: PropTypes.node,
|
|
to: PropTypes.string,
|
|
href: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
disabled: PropTypes.bool,
|
|
block: PropTypes.bool,
|
|
secondary: PropTypes.bool,
|
|
className: PropTypes.string,
|
|
}
|
|
|
|
|
|
handleClick = (e) => {
|
|
if (!this.props.disabled && this.props.onClick) {
|
|
this.props.onClick(e)
|
|
}
|
|
}
|
|
|
|
setRef = (c) => {
|
|
this.node = c
|
|
}
|
|
|
|
focus() {
|
|
this.node.focus()
|
|
}
|
|
|
|
render () {
|
|
const { block, className, disabled, text, to, children, href } = this.props
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
const classes = cx(className, {
|
|
default: 1,
|
|
noUnderline: 1,
|
|
font: 1,
|
|
colorWhite: 1,
|
|
circle: 1,
|
|
cursorPointer: 1,
|
|
textAlignCenter: 1,
|
|
paddingVertical10PX: 1,
|
|
paddingHorizontal15PX: 1,
|
|
width100PC: block,
|
|
backgroundColorBrand: 1,
|
|
backgroundColorBrandDark_onHover: 1,
|
|
})
|
|
|
|
if (href) {
|
|
return (
|
|
<a className={classes} href={href}>
|
|
{text || children}
|
|
</a>
|
|
)
|
|
} else if (to) {
|
|
return (
|
|
<NavLink className={classes} to={to}>
|
|
{text || children}
|
|
</NavLink>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
ref={this.setRef}
|
|
disabled={disabled}
|
|
onClick={this.handleClick}
|
|
className={classes}
|
|
>
|
|
{text || children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
}
|