import { HTMLProps } from 'react' ; import { c } from 'ttag' ; import { classnames } from '../../helpers' ; export interface Props extends Omit < HTMLProps < HTMLButtonElement > , 'onChange' | 'type' > { onChange ? : ( index : number ) => void ; index ? : number ; active ? : boolean ; } const StepDot = ( { index , className , onChange , active , role = 'presentation' , ... rest } ) => { function handleClick ( ) { if ( index !== undefined ) { onChange ?. ( index ) ; } } return ( < li className = "step-dots-item" role = { role } > < button type = "button" role = "tab" aria - selected = { active } className = { classnames ( [ className , 'step-dots-dot' , 'rounded50' , ! onChange && 'no-pointer-events' ] ) } title = { onChange ? c ( 'Action' ) . t `Go to panel ${ index }` : undefined } onClick = { handleClick } { ... rest } > < span className = "sr-only" > { c ( 'Action' ) . t `Go to panel ${ index }` } < /span> < /button> < /li>); } ; export default StepDot ;