You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
13 KiB
346 lines
13 KiB
import * as React from 'react' |
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' |
|
import { Check, ChevronDown, ChevronRight, ChevronUp, Circle } from 'lucide-react' |
|
|
|
import { cn } from '@/lib/utils' |
|
|
|
const DropdownMenu = DropdownMenuPrimitive.Root |
|
|
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger |
|
|
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group |
|
|
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal |
|
|
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub |
|
|
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup |
|
|
|
const DropdownMenuSubTrigger = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { |
|
inset?: boolean |
|
} |
|
>(({ className, inset, children, ...props }, ref) => ( |
|
<DropdownMenuPrimitive.SubTrigger |
|
ref={ref} |
|
className={cn( |
|
'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', |
|
inset && 'pl-8', |
|
className |
|
)} |
|
{...props} |
|
> |
|
{children} |
|
<ChevronRight className="ml-auto" /> |
|
</DropdownMenuPrimitive.SubTrigger> |
|
)) |
|
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName |
|
|
|
const DropdownMenuSubContent = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & { |
|
showScrollButtons?: boolean |
|
} |
|
>(({ className, showScrollButtons = true, ...props }, ref) => { |
|
const [canScrollUp, setCanScrollUp] = React.useState(false) |
|
const [canScrollDown, setCanScrollDown] = React.useState(false) |
|
const contentRef = React.useRef<HTMLDivElement>(null) |
|
const scrollAreaRef = React.useRef<HTMLDivElement>(null) |
|
const lastScrollStateRef = React.useRef({ canScrollUp: false, canScrollDown: false }) |
|
|
|
React.useImperativeHandle(ref, () => contentRef.current!) |
|
|
|
const checkScrollability = React.useCallback(() => { |
|
const scrollArea = scrollAreaRef.current |
|
if (!scrollArea) return |
|
|
|
const newCanScrollUp = scrollArea.scrollTop > 0 |
|
const newCanScrollDown = scrollArea.scrollTop < scrollArea.scrollHeight - scrollArea.clientHeight |
|
|
|
// Only update state if values actually changed to prevent infinite loops |
|
if (newCanScrollUp !== lastScrollStateRef.current.canScrollUp) { |
|
lastScrollStateRef.current.canScrollUp = newCanScrollUp |
|
setCanScrollUp(newCanScrollUp) |
|
} |
|
if (newCanScrollDown !== lastScrollStateRef.current.canScrollDown) { |
|
lastScrollStateRef.current.canScrollDown = newCanScrollDown |
|
setCanScrollDown(newCanScrollDown) |
|
} |
|
}, []) |
|
|
|
const scrollUp = () => { |
|
scrollAreaRef.current?.scroll({ top: 0, behavior: 'smooth' }) |
|
} |
|
|
|
const scrollDown = () => { |
|
scrollAreaRef.current?.scroll({ |
|
top: scrollAreaRef.current.scrollHeight, |
|
behavior: 'smooth' |
|
}) |
|
} |
|
|
|
return ( |
|
<DropdownMenuPrimitive.Portal> |
|
<DropdownMenuPrimitive.SubContent |
|
ref={contentRef} |
|
className={cn( |
|
'relative z-[100] min-w-52 overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' |
|
)} |
|
onAnimationEnd={() => { |
|
if (showScrollButtons) { |
|
checkScrollability() |
|
} |
|
}} |
|
collisionPadding={10} |
|
{...props} |
|
> |
|
{showScrollButtons && canScrollUp && ( |
|
<div className="absolute top-0 inset-x-0 z-10 flex items-center justify-center bg-popover"> |
|
<button |
|
onClick={scrollUp} |
|
onMouseEnter={scrollUp} |
|
className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors" |
|
type="button" |
|
> |
|
<ChevronUp className="h-4 w-4" /> |
|
</button> |
|
</div> |
|
)} |
|
|
|
<div |
|
ref={scrollAreaRef} |
|
className={cn('p-1 overflow-y-auto', className)} |
|
onScroll={checkScrollability} |
|
> |
|
{props.children} |
|
</div> |
|
|
|
{showScrollButtons && canScrollDown && ( |
|
<div className="absolute bottom-0 inset-x-0 flex items-center justify-center bg-popover"> |
|
<button |
|
onClick={scrollDown} |
|
onMouseEnter={scrollDown} |
|
className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors" |
|
type="button" |
|
> |
|
<ChevronDown className="h-4 w-4" /> |
|
</button> |
|
</div> |
|
)} |
|
</DropdownMenuPrimitive.SubContent> |
|
</DropdownMenuPrimitive.Portal> |
|
) |
|
}) |
|
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName |
|
|
|
const DropdownMenuContent = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & { |
|
showScrollButtons?: boolean |
|
portalContainer?: HTMLElement | null |
|
} |
|
>(({ className, sideOffset = 4, showScrollButtons = false, portalContainer, ...props }, ref) => { |
|
const [canScrollUp, setCanScrollUp] = React.useState(false) |
|
const [canScrollDown, setCanScrollDown] = React.useState(false) |
|
const contentRef = React.useRef<HTMLDivElement>(null) |
|
const scrollAreaRef = React.useRef<HTMLDivElement>(null) |
|
const lastScrollStateRef = React.useRef({ canScrollUp: false, canScrollDown: false }) |
|
|
|
React.useImperativeHandle(ref, () => contentRef.current!) |
|
|
|
const checkScrollability = React.useCallback(() => { |
|
const scrollArea = scrollAreaRef.current |
|
if (!scrollArea) return |
|
|
|
const newCanScrollUp = scrollArea.scrollTop > 0 |
|
const newCanScrollDown = scrollArea.scrollTop < scrollArea.scrollHeight - scrollArea.clientHeight |
|
|
|
// Only update state if values actually changed to prevent infinite loops |
|
if (newCanScrollUp !== lastScrollStateRef.current.canScrollUp) { |
|
lastScrollStateRef.current.canScrollUp = newCanScrollUp |
|
setCanScrollUp(newCanScrollUp) |
|
} |
|
if (newCanScrollDown !== lastScrollStateRef.current.canScrollDown) { |
|
lastScrollStateRef.current.canScrollDown = newCanScrollDown |
|
setCanScrollDown(newCanScrollDown) |
|
} |
|
}, []) |
|
|
|
const scrollUp = () => { |
|
scrollAreaRef.current?.scroll({ top: 0, behavior: 'smooth' }) |
|
} |
|
|
|
const scrollDown = () => { |
|
scrollAreaRef.current?.scroll({ |
|
top: scrollAreaRef.current.scrollHeight, |
|
behavior: 'smooth' |
|
}) |
|
} |
|
|
|
return ( |
|
<DropdownMenuPrimitive.Portal container={portalContainer}> |
|
<DropdownMenuPrimitive.Content |
|
ref={contentRef} |
|
sideOffset={sideOffset} |
|
className={cn( |
|
'relative z-[100] min-w-52 overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' |
|
)} |
|
onAnimationEnd={() => { |
|
if (showScrollButtons) { |
|
checkScrollability() |
|
} |
|
}} |
|
collisionPadding={10} |
|
{...props} |
|
> |
|
{showScrollButtons && canScrollUp && ( |
|
<div className="absolute top-0 inset-x-0 z-10 flex items-center justify-center bg-popover"> |
|
<button |
|
onClick={scrollUp} |
|
onMouseEnter={scrollUp} |
|
className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors" |
|
type="button" |
|
> |
|
<ChevronUp className="h-4 w-4" /> |
|
</button> |
|
</div> |
|
)} |
|
|
|
<div |
|
ref={scrollAreaRef} |
|
className={cn('p-1 overflow-y-auto', className)} |
|
onScroll={checkScrollability} |
|
> |
|
{props.children} |
|
</div> |
|
|
|
{showScrollButtons && canScrollDown && ( |
|
<div className="absolute bottom-0 inset-x-0 flex items-center justify-center bg-popover"> |
|
<button |
|
onClick={scrollDown} |
|
onMouseEnter={scrollDown} |
|
className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors" |
|
type="button" |
|
> |
|
<ChevronDown className="h-4 w-4" /> |
|
</button> |
|
</div> |
|
)} |
|
</DropdownMenuPrimitive.Content> |
|
</DropdownMenuPrimitive.Portal> |
|
) |
|
}) |
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName |
|
|
|
const DropdownMenuItem = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { |
|
inset?: boolean |
|
} |
|
>(({ className, inset, ...props }, ref) => ( |
|
<DropdownMenuPrimitive.Item |
|
ref={ref} |
|
className={cn( |
|
'relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-md', |
|
inset && 'pl-8', |
|
className |
|
)} |
|
{...props} |
|
/> |
|
)) |
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName |
|
|
|
const DropdownMenuCheckboxItem = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> |
|
>(({ className, children, checked, ...props }, ref) => ( |
|
<DropdownMenuPrimitive.CheckboxItem |
|
ref={ref} |
|
className={cn( |
|
'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', |
|
className |
|
)} |
|
checked={checked} |
|
{...props} |
|
> |
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
|
<DropdownMenuPrimitive.ItemIndicator> |
|
<Check className="h-4 w-4" /> |
|
</DropdownMenuPrimitive.ItemIndicator> |
|
</span> |
|
{children} |
|
</DropdownMenuPrimitive.CheckboxItem> |
|
)) |
|
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName |
|
|
|
const DropdownMenuRadioItem = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> |
|
>(({ className, children, ...props }, ref) => ( |
|
<DropdownMenuPrimitive.RadioItem |
|
ref={ref} |
|
className={cn( |
|
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', |
|
className |
|
)} |
|
{...props} |
|
> |
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
|
<DropdownMenuPrimitive.ItemIndicator> |
|
<Circle className="h-2 w-2 fill-current" /> |
|
</DropdownMenuPrimitive.ItemIndicator> |
|
</span> |
|
{children} |
|
</DropdownMenuPrimitive.RadioItem> |
|
)) |
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName |
|
|
|
const DropdownMenuLabel = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { |
|
inset?: boolean |
|
} |
|
>(({ className, inset, ...props }, ref) => ( |
|
<DropdownMenuPrimitive.Label |
|
ref={ref} |
|
className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} |
|
{...props} |
|
/> |
|
)) |
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName |
|
|
|
const DropdownMenuSeparator = React.forwardRef< |
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>, |
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> |
|
>(({ className, ...props }, ref) => ( |
|
<DropdownMenuPrimitive.Separator |
|
ref={ref} |
|
className={cn('-mx-1 my-1 h-px bg-muted', className)} |
|
{...props} |
|
/> |
|
)) |
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName |
|
|
|
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => { |
|
return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} /> |
|
} |
|
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' |
|
|
|
export { |
|
DropdownMenu, |
|
DropdownMenuTrigger, |
|
DropdownMenuContent, |
|
DropdownMenuItem, |
|
DropdownMenuCheckboxItem, |
|
DropdownMenuRadioItem, |
|
DropdownMenuLabel, |
|
DropdownMenuSeparator, |
|
DropdownMenuShortcut, |
|
DropdownMenuGroup, |
|
DropdownMenuPortal, |
|
DropdownMenuSub, |
|
DropdownMenuSubContent, |
|
DropdownMenuSubTrigger, |
|
DropdownMenuRadioGroup |
|
}
|
|
|