aswi2023one-team-to-rule-them-all-gitlab/src/components/search/SearchFormControl.tsx @ 9c55d3bb

import { CheckIcon, FormControl, Select, View } from "native-base"
import MultiSelect from "react-native-multiple-select"

export interface SearchFormProps {
    data: { label: string, value: string, key: string }[],
    label: string,
    placeholder: string,
    selectedItems: string[],
    onSelectedItemsChange: (selectedItems: string[]) => void,
}

const SearchFormControl = (props: SearchFormProps) => {
    return (
        <View w={350}>
            <MultiSelect
                items={ props.data }
                uniqueKey="key"
                onSelectedItemsChange={ props.onSelectedItemsChange }
                selectedItems={ props.selectedItems }
                selectText={ props.label }
                searchInputPlaceholderText={ props.placeholder }
                displayKey="label"
                submitButtonText={ "Submit" }
                onChangeInput={ (text: string) => console.log(text) }
                tagRemoveIconColor="#CCC"
                tagBorderColor="#CCC"
                tagTextColor="#CCC"
                selectedItemTextColor="#CCC"
                selectedItemIconColor="#CCC"
                itemTextColor="#000"
                searchInputStyle={ { color: "#CCC" } }
                submitButtonColor="#CCC"

            />
        </View>
    )
}

export default SearchFormControl