mirror of
https://github.com/community-scripts/ProxmoxVE
synced 2025-02-15 12:19:17 +00:00
Remove MultiSelect component
This commit is contained in:
Bram Suurd
parent
a3b2a476c1
commit
64fd9a5dcd
@ -1,387 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import {
|
|
||||||
Command,
|
|
||||||
CommandEmpty,
|
|
||||||
CommandItem,
|
|
||||||
CommandList,
|
|
||||||
} from "@/components/ui/command";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { Command as CommandPrimitive } from "cmdk";
|
|
||||||
import { Check, X as RemoveIcon } from "lucide-react";
|
|
||||||
import React, {
|
|
||||||
KeyboardEvent,
|
|
||||||
createContext,
|
|
||||||
forwardRef,
|
|
||||||
useCallback,
|
|
||||||
useContext,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
|
|
||||||
interface MultiSelectorProps
|
|
||||||
extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
|
|
||||||
values: string[];
|
|
||||||
onValuesChange: (value: string[]) => void;
|
|
||||||
loop?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MultiSelectContextProps {
|
|
||||||
value: string[];
|
|
||||||
onValueChange: (value: any) => void;
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (value: boolean) => void;
|
|
||||||
inputValue: string;
|
|
||||||
setInputValue: React.Dispatch<React.SetStateAction<string>>;
|
|
||||||
activeIndex: number;
|
|
||||||
setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
|
|
||||||
ref: React.RefObject<HTMLInputElement>;
|
|
||||||
handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MultiSelectContext = createContext<MultiSelectContextProps | null>(null);
|
|
||||||
|
|
||||||
const useMultiSelect = () => {
|
|
||||||
const context = useContext(MultiSelectContext);
|
|
||||||
if (!context) {
|
|
||||||
throw new Error("useMultiSelect must be used within MultiSelectProvider");
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}
|
|
||||||
*/
|
|
||||||
|
|
||||||
// TODO : expose the visibility of the popup
|
|
||||||
|
|
||||||
const MultiSelector = ({
|
|
||||||
values: value,
|
|
||||||
onValuesChange: onValueChange,
|
|
||||||
loop = false,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
dir,
|
|
||||||
...props
|
|
||||||
}: MultiSelectorProps) => {
|
|
||||||
const [inputValue, setInputValue] = useState("");
|
|
||||||
const [open, setOpen] = useState<boolean>(false);
|
|
||||||
const [activeIndex, setActiveIndex] = useState<number>(-1);
|
|
||||||
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
||||||
const [isValueSelected, setIsValueSelected] = React.useState(false);
|
|
||||||
const [selectedValue, setSelectedValue] = React.useState("");
|
|
||||||
|
|
||||||
const onValueChangeHandler = useCallback(
|
|
||||||
(val: string) => {
|
|
||||||
if (value.includes(val)) {
|
|
||||||
onValueChange(value.filter((item) => item !== val));
|
|
||||||
} else {
|
|
||||||
onValueChange([...value, val]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[value],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSelect = React.useCallback(
|
|
||||||
(e: React.SyntheticEvent<HTMLInputElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const target = e.currentTarget;
|
|
||||||
const selection = target.value.substring(
|
|
||||||
target.selectionStart ?? 0,
|
|
||||||
target.selectionEnd ?? 0,
|
|
||||||
);
|
|
||||||
|
|
||||||
setSelectedValue(selection);
|
|
||||||
setIsValueSelected(selection === inputValue);
|
|
||||||
},
|
|
||||||
[inputValue],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleKeyDown = useCallback(
|
|
||||||
(e: KeyboardEvent<HTMLDivElement>) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
const target = inputRef.current;
|
|
||||||
|
|
||||||
if (!target) return;
|
|
||||||
|
|
||||||
const moveNext = () => {
|
|
||||||
const nextIndex = activeIndex + 1;
|
|
||||||
setActiveIndex(
|
|
||||||
nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const movePrev = () => {
|
|
||||||
const prevIndex = activeIndex - 1;
|
|
||||||
setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
const moveCurrent = () => {
|
|
||||||
const newIndex =
|
|
||||||
activeIndex - 1 <= 0
|
|
||||||
? value.length - 1 === 0
|
|
||||||
? -1
|
|
||||||
: 0
|
|
||||||
: activeIndex - 1;
|
|
||||||
setActiveIndex(newIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
switch (e.key) {
|
|
||||||
case "ArrowLeft":
|
|
||||||
if (dir === "rtl") {
|
|
||||||
if (value.length > 0 && (activeIndex !== -1 || loop)) {
|
|
||||||
moveNext();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (value.length > 0 && target.selectionStart === 0) {
|
|
||||||
movePrev();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "ArrowRight":
|
|
||||||
if (dir === "rtl") {
|
|
||||||
if (value.length > 0 && target.selectionStart === 0) {
|
|
||||||
movePrev();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (value.length > 0 && (activeIndex !== -1 || loop)) {
|
|
||||||
moveNext();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "Backspace":
|
|
||||||
case "Delete":
|
|
||||||
if (value.length > 0) {
|
|
||||||
if (activeIndex !== -1 && activeIndex < value.length) {
|
|
||||||
onValueChangeHandler(value[activeIndex]);
|
|
||||||
moveCurrent();
|
|
||||||
} else {
|
|
||||||
if (target.selectionStart === 0) {
|
|
||||||
if (selectedValue === inputValue || isValueSelected) {
|
|
||||||
onValueChangeHandler(value[value.length - 1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "Enter":
|
|
||||||
setOpen(true);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "Escape":
|
|
||||||
if (activeIndex !== -1) {
|
|
||||||
setActiveIndex(-1);
|
|
||||||
} else if (open) {
|
|
||||||
setOpen(false);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[value, inputValue, activeIndex, loop],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MultiSelectContext.Provider
|
|
||||||
value={{
|
|
||||||
value,
|
|
||||||
onValueChange: onValueChangeHandler,
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
inputValue,
|
|
||||||
setInputValue,
|
|
||||||
activeIndex,
|
|
||||||
setActiveIndex,
|
|
||||||
ref: inputRef,
|
|
||||||
handleSelect,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Command
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
className={cn(
|
|
||||||
"overflow-visible bg-transparent flex flex-col space-y-2",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
dir={dir}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Command>
|
|
||||||
</MultiSelectContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const MultiSelectorTrigger = forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, children, ...props }, ref) => {
|
|
||||||
const { value, onValueChange, activeIndex } = useMultiSelect();
|
|
||||||
|
|
||||||
const mousePreventDefault = useCallback((e: React.MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"flex flex-wrap gap-1 p-1 py-2 ring-1 ring-muted rounded-lg bg-background",
|
|
||||||
{
|
|
||||||
"ring-1 focus-within:ring-ring": activeIndex === -1,
|
|
||||||
},
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{value.map((item, index) => (
|
|
||||||
<Badge
|
|
||||||
key={item}
|
|
||||||
className={cn(
|
|
||||||
"px-1 rounded-xl flex items-center gap-1",
|
|
||||||
activeIndex === index && "ring-2 ring-muted-foreground ",
|
|
||||||
)}
|
|
||||||
variant={"secondary"}
|
|
||||||
>
|
|
||||||
<span className="text-xs">{item}</span>
|
|
||||||
<button
|
|
||||||
aria-label={`Remove ${item} option`}
|
|
||||||
aria-roledescription="button to remove option"
|
|
||||||
type="button"
|
|
||||||
onMouseDown={mousePreventDefault}
|
|
||||||
onClick={() => onValueChange(item)}
|
|
||||||
>
|
|
||||||
<span className="sr-only">Remove {item} option</span>
|
|
||||||
<RemoveIcon className="h-4 w-4 hover:stroke-destructive" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
MultiSelectorTrigger.displayName = "MultiSelectorTrigger";
|
|
||||||
|
|
||||||
const MultiSelectorInput = forwardRef<
|
|
||||||
React.ElementRef<typeof CommandPrimitive.Input>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
|
||||||
>(({ className, ...props }, ref) => {
|
|
||||||
const {
|
|
||||||
setOpen,
|
|
||||||
inputValue,
|
|
||||||
setInputValue,
|
|
||||||
activeIndex,
|
|
||||||
setActiveIndex,
|
|
||||||
handleSelect,
|
|
||||||
ref: inputRef,
|
|
||||||
} = useMultiSelect();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CommandPrimitive.Input
|
|
||||||
{...props}
|
|
||||||
tabIndex={0}
|
|
||||||
ref={inputRef}
|
|
||||||
value={inputValue}
|
|
||||||
onValueChange={activeIndex === -1 ? setInputValue : undefined}
|
|
||||||
onSelect={handleSelect}
|
|
||||||
onBlur={() => setOpen(false)}
|
|
||||||
onFocus={() => setOpen(true)}
|
|
||||||
onClick={() => setActiveIndex(-1)}
|
|
||||||
className={cn(
|
|
||||||
"ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1",
|
|
||||||
className,
|
|
||||||
activeIndex !== -1 && "caret-transparent",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
MultiSelectorInput.displayName = "MultiSelectorInput";
|
|
||||||
|
|
||||||
const MultiSelectorContent = forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ children }, ref) => {
|
|
||||||
const { open } = useMultiSelect();
|
|
||||||
return (
|
|
||||||
<div ref={ref} className="relative">
|
|
||||||
{open && children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
MultiSelectorContent.displayName = "MultiSelectorContent";
|
|
||||||
|
|
||||||
const MultiSelectorList = forwardRef<
|
|
||||||
React.ElementRef<typeof CommandPrimitive.List>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
|
||||||
>(({ className, children }, ref) => {
|
|
||||||
return (
|
|
||||||
<CommandList
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
"p-2 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-0",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<CommandEmpty>
|
|
||||||
<span className="text-muted-foreground">No results found</span>
|
|
||||||
</CommandEmpty>
|
|
||||||
</CommandList>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
MultiSelectorList.displayName = "MultiSelectorList";
|
|
||||||
|
|
||||||
const MultiSelectorItem = forwardRef<
|
|
||||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
|
||||||
{ value: string } & React.ComponentPropsWithoutRef<
|
|
||||||
typeof CommandPrimitive.Item
|
|
||||||
>
|
|
||||||
>(({ className, value, children, ...props }, ref) => {
|
|
||||||
const { value: Options, onValueChange, setInputValue } = useMultiSelect();
|
|
||||||
|
|
||||||
const mousePreventDefault = useCallback((e: React.MouseEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const isIncluded = Options.includes(value);
|
|
||||||
return (
|
|
||||||
<CommandItem
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
onSelect={() => {
|
|
||||||
onValueChange(value);
|
|
||||||
setInputValue("");
|
|
||||||
}}
|
|
||||||
className={cn(
|
|
||||||
"rounded-md cursor-pointer px-2 py-1 transition-colors flex justify-between ",
|
|
||||||
className,
|
|
||||||
isIncluded && "opacity-50 cursor-default",
|
|
||||||
props.disabled && "opacity-50 cursor-not-allowed",
|
|
||||||
)}
|
|
||||||
onMouseDown={mousePreventDefault}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
{isIncluded && <Check className="h-4 w-4" />}
|
|
||||||
</CommandItem>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
MultiSelectorItem.displayName = "MultiSelectorItem";
|
|
||||||
|
|
||||||
export {
|
|
||||||
MultiSelector,
|
|
||||||
MultiSelectorContent,
|
|
||||||
MultiSelectorInput,
|
|
||||||
MultiSelectorItem,
|
|
||||||
MultiSelectorList,
|
|
||||||
MultiSelectorTrigger,
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue
Block a user