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
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { MutableRefObject, memo } from "react";
|
|
//types
|
|
import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
|
|
import { EIssueActions } from "../types";
|
|
// components
|
|
import { KanbanIssueBlock } from "components/issues";
|
|
|
|
interface IssueBlocksListProps {
|
|
sub_group_id: string;
|
|
columnId: string;
|
|
issuesMap: IIssueMap;
|
|
peekIssueId?: string;
|
|
issueIds: string[];
|
|
displayProperties: IIssueDisplayProperties | undefined;
|
|
isDragDisabled: boolean;
|
|
handleIssues: (issue: TIssue, action: EIssueActions) => void;
|
|
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
|
canEditProperties: (projectId: string | undefined) => boolean;
|
|
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
|
isDragStarted?: boolean;
|
|
}
|
|
|
|
const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
|
|
const {
|
|
sub_group_id,
|
|
columnId,
|
|
issuesMap,
|
|
peekIssueId,
|
|
issueIds,
|
|
displayProperties,
|
|
isDragDisabled,
|
|
handleIssues,
|
|
quickActions,
|
|
canEditProperties,
|
|
scrollableContainerRef,
|
|
isDragStarted,
|
|
} = props;
|
|
|
|
return (
|
|
<>
|
|
{issueIds && issueIds.length > 0 ? (
|
|
<>
|
|
{issueIds.map((issueId, index) => {
|
|
if (!issueId) return null;
|
|
|
|
let draggableId = issueId;
|
|
if (columnId) draggableId = `${draggableId}__${columnId}`;
|
|
if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;
|
|
|
|
return (
|
|
<KanbanIssueBlock
|
|
key={draggableId}
|
|
peekIssueId={peekIssueId}
|
|
issueId={issueId}
|
|
issuesMap={issuesMap}
|
|
displayProperties={displayProperties}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
draggableId={draggableId}
|
|
index={index}
|
|
isDragDisabled={isDragDisabled}
|
|
canEditProperties={canEditProperties}
|
|
scrollableContainerRef={scrollableContainerRef}
|
|
isDragStarted={isDragStarted}
|
|
issueIds={issueIds} //passing to force render for virtualization whenever parent rerenders
|
|
/>
|
|
);
|
|
})}
|
|
</>
|
|
) : null}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const KanbanIssueBlocksList = memo(KanbanIssueBlocksListMemo);
|