kara-rc-web/src/components/button/button.js

kara项目react组件库

import React from 'react'
import { string, node, oneOf, bool, func } from 'prop-types'
import classnames from 'classnames'

class Button extends React.Component {
  static propTypes = {
    prefixCls: string,
    className: string,
    children: node.isRequired,
    type: oneOf(['orange', 'green', 'red', 'blue', 'aqua', 'grey', 'white', 'link']), // 按钮颜色样式
    size: oneOf(['sm', 'default', 'md', 'lg']), // 按钮大小
    disabled: bool, // 按钮是否不可用
    onClick: func, // onClick事件回调函数
  }

  static defaultProps = {
    type: 'orange',
    prefixCls: 'kara-btn',
    className: '',
    size: 'default',
    onClick: () => {},
    disabled: false,
  }

  render() {
    const {
      prefixCls,
      type,
      className,
      size,
      children,
      onClick,
      disabled,
    } = this.props
    const classNames = classnames(prefixCls, {
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-${size}`]: size,
    }, className)

    return (<button className={classNames} onClick={onClick} disabled={disabled} >
      {children}
    </button>)
  }
}

export default Button