-
Notifications
You must be signed in to change notification settings - Fork 5.5k
/
SearchComponent.tsx
79 lines (77 loc) · 1.6 KB
/
SearchComponent.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
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
79
import { SearchOutlined } from "@mui/icons-material";
import { InputAdornment, MenuItem, TextField } from "@mui/material";
import React from "react";
export const SearchInput = ({
label,
onChange,
defaultValue,
}: {
label: string;
defaultValue?: string;
onChange?: (value: string) => void;
}) => {
return (
<TextField
size="small"
label={label}
InputProps={{
onChange: ({ target: { value } }) => {
if (onChange) {
onChange(value);
}
},
defaultValue,
endAdornment: (
<InputAdornment position="end">
<SearchOutlined />
</InputAdornment>
),
}}
/>
);
};
export const SearchSelect = ({
label,
onChange,
options,
showAllOption,
defaultValue,
}: {
label: string;
onChange?: (value: string) => void;
options: (string | [string, string])[];
showAllOption: boolean;
defaultValue?: string;
}) => {
return (
<TextField
size="small"
label={label}
select
SelectProps={{
onChange: ({ target: { value } }) => {
if (onChange) {
onChange(value as string);
}
},
style: {
width: 100,
},
}}
defaultValue={defaultValue}
>
{showAllOption ?? <MenuItem value="">All</MenuItem>}
{options.map((e) =>
typeof e === "string" ? (
<MenuItem key={e} value={e}>
{e}
</MenuItem>
) : (
<MenuItem key={e[0]} value={e[0]}>
{e[1]}
</MenuItem>
),
)}
</TextField>
);
};