import React from 'react'; import { Form, FormGroup, FormHelperText, FormSelect, FormSelectOption, HelperText, HelperTextItem, ValidatedOptions } from '@patternfly/react-core'; export const FormSelectValidated: React.FunctionComponent = () => { const [formValue, setFormValue] = React.useState(''); const [helperText, setHelperText] = React.useState(''); const [validated, setValidated] = React.useState(ValidatedOptions.default); const simulateNetworkCall = (callback: () => void) => { setTimeout(callback, 2000); }; const onChange = (_event: React.FormEvent, value: string) => { setFormValue(value); setValidated(ValidatedOptions.default); setHelperText('Validating...'); simulateNetworkCall(() => { if (value === '3') { setValidated(ValidatedOptions.success); setHelperText('You chose wisely'); } else if (value === '') { setValidated(ValidatedOptions.warning); setHelperText('You must select a value'); } else { setValidated(ValidatedOptions.error); setHelperText('You must chose Three (thought that was obvious)'); } }); }; const options = [ { value: '', label: 'Select a number', disabled: false, isPlaceholder: true }, { value: '1', label: 'One', disabled: false, isPlaceholder: false }, { value: '2', label: 'Two', disabled: false, isPlaceholder: false }, { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false } ]; return ( {options.map((option, index) => ( ))} {helperText} ); };