ContextMenu - OLUN. Design System

controlled: open과 onOpenChange로 열림 상태를 호출부가 제어합니다.
position: clientX/clientY 기반 viewport 좌표입니다. null이면 아무것도 렌더링하지 않습니다.
composition: Radix context-menu package 대신 OLUN DropdownMenu를 좌표 anchor와 합성합니다.
touch: 모바일 long-press 제스처는 포함하지 않습니다.

controlled open, position

고정 좌표 anchor

코드 보기tsx

import { useState } from "react";
import { ContextMenu, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@olundot/ui";

export function ForcedOpenContextMenu() {
  const [open, setOpen] = useState(true);

  return (
    <ContextMenu open={open} onOpenChange={setOpen} position={{ x: 360, y: 240 }}>
      <DropdownMenuLabel>문항 작업</DropdownMenuLabel>
      <DropdownMenuItem>미리보기</DropdownMenuItem>
      <DropdownMenuItem>복제</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant="destructive">삭제</DropdownMenuItem>
    </ContextMenu>
  );
}

clientX/clientY, preventDefault는 호출부

심혈관 기본 문항검토 중

호흡곤란 감별 문항게시됨

복통 병력 청취초안

코드 보기tsx

import { useState } from "react";
import { ContextMenu, DropdownMenuItem, DropdownMenuSeparator, type ContextMenuPosition } from "@olundot/ui";

export function RowContextMenu() {
  const [open, setOpen] = useState(false);
  const [position, setPosition] = useState<ContextMenuPosition | null>(null);

  return (
    <div
      onContextMenu={(event) => {
        event.preventDefault();
        setPosition({ x: event.clientX, y: event.clientY });
        setOpen(true);
      }}
    >
      행 영역
      <ContextMenu open={open} onOpenChange={setOpen} position={position}>
        <DropdownMenuItem>문항 열기</DropdownMenuItem>
        <DropdownMenuItem>선택에 추가</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">보관</DropdownMenuItem>
      </ContextMenu>
    </div>
  );
}

고정 좌표

우클릭 행 메뉴