56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { useThemeColor } from "@/hooks/use-theme-color";
|
|
import { FontAwesome5 } from "@expo/vector-icons";
|
|
import { useMemo } from "react";
|
|
import { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectItem, SelectPortal, SelectTrigger } from "../select";
|
|
|
|
type SelectOption = {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
interface CustomSelectProps {
|
|
placeholder?: string;
|
|
options: SelectOption[],
|
|
noneOption?: SelectOption;
|
|
defaultValue?: string;
|
|
selectedValue?:string;
|
|
onValueChange?: (value: string) => void;
|
|
}
|
|
|
|
const CustomSelect = ({
|
|
options,
|
|
onValueChange,
|
|
defaultValue,
|
|
selectedValue,
|
|
noneOption,
|
|
placeholder = "Select option"
|
|
}: CustomSelectProps) => {
|
|
const optionsComputed = useMemo(() => {
|
|
if(noneOption)
|
|
return [noneOption, ...options];
|
|
|
|
return options;
|
|
}, [options, noneOption]);
|
|
const backgroundColor = useThemeColor({ }, "background");
|
|
|
|
return (
|
|
<Select onValueChange={onValueChange} selectedValue={selectedValue} defaultValue={defaultValue}>
|
|
<SelectTrigger variant="outline" size="md" style={{ backgroundColor }}>
|
|
<SelectInput placeholder={placeholder} />
|
|
<FontAwesome5 className="mr-3" name="chevron-down" />
|
|
</SelectTrigger>
|
|
<SelectPortal>
|
|
<SelectBackdrop />
|
|
<SelectContent>
|
|
<SelectDragIndicatorWrapper>
|
|
<SelectDragIndicator />
|
|
</SelectDragIndicatorWrapper>
|
|
{optionsComputed.map((opt, i) => (
|
|
<SelectItem key={i} label={opt.label} value={opt.value} />
|
|
))}
|
|
</SelectContent>
|
|
</SelectPortal>
|
|
</Select>
|
|
)
|
|
}
|
|
|
|
export default CustomSelect; |