mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
e2affc3fa6
* Virtualization like core changes with intersection observer * Virtualization like changes for spreadsheet * Virtualization like changes for list * Virtualization like changes for kanban * add logic to render all the issues at once * revert back the changes for list to follow the old pattern of grouping * fix column shadow in spreadsheet for rendering rows * fix constant draggable height while dragging and rendering blocks in kanban * fix height glitch while rendered rows adjust to default height * remove loading animation for issue layouts * reduce requestIdleCallback timer to 300ms * remove logic for index tarcking to force render as the same effect seems to be achieved by removing requestIdleCallback * Fix Kanban droppable height * fix spreadsheet sub issue loading * force change in reference to re render the render if visible component when the order of list changes * add comments and minor changes
93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
// components
|
|
import { Spinner } from "@plane/ui";
|
|
import { SpreadsheetQuickAddIssueForm } from "components/issues";
|
|
import { SpreadsheetTable } from "./spreadsheet-table";
|
|
// types
|
|
import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
|
|
import { EIssueActions } from "../types";
|
|
//hooks
|
|
import { useProject } from "hooks/store";
|
|
|
|
type Props = {
|
|
displayProperties: IIssueDisplayProperties;
|
|
displayFilters: IIssueDisplayFilterOptions;
|
|
handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
|
|
issueIds: string[] | undefined;
|
|
quickActions: (
|
|
issue: TIssue,
|
|
customActionButton?: React.ReactElement,
|
|
portalElement?: HTMLDivElement | null
|
|
) => React.ReactNode;
|
|
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
|
|
openIssuesListModal?: (() => void) | null;
|
|
quickAddCallback?: (
|
|
workspaceSlug: string,
|
|
projectId: string,
|
|
data: TIssue,
|
|
viewId?: string
|
|
) => Promise<TIssue | undefined>;
|
|
viewId?: string;
|
|
canEditProperties: (projectId: string | undefined) => boolean;
|
|
enableQuickCreateIssue?: boolean;
|
|
disableIssueCreation?: boolean;
|
|
};
|
|
|
|
export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
|
const {
|
|
displayProperties,
|
|
displayFilters,
|
|
handleDisplayFilterUpdate,
|
|
issueIds,
|
|
quickActions,
|
|
handleIssues,
|
|
quickAddCallback,
|
|
viewId,
|
|
canEditProperties,
|
|
enableQuickCreateIssue,
|
|
disableIssueCreation,
|
|
} = props;
|
|
// refs
|
|
const containerRef = useRef<HTMLTableElement | null>(null);
|
|
const portalRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
const { currentProjectDetails } = useProject();
|
|
|
|
const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
|
|
|
|
if (!issueIds || issueIds.length === 0)
|
|
return (
|
|
<div className="grid h-full w-full place-items-center">
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
|
|
<div ref={portalRef} className="spreadsheet-menu-portal" />
|
|
<div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
|
|
<SpreadsheetTable
|
|
displayProperties={displayProperties}
|
|
displayFilters={displayFilters}
|
|
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
|
issueIds={issueIds}
|
|
isEstimateEnabled={isEstimateEnabled}
|
|
portalElement={portalRef}
|
|
quickActions={quickActions}
|
|
handleIssues={handleIssues}
|
|
canEditProperties={canEditProperties}
|
|
containerRef={containerRef}
|
|
/>
|
|
</div>
|
|
<div className="border-t border-custom-border-100">
|
|
<div className="z-5 sticky bottom-0 left-0 mb-3">
|
|
{enableQuickCreateIssue && !disableIssueCreation && (
|
|
<SpreadsheetQuickAddIssueForm formKey="name" quickAddCallback={quickAddCallback} viewId={viewId} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|