import React, { useRef, useState } from "react"; import { useRouter } from "next/router"; import { ChevronRight, MoreHorizontal } from "lucide-react"; // components import { Tooltip } from "@plane/ui"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; // types import { IIssue, IIssueDisplayProperties } from "types"; type Props = { issue: IIssue; expanded: boolean; handleToggleExpand: (issueId: string) => void; properties: IIssueDisplayProperties; quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode; disableUserActions: boolean; nestingLevel: number; }; export const IssueColumn: React.FC = ({ issue, expanded, handleToggleExpand, properties, quickActions, disableUserActions, nestingLevel, }) => { // router const router = useRouter(); // states const [isMenuActive, setIsMenuActive] = useState(false); const menuActionRef = useRef(null); const handleIssuePeekOverview = (issue: IIssue) => { const { query } = router; router.push({ pathname: router.pathname, query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project }, }); }; const paddingLeft = `${nestingLevel * 54}px`; useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); const customActionButton = (
setIsMenuActive(!isMenuActive)} >
); return ( <>
{properties.key && (
{issue.project_detail?.identifier}-{issue.sequence_id} {!disableUserActions && ( )}
{issue.sub_issues_count > 0 && (
)}
)}
handleIssuePeekOverview(issue)} > {issue.name}
); };