|
// @flow |
|
import React, { type Node } from 'react'; |
|
import classnames from 'classnames'; |
|
import styles from './button.css'; |
|
|
|
type Design = 'primary' | 'ghost' | 'invisible' | 'danger'; |
|
type Size = 's' | 'm' | 'l'; |
|
|
|
type Element = {| |
|
// HTMLButtonElement props |
|
autoFocus?: boolean, |
|
tabIndex?: string | number, |
|
value?: string, |
|
type?: 'button' | 'submit' | 'reset' | 'menu', |
|
|
|
// HTMLAnchorElement props |
|
href?: string, |
|
download?: string, |
|
rel?: string, |
|
target?: '_self' | '_blank' | '_parent' | '_top', |
|
referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'unsafe-url' |
|
|}; |
|
|
|
type Props = { |
|
children: Node, |
|
className?: string, |
|
onClick?: Function, |
|
size: Size, |
|
design: Design, |
|
loading?: boolean, |
|
active?: boolean, |
|
...Element |
|
}; |
|
|
|
type Attrs = { |
|
onClick: Function | void, |
|
className: string, |
|
...Element |
|
}; |
|
|
|
export default function Button(props: Props): Node { |
|
const { children, className, onClick, size, design, loading, active, ...attrs } = props; |
|
|
|
const p: Attrs = { |
|
...attrs, |
|
onClick: onClick && !attrs.disabled ? onClick : undefined, |
|
className: classnames(className, styles.root, { |
|
[styles['is-size-' + size]]: size, |
|
[styles['is-design-' + design]]: design, |
|
[styles['is-loading']]: loading, |
|
[styles['is-active']]: active |
|
}) |
|
}; |
|
|
|
return React.createElement(attrs.href ? 'a' : 'button', p, children); |
|
} |
|
|
|
Button.defaultProps = { |
|
design: 'primary', |
|
size: 'm' |
|
}; |
