import { useState, useRef } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Draggable } from "@hello-pangea/dnd"; import { MoreHorizontal } from "lucide-react"; // components import { Tooltip } from "@plane/ui"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; // types import { IIssue } from "types"; import { IIssueResponse } from "store/issues/types"; type Props = { issues: IIssueResponse | undefined; issueIdList: string[] | null; quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode; }; export const CalendarIssueBlocks: React.FC = observer((props) => { const { issues, issueIdList, quickActions } = props; // 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 }, }); }; useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); const customActionButton = (
setIsMenuActive(!isMenuActive)} >
); return ( <> {issueIdList?.map((issueId, index) => { if (!issues?.[issueId]) return null; const issue = issues?.[issueId]; return ( {(provided, snapshot) => (
handleIssuePeekOverview(issue)} > {issue?.tempId !== undefined && (
)}
{issue.project_detail.identifier}-{issue.sequence_id}
{issue.name}
)} ); })} ); });