kara-react-components-mobileweb/src/components/button/index.js

kara项目移动端react组件库

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

class Button extends Component {
  // 缺少 按钮组 (icon 参数之类的)
  static propTypes = {
    prefixCls: string,
    className: string,
    children: node.isRequired,
    // 按钮颜色样式
    type: oneOf(['info', 'success', 'danger']),
    // 按钮大小
    size: oneOf(['sm', 'default', 'lg', 'full-width']),
    // 是否幽灵按钮
    ghost: bool,
    // 按钮是否不可用
    disabled: bool,
    // onClick事件回调函数
    onClick: func,
    style: shape(),
    dbHeight: bool, // 高度设置
  }

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

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

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

export default Button