import { EuiBadge , useInnerText } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import React , { FC } from 'react' ; import { FilterLabel } from '../' ; import { Filter , isFilterPinned } from '../../../../common' ; import type { FilterLabelStatus } from '../filter_item' ; interface Props { filter : Filter ; valueLabel : string ; filterLabelStatus : FilterLabelStatus ; errorMessage ? : string ; [ propName ] : any ; } export const FilterView = ( { filter , iconOnClick , onClick , valueLabel , errorMessage , filterLabelStatus , ... rest } ) => { const [ ref , innerText ] = useInnerText ( ) ; let title = errorMessage || i18n . translate ( 'data.filter.filterBar.moreFilterActionsMessage' , { defaultMessage : 'Filter: {innerText}. Select for more filter actions.' , values : { innerText } , } ) ; if ( isFilterPinned ( filter ) ) { title = `${ i18n . translate ( 'data.filter.filterBar.pinnedFilterPrefix' , { defaultMessage : 'Pinned' , } ) } ${ title }` ; } if ( filter . meta . disabled ) { title = `${ i18n . translate ( 'data.filter.filterBar.disabledFilterPrefix' , { defaultMessage : 'Disabled' , } ) } ${ title }` ; } return ( < EuiBadge title = { title } color = "hollow" iconType = "cross" iconSide = "right" closeButtonProps = { { tabIndex : - 1 , } } iconOnClick = { iconOnClick } iconOnClickAriaLabel = { i18n . translate ( 'data.filter.filterBar.filterItemBadgeIconAriaLabel' , { defaultMessage : 'Delete' , } ) } onClick = { onClick } onClickAriaLabel = { i18n . translate ( 'data.filter.filterBar.filterItemBadgeAriaLabel' , { defaultMessage : 'Filter actions' , } ) } { ... rest } > < span ref = { ref } > < FilterLabel filter = { filter } valueLabel = { valueLabel } filterLabelStatus = { filterLabelStatus } / > < /span> < /EuiBadge>); } ;