Spaces:
Build error
Build error
File size: 2,183 Bytes
b59aa07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import { Autocomplete, AutocompleteItem } from "@heroui/react";
import { ReactNode } from "react";
import { OptionalTag } from "./optional-tag";
import { cn } from "#/utils/utils";
interface SettingsDropdownInputProps {
testId: string;
name: string;
items: { key: React.Key; label: string }[];
label?: ReactNode;
wrapperClassName?: string;
placeholder?: string;
showOptionalTag?: boolean;
isDisabled?: boolean;
defaultSelectedKey?: string;
selectedKey?: string;
isClearable?: boolean;
onSelectionChange?: (key: React.Key | null) => void;
onInputChange?: (value: string) => void;
defaultFilter?: (textValue: string, inputValue: string) => boolean;
}
export function SettingsDropdownInput({
testId,
label,
wrapperClassName,
name,
items,
placeholder,
showOptionalTag,
isDisabled,
defaultSelectedKey,
selectedKey,
isClearable,
onSelectionChange,
onInputChange,
defaultFilter,
}: SettingsDropdownInputProps) {
return (
<label className={cn("flex flex-col gap-2.5", wrapperClassName)}>
{label && (
<div className="flex items-center gap-1">
<span className="text-sm">{label}</span>
{showOptionalTag && <OptionalTag />}
</div>
)}
<Autocomplete
aria-label={typeof label === "string" ? label : name}
data-testid={testId}
name={name}
defaultItems={items}
defaultSelectedKey={defaultSelectedKey}
selectedKey={selectedKey}
onSelectionChange={onSelectionChange}
onInputChange={onInputChange}
isClearable={isClearable}
isDisabled={isDisabled}
placeholder={placeholder}
className="w-full"
classNames={{
popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
}}
inputProps={{
classNames: {
inputWrapper:
"bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
},
}}
defaultFilter={defaultFilter}
>
{(item) => (
<AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>
)}
</Autocomplete>
</label>
);
}
|