text: import classnames from 'classnames'
  import React from 'react'
  import PropTypes from 'prop-types'
  import Ico from '../Ico'
  
  const iconSize = {
    xs: 'sm',
    sm: 'sm',
    md: 'sm',
    lg: 'md',
  }
  
  const Button = React.forwardRef((props, ref) => {
    const {
      size,
      shape,
      className,
      onClick,
      href,
      close,
      block,
      children,
      loading,
      icon,
      iconPosition,
      ...others
    } = props
    // 为了兼容旧版属性，手动删除 outline
    delete others.outline
    delete others.eventKey
  
    // 为了兼容旧版theme=default
    let { theme } = props
    if (theme === 'default') {
      theme = 'secondary'
    }
  
    // 判断按钮是否为纯图标按钮：无children 或者 shape 为 circle
    const isIconBtn = !children || shape === 'circle'
  
    const btnSize = isIconBtn ? `btn-icon-${size}` : `btn-${size}`
    // 纯图标按钮不需要设置外边距，在文本按钮和普通按钮中，图标右侧外边距有差异
    let iconMargin
    if (!isIconBtn) {
      // icon的margin的类型
      let marginType =
        iconPosition && iconPosition === 'right' ? 'marginLeft' : 'marginRight'
      // icon的margin的数值
      let marginDistance = theme === 'text' ? '8px' : '4px'
      iconMargin = { [marginType]: marginDistance }
    } else {
      iconMargin = {}
    }
    if (href) {
      // 支持 href 属性 该功能将废弃（为了兼容2.0升级3.0）
      return (
        <a
          href={href}
          className={classnames(
            {
              [`btn btn-${theme}`]: !close,
              [`btn-${shape}`]: shape && icon,
              close: close,
              'btn-block': block,
            },
            btnSize,
            className
          )}
        >
          {children}
        </a>
      )
    }
  
    return (
      <button
        {...others}
        onClick={onClick}
        className={classnames(
          {
            [`btn btn-${theme}`]: !close,
            [`btn-${shape}`]: shape && icon,
            close: close,
            'btn-block': block,
          },
          btnSize,
          className
        )}
        ref={ref}
      >
        {loading ? (
          <span className='btn-loading-circle'>
            <span className='btn-loading-addon' style={iconMargin} />
            {children && <span className='btn-loading-message'>加载中...</span>}
          </span>
        ) : (
          <>
            {shape !== 'circle' &&
              (iconPosition && iconPosition === 'right') &&
              (children && <span>{children}</span>)}
            {typeof icon === 'string' ? (
              <Ico
                type={icon}
                size={iconSize[size]}
                style={iconMargin}
                className='btn-icon'
              />
            ) : (
              icon &&
              React.cloneElement(icon, {
                className: 'btn-icon',
                style: { ...iconMargin, ...icon.props.style },
              })
            )}
            {/* 如果是圆形按钮，则不支持 children 属性 */}
            {shape !== 'circle' &&
              (!iconPosition || iconPosition !== 'right') &&
              (children && <span>{children}</span>)}
          </>
        )}
      </button>
    )
  })
  
  Button.propTypes = {
    /**
     * 子组件
     */
    children: PropTypes.node,
  
    /**
     * 自定义样式
     */
    className: PropTypes.string,
  
    /**
     * 按钮类型，同HTML button元素的 type
     */
    type: PropTypes.string,
  
    /**
     * 主题样式 <br /> One of: primary, secondary, dashed, text
     */
    theme: PropTypes.string,
  
    /**
     * click事件
     */
    onClick: PropTypes.func,
  
    /**
     * 尺寸
     */
    size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
  
    /**
     * 形状
     */
    shape: PropTypes.oneOf(['circle']),
  
    /**
     * 是否block元素
     */
    block: PropTypes.bool,
  
    /**
     * 按钮加载中的状态
     */
    loading: PropTypes.bool,
  
    /**
     * 按钮的图标
     */
    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  
    /**
     * 按钮的位置
     */
    iconPosition: PropTypes.oneOf(['left', 'right']),
  
    /**
     * 按钮的位置 v2.1.2废弃
     * @ignore
     */
    outline: PropTypes.bool,
  }
  Button.defaultProps = {
    theme: 'primary',
    block: false,
    size: 'md',
    type: 'button',
  }
  Button.displayName = 'Button'
  
  export default Button
  