import React , { useCallback } from 'react' ; import { EuiRadio , htmlIdGenerator } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { TimeseriesVisParams } from '../../types' ; interface YesNoProps { name : string ; value : boolean | number | undefined ; disabled ? : boolean ; 'data-test-subj' ? : string ; onChange : ( partialModel : Partial < TimeseriesVisParams > ) => void ; } export function YesNo ( { name , value , disabled , 'data-test-subj' : dataTestSubj , onChange , } ) { const handleChange = useCallback ( ( val ) => { return ( ) => onChange ( { [ name ] : val } ) ; } , [ onChange , name ] ) ; const htmlId = htmlIdGenerator ( ) ; const inputName = htmlId ( name ) ; return ( < div > < EuiRadio id = { htmlId ( 'yes' ) } data - test - subj = { `${ dataTestSubj }-yes` } label = { < FormattedMessage id = "visTypeTimeseries.yesButtonLabel" defaultMessage = "Yes" description = "The 'yes' in a yes/no answer choice." / > } className = "eui-displayInlineBlock" name = { inputName } checked = { Boolean ( value ) } value = "yes" onChange = { handleChange ( 1 ) } disabled = { disabled } / > & emsp ; < EuiRadio id = { htmlId ( 'no' ) } data - test - subj = { `${ dataTestSubj }-no` } label = { < FormattedMessage id = "visTypeTimeseries.noButtonLabel" defaultMessage = "No" description = "The 'no' in a yes/no answer choice." / > } className = "eui-displayInlineBlock" name = { inputName } checked = { ! Boolean ( value ) } value = "no" onChange = { handleChange ( 0 ) } disabled = { disabled } / > < /div>); }