460 lines
16 KiB
TypeScript
460 lines
16 KiB
TypeScript
import {
|
|
Badge,
|
|
Button,
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
CommandSeparator,
|
|
FormControl,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
Separator,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import { type VariantProps, cva } from "class-variance-authority";
|
|
import {
|
|
CheckCircle2Icon,
|
|
CheckIcon,
|
|
ChevronDownIcon,
|
|
Loader2Icon,
|
|
WandSparklesIcon,
|
|
XCircleIcon,
|
|
} from "lucide-react";
|
|
import * as React from "react";
|
|
import {
|
|
type Control,
|
|
type FieldPath,
|
|
type FieldValues,
|
|
useController,
|
|
useFormContext,
|
|
useFormState,
|
|
} from "react-hook-form";
|
|
|
|
import { useTranslation } from "../../locales/i18n.ts";
|
|
|
|
/* -------------------- Variants -------------------- */
|
|
|
|
const multiSelectFieldVariants = 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-primary hover:bg-primary/80 text-primary-foreground",
|
|
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",
|
|
},
|
|
}
|
|
);
|
|
|
|
/* -------------------- Tipos -------------------- */
|
|
|
|
export type MultiSelectFieldOptionType = {
|
|
label: string;
|
|
value: string;
|
|
group?: string;
|
|
icon?: React.ComponentType<{ className?: string }>;
|
|
};
|
|
|
|
/**
|
|
* Props base (visuales y de comportamiento)
|
|
*/
|
|
interface MultiSelectFieldBaseProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
VariantProps<typeof multiSelectFieldVariants> {
|
|
options: MultiSelectFieldOptionType[];
|
|
onValueChange?: (values: string[]) => void; // ahora opcional (RHF-first)
|
|
onValidateOption?: (value: string) => boolean;
|
|
defaultValue?: string[];
|
|
placeholder?: string;
|
|
animation?: number;
|
|
maxCount?: number;
|
|
modalPopover?: boolean;
|
|
asChild?: boolean;
|
|
className?: string;
|
|
selectAllVisible?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Props adicionales para paridad con TextField (RHF + UX)
|
|
*/
|
|
interface MultiSelectFieldTextFieldLikeProps<T extends FieldValues> {
|
|
name: FieldPath<T>;
|
|
control?: Control<T>; // opcional; si no, se usa useFormContext()
|
|
label?: string;
|
|
description?: string;
|
|
required?: boolean;
|
|
readOnly?: boolean;
|
|
|
|
disabledWhileSubmitting?: boolean;
|
|
showSuccessWhenValid?: boolean;
|
|
showValidatingSpinner?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Props completas
|
|
*/
|
|
export type MultiSelectFieldProps<T extends FieldValues> = MultiSelectFieldBaseProps &
|
|
MultiSelectFieldTextFieldLikeProps<T>;
|
|
|
|
/* -------------------- Componente -------------------- */
|
|
|
|
export const MultiSelectFieldInner = React.forwardRef(
|
|
<T extends FieldValues>(
|
|
{
|
|
// RHF-like
|
|
name,
|
|
control: controlProp,
|
|
label,
|
|
description,
|
|
required,
|
|
readOnly,
|
|
|
|
disabledWhileSubmitting = true,
|
|
showSuccessWhenValid = true,
|
|
showValidatingSpinner = true,
|
|
|
|
// tu API actual
|
|
options,
|
|
onValueChange,
|
|
onValidateOption,
|
|
variant,
|
|
defaultValue = [],
|
|
placeholder,
|
|
animation = 0,
|
|
maxCount = 3,
|
|
modalPopover = false,
|
|
asChild = false,
|
|
className,
|
|
selectAllVisible = false,
|
|
|
|
// button props, etc.
|
|
...buttonProps
|
|
}: MultiSelectFieldProps<T>,
|
|
ref: React.Ref<HTMLButtonElement>
|
|
) => {
|
|
const formCtx = useFormContext<T>();
|
|
const control = controlProp ?? formCtx?.control;
|
|
if (!control) {
|
|
throw new Error(
|
|
"MultiSelectField requiere 'control' o estar dentro de <FormProvider> (useFormContext)."
|
|
);
|
|
}
|
|
|
|
const { t } = useTranslation();
|
|
|
|
// RHF: estado del campo
|
|
const { field, fieldState } = useController({
|
|
control,
|
|
name,
|
|
defaultValue: undefined,
|
|
});
|
|
const { isSubmitting, isValidating } = useFormState({ control, name });
|
|
|
|
// Inicializa el valor con defaultValue si RHF no trae nada:
|
|
React.useEffect(() => {
|
|
if (!Array.isArray(field.value) || field.value.length === 0) {
|
|
if (defaultValue.length > 0) field.onChange(defaultValue);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const selectedValues: string[] = Array.isArray(field.value) ? field.value : [];
|
|
|
|
const disabled = (disabledWhileSubmitting && isSubmitting) || buttonProps.disabled || readOnly;
|
|
|
|
const invalid = fieldState.invalid && (fieldState.isDirty || fieldState.isTouched);
|
|
const valid =
|
|
!fieldState.invalid &&
|
|
(fieldState.isDirty || fieldState.isTouched) &&
|
|
selectedValues.length > 0;
|
|
|
|
// A11y ids
|
|
const describedById = description ? `${name}-desc` : undefined;
|
|
const errorId = fieldState.error ? `${name}-err` : undefined;
|
|
|
|
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
|
|
const [isAnimating, setIsAnimating] = React.useState(false);
|
|
|
|
// Agrupar opciones
|
|
const grouped = options.reduce<Record<string, MultiSelectFieldOptionType[]>>((acc, item) => {
|
|
const key = item.group || "";
|
|
if (!acc[key]) acc[key] = [];
|
|
acc[key].push(item);
|
|
return acc;
|
|
}, {});
|
|
|
|
const emitChange = (values: string[]) => {
|
|
field.onChange(values);
|
|
onValueChange?.(values);
|
|
};
|
|
|
|
const toggleOption = (option: string) => {
|
|
if (onValidateOption && !onValidateOption(option)) {
|
|
console.warn(`Option "${option}" is not valid.`);
|
|
return;
|
|
}
|
|
const next = selectedValues.includes(option)
|
|
? selectedValues.filter((v) => v !== option)
|
|
: [...selectedValues, option];
|
|
emitChange(next);
|
|
};
|
|
|
|
const handleClear = () => emitChange([]);
|
|
const clearExtraOptions = () => emitChange(selectedValues.slice(0, maxCount));
|
|
|
|
const toggleAll = () => {
|
|
if (selectedValues.length === options.length) {
|
|
handleClear();
|
|
} else {
|
|
emitChange(options.map((o) => o.value));
|
|
}
|
|
};
|
|
|
|
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (event.key === "Enter") setIsPopoverOpen(true);
|
|
else if (event.key === "Backspace" && !event.currentTarget.value) {
|
|
const next = selectedValues.slice(0, -1);
|
|
emitChange(next);
|
|
}
|
|
};
|
|
|
|
const buttonAriaDescribedBy = cn(describedById, errorId);
|
|
|
|
return (
|
|
<FormItem className='space-y-0'>
|
|
{label && (
|
|
<div className='mb-1 flex items-center gap-2'>
|
|
<FormLabel className='m-0'>{label}</FormLabel>
|
|
{required && <span className='text-xs text-destructive'>•</span>}
|
|
{fieldState.isDirty && (
|
|
<span className='text-[10px] text-muted-foreground'>(modificado)</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<FormControl>
|
|
<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
ref={ref}
|
|
type='button'
|
|
{...buttonProps}
|
|
disabled={disabled}
|
|
onClick={() => setIsPopoverOpen((p) => !p)}
|
|
aria-invalid={invalid || undefined}
|
|
aria-describedby={buttonAriaDescribedBy}
|
|
aria-errormessage={errorId}
|
|
aria-busy={(showValidatingSpinner && isValidating) || undefined}
|
|
className={cn(
|
|
"flex w-full min-h-10 h-auto items-center justify-between rounded-md border bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto p-1",
|
|
invalid && "border-destructive",
|
|
valid && showSuccessWhenValid && "border-green-500",
|
|
className
|
|
)}
|
|
>
|
|
{/* Contenido del trigger */}
|
|
{selectedValues.length > 0 ? (
|
|
<div className='flex w-full items-center justify-between'>
|
|
<div className='flex flex-wrap items-center'>
|
|
{selectedValues.slice(0, maxCount).map((value) => {
|
|
const option = options.find((o) => o.value === value);
|
|
const Icon = option?.icon;
|
|
return (
|
|
<Badge
|
|
key={value}
|
|
className={cn(
|
|
isAnimating ? "animate-bounce" : "",
|
|
multiSelectFieldVariants({ variant })
|
|
)}
|
|
style={{ animationDuration: `${animation}s` }}
|
|
>
|
|
{Icon && <Icon className='mr-2 h-4 w-4' />}
|
|
{option?.label}
|
|
</Badge>
|
|
);
|
|
})}
|
|
{selectedValues.length > maxCount && (
|
|
<Badge
|
|
className={cn(
|
|
"bg-primary text-foreground border-foreground/1 hover:bg-primary",
|
|
isAnimating ? "animate-bounce" : "",
|
|
multiSelectFieldVariants({ variant })
|
|
)}
|
|
style={{ animationDuration: `${animation}s` }}
|
|
>
|
|
{`+ ${selectedValues.length - maxCount} more`}
|
|
<XCircleIcon
|
|
className='ml-2 h-4 w-4 cursor-pointer'
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
clearExtraOptions();
|
|
}}
|
|
/>
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className='flex items-center gap-2'>
|
|
{showValidatingSpinner && isValidating && (
|
|
<Loader2Icon className='h-4 w-4 animate-spin' />
|
|
)}
|
|
{showSuccessWhenValid && valid && !isValidating && !invalid && (
|
|
<CheckCircle2Icon className='h-4 w-4 text-green-600' />
|
|
)}
|
|
<Separator orientation='vertical' className='flex h-full min-h-6' />
|
|
<ChevronDownIcon className='mx-2 h-4 cursor-pointer text-muted-foreground' />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className='mx-auto flex w-full items-center justify-between'>
|
|
<span className='mx-3 text-sm text-muted-foreground'>
|
|
{placeholder || t("components.multi_select.select_options")}
|
|
</span>
|
|
|
|
<div className='flex items-center gap-2'>
|
|
{showValidatingSpinner && isValidating && (
|
|
<Loader2Icon className='h-4 w-4 animate-spin' />
|
|
)}
|
|
{showSuccessWhenValid && valid && !isValidating && !invalid && (
|
|
<CheckCircle2Icon className='h-4 w-4 text-green-600' />
|
|
)}
|
|
<ChevronDownIcon className='mx-2 h-4 cursor-pointer text-muted-foreground' />
|
|
</div>
|
|
</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) => (
|
|
<CommandGroup key={`group-${group || "ungrouped"}`} heading={group}>
|
|
{grouped[group].map((option) => {
|
|
const isSelected = selectedValues.includes(option.value);
|
|
const Icon = option.icon;
|
|
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" : "opacity-50 [&_svg]:invisible"
|
|
)}
|
|
>
|
|
<CheckIcon
|
|
className={cn(
|
|
"h-4 w-4",
|
|
isSelected ? "text-primary-foreground" : ""
|
|
)}
|
|
/>
|
|
</div>
|
|
{Icon && <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 cursor-pointer justify-center'
|
|
>
|
|
{t("components.multi_select.clear_selection")}
|
|
</CommandItem>
|
|
<Separator orientation='vertical' className='flex h-full min-h-6' />
|
|
</>
|
|
)}
|
|
<CommandItem
|
|
onSelect={() => setIsPopoverOpen(false)}
|
|
className='flex-1 cursor-pointer justify-center'
|
|
>
|
|
{t("components.multi_select.close")}
|
|
</CommandItem>
|
|
</div>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
|
|
{animation! > 0 && selectedValues.length > 0 && (
|
|
<WandSparklesIcon
|
|
className={cn(
|
|
"my-2 h-3 w-3 cursor-pointer bg-background text-foreground",
|
|
isAnimating ? "" : "text-muted-foreground"
|
|
)}
|
|
onClick={() => setIsAnimating((s) => !s)}
|
|
/>
|
|
)}
|
|
</Popover>
|
|
</FormControl>
|
|
|
|
<div className='mt-1 flex items-start justify-between'>
|
|
<p
|
|
id={describedById}
|
|
className={cn("text-xs text-muted-foreground", !description && "invisible")}
|
|
>
|
|
{description || "\u00A0"}
|
|
</p>
|
|
</div>
|
|
|
|
<FormMessage id={errorId} />
|
|
</FormItem>
|
|
);
|
|
}
|
|
);
|
|
|
|
MultiSelectFieldInner.displayName = "MultiSelectField";
|
|
|
|
export const MultiSelectField = MultiSelectFieldInner as <T extends FieldValues>(
|
|
p: MultiSelectFieldProps<T> & { ref?: React.Ref<HTMLButtonElement> }
|
|
) => React.JSX.Element;
|