feat: enhance UX with clickable items and simplified structure (#5387)

🔧 (dropdownComponent/index.tsx): refactor dropdownComponent to improve code readability and remove unnecessary ShadTooltip component
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-30 16:39:14 -03:00 • committed by GitHub
commit eb120c116e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -131,31 +131,29 @@ export default function Dropdown({
<CommandEmpty>No values found.</CommandEmpty> <CommandEmpty>No values found.</CommandEmpty>
<CommandGroup defaultChecked={false}> <CommandGroup defaultChecked={false}>
{filteredOptions?.map((option, index) => ( {filteredOptions?.map((option, index) => (
<ShadTooltip key={index} delayDuration={700} content={option}> <div>
<div> <CommandItem
<CommandItem value={option}
value={option} onSelect={(currentValue) => {
onSelect={(currentValue) => { onSelect(currentValue);
onSelect(currentValue); setOpen(false);
setOpen(false); }}
}} className="items-center overflow-hidden truncate hover:cursor-pointer"
className="items-center overflow-hidden truncate" data-testid={`${option}-${index}-option`}
data-testid={`${option}-${index}-option`} >
> {customValue === option && (
{customValue === option && ( <span className="text-muted-foreground">Text:&nbsp;</span>
<span className="text-muted-foreground">Text:&nbsp;</span> )}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value === option ? "opacity-100" : "opacity-0",
)} )}
<span className="truncate">{option}</span> />
<ForwardedIconComponent </CommandItem>
name="Check" </div>
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value === option ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
</div>
</ShadTooltip>
))} ))}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>