import * as ContextMenuPrimitive from '@rn-primitives/context-menu';
import * as React from 'react';
import { Check } from '~/lib/icons/Check';
import { ChevronDown } from '~/lib/icons/ChevronDown';
import { ChevronRight } from '~/lib/icons/ChevronRight';
import { ChevronUp } from '~/lib/icons/ChevronUp';
import { cn } from '~/lib/utils';
import { TextClassContext } from '~/components/ui/text';
const ContextMenu = ContextMenuPrimitive.Root;
const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
const ContextMenuGroup = ContextMenuPrimitive.Group;
const ContextMenuSub = ContextMenuPrimitive.Sub;
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
const ContextMenuSubTrigger = React.forwardRef<
ContextMenuPrimitive.SubTriggerRef,
ContextMenuPrimitive.SubTriggerProps & {
>(({ className, inset, children, ...props }, ref) => {
const { open } = ContextMenuPrimitive.useSubContext();
const Icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
<TextClassContext.Provider
'select-none text-sm native:text-lg text-primary',
open && 'native:text-accent-foreground'
<ContextMenuPrimitive.SubTrigger
'flex flex-row web:cursor-default web:select-none items-center gap-2 web:focus:bg-accent active:bg-accent web:hover:bg-accent rounded-sm px-2 py-1.5 native:py-2 web:outline-none',
<Icon size={18} className='ml-auto text-foreground' />
</ContextMenuPrimitive.SubTrigger>
</TextClassContext.Provider>
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
const ContextMenuSubContent = React.forwardRef<
ContextMenuPrimitive.SubContentRef,
ContextMenuPrimitive.SubContentProps
>(({ className, ...props }, ref) => {
const { open } = ContextMenuPrimitive.useSubContext();
<ContextMenuPrimitive.SubContent
'z-50 min-w-[8rem] overflow-hidden rounded-md border mt-1 border-border bg-popover p-1 shadow-md shadow-foreground/5 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',
? 'web:animate-in web:fade-in-0 web:zoom-in-95'
: 'web:animate-out web:fade-out-0 web:zoom-out',
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
const ContextMenuContent = React.forwardRef<
ContextMenuPrimitive.ContentRef,
ContextMenuPrimitive.ContentProps & {
overlayStyle?: StyleProp<ViewStyle>;
overlayClassName?: string;
>(({ className, overlayClassName, overlayStyle, portalHost, ...props }, ref) => {
const { open } = ContextMenuPrimitive.useRootContext();
<ContextMenuPrimitive.Portal hostName={portalHost}>
<ContextMenuPrimitive.Overlay
Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
? StyleSheet.absoluteFill
className={overlayClassName}
<ContextMenuPrimitive.Content
'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5 web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2',
? 'web:animate-in web:fade-in-0 web:zoom-in-95'
: 'web:animate-out web:fade-out-0 web:zoom-out-95',
</ContextMenuPrimitive.Overlay>
</ContextMenuPrimitive.Portal>
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
const ContextMenuItem = React.forwardRef<
ContextMenuPrimitive.ItemRef,
ContextMenuPrimitive.ItemProps & {
>(({ className, inset, ...props }, ref) => (
<TextClassContext.Provider value='select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground'>
<ContextMenuPrimitive.Item
'relative flex flex-row web:cursor-default items-center gap-2 rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group',
props.disabled && 'opacity-50 web:pointer-events-none',
</TextClassContext.Provider>
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
const ContextMenuCheckboxItem = React.forwardRef<
ContextMenuPrimitive.CheckboxItemRef,
ContextMenuPrimitive.CheckboxItemProps
>(({ className, children, ...props }, ref) => (
<ContextMenuPrimitive.CheckboxItem
'relative flex flex-row web:cursor-default items-center web:group rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
props.disabled && 'web:pointer-events-none opacity-50',
<View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
<ContextMenuPrimitive.ItemIndicator>
<Check size={14} strokeWidth={3} className='text-foreground' />
</ContextMenuPrimitive.ItemIndicator>
</ContextMenuPrimitive.CheckboxItem>
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
const ContextMenuRadioItem = React.forwardRef<
ContextMenuPrimitive.RadioItemRef,
ContextMenuPrimitive.RadioItemProps
>(({ className, children, ...props }, ref) => (
<ContextMenuPrimitive.RadioItem
'relative flex flex-row web:cursor-default web:group items-center rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
props.disabled && 'web:pointer-events-none opacity-50',
<View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
<ContextMenuPrimitive.ItemIndicator>
<View className='bg-foreground h-2 w-2 rounded-full' />
</ContextMenuPrimitive.ItemIndicator>
</ContextMenuPrimitive.RadioItem>
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
const ContextMenuLabel = React.forwardRef<
ContextMenuPrimitive.LabelRef,
ContextMenuPrimitive.LabelProps & {
>(({ className, inset, ...props }, ref) => (
<ContextMenuPrimitive.Label
'px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default',
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
const ContextMenuSeparator = React.forwardRef<
ContextMenuPrimitive.SeparatorRef,
ContextMenuPrimitive.SeparatorProps
>(({ className, ...props }, ref) => (
<ContextMenuPrimitive.Separator
className={cn('-mx-1 my-1 h-px bg-border', className)}
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
const ContextMenuShortcut = ({ className, ...props }: TextProps) => {
'ml-auto text-xs native:text-sm tracking-widest text-muted-foreground',
ContextMenuShortcut.displayName = 'ContextMenuShortcut';