-
Notifications
You must be signed in to change notification settings - Fork 594
/
InputSearchField.tsx
51 lines (48 loc) · 1.59 KB
/
InputSearchField.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import * as React from 'react';
import cx from 'classnames';
import { useField } from 'formik';
import { ControlLabel, FormControl, FormGroup, HelpBlock, InputGroup } from 'patternfly-react';
import { SearchIcon } from '@patternfly/react-icons';
import { SearchInputFieldProps } from './field-types';
import { getValidationState } from './field-utils';
const InputSearchField: React.FC<SearchInputFieldProps> = ({
label,
helpText,
onSearch,
...props
}) => {
const [field, { touched, error }] = useField(props.name);
return (
<FormGroup
controlId={`${props.name}-field`}
validationState={getValidationState(error, touched)}
>
{label && (
<ControlLabel className={cx({ 'co-required': props.required })}>{label}</ControlLabel>
)}
<InputGroup>
<FormControl
{...field}
{...props}
aria-describedby={helpText && `${props.name}-help`}
onKeyDown={(e: KeyboardEvent) => e.keyCode === 13 && onSearch(field.value)}
/>
<span className="input-group-btn">
<button
type="button"
className="btn btn-default"
data-test-id="input-search-field-btn"
onClick={() => onSearch(field.value)}
disabled={!field.value}
>
<SearchIcon />
<span className="sr-only">Find</span>
</button>
</span>
</InputGroup>
{helpText && <HelpBlock id={`${props.name}-help`}>{helpText}</HelpBlock>}
{touched && error && <HelpBlock>{error}</HelpBlock>}
</FormGroup>
);
};
export default InputSearchField;