src/Button.js File

  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. }
  152.