import { useRef, useState } from "react"; import { LucideIcon, X } from "lucide-react"; import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd"; //ui import { CustomMenu } from "@plane/ui"; //types import { IIssueLabel } from "types"; //hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; //components import { DragHandle } from "./drag-handle"; import { LabelName } from "./label-name"; //types export interface ICustomMenuItem { CustomIcon: LucideIcon; onClick: (label: IIssueLabel) => void; isVisible: boolean; text: string; } interface ILabelItemBlock { label: IIssueLabel; isDragging: boolean; customMenuItems: ICustomMenuItem[]; dragHandleProps: DraggableProvidedDragHandleProps; handleLabelDelete: (label: IIssueLabel) => void; isLabelGroup?: boolean; } export const LabelItemBlock = (props: ILabelItemBlock) => { const { label, isDragging, customMenuItems, dragHandleProps, handleLabelDelete, isLabelGroup } = props; //state const [isMenuActive, setIsMenuActive] = useState(false); //refs const actionSectionRef = useRef(null); useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); return (
{customMenuItems.map( ({ isVisible, onClick, CustomIcon, text }) => isVisible && ( onClick(label)}> {text} ) )} {!isLabelGroup && (
)}
); };