blob: 46fb00d169b908f1e32bce37b3bfcc1198b86708 (
plain)
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
52
53
54
55
56
57
58
59
60
61
62
63
|
import React, { useCallback } from 'react';
import clsx from 'clsx';
import { Spinner, Input, Button } from 'reactstrap';
import { useTranslation } from 'react-i18next';
export interface SearchInputProps {
value: string;
onChange: (value: string) => void;
onButtonClick: () => void;
className?: string;
loading?: boolean;
buttonText?: string;
placeholder?: string;
additionalButton?: React.ReactNode;
}
const SearchInput: React.FC<SearchInputProps> = (props) => {
const { onChange, onButtonClick } = props;
const { t } = useTranslation();
const onInputChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>): void => {
onChange(event.currentTarget.value);
},
[onChange]
);
const onInputKeyPress = useCallback(
(event: React.KeyboardEvent<HTMLInputElement>): void => {
if (event.key === 'Enter') {
onButtonClick();
}
},
[onButtonClick]
);
return (
<div className={clsx('form-inline my-2', props.className)}>
<Input
className="mr-sm-2"
value={props.value}
onChange={onInputChange}
onKeyPress={onInputKeyPress}
placeholder={props.placeholder}
/>
<div className="mt-2 mt-sm-0 order-sm-last ml-sm-3">
{props.additionalButton}
</div>
<div className="mt-2 mt-sm-0 ml-auto ml-sm-0">
{props.loading ? (
<Spinner />
) : (
<Button outline color="primary" onClick={props.onButtonClick}>
{props.buttonText ?? t('search')}
</Button>
)}
</div>
</div>
);
};
export default SearchInput;
|
