Home Reference Source Repository

src/components/button/Button.js

  1. /**
  2. * @author haw
  3. * 按钮
  4. */
  5.  
  6. import React, {
  7. PropTypes
  8. } from 'react';
  9. import config from '../util/config';
  10. import {classNames} from '../util';
  11.  
  12. const prefix = 'button';
  13.  
  14. /**
  15. * 按钮
  16. * @param {Object} props 组件所使用的属性
  17. * @param {string} [props.component='a'] 按钮的 `html` 标签
  18. * @param {string} [props.size] 按钮的大小,默认为正常按钮,设置为 `lg` 是大按钮
  19. * @param {boolean} [props.fill=false] 是否填充背景色
  20. * @param {boolean} [props.disabled=false] 是否不可用
  21. * @param {boolean} [props.color] 按钮文案的颜色,默认为主题颜色
  22. */
  23. export default function Button(props) {
  24. const {
  25. component,
  26. size,
  27. fill,
  28. color,
  29. active,
  30. disabled,
  31. className,
  32. children,
  33. ...rest
  34. } = props;
  35. const Component = component;
  36. let clazz = classNames(prefix, {
  37. [`${prefix}-${size}`]: !!size,
  38. [`${prefix}-fill`]: fill,
  39. [`${prefix}-${color}`]: !!color,
  40. [`${prefix}-disabled`]: disabled,
  41. [className]: className,
  42. active: active ? 'active' : false
  43. });
  44.  
  45. return (
  46. <Component className={clazz} {...rest}>
  47. {children}
  48. </Component>
  49. );
  50. }
  51.  
  52. Button.propTypes = {
  53. component: PropTypes.oneOf(['a', 'button']),
  54. size: PropTypes.oneOf(['', 'lg']),
  55. fill: PropTypes.bool,
  56. disabled: PropTypes.bool,
  57. color: PropTypes.oneOf(config.colors),
  58. active: PropTypes.bool,
  59. className: PropTypes.string,
  60. children: PropTypes.node
  61. };
  62.  
  63. Button.defaultProps = {
  64. component: 'a',
  65. size: '',
  66. fill: false,
  67. disabled: false,
  68. color: '',
  69. active: false
  70. };