blob: 5a0b0eaa4a3f222bf57fc91b9daf70ade63043f1 (
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;
|
