pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-16 05:09:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ new multi select tag input

Browse Source
This commit is contained in:
Fred KISSIE
2026-04-25 04:47:31 +02:00
parent 955aa41f53
commit 95cbaaae21
2 changed files with 58 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/multi-select/multi-select-input.tsx
View File

@@ -3,14 +3,15 @@ import {
PopoverContent,
PopoverTrigger
} from "@app/components/ui/popover";
import { Button } from "@app/components/ui/button";
import { Button, buttonVariants } from "@app/components/ui/button";
import { cn } from "@app/lib/cn";
import { ChevronDownIcon } from "lucide-react";
import { ChevronDownIcon, XIcon } from "lucide-react";
import {
type TagValue,
type MultiSelectTagsProps,
MultiSelectTags
} from "./multi-select-tags";
import { useState } from "react";
export interface MultiSelectInputProps<
T extends TagValue
@@ -22,13 +23,20 @@ export function MultiSelectInput<T extends TagValue>({
buttonText,
...props
}: MultiSelectInputProps<T>) {
const selectedValues = new Set(props.value.map((v) => v.id));
return (
<Popover>
<PopoverTrigger>
<PopoverTrigger asChild>
<div
role="combobox"
className={cn(
"justify-between w-full",
"text-muted-foreground pl-1.5 cursor-text"
buttonVariants({
variant: "outline"
}),
"justify-between w-full inline-flex",
"text-muted-foreground pl-1.5 cursor-text",
"hover:bg-transparent hover:text-muted-foreground"
)}
>
<span
@@ -37,20 +45,41 @@ export function MultiSelectInput<T extends TagValue>({
"overflow-x-auto"
)}
>
{/* {(field.value ?? []).map((client) => (
{props.value.map((option) => (
<span
key={client.clientId}
key={option.id}
className={cn(
"bg-muted-foreground/20 font-normal text-foreground rounded-sm",
"py-1 px-1.5 text-xs"
"py-1 pl-1.5 pr-0.5 text-xs inline-flex items-center gap-0.5"
)}
onClick={(e) => e.stopPropagation()}
>
{client.name}
{option.text}
<button
className="p-0.5 flex-none cursor-pointer"
onClick={(e) => {
e.stopPropagation();
let newValues = [];
if (selectedValues.has(option.id)) {
newValues = props.value.filter(
(v) => v.id !== option.id
);
} else {
newValues = [
...props.value,
option
];
}
props.onChange(newValues);
}}
>
<XIcon className="size-3.5" />
</button>
</span>
))} */}
))}
<span className="pl-1 font-normal">{buttonText}</span>
</span>
<ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 text-muted-foreground" />
</div>
</PopoverTrigger>
<PopoverContent className="p-0">