@coze-arch/cli 0.0.1-beta.5 → 0.0.2

package/lib/__templates__/taro/src/components/ui/context-menu.tsx

@@ -0,0 +1,614 @@
+import * as React from "react"
+import { View, ScrollView } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { Check, ChevronRight, Circle } from "lucide-react-taro"
+import { cn } from "@/lib/utils"
+import { isH5 } from "@/lib/platform"
+import { computePosition, getRectById, getViewport } from "@/lib/measure"
+import { Portal } from "@/components/ui/portal"
+
+const ContextMenuContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  position: { x: number; y: number }
+  setPosition: (pos: { x: number; y: number }) => void
+  activeSubId?: string | null
+  setActiveSubId: (id: string | null) => void
+} | null>(null)
+
+interface ContextMenuProps {
+  children: React.ReactNode
+  onOpenChange?: (open: boolean) => void
+}
+
+const ContextMenu = ({ children, onOpenChange }: ContextMenuProps) => {
+  const [open, setOpen] = React.useState(false)
+  const [position, setPosition] = React.useState({ x: 0, y: 0 })
+  const [activeSubId, setActiveSubId] = React.useState<string | null>(null)
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen)
+    if (!newOpen) setActiveSubId(null)
+    onOpenChange?.(newOpen)
+  }
+
+  return (
+    <ContextMenuContext.Provider
+      value={{ open, onOpenChange: handleOpenChange, position, setPosition, activeSubId, setActiveSubId }}
+    >
+      {children}
+    </ContextMenuContext.Provider>
+  )
+}
+
+const ContextMenuTrigger = React.forwardRef<
+  any,
+  React.ComponentPropsWithoutRef<typeof View> & { disabled?: boolean }
+>(({ className, children, disabled, ...props }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+  const touchPos = React.useRef({ x: 0, y: 0 })
+
+  const handleTrigger = (x: number, y: number) => {
+    if (disabled) return
+    context?.setPosition({ x, y })
+    context?.onOpenChange?.(true)
+  }
+
+  if (isH5()) {
+    const { onLongPress: _onLongPress, onTouchStart: _onTouchStart, ...rest } = props as any
+    return (
+      <div
+        ref={ref}
+        className={className}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          handleTrigger(e.clientX, e.clientY)
+        }}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={className}
+      onTouchStart={(e) => {
+        const touch = (e as unknown as { touches?: Array<{ pageX: number; pageY: number }> }).touches?.[0]
+        if (!touch) return
+        touchPos.current = { x: touch.pageX, y: touch.pageY }
+      }}
+      onLongPress={(e) => {
+        e.stopPropagation()
+        handleTrigger(touchPos.current.x, touchPos.current.y)
+      }}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+ContextMenuTrigger.displayName = "ContextMenuTrigger"
+
+const ContextMenuGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={className} {...props} />
+))
+ContextMenuGroup.displayName = "ContextMenuGroup"
+
+const ContextMenuPortal = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>
+}
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, ...props }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+  const contentId = React.useRef(`context-menu-${Math.random().toString(36).slice(2, 10)}`)
+  const [adjustedPos, setAdjustedPos] = React.useState<{ x: number; y: number } | null>(null)
+
+  React.useEffect(() => {
+    if (!context?.open) {
+      setAdjustedPos(null)
+      return
+    }
+
+    let cancelled = false
+
+    const compute = async () => {
+      const { width: vw, height: vh } = getViewport()
+      let { x, y } = context.position
+
+      if (isH5() && typeof document !== "undefined") {
+        const el = document.getElementById(contentId.current)
+        const rect = el?.getBoundingClientRect()
+        if (rect) {
+          if (x + rect.width > vw) x = vw - rect.width - 8
+          if (y + rect.height > vh) y = vh - rect.height - 8
+        }
+        if (!cancelled) setAdjustedPos({ x, y })
+        return
+      }
+
+      const query = Taro.createSelectorQuery()
+      query
+        .select(`#${contentId.current}`)
+        .boundingClientRect((res) => {
+          if (cancelled) return
+          const rect = Array.isArray(res) ? res[0] : res
+          if (rect?.width) {
+            if (x + rect.width > vw) x = vw - rect.width - 8
+            if (y + rect.height > vh) y = vh - rect.height - 8
+          }
+          setAdjustedPos({ x, y })
+        })
+        .exec()
+    }
+
+    const raf = (() => {
+      if (typeof requestAnimationFrame !== "undefined") {
+        return requestAnimationFrame(() => compute())
+      }
+      return setTimeout(() => compute(), 0) as unknown as number
+    })()
+
+    return () => {
+      cancelled = true
+      if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(raf)
+      } else {
+        clearTimeout(raf)
+      }
+    }
+  }, [context?.open, context?.position])
+
+  if (!context?.open) return null
+
+  const contentStyle: React.CSSProperties = adjustedPos
+    ? { left: adjustedPos.x, top: adjustedPos.y }
+    : { left: context.position.x, top: context.position.y }
+
+  return (
+    <Portal>
+      <View
+        className="fixed inset-0 z-50 bg-transparent"
+        onClick={() => context.onOpenChange?.(false)}
+        // @ts-ignore
+        onContextMenu={(e) => {
+          e.preventDefault()
+          context.onOpenChange?.(false)
+        }}
+      />
+      <View
+        ref={ref}
+        id={contentId.current}
+        data-slot="context-menu-content"
+        data-state="open"
+        className={cn(
+          "fixed z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground ring-opacity-10 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",
+          className
+        )}
+        style={contentStyle}
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+      >
+        <ScrollView scrollY className="max-h-[50vh] overflow-x-hidden overflow-y-auto">
+          {children}
+        </ScrollView>
+      </View>
+    </Portal>
+  )
+})
+ContextMenuContent.displayName = "ContextMenuContent"
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    inset?: boolean
+    disabled?: boolean
+    closeOnSelect?: boolean
+  }
+>(({ className, inset, disabled, closeOnSelect = true, children, onClick, ...props }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+  return (
+    <View
+      ref={ref}
+      data-slot="context-menu-item"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-1.5 rounded-md px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-7",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(e) => {
+        if (disabled) return
+        e.stopPropagation()
+        onClick?.(e)
+        if (closeOnSelect) context?.onOpenChange?.(false)
+      }}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+ContextMenuItem.displayName = "ContextMenuItem"
+
+const ContextMenuRadioGroupContext = React.createContext<{
+  value?: string
+  onValueChange?: (value: string) => void
+} | null>(null)
+
+interface ContextMenuRadioGroupProps extends React.ComponentPropsWithoutRef<typeof View> {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+const ContextMenuRadioGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ContextMenuRadioGroupProps
+>(({ value: valueProp, defaultValue, onValueChange, ...props }, ref) => {
+  const [valueState, setValueState] = React.useState<string | undefined>(defaultValue)
+  const value = valueProp !== undefined ? valueProp : valueState
+
+  const handleValueChange = (next: string) => {
+    if (valueProp === undefined) {
+      setValueState(next)
+    }
+    onValueChange?.(next)
+  }
+
+  return (
+    <ContextMenuRadioGroupContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <View ref={ref} {...props} />
+    </ContextMenuRadioGroupContext.Provider>
+  )
+})
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup"
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    checked?: boolean
+    inset?: boolean
+    disabled?: boolean
+    closeOnSelect?: boolean
+  }
+>(({ className, children, checked, inset, disabled, closeOnSelect = false, onClick, ...props }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+  return (
+    <View
+      ref={ref}
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-7",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(e) => {
+        if (disabled) return
+        e.stopPropagation()
+        onClick?.(e)
+        if (closeOnSelect) context?.onOpenChange?.(false)
+      }}
+      {...props}
+    >
+      <View className="pointer-events-none absolute right-2 flex items-center justify-center">
+        {checked && <Check size={16} />}
+      </View>
+      {children}
+    </View>
+  )
+})
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem"
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value: string
+    checked?: boolean
+    inset?: boolean
+    disabled?: boolean
+    closeOnSelect?: boolean
+  }
+>(({ className, children, value, checked: checkedProp, inset, disabled, closeOnSelect = false, onClick, ...props }, ref) => {
+  const context = React.useContext(ContextMenuContext)
+  const group = React.useContext(ContextMenuRadioGroupContext)
+  const checked = checkedProp !== undefined ? checkedProp : group?.value === value
+  return (
+    <View
+      ref={ref}
+      data-slot="context-menu-radio-item"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-7",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(e) => {
+        if (disabled) return
+        e.stopPropagation()
+        group?.onValueChange?.(value)
+        onClick?.(e)
+        if (closeOnSelect) context?.onOpenChange?.(false)
+      }}
+      {...props}
+    >
+      <View className="pointer-events-none absolute right-2 flex items-center justify-center">
+        {checked && <Circle className="fill-current" size={8} />}
+      </View>
+      {children}
+    </View>
+  )
+})
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem"
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "px-2 py-1 text-xs font-medium text-muted-foreground",
+      inset && "pl-7",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = "ContextMenuLabel"
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = "ContextMenuSeparator"
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => {
+  return (
+    <View
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+const ContextMenuSubContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  triggerId: string
+} | null>(null)
+
+interface ContextMenuSubProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const ContextMenuSub = ({ open: openProp, defaultOpen, onOpenChange, children }: ContextMenuSubProps) => {
+  const parent = React.useContext(ContextMenuContext)
+  const baseIdRef = React.useRef(`context-menu-sub-${Math.random().toString(36).slice(2, 10)}`)
+  const [openState, setOpenState] = React.useState(defaultOpen || false)
+  const isActive = parent?.activeSubId === baseIdRef.current
+  const open = openProp !== undefined ? openProp : openState && isActive
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      if (openProp === undefined) {
+        setOpenState(nextOpen)
+        if (nextOpen) {
+          parent?.setActiveSubId(baseIdRef.current)
+        } else if (parent?.activeSubId === baseIdRef.current) {
+          parent?.setActiveSubId(null)
+        }
+      } else {
+        if (nextOpen) {
+          parent?.setActiveSubId(baseIdRef.current)
+        } else if (parent?.activeSubId === baseIdRef.current) {
+          parent?.setActiveSubId(null)
+        }
+      }
+      onOpenChange?.(nextOpen)
+    },
+    [onOpenChange, openProp, parent]
+  )
+
+  React.useEffect(() => {
+    if (defaultOpen) {
+      setOpenState(true)
+      parent?.setActiveSubId(baseIdRef.current)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (parent?.open === false && open) {
+      handleOpenChange(false)
+    }
+  }, [handleOpenChange, open, parent?.open])
+
+  return (
+    <ContextMenuSubContext.Provider value={{ open, onOpenChange: handleOpenChange, triggerId: baseIdRef.current }}>
+      {children}
+    </ContextMenuSubContext.Provider>
+  )
+}
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    inset?: boolean
+    disabled?: boolean
+  }
+>(({ className, inset, disabled, children, onClick, ...props }, ref) => {
+  const subContext = React.useContext(ContextMenuSubContext)
+  return (
+    <View
+      {...props}
+      ref={ref}
+      id={subContext?.triggerId}
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      data-state={subContext?.open ? "open" : "closed"}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-1.5 rounded-md px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "pl-7",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation()
+        if (disabled) return
+        subContext?.onOpenChange?.(!subContext.open)
+        onClick?.(e)
+      }}
+    >
+      {children}
+      <ChevronRight className="ml-auto opacity-50" size={16} />
+    </View>
+  )
+})
+
+interface ContextMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+  align?: "start" | "center" | "end"
+  side?: "top" | "bottom" | "left" | "right"
+  sideOffset?: number
+}
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ContextMenuSubContentProps
+>(({ className, align = "start", side = "right", sideOffset = 4, children, ...props }, ref) => {
+  const parent = React.useContext(ContextMenuContext)
+  const subContext = React.useContext(ContextMenuSubContext)
+  const contentId = React.useRef(`context-menu-sub-content-${Math.random().toString(36).slice(2, 10)}`)
+  const [position, setPosition] = React.useState<{ left: number; top: number } | null>(null)
+
+  React.useEffect(() => {
+    if (!parent?.open || !subContext?.open) {
+      setPosition(null)
+      return
+    }
+
+    let cancelled = false
+
+    const compute = async () => {
+      if (!subContext?.triggerId) return
+      const [triggerRect, contentRect] = await Promise.all([
+        getRectById(subContext.triggerId),
+        getRectById(contentId.current),
+      ])
+
+      if (cancelled) return
+      if (!triggerRect?.width || !contentRect?.width) return
+
+      setPosition(
+        computePosition({
+          triggerRect,
+          contentRect,
+          align,
+          side,
+          sideOffset,
+        })
+      )
+    }
+
+    const raf = (() => {
+      if (typeof requestAnimationFrame !== "undefined") {
+        return requestAnimationFrame(() => compute())
+      }
+      return setTimeout(() => compute(), 0) as unknown as number
+    })()
+
+    return () => {
+      cancelled = true
+      if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(raf)
+      } else {
+        clearTimeout(raf)
+      }
+    }
+  }, [align, parent?.open, side, sideOffset, subContext?.open, subContext?.triggerId])
+
+  if (!parent?.open || !subContext?.open) return null
+
+  const baseClassName =
+    "fixed z-50 min-w-[96px] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground ring-opacity-10 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"
+
+  const contentStyle = position
+    ? ({ left: position.left, top: position.top } as React.CSSProperties)
+    : ({
+        left: 0,
+        top: 0,
+        opacity: 0,
+        pointerEvents: "none",
+      } as React.CSSProperties)
+
+  return (
+    <Portal>
+      <View
+        {...props}
+        ref={ref}
+        id={contentId.current}
+        data-slot="context-menu-sub-content"
+        data-state="open"
+        data-side={side}
+        className={cn(baseClassName, className)}
+        style={contentStyle}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ScrollView scrollY className="max-h-[50vh] overflow-x-hidden overflow-y-auto">
+          {children}
+        </ScrollView>
+      </View>
+    </Portal>
+  )
+})
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}