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
};