import React, { useEffect, useRef, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // components import { IssuePeekOverview, SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetQuickAddIssueForm, } from "components/issues"; import { Spinner } from "@plane/ui"; // types import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types"; import { EIssueActions } from "../types"; type Props = { displayProperties: IIssueDisplayProperties; displayFilters: IIssueDisplayFilterOptions; handleDisplayFilterUpdate: (data: Partial) => void; issues: IIssue[] | undefined; members?: IUserLite[] | undefined; labels?: IIssueLabel[] | undefined; states?: IState[] | undefined; quickActions: (issue: IIssue) => React.ReactNode; handleIssues: (issue: IIssue, action: EIssueActions) => void; openIssuesListModal?: (() => void) | null; quickAddCallback?: ( workspaceSlug: string, projectId: string, data: IIssue, viewId?: string ) => Promise; viewId?: string; disableUserActions: boolean; enableQuickCreateIssue?: boolean; }; export const SpreadsheetView: React.FC = observer((props) => { const { displayProperties, displayFilters, handleDisplayFilterUpdate, issues, members, labels, states, quickActions, handleIssues, quickAddCallback, viewId, disableUserActions, enableQuickCreateIssue, } = props; // states const [expandedIssues, setExpandedIssues] = useState([]); const [isScrolled, setIsScrolled] = useState(false); // refs const containerRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, peekIssueId, peekProjectId } = router.query; const handleScroll = () => { if (!containerRef.current) return; const scrollLeft = containerRef.current.scrollLeft; setIsScrolled(scrollLeft > 0); }; useEffect(() => { const currentContainerRef = containerRef.current; if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll); return () => { if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll); }; }, []); return (
{issues && issues.length > 0 ? ( <>
{displayProperties.key && ( ID )} Issue
{issues.map((issue, index) => issue ? ( ) : null )}
handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)} issues={issues} members={members} labels={labels} states={states} /> ) : (
)}
{enableQuickCreateIssue && ( )}
{/* {!disableUserActions && !isInlineCreateIssueFormOpen && (type === "issue" ? ( ) : ( New Issue } optionsClassName="left-5 !w-36" noBorder > setIsInlineCreateIssueFormOpen(true)}> Create new {openIssuesListModal && ( Add an existing issue )} ))} */}
{workspaceSlug && peekIssueId && peekProjectId && ( handleIssues(issueToUpdate, EIssueActions.UPDATE)} /> )}
); });