# src/Button.js File

    import React,{PropTypes} from 'react';
    import Component from './utils/Component';
    import classnames from 'classnames';
    import Icon from './Icon';

    /**
     * 按钮组件<br/>
     * - 按钮组件提供所有properties中内置的颜色及字体大小样式供选择。
     * - 也可以自定义行内样式和className名字定义UI展示。
     * - 通过phSize设置大小, 可选sm、md、lg。
     * - 通过phStyle选择按钮颜色，可选primary、info、error、warning、danger、link、gray、success。
     * - 支持disabled, active属性定义。
     *
     * 主要属性和接口：
     * - phSize:按钮大小, 默认sm <br/>
     * 如: `<Button phSize="lg">button</Button>`
     * - phStyle:按钮颜色, 默认primary <br/>
     * 如: `<Button phStyle="info">button</Button>`
     * - block:是否块级显示，默认false <br/>
     * 如: `<Button block>button</Button>`
     *
     * @class Button
     * @module 基础组件
     * @extends Component
     * @constructor
     * @since 0.1.0
     * @demo button|button.js {展示}
     * @show true
     * */
    export default class Button extends Component{

        static propTypes = {
            /**
             * 按钮尺寸[sm、md、lg], 默认为sm
             * @property phSize
             * @type String
             * @default 'sm'
             * */
            phSize:PropTypes.string,
            /**
             * 按钮颜色[primary、warning、danger、info、error、success、link、gray], 默认primary
             * @property phStyle
             * @type Boolean
             * @default 'primary'
             * */
            phStyle:PropTypes.string,
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'button'
             * */
            classPrefix:PropTypes.string,
            /**
             * 标签tagName
             * @property componentTag
             * @type String
             * */
            componentTag:PropTypes.string,
            /**
             * 块级显示
             * @property block
             * @type Boolean
             * @default false
             * */
            block:PropTypes.bool,
            /**
             * 圆角
             * @property radius
             * @type Boolean
             * @default false
             * */
            radius:PropTypes.bool,
            /**
             * 空背景
             * @property hollow
             * @type Boolean
             * @default false
             * */
            hollow:PropTypes.bool,
            /**
             * 不可点状态
             * @property disabled
             * @type Boolean
             * @default false
             * */
            disabled:PropTypes.bool,
            /**
             * 激活状态
             * @property active
             * @type Boolean
             * @default false
             * */
            active:PropTypes.bool
        };

        static defaultProps = {
            phSize: 'sm',
            phStyle: 'primary',
            classPrefix:'button',
            componentTag:'button',
            classMapping : {
                'block':'block',
                'primary':'primary',
                'info':'info',
                'success':'success',
                'error':'error',
                'warning':'warning',
                'danger':'danger',
                'link':'link',
                'gray':'gray'
            }
        };

        constructor(props, context) {
            super(props, context);
            // this.setProperty('hollow','hollow');
        }

        onButtonClickHandle(e){
            if(this.props.clickHandle) this.props.clickHandle(e);
            if(this.props.onClick) this.props.onClick(e);
        }

        renderIcon(){
            let {phIcon} = this.props;

            if(phIcon){
                return <Icon phIcon={phIcon} />;
            }else{
                return '';
            }
        }

        render(){
            let {componentTag:Component} = this.props;

            return (
                <Component {...this.otherProps} className={
                    classnames(
                        this.getProperty(true),
                        this.props.className
                    )}
                    style={this.getStyles(this.props.style)} onClick={::this.onButtonClickHandle}>
                    {this.renderIcon()}
                    {this.props.children}
                </Component>
            );
        }

    }