1
|
import { CheckIcon, FormControl, Select, View } from "native-base"
|
2
|
import MultiSelect from "react-native-multiple-select"
|
3
|
|
4
|
export interface SearchFormProps {
|
5
|
data: { label: string, value: string, key: string }[],
|
6
|
label: string,
|
7
|
placeholder: string,
|
8
|
selectedItems: string[],
|
9
|
onSelectedItemsChange: (selectedItems: string[]) => void,
|
10
|
}
|
11
|
|
12
|
const SearchFormControl = (props: SearchFormProps) => {
|
13
|
return (
|
14
|
<View w={350}>
|
15
|
<MultiSelect
|
16
|
items={ props.data }
|
17
|
uniqueKey="key"
|
18
|
onSelectedItemsChange={ props.onSelectedItemsChange }
|
19
|
selectedItems={ props.selectedItems }
|
20
|
selectText={ props.label }
|
21
|
searchInputPlaceholderText={ props.placeholder }
|
22
|
displayKey="label"
|
23
|
submitButtonText={ "Submit" }
|
24
|
onChangeInput={ (text: string) => console.log(text) }
|
25
|
tagRemoveIconColor="#CCC"
|
26
|
tagBorderColor="#CCC"
|
27
|
tagTextColor="#CCC"
|
28
|
selectedItemTextColor="#CCC"
|
29
|
selectedItemIconColor="#CCC"
|
30
|
itemTextColor="#000"
|
31
|
searchInputStyle={ { color: "#CCC" } }
|
32
|
submitButtonColor="#CCC"
|
33
|
|
34
|
/>
|
35
|
</View>
|
36
|
)
|
37
|
}
|
38
|
|
39
|
export default SearchFormControl
|