78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import type { SelectOption } from 'types';
|
|
import * as React from 'react';
|
|
import { useNavigate } from 'react-router';
|
|
import { cn } from 'helpers/cn';
|
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@/components/ui/command';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { Separator } from '@/components/ui/separator';
|
|
|
|
type ComboboxProps<T> = {
|
|
options: SelectOption[];
|
|
value: string | number;
|
|
onChange: (value: T) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
};
|
|
export const Combobox = <T extends string | number>({
|
|
options,
|
|
value,
|
|
onChange,
|
|
placeholder = 'Select...',
|
|
className,
|
|
}: ComboboxProps<T>) => {
|
|
const navigate = useNavigate();
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
className={cn('w-[200px] justify-between', className)}
|
|
>
|
|
<span className="block truncate">
|
|
{value ? options?.find((option) => option.value === value)?.label : placeholder}
|
|
</span>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className={cn('w-[200px] justify-between', className)}>
|
|
<Command>
|
|
<CommandInput placeholder={placeholder} />
|
|
<CommandEmpty></CommandEmpty>
|
|
<CommandGroup className="max-h-96 overflow-auto">
|
|
{options?.map((option) => (
|
|
<div key={option.value}>
|
|
<CommandItem
|
|
value={option?.label || '' + option.value}
|
|
onSelect={(currentValue) => {
|
|
if (option.href) {
|
|
return navigate(option.href);
|
|
}
|
|
const newValue = options.find(
|
|
(option) => option.label?.toLowerCase() === currentValue.toLowerCase(),
|
|
)?.value;
|
|
if (value && value !== newValue) {
|
|
const setValue = typeof value === 'number' ? Number(newValue) : '' + newValue;
|
|
onChange(setValue as T);
|
|
}
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
<Check className={cn('mr-2 h-4 w-4', value === option.value ? 'opacity-100' : 'opacity-0')} />
|
|
{option.label}
|
|
</CommandItem>
|
|
{option.href && <Separator className="my-2" />}
|
|
</div>
|
|
))}
|
|
</CommandGroup>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|