115 lines
2.5 KiB
TypeScript
115 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Check } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { useState } from "react";
|
|
|
|
interface ComboBoxProps<T> {
|
|
elements: T[];
|
|
trigger: (value?: string) => React.ReactNode;
|
|
onSubmit?: (value: string) => void;
|
|
value: string;
|
|
onValueChange: (v: string) => void;
|
|
children: (
|
|
ItemComponent: (
|
|
props: React.ComponentProps<typeof CommandItem> & { label: string },
|
|
) => React.JSX.Element,
|
|
element: T,
|
|
) => React.ReactNode;
|
|
}
|
|
|
|
const ComboBox = <T,>({
|
|
elements,
|
|
trigger,
|
|
children,
|
|
onSubmit,
|
|
value,
|
|
onValueChange,
|
|
}: ComboBoxProps<T>) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [searchValue, setSearchValue] = useState("");
|
|
|
|
const handleSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key !== "Enter") return;
|
|
e.preventDefault();
|
|
onValueChange(searchValue);
|
|
onSubmit?.(searchValue);
|
|
};
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
{trigger(value.length > 0 ? value : undefined)}
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[200px] p-0">
|
|
<Command>
|
|
<CommandInput
|
|
onKeyDown={handleSubmit}
|
|
onInput={(e) =>
|
|
setSearchValue((e.target as HTMLInputElement).value)
|
|
}
|
|
placeholder="Search framework..."
|
|
/>
|
|
<CommandList>
|
|
<CommandEmpty>
|
|
Créer une nouvelle catégorie
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{elements.map((element, index) =>
|
|
children(
|
|
({
|
|
value: elementValue,
|
|
label,
|
|
onSelect,
|
|
...props
|
|
}) => (
|
|
<CommandItem
|
|
key={index}
|
|
value={elementValue ?? ""}
|
|
onSelect={(_value) => {
|
|
onValueChange(_value);
|
|
console.log(elementValue);
|
|
setOpen(false);
|
|
onSelect?.(_value);
|
|
}}
|
|
{...props}
|
|
>
|
|
{label}
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
value === elementValue
|
|
? "opacity-100"
|
|
: "opacity-0",
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
),
|
|
element,
|
|
),
|
|
)}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default ComboBox;
|