import { Dispatch, MutableRefObject, SetStateAction, useRef, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // icons import { ChevronRight, MoreHorizontal } from "lucide-react"; // constants import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet"; // components import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; import RenderIfVisible from "components/core/render-if-visible-HOC"; import { IssueColumn } from "./issue-column"; // ui import { ControlLink, Tooltip } from "@plane/ui"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; import { useIssueDetail, useProject } from "hooks/store"; // helper import { cn } from "helpers/common.helper"; // types import { IIssueDisplayProperties, TIssue } from "@plane/types"; import { EIssueActions } from "../types"; interface Props { displayProperties: IIssueDisplayProperties; isEstimateEnabled: boolean; quickActions: ( issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null ) => React.ReactNode; canEditProperties: (projectId: string | undefined) => boolean; handleIssues: (issue: TIssue, action: EIssueActions) => Promise; portalElement: React.MutableRefObject; nestingLevel: number; issueId: string; isScrolled: MutableRefObject; containerRef: MutableRefObject; issueIds: string[]; } export const SpreadsheetIssueRow = observer((props: Props) => { const { displayProperties, issueId, isEstimateEnabled, nestingLevel, portalElement, handleIssues, quickActions, canEditProperties, isScrolled, containerRef, issueIds, } = props; const [isExpanded, setExpanded] = useState(false); const { subIssues: subIssuesStore } = useIssueDetail(); const subIssues = subIssuesStore.subIssuesByIssueId(issueId); return ( <> {/* first column/ issue name and key column */} } changingReference={issueIds} > {isExpanded && subIssues && subIssues.length > 0 && subIssues.map((subIssueId: string) => ( ))} ); }); interface IssueRowDetailsProps { displayProperties: IIssueDisplayProperties; isEstimateEnabled: boolean; quickActions: ( issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null ) => React.ReactNode; canEditProperties: (projectId: string | undefined) => boolean; handleIssues: (issue: TIssue, action: EIssueActions) => Promise; portalElement: React.MutableRefObject; nestingLevel: number; issueId: string; isScrolled: MutableRefObject; isExpanded: boolean; setExpanded: Dispatch>; } const IssueRowDetails = observer((props: IssueRowDetailsProps) => { const { displayProperties, issueId, isEstimateEnabled, nestingLevel, portalElement, handleIssues, quickActions, canEditProperties, isScrolled, isExpanded, setExpanded, } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; //hooks const { getProjectById } = useProject(); const { peekIssue, setPeekIssue } = useIssueDetail(); // states const [isMenuActive, setIsMenuActive] = useState(false); const menuActionRef = useRef(null); const handleIssuePeekOverview = (issue: TIssue) => { if (workspaceSlug && issue && issue.project_id && issue.id) setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); }; const { subIssues: subIssuesStore, issue } = useIssueDetail(); const issueDetail = issue.getIssueById(issueId); const paddingLeft = `${nestingLevel * 54}px`; useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); const handleToggleExpand = () => { setExpanded((prevState) => { if (!prevState && workspaceSlug && issueDetail) subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issueDetail.project_id, issueDetail.id); return !prevState; }); }; const customActionButton = (
setIsMenuActive(!isMenuActive)} >
); if (!issueDetail) return null; const disableUserActions = !canEditProperties(issueDetail.project_id); return ( <>
{getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id} {canEditProperties(issueDetail.project_id) && ( )}
{issueDetail.sub_issues_count > 0 && (
)}
handleIssuePeekOverview(issueDetail)} className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" >
{issueDetail.name}
{/* Rest of the columns */} {SPREADSHEET_PROPERTY_LIST.map((property) => ( ))} ); });