import React from 'react' ; import classnames from 'classnames' ; import { withRipple , InjectedProps , RippledComponentProps , } from '@material/react-ripple' ; import { CSS_CLASSES } from './constant' ; type ButtonTypes = HTMLAnchorElement | HTMLButtonElement ; export interface ButtonProps < T extends ButtonTypes > extends InjectedProps < T > , React . AnchorHTMLAttributes < T > , React . ButtonHTMLAttributes < T > { raised ? : boolean ; unelevated ? : boolean ; outlined ? : boolean ; dense ? : boolean ; disabled ? : boolean ; className ? : string ; icon ? : React . ReactElement < React . HTMLProps < HTMLOrSVGElement > > ; href ? : string ; trailingIcon ? : React . ReactElement < React . HTMLProps < HTMLOrSVGElement > > ; } export const Button = < T extends ButtonTypes > ( { className = '' , raised = false , unelevated = false , outlined = false , dense = false , disabled = false , icon , href , children , initRipple , trailingIcon , unbounded = false , ... otherProps } ) => { const props = { className : classnames ( CSS_CLASSES . ROOT , className , { [ CSS_CLASSES . RAISED ] : raised , [ CSS_CLASSES . UNELEVATED ] : unelevated , [ CSS_CLASSES . OUTLINED ] : outlined , [ CSS_CLASSES . DENSE ] : dense , } ) , ref : initRipple , disabled , ... otherProps , } ; if ( href ) { return ( < a { ... ( props as React . HTMLProps < HTMLAnchorElement > ) } href = { href } > { ! trailingIcon ? renderIcon ( icon ) : null } < span className = { CSS_CLASSES . LABEL } > { children } < /span> { trailingIcon ? renderIcon ( trailingIcon ) : null } < /a>); } return ( < button { ... ( props as React . HTMLProps < HTMLButtonElement > ) } > { ! trailingIcon ? renderIcon ( icon ) : null } < span className = { CSS_CLASSES . LABEL } > { children } < /span> { trailingIcon ? renderIcon ( trailingIcon ) : null } < /button>); } ; const renderIcon = ( icon ? ) => icon ? React . cloneElement ( icon , { className : classnames ( CSS_CLASSES . ICON , icon . props . className ) , } ) : null ; Button . defaultProps = { initRipple : ( ) => { } , } ; export default withRipple < ButtonProps < ButtonTypes > , ButtonTypes > ( Button ) ;