import { memo } from "react"; import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd"; import { observer } from "mobx-react-lite"; // hooks import { useApplication, useIssueDetail, useProject } from "hooks/store"; // components import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; import { IssueProperties } from "../properties/all-properties"; // ui import { Tooltip, ControlLink } from "@plane/ui"; // types import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types"; import { EIssueActions } from "../types"; // helper import { cn } from "helpers/common.helper"; interface IssueBlockProps { peekIssueId?: string; issueId: string; issuesMap: IIssueMap; displayProperties: IIssueDisplayProperties | undefined; isDragDisabled: boolean; draggableId: string; index: number; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue) => React.ReactNode; canEditProperties: (projectId: string | undefined) => boolean; } interface IssueDetailsBlockProps { issue: TIssue; displayProperties: IIssueDisplayProperties | undefined; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue) => React.ReactNode; isReadOnly: boolean; } const KanbanIssueDetailsBlock: React.FC = observer((props: IssueDetailsBlockProps) => { const { issue, handleIssues, quickActions, isReadOnly, displayProperties } = props; // hooks const { getProjectById } = useProject(); const { router: { workspaceSlug, projectId }, } = useApplication(); const { setPeekIssue } = useIssueDetail(); const updateIssue = (issueToUpdate: TIssue) => { if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE); }; const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); return ( <>
{getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
{quickActions(issue)}
handleIssuePeekOverview(issue)} className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" > {issue.name} ); }); export const KanbanIssueBlock: React.FC = memo((props) => { const { peekIssueId, issueId, issuesMap, displayProperties, isDragDisabled, draggableId, index, handleIssues, quickActions, canEditProperties, } = props; const issue = issuesMap[issueId]; if (!issue) return null; const canEditIssueProperties = canEditProperties(issue.project_id); return ( {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
{issue.tempId !== undefined && (
)}
)} ); }); KanbanIssueBlock.displayName = "KanbanIssueBlock";