46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import { Box, FormControl, FormLabel } from '@chakra-ui/react'
|
|
import { CreatableSelect } from 'chakra-react-select'
|
|
|
|
interface Props {
|
|
label: string
|
|
textField: string
|
|
value: any
|
|
bg: string
|
|
handleInputChange: any
|
|
options: any
|
|
}
|
|
|
|
const CreatableSelectInput = ({ label, textField, value, bg, handleInputChange, options}: Props) => {
|
|
return (
|
|
<FormControl mb="3">
|
|
<FormLabel>{label}</FormLabel>
|
|
<Box
|
|
bg={bg}
|
|
border="1px"
|
|
borderColor="gray.500"
|
|
rounded="md">
|
|
<CreatableSelect
|
|
name={textField}
|
|
isClearable
|
|
isMulti
|
|
onChange={(
|
|
values: any,
|
|
) => {
|
|
if (values) {
|
|
const valueArray = values.reduce((prev: string[], curr: any) => {
|
|
prev.push(curr.value)
|
|
return prev
|
|
}, [])
|
|
handleInputChange(textField, valueArray)
|
|
}
|
|
}}
|
|
value={value}
|
|
options={options}
|
|
/>
|
|
</Box>
|
|
</FormControl>
|
|
)
|
|
}
|
|
|
|
export default CreatableSelectInput |