import { memo } from "react"; import { Draggable } from "@hello-pangea/dnd"; import isEqual from "lodash/isEqual"; // components import { KanBanProperties } from "./properties"; // ui import { Tooltip } from "@plane/ui"; // types import { IIssueDisplayProperties, IIssue } from "types"; import { EIssueActions } from "../types"; import { useRouter } from "next/router"; interface IssueBlockProps { sub_group_id: string; columnId: string; index: number; issue: IIssue; isDragDisabled: boolean; showEmptyGroup: boolean; handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void; quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode; displayProperties: IIssueDisplayProperties | null; isReadOnly: boolean; } interface IssueDetailsBlockProps { sub_group_id: string; columnId: string; issue: IIssue; showEmptyGroup: boolean; handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void; quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode; displayProperties: IIssueDisplayProperties | null; isReadOnly: boolean; } const KanbanIssueDetailsBlock: React.FC = (props) => { const { sub_group_id, columnId, issue, showEmptyGroup, handleIssues, quickActions, displayProperties, isReadOnly } = props; const router = useRouter(); const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => { if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, EIssueActions.UPDATE); }; const handleIssuePeekOverview = () => { const { query } = router; router.push({ pathname: router.pathname, query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project }, }); }; return ( <> {displayProperties && displayProperties?.key && (
{issue.project_detail.identifier}-{issue.sequence_id}
{quickActions( !sub_group_id && sub_group_id === "null" ? null : sub_group_id, !columnId && columnId === "null" ? null : columnId, issue )}
)}
{issue.name}
); }; const validateMemo = (prevProps: IssueDetailsBlockProps, nextProps: IssueDetailsBlockProps) => { if (prevProps.issue !== nextProps.issue) return false; if (!isEqual(prevProps.displayProperties, nextProps.displayProperties)) { return false; } return true; }; const KanbanIssueMemoBlock = memo(KanbanIssueDetailsBlock, validateMemo); export const KanbanIssueBlock: React.FC = (props) => { const { sub_group_id, columnId, index, issue, isDragDisabled, showEmptyGroup, handleIssues, quickActions, displayProperties, isReadOnly, } = props; let draggableId = issue.id; if (columnId) draggableId = `${draggableId}__${columnId}`; if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`; return ( <> {(provided, snapshot) => (
{issue.tempId !== undefined && (
)}
)} ); };