1. import React,{PropTypes} from 'react';
  2. import Component from './utils/Component';
  3. import classnames from 'classnames';
  4. import Icon from './Icon';
  5.  
  6. /**
  7. * 按钮组件<br/>
  8. * - 按钮组件提供所有properties中内置的颜色及字体大小样式供选择。
  9. * - 也可以自定义行内样式和className名字定义UI展示。
  10. * - 通过phSize设置大小, 可选sm、md、lg。
  11. * - 通过phStyle选择按钮颜色,可选primary、info、error、warning、danger、link、gray、success。
  12. * - 支持disabled, active属性定义。
  13. *
  14. * 主要属性和接口:
  15. * - phSize:按钮大小, 默认sm <br/>
  16. * 如: `<Button phSize="lg">button</Button>`
  17. * - phStyle:按钮颜色, 默认primary <br/>
  18. * 如: `<Button phStyle="info">button</Button>`
  19. * - block:是否块级显示,默认false <br/>
  20. * 如: `<Button block>button</Button>`
  21. *
  22. * @class Button
  23. * @module 基础组件
  24. * @extends Component
  25. * @constructor
  26. * @since 0.1.0
  27. * @demo button|button.js {展示}
  28. * @show true
  29. * */
  30. export default class Button extends Component{
  31.  
  32. static propTypes = {
  33. /**
  34. * 按钮尺寸[sm、md、lg], 默认为sm
  35. * @property phSize
  36. * @type String
  37. * @default 'sm'
  38. * */
  39. phSize:PropTypes.string,
  40. /**
  41. * 按钮颜色[primary、warning、danger、info、error、success、link、gray], 默认primary
  42. * @property phStyle
  43. * @type Boolean
  44. * @default 'primary'
  45. * */
  46. phStyle:PropTypes.string,
  47. /**
  48. * 样式前缀
  49. * @property classPrefix
  50. * @type String
  51. * @default 'button'
  52. * */
  53. classPrefix:PropTypes.string,
  54. /**
  55. * 标签tagName
  56. * @property componentTag
  57. * @type String
  58. * */
  59. componentTag:PropTypes.string,
  60. /**
  61. * 块级显示
  62. * @property block
  63. * @type Boolean
  64. * @default false
  65. * */
  66. block:PropTypes.bool,
  67. /**
  68. * 圆角
  69. * @property radius
  70. * @type Boolean
  71. * @default false
  72. * */
  73. radius:PropTypes.bool,
  74. /**
  75. * 空背景
  76. * @property hollow
  77. * @type Boolean
  78. * @default false
  79. * */
  80. hollow:PropTypes.bool,
  81. /**
  82. * 不可点状态
  83. * @property disabled
  84. * @type Boolean
  85. * @default false
  86. * */
  87. disabled:PropTypes.bool,
  88. /**
  89. * 激活状态
  90. * @property active
  91. * @type Boolean
  92. * @default false
  93. * */
  94. active:PropTypes.bool
  95. };
  96.  
  97. static defaultProps = {
  98. phSize: 'sm',
  99. phStyle: 'primary',
  100. classPrefix:'button',
  101. componentTag:'button',
  102. classMapping : {
  103. 'block':'block',
  104. 'primary':'primary',
  105. 'info':'info',
  106. 'success':'success',
  107. 'error':'error',
  108. 'warning':'warning',
  109. 'danger':'danger',
  110. 'link':'link',
  111. 'gray':'gray'
  112. }
  113. };
  114.  
  115. constructor(props, context) {
  116. super(props, context);
  117. // this.setProperty('hollow','hollow');
  118. }
  119.  
  120. onButtonClickHandle(e){
  121. if(this.props.clickHandle) this.props.clickHandle(e);
  122. if(this.props.onClick) this.props.onClick(e);
  123. }
  124.  
  125. renderIcon(){
  126. let {phIcon} = this.props;
  127.  
  128. if(phIcon){
  129. return <Icon phIcon={phIcon} />;
  130. }else{
  131. return '';
  132. }
  133. }
  134.  
  135. render(){
  136. let {componentTag:Component} = this.props;
  137.  
  138. return (
  139. <Component {...this.otherProps} className={
  140. classnames(
  141. this.getProperty(true),
  142. this.props.className
  143. )}
  144. style={this.getStyles(this.props.style)} onClick={::this.onButtonClickHandle}>
  145. {this.renderIcon()}
  146. {this.props.children}
  147. </Component>
  148. );
  149. }
  150.  
  151. }