blob: ccb6dad6fe1ed5b2dd5c84095af717b743135a44 (
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import React, { useCallback } from "react";
import classnames from "classnames";
import { useTranslation } from "react-i18next";
import { Spinner, Form, Button } from "react-bootstrap";
export interface SearchInputProps {
value: string;
onChange: (value: string) => void;
onButtonClick: () => void;
className?: string;
loading?: boolean;
buttonText?: string;
placeholder?: string;
additionalButton?: React.ReactNode;
alwaysOneline?: boolean;
}
const SearchInput: React.FC<SearchInputProps> = (props) => {
const { onChange, onButtonClick, alwaysOneline } = 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();
event.preventDefault();
}
},
[onButtonClick]
);
return (
<Form
className={classnames(
"cru-search-input",
alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
props.className
)}
>
<Form.Control
className="me-sm-2 flex-grow-1"
value={props.value}
onChange={onInputChange}
onKeyPress={onInputKeyPress}
placeholder={props.placeholder}
/>
{props.additionalButton ? (
<div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ms-sm-2">
{props.additionalButton}
</div>
) : null}
<div
className={classnames(
alwaysOneline ? "mt-0 ms-2" : "mt-2 mt-sm-0 ms-auto ms-sm-0",
"flex-shrink-0"
)}
>
{props.loading ? (
<Spinner variant="primary" animation="border" />
) : (
<Button variant="outline-primary" onClick={props.onButtonClick}>
{props.buttonText ?? t("search")}
</Button>
)}
</div>
</Form>
);
};
export default SearchInput;
|
