import React , { ChangeEvent } from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiFormRow , EuiFieldNumber , EuiIconTip } from '@elastic/eui' ; export interface TruncateLabelsOptionProps { disabled ? : boolean ; value ? : number | null ; setValue : ( paramName : 'truncate' , value : null | number ) => void ; } function TruncateLabelsOption ( { disabled , value = null , setValue } ) { const onChange = ( ev ) => setValue ( 'truncate' , ev . target . value === '' ? null : parseFloat ( ev . target . value ) ) ; return ( < EuiFormRow label = { i18n . translate ( 'visTypePie.controls.truncateLabel' , { defaultMessage : 'Truncate' , } ) } fullWidth display = "rowCompressed" labelAppend = { < EuiIconTip content = { i18n . translate ( 'visTypePie.controls.truncateTooltip' , { defaultMessage : 'Number of characters for labels positioned outside the chart.' , } ) } position = "top" type = "iInCircle" color = "subdued" / > } > < EuiFieldNumber data - test - subj = "pieLabelTruncateInput" disabled = { disabled } value = { value || '' } onChange = { onChange } fullWidth compressed / > < /EuiFormRow>); } export { TruncateLabelsOption } ;