Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +10:00
Code Issues Packages Projects Releases Wiki Activity

add CommandList to Combobox component

Browse Source
This commit is contained in:
Amruth Pillai
2024-03-11 09:54:10 +01:00
parent 32445a5cd7
commit 6405102cab
2 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
libs/ui/src/components/combobox.tsx
View File

@ -3,9 +3,15 @@ import { cn } from "@reactive-resume/utils";
import { forwardRef, useState } from "react";
import { Button } from "./button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "./command";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "./command";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
import { ScrollArea } from "./scroll-area";
export interface ComboboxOption {
value: string;
@ -93,43 +99,41 @@ export const Combobox = forwardRef(
ref={ref}
placeholder={props.searchPlaceholder ?? "Search for an option"}
/>
<CommandEmpty>{props.emptyText ?? "No results found"}</CommandEmpty>
<CommandGroup>
<ScrollArea orientation="vertical">
<div className="max-h-60">
{props.options.map((option) => (
<CommandItem
key={option.value}
value={option.value.toLowerCase().trim()}
onSelect={(selectedValue) => {
const option = props.options.find(
(option) => option.value.toLowerCase().trim() === selectedValue,
);
<CommandList>
<CommandEmpty>{props.emptyText ?? "No results found"}</CommandEmpty>
<CommandGroup>
{props.options.map((option) => (
<CommandItem
key={option.value}
value={option.value.toLowerCase().trim()}
onSelect={(selectedValue) => {
const option = props.options.find(
(option) => option.value.toLowerCase().trim() === selectedValue,
);
if (!option) return null;
if (!option) return null;
if (props.multiple) {
handleMultipleSelect(props, option);
} else {
handleSingleSelect(props, option);
if (props.multiple) {
handleMultipleSelect(props, option);
} else {
handleSingleSelect(props, option);
setOpen(false);
}
}}
>
<Check
className={cn(
"mr-2 size-4 opacity-0",
!props.multiple && props.value === option.value && "opacity-100",
props.multiple && props.value?.includes(option.value) && "opacity-100",
)}
/>
{option.label}
</CommandItem>
))}
</div>
</ScrollArea>
</CommandGroup>
setOpen(false);
}
}}
>
<Check
className={cn(
"mr-2 size-4 opacity-0",
!props.multiple && props.value === option.value && "opacity-100",
props.multiple && props.value?.includes(option.value) && "opacity-100",
)}
/>
{option.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "@reactive-resume/source",
"description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.",
"version": "4.0.7",
"version": "4.0.8",
"license": "MIT",
"private": true,
"author": {