src/components/button/Button.js

/**
 * @author haw
 * 按钮
 */

import React, {
  PropTypes
} from 'react';
import config from '../util/config';
import {classNames} from '../util';

const prefix = 'button';

/**
 * 按钮
 * @param {Object} props 组件所使用的属性
 * @param {string} [props.component='a'] 按钮的 `html` 标签
 * @param {string} [props.size] 按钮的大小，默认为正常按钮，设置为 `lg` 是大按钮
 * @param {boolean} [props.fill=false] 是否填充背景色
 * @param {boolean} [props.disabled=false] 是否不可用
 * @param {boolean} [props.color] 按钮文案的颜色，默认为主题颜色
 */
export default function Button(props) {
  const {
    component,
    size,
    fill,
    color,
    active,
    disabled,
    className,
    children,
    ...rest
  } = props;
  const Component = component;
  let clazz = classNames(prefix, {
    [`${prefix}-${size}`]: !!size,
    [`${prefix}-fill`]: fill,
    [`${prefix}-${color}`]: !!color,
    [`${prefix}-disabled`]: disabled,
    [className]: className,
    active: active ? 'active' : false
  });

  return (
    <Component className={clazz} {...rest}>
      {children}
    </Component>
  );
}

Button.propTypes = {
  component: PropTypes.oneOf(['a', 'button']),
  size: PropTypes.oneOf(['', 'lg']),
  fill: PropTypes.bool,
  disabled: PropTypes.bool,
  color: PropTypes.oneOf(config.colors),
  active: PropTypes.bool,
  className: PropTypes.string,
  children: PropTypes.node
};

Button.defaultProps = {
  component: 'a',
  size: '',
  fill: false,
  disabled: false,
  color: '',
  active: false
};