import * as React from 'react' ; import ClassNames from 'classnames' ; import Icon from '../icon' ; import { ButtonProps } from './interface' ; import './style/index.scss' ; const defaultProps = { disabled : false , loading : false , size : 'normal' , prefixCls : 'cp-ui-btn' , type : 'primary' } ; const getClassName = ( { className , loading , disabled , type , size , prefixCls } ) => { const classStr = ClassNames ( prefixCls , className , { [ `${ prefixCls }-warning` ] : type === 'warning' , [ `${ prefixCls }-primary` ] : type === 'primary' , [ `${ prefixCls }-ghost` ] : type === 'ghost' , [ `${ prefixCls }-large` ] : size === 'large' , [ `${ prefixCls }-normal` ] : size === 'normal' , [ `${ prefixCls }-small` ] : size === 'small' , [ `${ prefixCls }-loading` ] : loading , [ `${ prefixCls }-disabled` ] : disabled } ) ; return classStr ; } ; const renderLoading = ( { loading } ) => { if ( loading ) { return < Icon type = "circle-o-notch" spin / > ; } return null ; } ; const renderIcon = ( { icon } ) => { if ( icon ) { return < React . Fragment > { icon } < /React.Fragment>; } return null ; } ; const Button = props => { const { style , onClick , disabled , prefixCls , children } = props ; return ( < div className = { `${ prefixCls }-button_btn` } > < a role = "button" onClick = { disabled ? undefined : onClick } className = { getClassName ( props ) } style = { style } > { renderLoading ( props ) } { renderIcon ( props ) } < span > { children } < /span> < /a> < /div>); } ; Button . defaultProps = defaultProps ; export default Button ;