import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './Custom.scss'; 


class Button extends React.Component {
    constructor(props) {
        super(props);     
        this.btnOnClick=this.btnOnClick.bind(this);
    }
    static propTypes = {    
        onClick:PropTypes.func
    } 
    static defaultProps={ 
        bsSize:'nl',//sm|xs
        block:false,
        active:false,
        href:'javescript:;',
        linkable:false,
        disabled:false,
        isLoading:false,
        customColor:'success' 
    }  
    btnOnClick(){
        const {disabled,isLoading,onClick}=this.props;
        if(disabled||isLoading){
            return 
        }
        onClick();
    }
    render(){    
        const {linkable,href,customColor,bsSize,disabled,block,isLoading}=this.props;
        if(linkable){
            return <a className={cx(s[customColor+'_btn'],s[bsSize],
                    disabled?s.disabled:'', 
                    block?s.block:'')} href={href}>
                    {this.props.children}
                    {isLoading&&<i  style={{width:'20px'}} className={cx('kr_icon','kr_icon-spin')}>&#xe65a;</i>}
                </a>;
        }else{
            return <div className={cx(s[customColor+'_btn'],s[bsSize],
                    disabled||isLoading?s.disabled:'', 
                    block?s.block:'')} onClick={this.btnOnClick}>
                    {this.props.children}
                    {isLoading&&<i  style={{width:'20px'}} className={cx('kr_icon','kr_icon-spin')}>&#xe65a;</i>}
                </div>;
        } 
    }
}



export default Button;