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:
parent
870aedf74e
commit
eb120c116e
1 changed files with 22 additions and 24 deletions
|
|
@ -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: </span>
|
||||||
<span className="text-muted-foreground">Text: </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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue