import React , { FunctionComponent } from 'react' ; import classNames from 'classnames' ; import { CallButtonsProps , HangUpButton , HangUpButtonProps , HoldCallButton , HoldCallButtonProps , MuteCallButton , MuteCallButtonProps , TransferCallButton , TransferCallButtonProps , } from './components' ; import styles from './styles.scss' ; export type SmallCallControlProps = CallButtonsProps & HangUpButtonProps & HoldCallButtonProps & MuteCallButtonProps & TransferCallButtonProps & { classes ? : { root ? : string ; } ; } ; export const SmallCallControl = ( { classes , children , ... rest } ) => { return ( < div className = { classNames ( styles . root , classes ?. root ) } data - sign = "smallCallControl" > { children || ( < > < MuteCallButton { ... rest } / > < TransferCallButton { ... rest } / > < HoldCallButton { ... rest } / > < HangUpButton { ... rest } / > < />)} < /div>); } ;