import React , { useState } from 'react' ; import { EuiFilterButton , EuiPopover } from '@elastic/eui' ; import { SeriesConfig , SeriesUrl } from '../../types' ; import { useFilterValues } from '../use_filter_values' ; import { FilterValuesList } from '../components/filter_values_list' ; export interface FilterProps { seriesId : number ; series : SeriesUrl ; label : string ; field : string ; isNegated ? : boolean ; nestedField ? : string ; baseFilters : SeriesConfig [ 'baseFilters' ] ; } export interface NestedFilterOpen { value : string ; negate : boolean ; } export function FilterExpanded ( props ) { const [ isOpen , setIsOpen ] = useState ( false ) ; const [ query , setQuery ] = useState ( '' ) ; const { values , loading } = useFilterValues ( props , query ) ; return ( < EuiPopover button = { < EuiFilterButton onClick = { ( ) => setIsOpen ( ( prevState ) => ! prevState ) } iconType = "arrowDown" > { props . label } < /EuiFilterButton>} isOpen={isOpen} closePopover={() => setIsOpen(false)}> < FilterValuesList { ... props } setQuery = { setQuery } query = { query } values = { values } loading = { loading } / > < /EuiPopover>); }