import React from 'react' ; import { EuiFlexGroup , EuiFlexItem } from '@elastic/eui' ; import { bindActionCreators } from 'redux' ; import { connect } from 'react-redux' ; import { FieldPicker } from './field_picker' ; import { FieldEditor } from './field_editor' ; import { selectedFieldsSelector , fieldsSelector , fieldMapSelector , updateFieldProperties , selectField , deselectField , GraphState , GraphStore , } from '../../state_management' ; import { WorkspaceField } from '../../types' ; export type UpdateableFieldProperties = 'hopSize' | 'lastValidHopSize' | 'color' | 'icon' ; export function FieldManagerComponent ( props ) { return ( < EuiFlexGroup gutterSize = "s" className = "gphFieldManager" alignItems = "center" > { props . selectedFields . map ( ( field ) => ( < EuiFlexItem key = { field . name } grow = { false } > < FieldEditor { ... props } field = { field } / > < /EuiFlexItem>))} < EuiFlexItem grow = { false } > < FieldPicker { ... props } open = { props . pickerOpen } setOpen = { props . setPickerOpen } / > < /EuiFlexItem> < /EuiFlexGroup>); } export const FieldManager = connect ( ( state ) => ( { fieldMap : fieldMapSelector ( state ) , allFields : fieldsSelector ( state ) , selectedFields : selectedFieldsSelector ( state ) , } ) , ( dispatch ) => bindActionCreators ( { updateFieldProperties , selectField , deselectField , } , dispatch ) ) ( FieldManagerComponent ) ;