File size: 2,454 Bytes
3201ca6 | 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 79 80 81 82 83 84 85 86 87 88 89 90 | import React from "react";
import { Divider } from "#/ui/divider";
import { cn } from "#/utils/utils";
import { DropdownOption } from "./types";
import {
dropdownMenuListClassName,
dropdownMenuRowClassName,
dropdownMenuRowIconWrapperClassName,
} from "#/utils/dropdown-classes";
interface DropdownMenuProps {
isOpen: boolean;
filteredOptions: DropdownOption[];
selectedItem: DropdownOption | null;
emptyMessage: string;
getMenuProps: (props?: object) => object;
getItemProps: (props: {
item: DropdownOption;
index: number;
className?: string;
}) => object;
footer?: React.ReactNode;
openUpward?: boolean;
fitContent?: boolean;
}
export function DropdownMenu({
isOpen,
filteredOptions,
selectedItem,
emptyMessage,
getMenuProps,
getItemProps,
footer,
openUpward = false,
fitContent = false,
}: DropdownMenuProps) {
return (
<div
className={cn(
"absolute z-50 overflow-hidden text-white",
fitContent ? "min-w-full w-max" : "w-full",
openUpward ? "bottom-full mb-1" : "mt-1",
"bg-tertiary rounded-[6px] context-menu-box-shadow p-1",
"max-h-60 overflow-auto",
!isOpen && "hidden",
)}
>
<ul
{...getMenuProps({ className: cn("p-0", dropdownMenuListClassName) })}
>
{isOpen && filteredOptions.length === 0 && (
<li className="px-2 py-2 text-sm text-[var(--oh-muted)] italic">
{emptyMessage}
</li>
)}
{isOpen &&
filteredOptions.map((option, index) => (
<li
key={option.value}
{...getItemProps({
item: option,
index,
className: cn(
dropdownMenuRowClassName,
"focus:outline-none",
selectedItem?.value === option.value &&
"bg-[var(--oh-interactive-selected)] text-white",
),
})}
>
{option.prefix ? (
<span className={dropdownMenuRowIconWrapperClassName}>
{option.prefix}
</span>
) : null}
<span className="min-w-0 truncate">{option.label}</span>
</li>
))}
</ul>
{isOpen && footer ? (
<>
<Divider inset="menu" />
<div className="p-0">{footer}</div>
</>
) : null}
</div>
);
}
|