import React from 'react' ; import { last } from 'lodash' ; import { EuiFlexGroup , EuiFlexItem } from '@elastic/eui' ; import { TSVB_DEFAULT_COLOR } from '../../../../../common/constants' ; import { MultiValueRow } from './multi_value_row' ; interface PercentileRankValuesProps { values : string [ ] ; colors : string [ ] ; disableDelete : boolean ; disableAdd : boolean ; showOnlyLastRow : boolean ; enableColorPicker : boolean ; onChange : ( values : string [ ] , colors : string [ ] ) => void ; } export const PercentileRankValues = ( props ) => { const values = props . values || [ ] ; const colors = props . colors || [ ] ; const { onChange , disableAdd , disableDelete , showOnlyLastRow , enableColorPicker } = props ; const onChangeValue = ( { value , id , color } ) => { values [ id ] = value ; colors [ id ] = color ; onChange ( values , colors ) ; } ; const onDeleteValue = ( { id } ) => onChange ( values . filter ( ( item , currentIndex ) => id !== currentIndex ) , colors . filter ( ( item , currentIndex ) => id !== currentIndex ) ) ; const onAddValue = ( ) => onChange ( [ ... values , '' ] , [ ... colors , TSVB_DEFAULT_COLOR ] ) ; const renderRow = ( { rowModel , disableDeleteRow , disableAddRow , } ) => ( < EuiFlexItem key = { `percentileRankValue__item${ rowModel . id }` } > < MultiValueRow onAdd = { onAddValue } onChange = { onChangeValue } onDelete = { onDeleteValue } disableDelete = { disableDeleteRow } disableAdd = { disableAddRow } model = { rowModel } enableColorPicker = { enableColorPicker } / > < /EuiFlexItem>); return ( < EuiFlexGroup direction = "column" gutterSize = "s" > { showOnlyLastRow && renderRow ( { rowModel : { id : values . length - 1 , value : last ( values ) || '' , color : last ( colors ) || TSVB_DEFAULT_COLOR , } , disableAddRow : true , disableDeleteRow : true , } ) } { ! showOnlyLastRow && values . map ( ( value , id , array ) => renderRow ( { rowModel : { id , value : value || '' , color : colors [ id ] || TSVB_DEFAULT_COLOR , } , disableAddRow : disableAdd , disableDeleteRow : disableDelete || array . length < 2 , } ) ) } < /EuiFlexGroup>); } ;