159 lines
3.6 KiB
JavaScript
159 lines
3.6 KiB
JavaScript
import { Fragment } from 'react'
|
|
import { NavLink } from 'react-router-dom'
|
|
import classNames from 'classnames/bind'
|
|
import Icon from './icon'
|
|
|
|
const cx = classNames.bind(_s)
|
|
|
|
const COLORS = {
|
|
primary: 'primary',
|
|
secondary: 'secondary',
|
|
tertiary: 'tertiary',
|
|
white: 'white',
|
|
brand: 'brand',
|
|
error: 'error',
|
|
none: 'none',
|
|
}
|
|
|
|
export default class Button extends PureComponent {
|
|
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
to: PropTypes.string,
|
|
href: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
className: PropTypes.string,
|
|
icon: PropTypes.string,
|
|
iconWidth: PropTypes.string,
|
|
iconHeight: PropTypes.string,
|
|
iconClassName: PropTypes.string,
|
|
color: PropTypes.string,
|
|
backgroundColor: PropTypes.string,
|
|
block: PropTypes.bool,
|
|
text: PropTypes.bool,
|
|
disabled: PropTypes.bool,
|
|
outline: PropTypes.bool,
|
|
narrow: PropTypes.bool,
|
|
underlineOnHover: PropTypes.bool,
|
|
radiusSmall: PropTypes.bool,
|
|
}
|
|
|
|
static defaultProps = {
|
|
color: COLORS.white,
|
|
backgroundColor: COLORS.brand,
|
|
}
|
|
|
|
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,
|
|
icon,
|
|
iconWidth,
|
|
iconHeight,
|
|
iconClassName,
|
|
children,
|
|
href,
|
|
outline,
|
|
color,
|
|
backgroundColor,
|
|
underlineOnHover,
|
|
narrow,
|
|
radiusSmall,
|
|
...otherProps
|
|
} = this.props
|
|
|
|
const theIcon = !!icon ? <Icon id={icon} width={iconWidth} height={iconWidth} className={iconClassName} /> : undefined
|
|
|
|
if (backgroundColor === 'tertiary') {
|
|
console.log("className:", className)
|
|
}
|
|
|
|
// : todo :
|
|
const classes = cx(className, {
|
|
default: 1,
|
|
noUnderline: 1,
|
|
font: 1,
|
|
cursorPointer: 1,
|
|
textAlignCenter: 1,
|
|
|
|
backgroundColorPrimary: backgroundColor === COLORS.white,
|
|
backgroundColorBrand: backgroundColor === COLORS.brand,
|
|
backgroundTransparent: backgroundColor === COLORS.none,
|
|
backgroundSubtle2: backgroundColor === COLORS.tertiary,
|
|
backgroundSubtle: backgroundColor === COLORS.secondary,
|
|
|
|
colorPrimary: color === COLORS.primary,
|
|
colorSecondary: color === COLORS.secondary,
|
|
colorWhite: color === COLORS.white,
|
|
colorBrand: color === COLORS.brand,
|
|
|
|
borderColorBrand: color === COLORS.brand && outline,
|
|
border1PX: outline,
|
|
|
|
circle: !text,
|
|
radiusSmall: radiusSmall,
|
|
|
|
paddingVertical5PX: narrow,
|
|
paddingVertical10PX: !text && !narrow,
|
|
paddingHorizontal15PX: !text,
|
|
|
|
width100PC: block,
|
|
|
|
underline_onHover: underlineOnHover,
|
|
|
|
backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary,
|
|
|
|
backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
|
|
|
|
backgroundColorBrand_onHover: color === COLORS.brand && outline,
|
|
colorWhite_onHover: color === COLORS.brand && outline,
|
|
})
|
|
|
|
const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'
|
|
|
|
const theChildren = !!icon ? (
|
|
<Fragment>
|
|
{theIcon}
|
|
{children}
|
|
</Fragment>
|
|
) : children
|
|
|
|
const options = {
|
|
disabled,
|
|
className: classes,
|
|
ref: this.setRef,
|
|
to: to || undefined,
|
|
href: href || undefined,
|
|
onClick: this.handleClick || undefined,
|
|
}
|
|
|
|
if (tagName === 'NavLink' && !!to) {
|
|
return (
|
|
<NavLink {...options}>
|
|
{theChildren}
|
|
</NavLink>
|
|
)
|
|
}
|
|
|
|
return React.createElement(tagName, options, theChildren)
|
|
}
|
|
|
|
}
|