import { EuiComboBox , EuiComboBoxProps , EuiFormRow } from '@elastic/eui' ; import React , { FC , useMemo } from 'react' ; import { ALL_TRANSFORMS_SELECTION } from '../../../common/constants' ; import { isDefined } from '../../../common/types/common' ; export interface TransformSelectorControlProps { label ? : string | JSX . Element ; errors ? : string [ ] ; onChange : ( transformSelection : string [ ] ) => void ; selectedOptions : string [ ] ; options : string [ ] ; allowSelectAll ? : boolean ; } function convertToEuiOptions ( values ) { return values . map ( ( v ) => ( { value : v , label : v } ) ) ; } export const TransformSelectorControl = ( { label , errors , onChange , selectedOptions , options , allowSelectAll = false , } ) => { const onSelectionChange = ( ( selectionUpdate ) => { if ( ! selectionUpdate ?. length ) { onChange ( [ ] ) ; return ; } if ( selectionUpdate [ selectionUpdate . length - 1 ] . value === ALL_TRANSFORMS_SELECTION ) { onChange ( [ ALL_TRANSFORMS_SELECTION ] ) ; return ; } onChange ( selectionUpdate . slice ( selectionUpdate [ 0 ] . value === ALL_TRANSFORMS_SELECTION ? 1 : 0 ) . map ( ( v ) => v . value ) . filter ( isDefined ) ) ; } ) as Exclude < EuiComboBoxProps < string > [ 'onChange' ] , undefined > ; const selectedOptionsEui = useMemo ( ( ) => convertToEuiOptions ( selectedOptions ) , [ selectedOptions ] ) ; const optionsEui = useMemo ( ( ) => { return convertToEuiOptions ( allowSelectAll ? [ ALL_TRANSFORMS_SELECTION , ... options ] : options ) ; } , [ options , allowSelectAll ] ) ; return ( < EuiFormRow fullWidth label = { label } isInvalid = { ! ! errors ?. length } error = { errors } > < EuiComboBox < string > singleSelection = { false } selectedOptions = { selectedOptionsEui } options = { optionsEui } onChange = { onSelectionChange } fullWidth data - test - subj = { 'transformSelection' } isInvalid = { ! ! errors ?. length } /> < /EuiFormRow>); } ;