import { useState, useRef } from "react"; import { observer } from "mobx-react-lite"; import { Draggable } from "@hello-pangea/dnd"; import { MoreHorizontal } from "lucide-react"; // components import { Tooltip, ControlLink } from "@plane/ui"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; // helpers import { cn } from "helpers/common.helper"; // types import { TIssue, TIssueMap } from "@plane/types"; import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store"; type Props = { issues: TIssueMap | undefined; issueIdList: string[] | null; quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; showAllIssues?: boolean; isDragDisabled?: boolean; }; export const CalendarIssueBlocks: React.FC = observer((props) => { const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props; // hooks const { router: { workspaceSlug, projectId }, } = useApplication(); const { getProjectById } = useProject(); const { getProjectStates } = useProjectState(); const { peekIssue, setPeekIssue } = useIssueDetail(); // states const [isMenuActive, setIsMenuActive] = useState(false); const menuActionRef = useRef(null); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); const customActionButton = (
setIsMenuActive(!isMenuActive)} >
); return ( <> {issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => { if (!issues?.[issueId]) return null; const issue = issues?.[issueId]; const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || ""; return ( {(provided, snapshot) => (
handleIssuePeekOverview(issue)} className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" disabled={!!issue?.tempId} > <> {issue?.tempId !== undefined && (
)}
{getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
{issue.name}
{ e.preventDefault(); e.stopPropagation(); }} > {quickActions(issue, customActionButton)}
)} ); })} ); });