import React , { FC , useContext , useEffect , useState } from 'react' ; import { EuiHorizontalRule , EuiFlexGroup , EuiFlexItem , EuiSpacer } from '@elastic/eui' ; import { RareFieldSelector } from '../rare_field' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { RareJobCreator } from '../../../../../common/job_creator' ; import { RareDetector } from '../rare_detector' ; import { PopulationFieldSelector } from '../population_field' ; import { DetectorDescription } from './detector_description' ; import { RARE_DETECTOR_TYPE } from './rare_view' ; interface Props { setIsValid : ( na : boolean ) => void ; setRareDetectorType ( t ) : void ; rareDetectorType : RARE_DETECTOR_TYPE ; } export const RareDetectors = ( { setIsValid , rareDetectorType , setRareDetectorType } ) => { const { jobCreator : jc , jobCreatorUpdated } = useContext ( JobCreatorContext ) ; const jobCreator = jc as RareJobCreator ; const [ detectorValid , setDetectorValid ] = useState ( false ) ; useEffect ( ( ) => { let valid = false ; if ( jobCreator . rareField !== null ) { if ( rareDetectorType === RARE_DETECTOR_TYPE . RARE ) { valid = true ; } else if ( jobCreator . populationField !== null ) { valid = true ; } } setIsValid ( valid ) ; setDetectorValid ( valid ) ; } , [ jobCreatorUpdated ] ) ; return ( < > < RareDetector onChange = { setRareDetectorType } / > < > < EuiHorizontalRule /> < EuiFlexGroup > < EuiFlexItem > < RareFieldSelector /> < /EuiFlexItem> < EuiFlexItem > { rareDetectorType !== RARE_DETECTOR_TYPE . RARE && < PopulationFieldSelector />} < /EuiFlexItem> < /EuiFlexGroup> { detectorValid && ( < > < EuiSpacer size = "m" / > < DetectorDescription detectorType = { rareDetectorType } /> < />)} < /> < />); } ;