161 lines
4.5 KiB
TypeScript
161 lines
4.5 KiB
TypeScript
import { useRequest, useToggle } from 'ahooks'
|
|
import { CheckIcon, UserIcon, XIcon, AlertTriangleIcon } from 'lucide-react'
|
|
import { formatCPF } from '@brazilian-utils/brazilian-utils'
|
|
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput
|
|
} from '@repo/ui/components/ui/input-group'
|
|
import { initials, cn } from '@repo/ui/lib/utils'
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger
|
|
} from '@repo/ui/components/ui/popover'
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList
|
|
} from '@repo/ui/components/ui/command'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
|
|
interface AsyncComboboxProps {
|
|
value: any
|
|
title: string
|
|
onChange: (props: any) => void
|
|
onSearch: (search: string) => Promise<any[]>
|
|
error?: any
|
|
}
|
|
export function AsyncCombobox({
|
|
title,
|
|
value,
|
|
onSearch,
|
|
onChange,
|
|
error
|
|
}: AsyncComboboxProps) {
|
|
const [open, { set }] = useToggle()
|
|
const {
|
|
data = [],
|
|
loading,
|
|
runAsync
|
|
} = useRequest(onSearch, {
|
|
manual: true,
|
|
debounceWait: 300,
|
|
defaultParams: ['']
|
|
})
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={set}>
|
|
<PopoverTrigger asChild>
|
|
<InputGroup>
|
|
<InputGroupInput
|
|
readOnly
|
|
value={value?.name || ''}
|
|
placeholder={title}
|
|
className="cursor-pointer"
|
|
autoComplete="off"
|
|
aria-invalid={!!error}
|
|
/>
|
|
<InputGroupAddon>
|
|
<UserIcon />
|
|
</InputGroupAddon>
|
|
|
|
{value && (
|
|
<InputGroupAddon align="inline-end" className="mr-0">
|
|
<Button
|
|
variant="link"
|
|
size="icon-sm"
|
|
className="cursor-pointer text-black dark:text-white"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
onChange?.(undefined)
|
|
set(false)
|
|
}}
|
|
>
|
|
<XIcon />
|
|
</Button>
|
|
</InputGroupAddon>
|
|
)}
|
|
|
|
{loading && (
|
|
<InputGroupAddon align="inline-end">
|
|
<Spinner />
|
|
</InputGroupAddon>
|
|
)}
|
|
</InputGroup>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent className="lg:w-84 p-0" align="start">
|
|
<Command shouldFilter={false}>
|
|
<CommandInput
|
|
placeholder={title}
|
|
autoComplete="off"
|
|
onValueChange={runAsync}
|
|
/>
|
|
|
|
<CommandList>
|
|
<CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
|
|
|
|
<CommandGroup>
|
|
{data.map(({ id, name, email, cpf }) => (
|
|
<CommandItem
|
|
key={id}
|
|
value={id}
|
|
className="cursor-pointer"
|
|
disabled={!cpf}
|
|
onSelect={() => {
|
|
onChange?.({ id, name, email, cpf })
|
|
set(false)
|
|
}}
|
|
>
|
|
<div className="flex gap-2.5 items-start">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback className="border">
|
|
{initials(name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{email}</Abbr>
|
|
</li>
|
|
|
|
{cpf ? (
|
|
<li className="text-muted-foreground text-sm">
|
|
{formatCPF(cpf)}
|
|
</li>
|
|
) : (
|
|
<li className="flex gap-1 items-center text-red-400">
|
|
<AlertTriangleIcon className="text-red-400" />
|
|
Inelegível
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
|
|
<CheckIcon
|
|
className={cn(
|
|
'ml-auto',
|
|
value?.id === id ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|