import React , { FC , useEffect , useState } from 'react' ; import { EuiHorizontalRule } from '@elastic/eui' ; import { RareDetectors } from './metric_selection' ; import { RareDetectorsSummary } from './metric_selection_summary' ; import { RareSettings } from './settings' ; export enum RARE_DETECTOR_TYPE { RARE , RARE_POPULATION , FREQ_RARE_POPULATION } interface Props { isActive : boolean ; setCanProceed ? : ( proceed : boolean ) => void ; } export const RareView = ( { isActive , setCanProceed } ) => { const [ rareFieldValid , setRareFieldValid ] = useState ( false ) ; const [ settingsValid , setSettingsValid ] = useState ( false ) ; const [ rareDetectorType , setRareDetectorType ] = useState ( RARE_DETECTOR_TYPE . RARE ) ; useEffect ( ( ) => { if ( typeof setCanProceed === 'function' ) { setCanProceed ( rareFieldValid && settingsValid ) ; } } , [ rareFieldValid , settingsValid ] ) ; return isActive === false ? ( < RareDetectorsSummary />) : (<> < RareDetectors setIsValid = { setRareFieldValid } rareDetectorType = { rareDetectorType } setRareDetectorType = { setRareDetectorType } / > { rareFieldValid && ( < > < EuiHorizontalRule margin = "l" / > < RareSettings setIsValid = { setSettingsValid } /> < />)} < />); } ;