forked from github/plane
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
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { FC, MutableRefObject } from "react";
|
|
// components
|
|
import { IssueBlock } from "components/issues";
|
|
// types
|
|
import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
|
|
import { EIssueActions } from "../types";
|
|
import RenderIfVisible from "components/core/render-if-visible-HOC";
|
|
|
|
interface Props {
|
|
issueIds: TGroupedIssues | TUnGroupedIssues | any;
|
|
issuesMap: TIssueMap;
|
|
canEditProperties: (projectId: string | undefined) => boolean;
|
|
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
|
|
quickActions: (issue: TIssue) => React.ReactNode;
|
|
displayProperties: IIssueDisplayProperties | undefined;
|
|
containerRef: MutableRefObject<HTMLDivElement | null>;
|
|
}
|
|
|
|
export const IssueBlocksList: FC<Props> = (props) => {
|
|
const { issueIds, issuesMap, handleIssues, quickActions, displayProperties, canEditProperties, containerRef } = props;
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
{issueIds && issueIds.length > 0 ? (
|
|
issueIds.map((issueId: string) => {
|
|
if (!issueId) return null;
|
|
return (
|
|
<RenderIfVisible
|
|
key={`${issueId}`}
|
|
defaultHeight="3rem"
|
|
root={containerRef}
|
|
classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
|
|
changingReference={issueIds}
|
|
>
|
|
<IssueBlock
|
|
issueId={issueId}
|
|
issuesMap={issuesMap}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
canEditProperties={canEditProperties}
|
|
displayProperties={displayProperties}
|
|
/>
|
|
</RenderIfVisible>
|
|
);
|
|
})
|
|
) : (
|
|
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|