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

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "@reactive-resume/source", "name": "@reactive-resume/source",
"description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.", "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", "license": "MIT",
"private": true, "private": true,
"author": { "author": {