import React from 'react' ; import classnames from 'classnames' ; import { withRipple , InjectedProps , RippledComponentProps , } from '@material/react-ripple' ; import { CSS_CLASSES } from './constant' ; export interface FabProps extends InjectedProps < HTMLButtonElement > , React . ButtonHTMLAttributes < HTMLButtonElement > { exited ? : boolean ; mini ? : boolean ; icon ? : React . ReactElement < HTMLElement > ; textLabel ? : string ; className ? : string ; initRipple ? : React . Ref < HTMLButtonElement > ; unbounded ? : boolean ; } const Icon = ( { icon } ) => { if ( ! icon ) { return null ; } const updatedProps = { className : classnames ( CSS_CLASSES . ICON , icon . props . className ) , } ; return React . cloneElement ( icon , updatedProps ) ; } ; const TextLabel = ( { textLabel , } ) => { if ( textLabel . length === 0 ) { return null ; } return < span className = { CSS_CLASSES . LABEL } > { textLabel } < /span>; } ; export const Fab = ( { exited = false , mini = false , icon , textLabel = '' , className = '' , initRipple = ( ) => { } , unbounded , ... otherProps } ) => { const extended = textLabel . length > 0 ; const classes = classnames ( CSS_CLASSES . ROOT , className , { [ CSS_CLASSES . MINI ] : mini , [ CSS_CLASSES . EXTENDED ] : extended , [ CSS_CLASSES . EXITED ] : exited , } ) ; return ( < button className = { classes } ref = { initRipple } { ... otherProps } > < Icon icon = { icon } /> < TextLabel textLabel = { textLabel } / > < /button>); } ; export default withRipple < FabProps , HTMLButtonElement > ( Fab ) ;