103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { Check, ChevronsUpDown } from "lucide-react";
|
||
|
|
import { cn } from "../../lib/utils";
|
||
|
|
import { Button } from "./button";
|
||
|
|
import {
|
||
|
|
Popover,
|
||
|
|
PopoverContent,
|
||
|
|
PopoverTrigger,
|
||
|
|
} from "./popover";
|
||
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command";
|
||
|
|
|
||
|
|
export interface ComboboxOption {
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ComboboxProps {
|
||
|
|
options: ComboboxOption[];
|
||
|
|
value?: string;
|
||
|
|
onValueChange?: (value: string) => void;
|
||
|
|
placeholder?: string;
|
||
|
|
searchPlaceholder?: string;
|
||
|
|
emptyText?: string;
|
||
|
|
className?: string;
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
|
||
|
|
(
|
||
|
|
{
|
||
|
|
options,
|
||
|
|
value,
|
||
|
|
onValueChange,
|
||
|
|
placeholder = "Selecione uma opção...",
|
||
|
|
searchPlaceholder = "Pesquisar...",
|
||
|
|
emptyText = "Nenhum resultado encontrado.",
|
||
|
|
className,
|
||
|
|
disabled,
|
||
|
|
},
|
||
|
|
ref
|
||
|
|
) => {
|
||
|
|
const [open, setOpen] = React.useState(false);
|
||
|
|
|
||
|
|
const selectedOption = options.find((option) => option.value === value);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
ref={ref}
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={open}
|
||
|
|
className={cn(
|
||
|
|
"w-full justify-between font-normal h-10 bg-white border border-slate-300 text-slate-900 hover:bg-slate-50",
|
||
|
|
!selectedOption && "text-slate-400",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
disabled={disabled}
|
||
|
|
>
|
||
|
|
<span className="truncate">
|
||
|
|
{selectedOption ? selectedOption.label : placeholder}
|
||
|
|
</span>
|
||
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[var(--radix-popover-trigger-width)] max-w-[400px] p-0" align="start">
|
||
|
|
<Command shouldFilter={false}>
|
||
|
|
<CommandInput placeholder={searchPlaceholder} />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty>{emptyText}</CommandEmpty>
|
||
|
|
<CommandGroup>
|
||
|
|
{options.map((option) => (
|
||
|
|
<CommandItem
|
||
|
|
key={option.value}
|
||
|
|
value={option.label}
|
||
|
|
onSelect={() => {
|
||
|
|
onValueChange?.(option.value);
|
||
|
|
setOpen(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn(
|
||
|
|
"mr-2 h-4 w-4",
|
||
|
|
value === option.value ? "opacity-100" : "opacity-0"
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
{option.label}
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
Combobox.displayName = "Combobox";
|
||
|
|
|
||
|
|
export { Combobox };
|
||
|
|
|