import React , { Fragment } from 'react' ; import { EuiPanel , EuiSpacer } from '@elastic/eui' ; import { AggName } from '../../../../../../common/types/aggregations' ; import { PivotAggsConfig , PivotAggsConfigDict , PivotAggsConfigWithUiSupportDict , } from '../../../../common' ; import { AggLabelForm } from './agg_label_form' ; export interface AggListProps { list : PivotAggsConfigDict ; options : PivotAggsConfigWithUiSupportDict ; deleteHandler ( l ) : void ; onChange ( previousAggName , item ) : void ; } export const AggListForm = ( { deleteHandler , list , onChange , options } ) => { const listKeys = Object . keys ( list ) ; return ( < Fragment > { listKeys . map ( ( aggName , i ) => { const otherAggNames = listKeys . filter ( ( k ) => k !== aggName ) ; return ( < Fragment key = { aggName } > < EuiPanel paddingSize = "s" data - test - subj = { `transformAggregationEntry_${ i }` } > < AggLabelForm deleteHandler = { deleteHandler } item = { list [ aggName ] } onChange = { ( item ) => onChange ( aggName , item ) } otherAggNames = { otherAggNames } options = { options } / > < /EuiPanel> { listKeys . length > 0 && < EuiSpacer size = "s" / > } < /Fragment>); } ) } < /Fragment>); } ;