fix combobox-advanced
This commit is contained in:
@@ -5,6 +5,21 @@ import { cn } from '@/utils/cn';
|
|||||||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
||||||
import { Check } from 'lucide-react';
|
import { Check } from 'lucide-react';
|
||||||
|
|
||||||
|
export const DumpCheckbox = ({ checked }: { checked: boolean }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'block h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
checked && 'bg-primary text-primary-foreground'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center text-current">
|
||||||
|
{checked && <Check className="h-4 w-4" />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const Checkbox = React.forwardRef<
|
const Checkbox = React.forwardRef<
|
||||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import VirtualList from 'rc-virtual-list';
|
|||||||
import { useOnClickOutside } from 'usehooks-ts';
|
import { useOnClickOutside } from 'usehooks-ts';
|
||||||
|
|
||||||
import { Button } from './button';
|
import { Button } from './button';
|
||||||
import { Checkbox } from './checkbox';
|
import { Checkbox, DumpCheckbox } from './checkbox';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from './popover';
|
import { Popover, PopoverContent, PopoverTrigger } from './popover';
|
||||||
|
|
||||||
type IValue = any;
|
type IValue = any;
|
||||||
@@ -61,7 +61,7 @@ export function ComboboxAdvanced({
|
|||||||
}}
|
}}
|
||||||
className={'flex cursor-pointer items-center gap-2'}
|
className={'flex cursor-pointer items-center gap-2'}
|
||||||
>
|
>
|
||||||
<Checkbox checked={checked} className="pointer-events-none" />
|
<DumpCheckbox checked={checked} />
|
||||||
{item?.label ?? item?.value}
|
{item?.label ?? item?.value}
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
);
|
);
|
||||||
@@ -99,7 +99,7 @@ export function ComboboxAdvanced({
|
|||||||
<Button
|
<Button
|
||||||
variant={'outline'}
|
variant={'outline'}
|
||||||
onClick={() => setOpen((prev) => !prev)}
|
onClick={() => setOpen((prev) => !prev)}
|
||||||
className={cn('h-min-10 h-auto', className)}
|
className={cn('h-auto min-h-10 py-2', className)}
|
||||||
>
|
>
|
||||||
<div className="flex w-full flex-wrap gap-1">
|
<div className="flex w-full flex-wrap gap-1">
|
||||||
{value.length === 0 && placeholder}
|
{value.length === 0 && placeholder}
|
||||||
|
|||||||
Reference in New Issue
Block a user