413 lines
14 KiB
TypeScript
413 lines
14 KiB
TypeScript
import { type VariantProps, cva } from "class-variance-authority";
|
|
import { CheckIcon, ChevronDown, WandSparkles, XCircleIcon } from "lucide-react";
|
|
import * as React from "react";
|
|
|
|
import {
|
|
Badge,
|
|
Button,
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
Separator,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import { useTranslation } from "../locales/i18n.ts";
|
|
|
|
/**
|
|
* Variants for the multi-select component to handle different styles.
|
|
* Uses class-variance-authority (cva) to define different styles based on "variant" prop.
|
|
*/
|
|
const multiSelectVariants = cva(
|
|
"m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
|
|
secondary:
|
|
"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
destructive:
|
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
inverted: "inverted",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
}
|
|
);
|
|
|
|
export type MultiSelectOptionType = {
|
|
/** The text to display for the option. */
|
|
label: string;
|
|
/** The unique value associated with the option. */
|
|
value: string;
|
|
|
|
/**
|
|
* Optional group name to categorize the option.
|
|
* Useful for grouping options in the UI.
|
|
*/
|
|
group?: string;
|
|
/** Optional icon component to display alongside the option. */
|
|
icon?: React.ComponentType<{
|
|
className?: string;
|
|
}>;
|
|
};
|
|
|
|
/**
|
|
* Props for MultiSelect component
|
|
*/
|
|
export interface MultiSelectProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
VariantProps<typeof multiSelectVariants> {
|
|
/**
|
|
* An array of option objects to be displayed in the multi-select component.
|
|
* Each option object has a label, value, and an optional icon.
|
|
*/
|
|
options: MultiSelectOptionType[];
|
|
|
|
/**
|
|
* Callback function triggered when the selected values change.
|
|
* Receives an array of the new selected values.
|
|
*/
|
|
onValueChange: (values: string[]) => void;
|
|
|
|
/**
|
|
* Optional function to validate an option before selection.
|
|
* Receives the option value and should return true if valid, false otherwise.
|
|
*/
|
|
onValidateOption?: (value: string, selectedValues: string[]) => boolean;
|
|
|
|
/** The default selected values when the component mounts. */
|
|
defaultValue?: string[];
|
|
|
|
/**
|
|
* Placeholder text to be displayed when no values are selected.
|
|
* Optional, defaults to "Select options".
|
|
*/
|
|
placeholder?: string;
|
|
|
|
/**
|
|
* Animation duration in seconds for the visual effects (e.g., bouncing badges).
|
|
* Optional, defaults to 0 (no animation).
|
|
*/
|
|
animation?: number;
|
|
|
|
/**
|
|
* Maximum number of items to display. Extra selected items will be summarized.
|
|
* Optional, defaults to 3.
|
|
*/
|
|
maxCount?: number;
|
|
|
|
/**
|
|
* The modality of the popover. When set to true, interaction with outside elements
|
|
* will be disabled and only popover content will be visible to screen readers.
|
|
* Optional, defaults to false.
|
|
*/
|
|
modalPopover?: boolean;
|
|
|
|
/**
|
|
* If true, renders the multi-select component as a child of another component.
|
|
* Optional, defaults to false.
|
|
*/
|
|
asChild?: boolean;
|
|
|
|
/**
|
|
* Additional class names to apply custom styles to the multi-select component.
|
|
* Optional, can be used to add custom styles.
|
|
*/
|
|
className?: string;
|
|
|
|
/**
|
|
* If true, allows selecting all visible options at once.
|
|
* Optional, defaults to false.
|
|
*/
|
|
selectAllVisible?: boolean;
|
|
|
|
|
|
/**
|
|
* Filtra los items seleccionados
|
|
*/
|
|
filterSelected?: (selectedValues: string[]) => string[];
|
|
|
|
/** Si true, aplica el filtro automáticamente al cambiar los items seleccionados */
|
|
autoFilter?: boolean;
|
|
}
|
|
|
|
export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
(
|
|
{
|
|
options,
|
|
onValueChange,
|
|
onValidateOption,
|
|
variant,
|
|
defaultValue = [],
|
|
placeholder,
|
|
animation = 0,
|
|
maxCount = 3,
|
|
modalPopover = false,
|
|
asChild = false,
|
|
className,
|
|
selectAllVisible = false,
|
|
filterSelected,
|
|
autoFilter = false,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue ?? []);
|
|
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
|
|
const [isAnimating, setIsAnimating] = React.useState(false);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const applySelectedFilter = React.useCallback(() => {
|
|
if (!filterSelected) return;
|
|
const filtered = filterSelected(selectedValues);
|
|
if (filtered.length !== selectedValues.length) {
|
|
setSelectedValues(filtered);
|
|
onValueChange(filtered);
|
|
}
|
|
}, [filterSelected, selectedValues, onValueChange]);
|
|
|
|
// Filtro automático cuando cambia selectedValues
|
|
React.useEffect(() => {
|
|
if (autoFilter) applySelectedFilter();
|
|
}, [autoFilter, selectedValues, applySelectedFilter]);
|
|
|
|
|
|
const grouped = options.reduce<Record<string, MultiSelectOptionType[]>>((acc, item) => {
|
|
if (!acc[item.group || ""]) acc[item.group || ""] = [];
|
|
acc[item.group || ""].push(item);
|
|
return acc;
|
|
}, {});
|
|
|
|
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (event.key === "Enter") {
|
|
setIsPopoverOpen(true);
|
|
} else if (event.key === "Backspace" && !event.currentTarget.value) {
|
|
const newSelectedValues = [...selectedValues];
|
|
newSelectedValues.pop();
|
|
setSelectedValues(newSelectedValues);
|
|
onValueChange(newSelectedValues);
|
|
}
|
|
};
|
|
|
|
const toggleOption = (option: string) => {
|
|
if (onValidateOption && !onValidateOption(option, selectedValues)) {
|
|
console.warn(`Option "${option}" is not valid.`);
|
|
return;
|
|
}
|
|
|
|
const newSelectedValues = selectedValues.includes(option)
|
|
? selectedValues.filter((value) => value !== option)
|
|
: [...selectedValues, option];
|
|
setSelectedValues(newSelectedValues);
|
|
onValueChange(newSelectedValues);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setSelectedValues([]);
|
|
onValueChange([]);
|
|
};
|
|
|
|
const handleTogglePopover = () => {
|
|
setIsPopoverOpen((prev) => !prev);
|
|
};
|
|
|
|
const clearExtraOptions = () => {
|
|
const newSelectedValues = selectedValues.slice(0, maxCount);
|
|
setSelectedValues(newSelectedValues);
|
|
onValueChange(newSelectedValues);
|
|
};
|
|
|
|
const toggleAll = () => {
|
|
if (selectedValues.length === options.length) {
|
|
handleClear();
|
|
} else {
|
|
const allValues = options.map((option) => option.value);
|
|
setSelectedValues(allValues);
|
|
onValueChange(allValues);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
ref={ref}
|
|
{...props}
|
|
onClick={handleTogglePopover}
|
|
className={cn(
|
|
"flex w-full -mt-0.5 px-1 py-0.5 rounded-md border min-h-8 h-auto items-center justify-between bg-background hover:bg-inherit [&_svg]:pointer-events-auto",
|
|
className
|
|
)}
|
|
>
|
|
{selectedValues.length > 0 ? (
|
|
<div className='flex justify-between items-center w-full'>
|
|
<div className='flex flex-wrap items-center'>
|
|
{selectedValues.slice(0, maxCount).map((value) => {
|
|
const option = options.find((o) => o.value === value);
|
|
const IconComponent = option?.icon;
|
|
return (
|
|
<Badge
|
|
key={value}
|
|
className={cn(
|
|
isAnimating ? "animate-bounce" : "",
|
|
multiSelectVariants({ variant })
|
|
)}
|
|
style={{ animationDuration: `${animation}s` }}
|
|
>
|
|
{IconComponent && <IconComponent className='h-4 w-4 mr-2' />}
|
|
{option?.label}
|
|
{/*<XCircle
|
|
className='ml-2 h-4 w-4 cursor-pointer'
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
toggleOption(value);
|
|
}}
|
|
/>*/}
|
|
</Badge>
|
|
);
|
|
})}
|
|
{selectedValues.length > maxCount && (
|
|
<Badge
|
|
className={cn(
|
|
"bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
|
|
isAnimating ? "animate-bounce" : "",
|
|
multiSelectVariants({ variant })
|
|
)}
|
|
style={{ animationDuration: `${animation}s` }}
|
|
>
|
|
{`+ ${selectedValues.length - maxCount} more`}
|
|
<XCircleIcon
|
|
className='ml-2 h-4 w-4 cursor-pointer'
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
clearExtraOptions();
|
|
}}
|
|
/>
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Separator orientation='vertical' className='flex min-h-6 h-full' />
|
|
<ChevronDown className='h-4 mx-2 cursor-pointer text-muted-foreground' />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className='flex items-center justify-between w-full mx-auto'>
|
|
<span className='text-sm text-muted-foreground mx-3'>
|
|
{placeholder || t("components.multi_select.select_options")}
|
|
</span>
|
|
<ChevronDown className='h-4 cursor-pointer text-muted-foreground mx-2' />
|
|
</div>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className='w-auto p-0'
|
|
align='start'
|
|
onEscapeKeyDown={() => setIsPopoverOpen(false)}
|
|
>
|
|
<Command>
|
|
<CommandInput placeholder={t("common.search")} onKeyDown={handleInputKeyDown} />
|
|
<CommandList>
|
|
<CommandEmpty>{t("components.multi_select.no_results")}</CommandEmpty>
|
|
|
|
{selectAllVisible && (
|
|
<CommandItem key='all' onSelect={toggleAll} className='cursor-pointer'>
|
|
<div
|
|
className={cn(
|
|
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
|
|
selectedValues.length === options.length
|
|
? "bg-primary text-primary-foreground"
|
|
: "opacity-50 [&_svg]:invisible"
|
|
)}
|
|
>
|
|
<CheckIcon className='h-4 w-4' />
|
|
</div>
|
|
<span>(Select All)</span>
|
|
</CommandItem>
|
|
)}
|
|
{Object.keys(grouped).map((group) => {
|
|
return (
|
|
<CommandGroup key={`group-${group || "ungrouped"}`} heading={group}>
|
|
{grouped[group].map((option) => {
|
|
const isSelected = selectedValues.includes(option.value);
|
|
return (
|
|
<CommandItem
|
|
key={option.value}
|
|
onSelect={() => toggleOption(option.value)}
|
|
className='cursor-pointer'
|
|
>
|
|
<div
|
|
className={cn(
|
|
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
|
|
isSelected
|
|
? "bg-primary text-primary-foreground"
|
|
: "opacity-50 [&_svg]:invisible"
|
|
)}
|
|
>
|
|
<CheckIcon
|
|
className={cn("h-4 w-4", isSelected ? "text-primary-foreground" : "")}
|
|
/>
|
|
</div>
|
|
{option.icon && (
|
|
<option.icon className='mr-2 h-4 w-4 text-muted-foreground' />
|
|
)}
|
|
<span>{option.label}</span>
|
|
</CommandItem>
|
|
);
|
|
})}
|
|
</CommandGroup>
|
|
);
|
|
})}
|
|
|
|
<CommandSeparator />
|
|
<CommandGroup>
|
|
<div className='flex items-center justify-between'>
|
|
{selectedValues.length > 0 && (
|
|
<>
|
|
<CommandItem
|
|
onSelect={handleClear}
|
|
className='flex-1 justify-center cursor-pointer'
|
|
>
|
|
{t("components.multi_select.clear_selection")}
|
|
</CommandItem>
|
|
<Separator orientation='vertical' className='flex min-h-6 h-full' />
|
|
</>
|
|
)}
|
|
<CommandItem
|
|
onSelect={() => setIsPopoverOpen(false)}
|
|
className='flex-1 justify-center cursor-pointer max-w-full'
|
|
>
|
|
{t("components.multi_select.close")}
|
|
</CommandItem>
|
|
</div>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
{animation > 0 && selectedValues.length > 0 && (
|
|
<WandSparkles
|
|
className={cn(
|
|
"cursor-pointer my-2 text-foreground bg-background w-3 h-3",
|
|
isAnimating ? "" : "text-muted-foreground"
|
|
)}
|
|
onClick={() => setIsAnimating(!isAnimating)}
|
|
/>
|
|
)}
|
|
</Popover>
|
|
);
|
|
}
|
|
);
|
|
|
|
MultiSelect.displayName = "MultiSelect";
|